Web前端开发技术讲稿
上传者：贾忠湖|上传时间：2015-04-25|密次下载
Web前端开发技术讲稿
web前端开发技术
第1章 Web前端开发技术综述
参考PPT讲课 例1-6-1 综合实例
第2章 HTML基础
1、什么是HTML？
HTML（Hypertext Markup Language，超文本标记语言），用于编写网页。用HTML编写的超文本文档称为HTML文档，它是由很多标记组成的一种文本文件，用来告诉浏览器应该如何显示文字、图形、动画、声音、表格、链接等。
（打开一个网页，如：http://wendang.chazidian.com，鼠标右键单击，从快捷菜单中选择“查看源”命令，可以打开这个网页的HTML代码）
2、HTML文档结构
<html> <head> <title>假期结束了
</title> </head>
<body> 开学了，第一天上课可真累呀，假期里我可是天天睡到中午的！ </body> </html>
（在桌面上新建一个文本文件，复制以上代码，并另存为HTML文件。然后双击打开该网页文件）
HTML的文件结构相当简单，其主体结构如下：
<html>
<head> </head> <body> </body>
</html>
HTML文档由头部head和主体body两个部分组成。头部用于记录与网页相关的重要信息，如标题、关键字、样式等，头部信息不显示在网页上。主体部分则是在网页中显示的具体内容。
3、头部head
HTML头部head标记主要包含页面标题标记、元信息标记、样式标记等。 （1）标题title标记
标题显示在浏览器的标题栏上 <title>页面标题</title>
web前端开发技术
（2）元信息meta标记
mta标记定义了与文档相关的“名称/值”对。
meta标签分两大部分：页面描述信息(name) 和HTTP标题信息(http-equiv)。name是描述网页的，以便于搜索引擎机器人查找、分类。http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容
语法：
<meta name=”” content=”” > <meta http-equiv=”” content=””> 如：
<meta name=”keywords” content=” china,enterprise,business,net” /> <!--为搜索引擎提供关键字列表-->
<meta name=”author” content=”Tony,Tony@http://wendang.chazidian.com” />
<!--标注网页的作者或制作组，可以是名字，或Email。-->
<meta name=”copyright” Content=”本页版权归网易学院所有。All Rights Reserved” /> <!--标注版权-->
<meta name=”generator” Content=”editplus” /> <!--标注网页编辑器-->
<meta name=”description” Content=”你网页的简述” /> <!--告诉搜索引擎你的网站主要内容。-->
<meta name=”robots” Content=”all|none|index|noindex|follow|nofollow” /> <!--用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。-->
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 noindex, nofollow 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录) nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
<meta http-equiv=”content-type” content=”text/html; charsetl=GB2312” />
<!--设定页面使用的字符集，浏览器会根据此来调用相应的字符集显示page内容。--> <meta http-equiv=”refresh” content=” 30” />
<meta http-equiv=”refresh” content=” 30; url=http://wendang.chazidian.com” />
<!—设定网页的刷新时间，或在多长时间后让网页自动链接到其它网页。--> <meta http-equiv=”expires” content=”0” />
<meta http-equiv=”expires” content=”Wed, 26 Feb 1997 08:21:57 GMT” />
<!--指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。-->
（3）样式style标记
样式是HTML4.01引入的，它是一种新的、首选的改变HTML元素样式的方式。可以在头部通过style标记定义，也可以使用style属性直接将样式添加到HTML标记中，或者间接地在独立的样式表（CSS文件）中进行定义。将在以后学习。 <style type="text/css">
web前端开发技术
P{font-size:24px;color:#FFFFFF;} </style>
4、主体body
（1）基本语法
<body>… …</body>
标记中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等元素。 例2-3-1
（2）body标记属性
内容需要下载文档才能查看5、HTML语法
（1）标记语法
HTML用于描述功能的符号称为“标记”。 单标记
<标记名称> 或 <标记名称 />（建议使用） 最常用的单标记有<br>（换行）、<hr>（水平分隔线）。 双标记
<标记名称> ……</标记名称>
标记嵌套
标记可以包含标记，即标记可以成对嵌套，但是不能交叉地嵌套。 <b><i>这是错误的交叉嵌套代码</b></i> （2）属性语法
HTML通过标记告诉浏览器如何展示网页，另外还可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。
<标记名称 属性名1="属性值1" 属性名2="属性值2" …属性名n="属性值n"> 属性值可以直接书写，也可以使用""括起来（建议使用）。 如：<hr size=“5px” align=“center”>
web前端开发技术
例2-4-1 标记语法和属性语法应用
6、注释
注释会被浏览器忽略。适当的注释对以后代码的阅读和维护产生很大的帮助。 <!-- 注释信息 -->
<comment>注释信息</comment>
7、HTML代码编写规范
（1）<标记名> </标记名>；<标记/>； （2）嵌套不交叉；
（3）不区分大小写，但建议在同一个项目保持一种风格； （4）空格和换行不起作用，使用<br/>和 来插入；
（5）属性值建议用双引号标注起来，也可以不用双引号；
（6）书写开始与结束标记时，在左尖括号与标记名或与斜杠/之间不能留空格；
（7）建议不同的标记都单独占一行；
（8）代码采用缩进风格，不同层次的代码要有缩进，同一层次代码缩进一致，使代码结构清晰，便于理解和分析页面的结构，便于后期阅读和维护。
8、HTML文件命名规划
（1）文件的扩展名为.htm或.html结束，建议统一使用html作为文件名的后缀； （2）文件名中只可由英文字母、数字或下划线组成； （3）文件名中不要包含特殊符号，比如空格、$等； （4）文件名区分大小写；
（5）首页文件名一般是index.html或default.html
9、HTML文档类型
<!DOCTYPE element-name DTD-type DTD-name DTD-url>
声明DTD（Document Type Definition文档类型定义）： element-name指定该DTD的根元素名称；
DTD-type指定该DTD是属于标准公用的还是私人制定的。设置为PUBLIC则表示该DTD是标准公用的，设置为SYSTEM则表示私人制定的。 DTD-name指定该DTD的文件名称。 DTD-url指定该DTD文件所在的URL地址。
HTML 4.01 规定了三种DTD类型：严格Strict、过渡Transitional以及框架Frameset。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://wendang.chazidian.com/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://wendang.chazidian.com/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN " "http://wendang.chazidian.com/TR/html4/frameset.dtd">
例2-8-1 综合实例
第3章 格式化文字与段落
web前端开发技术
内容需要下载文档才能查看 内容需要下载文档才能查看1、在body中添加文字信息
（1）添加文章标题文字
标题标记：h1~h6共6级标题，h1字最大，h6最小。浏览器会自动地在标题的前后添加空行。
语法：
<h# align=””>标题文字</h#>
“#”代表数字1~6；align属性定义标题的对齐方式，分别为left、center、right和justify。 edu_3_1_2 标题字应用 （2）添加空格与特殊符号
网页中，空格键和换行键都是不起作用的，需要通过代码来控制。添加空格使用“ ”，2、文本物理样式标记和逻辑样式标记
HTML为单独的词或者句子定义了两种样式：物理样式(Physical Style)和逻辑样式(Logical Styles)。物理样式说明标记之间的文句的特定外貌，而逻辑样式则按文本的意思显示文句的外貌。
（1）物理样式标记
下载文档
热门试卷
- 2016年四川省内江市中考化学试卷
- 广西钦州市高新区2017届高三11月月考政治试卷
- 浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
- 浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
- 辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
- 广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
- 广西钦州市钦州港区2017届高三11月月考政治试卷
- 广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
- 广西钦州市高新区2016-2017学年高二11月月考政治试卷
- 广西钦州市高新区2016-2017学年高一11月月考政治试卷
- 山东省滨州市三校2017届第一学期阶段测试初三英语试题
- 四川省成都七中2017届高三一诊模拟考试文科综合试卷
- 2017届普通高等学校招生全国统一考试模拟试题（附答案）
- 重庆市永川中学高2017级上期12月月考语文试题
- 江西宜春三中2017届高三第一学期第二次月考文科综合试题
- 内蒙古赤峰二中2017届高三上学期第三次月考英语试题
- 2017年六年级（上）数学期末考试卷
- 2017人教版小学英语三年级上期末笔试题
- 江苏省常州西藏民族中学2016-2017学年九年级思想品德第一学期第二次阶段测试试卷
- 重庆市九龙坡区七校2016－2017学年上期八年级素质测查（二）语文学科试题卷
- 江苏省无锡市钱桥中学2016年12月八年级语文阶段性测试卷
- 江苏省无锡市钱桥中学2016-2017学年七年级英语12月阶段检测试卷
- 山东省邹城市第八中学2016-2017学年八年级12月物理第4章试题（无答案）
- 【人教版】河北省2015-2016学年度九年级上期末语文试题卷（附答案）
- 四川省简阳市阳安中学2016年12月高二月考英语试卷
- 四川省成都龙泉中学高三上学期2016年12月月考试题文科综合能力测试
- 安徽省滁州中学2016—2017学年度第一学期12月月考高三英语试卷
- 山东省武城县第二中学2016.12高一年级上学期第二次月考历史试题（必修一第四、五单元）
- 福建省四地六校联考2016-2017学年上学期第三次月考高三化学试卷
- 甘肃省武威第二十三中学2016—2017学年度八年级第一学期12月月考生物试卷
网友关注
- 2008年报关员全程进修笔记(第八章)[教学]
- [优质文档]2010年报关员资格全国统一测验纲目28430
- 进出口货物基本通关习题及答案
- 2011年报关员考试试卷 (金星教育)
- [精华]2008年报关员资格全国统一测验猜测试题
- 2006年报关员资格考试真题试题及答案解析(单选题)
- 2008年报关员资格全国统一测验演习题05760[教学]
- 2013年保安资格模拟考试题库
- 报关员资格测验温习建议[优质文档]
- 商务沟通技巧+试题考试答案
- 2010年报关员资格测验纲目[精华]
- 2008年报关员资格全国统一测验猜测试题[精品]
- 2009年报关员考试综合实务强化练习
- 中国科学院因公出国（境）管理办法
- 注册安全工程师辅导资料题
- 2009年报关员资格考试全真模拟题99346
- 2006年报关员资格全国统一模拟考试试卷二
- 2012报关员考试内容
- [整理版]2010年报关员资格全国统一测验纲目28477
- [宝典]2010年报关员资格全国统一测验纲目28494
- 2011年报关员考试基础强化练习题及答案(7)
- 2011年报关员考试真题试卷及答案一
- 2011年报关员资格考试第4类商品归类
- 报关员考试复习资料
- [教学]2011年报关员基础阶段温习第一章第一节习题
- 2014年报关员考试复习指南考试大纲及考前预测模拟试题
- 2009年报关员资格全国统一考试模拟试卷
- 2012年报关员资格考试特点及其学习方法(7月版)
- 如何复习准备报关员考试
- [整理版]2009年报关员资格测验模拟试题05838
网友关注视频
- 冀教版小学数学二年级下册第二单元《有余数除法的整理与复习》
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案，安徽省
- 沪教版牛津小学英语（深圳用） 五年级下册 Unit 12
- 第12章 圆锥曲线_12.7 抛物线的标准方程_第一课时(特等奖)(沪教版高二下册)_T274713
- 冀教版小学数学二年级下册第二单元《余数和除数的关系》
- 第8课 对称剪纸_第一课时(二等奖)(沪书画版二年级上册)_T3784187
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，广东省
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，辽宁省
- 外研版英语三起6年级下册（14版）Module3 Unit1
- 化学九年级下册全册同步 人教版 第25集 生活中常见的盐（二）
- 人教版历史八年级下册第一课《中华人民共和国成立》
- 北师大版八年级物理下册 第六章 常见的光学仪器（二）探究凸透镜成像的规律
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，安徽省
- 北师大版数学 四年级下册 第三单元 第二节 小数点搬家
- 沪教版牛津小学英语（深圳用） 四年级下册 Unit 4
- 30.3 由不共线三点的坐标确定二次函数_第一课时(市一等奖)(冀教版九年级下册)_T144342
- 沪教版牛津小学英语（深圳用） 四年级下册 Unit 12
- 冀教版小学数学二年级下册第二单元《有余数除法的简单应用》
- 青岛版教材五年级下册第四单元（走进军营——方向与位置）用数对确定位置（一等奖）
- 六年级英语下册上海牛津版教材讲解 U1单词
- 冀教版英语三年级下册第二课
- 《空中课堂》二年级下册 数学第一单元第1课时
- 苏教版二年级下册数学《认识东、南、西、北》
- 3月2日小学二年级数学下册（数一数）
- 七年级英语下册 上海牛津版 Unit9
- 沪教版八年级下册数学练习册一次函数复习题B组（P11）
- 19 爱护鸟类_第一课时(二等奖)(桂美版二年级下册)_T502436
- 苏科版数学八年级下册9.2《中心对称和中心对称图形》
- 外研版英语七年级下册module3 unit2第一课时
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，天津市
精品推荐
- 2016-2017学年高一语文人教版必修一+模块学业水平检测试题（含答案）
- 广西钦州市高新区2017届高三11月月考政治试卷
- 浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
- 浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
- 辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
- 广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
- 广西钦州市钦州港区2017届高三11月月考政治试卷
- 广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
- 广西钦州市高新区2016-2017学年高二11月月考政治试卷
- 广西钦州市高新区2016-2017学年高一11月月考政治试卷
分类导航
- 互联网
- 电脑基础知识
- 计算机软件及应用
- 计算机硬件及网络
- 计算机应用/办公自动化
- .NET
- 数据结构与算法
- Java
- SEO
- C/C++资料
- linux/Unix相关
- 手机开发
- UML理论/建模
- 并行计算/云计算
- 嵌入式开发
- windows相关
- 软件工程
- 管理信息系统
- 开发文档
- 图形图像
- 网络与通信
- 网络信息安全
- 电子支付
- Labview
- matlab
- 网络资源
- Python
- Delphi/Perl
- 评测
- Flash/Flex
- CSS/Script
- 计算机原理
- PHP资料
- 数据挖掘与模式识别
- Web服务
- 数据库
- Visual Basic
- 电子商务
- 服务器
- 搜索引擎优化
- 存储
- 架构
- 行业软件
- 人工智能
- 计算机辅助设计
- 多媒体
- 软件测试
- 计算机硬件与维护
- 网站策划/UE
- 网页设计/UI
- 网吧管理