HTML5+CSS+JavaScript网页布局从入门到精通.pdf

金牌网站设计师系列丛书 HTML5+CSS+JavaScript 网页布局从入门到精通 环博文化 组编 王志晓 陈益材 牛海建 等编著 机 械 工 业 出 版 社 移动互联网时代，前端工程师经常面临如何在 PC 端和各种移动平台间跨平台开发的问题。针对这个问题，本书在研究分析当前应用开发解决方案和主流技术的基础上，提出一种跨平台的前端应用方案，即利用支持标准 HTML5、CSS 和 JavaScript 的跨平台前端框架开发。本书按从基础到开发大型平台前端的思路，介绍了如何使用 HTML5+CSS+JavaScript 布局网页的方法。以大型电商平台作为前端开发的案例，按从入门到高级商业产品应用的开发思路进行讲解，让读者通过这本书中的内容即可成为一名名副其实的前端开发工程师。本书内容丰富、结构清晰，注重商业应用思维的训练与实践应用，向读者提供了 Web 前端开发的基础知识、开发技术、动画特效的制作方法，适合初、中级网页设计爱好者，Web 前端工程师，以及希望对原有网站进行重构的网页设计者使用，也可以作为高等院校相关专业和相关培训机构的教学用书。图书在版编目（CIP）数据 HTML5+CSS+JavaScript 网页布局从入门到精通/环博文化组编；王志晓等编著.北京：机械工业出版社，2016.3（金牌网站设计师系列丛书）ISBN 978-7-111-53511-9.H .环 王 .超文本标记语言-程序设计网页制作工具JAVA语言-程序设计 .TP312TP393.092 中国版本图书馆 CIP 数据核字（2016）第 076336 号 机械工业出版社（北京市百万庄大街 22 号 邮政编码 100037）策划编辑：丁 诚 责任编辑：丁 诚 责任校对：张艳霞 责任印制：印刷（装订）2016 年 4 月第 1 版第 1 次印刷 184mm260mm16.5 印张404 千字 00014000 册 标准书号：ISBN 978-7-111-7-53511-9 定价：49.00 元（含 1DVD）凡购本书，如有缺页、倒页、脱页，由本社发行部调换 电话服务 网络服务 服务咨询热线：（010）88361066 机 工 官 网： 读者购书热线：（010）68326294 机 工 官 博： 教育服务网： 封面无防伪标均为盗版 金 书 网：www.golden- III 前 言 HTML5 可以说是近十年来 Web 标准最巨大的飞跃，HTML5 中创建了很多新元素，利用这些新元素能快速开发出更多的类和 id 标识。一旦用户熟悉了这些元素的功能和使用，就可以在较短的时间内建立简单的网页组织，它的使命是将 Web 带入一个成熟的应用平台。在 Web 开发中采用 CSS 技术将会显著地美化应用程序，可以有效地控制页面的布局、字体、颜色、背景和其他效果，只需要进行一些简单的修改就可以改变网页的外观和格式。利用好 CSS 可以更快捷地得到以往用很多插件才能得到的效果。通过使用元素本身来取代大部分图片，网页的加载速度会得到提高，同时也能极大地提高程序的性能。本书根据网页前端工程师需要掌握的核心工作技能，按从基础到商业应用实例开发的学习步骤，以练带学，让读者能够轻松、快速地掌握相关的技能。本书对 HTML5 和 CSS 样式布局进行了深入的介绍，对 JavaScript 主要进行了应用级的介绍。本书共 9 章，内容包括：第 1 章 HTML5 的基础知识。通过学习读者可以掌握 HTML 文档的基本结构，全面了解HTML 的标签、元素和属性的设置，并掌握布局时一些通用的 HTML5 标签，同时对表单标签的应用进行了详细的介绍。第 2 章 CSS 基本语法和应用。介绍了 CSS 层叠样式表的概念，CSS 的作用、类型与冲突，以及在 HTML 中应用 CSS 样式表的方法；对 CSS 的基本语法进行了图文并茂的介绍，方便读者掌握 CSS 的基本语法；最后对 CSS 盒模型进行了详细的举例说明。第 3 章 DIV+CSS 网页基础布局。详细说明了 DIV 各元素的属性设置和 DIV+CSS 基础布局的方法，对列表元素的布局进行了举例说明，并对元素的非常规定位的方式进行了总结，介绍了绝对定位、固定定位、相对定位以及程序的简化方法。第 4 章 JavaScript 编程应用基础。简单介绍了嵌入网页的相关动画技术，对 JavaScript的编程应用进行了详细的介绍。读者要掌握在 HTML 页面中如何实现对 JavaScript 的调用，最后举例说明使用 JavaScript 实现图片轮播的应用。第 5 章 Photoshop 网页设计与应用。介绍了网站前期策划的准备工作，通过学习读者可以掌握从网站定位出发使用 Photoshop 实现网页设计的各个环节，如首页的版式设计、页面框架的搭建、大小导航的制作等内容。第 6 章 HTML5+CSS 布局网页。本章将应用前面几章学习的知识，使用 HTML5+CSS制作一个真正意义上的网页，通过学习读者可以掌握如何使用 Photoshop 对设计的网页图片进行切片，如何使用 HTML5+CSS 布局一个精美的首页效果，并掌握兼容 IE 的设置。第 7 章电子商城首页布局。介绍了电子商城系统规划的方法，使用 Dreamweaver 进行网站站点的建立，重置样式表的高级应用，对搜索功能、导航、市场精选频道等功能模块进行不同的样式布局。第 8 章用户管理系统布局。介绍了一个网站用户管理系统的规划，详细介绍了用户注册功能的布局操作，强调了表单的交互验证方法，并对用户登录模块进行了详细的布局设计，最后对找回密码的布局页面进行了详细的介绍。IV第 9 章购物车系统布局。根据购物车系统从下订单到结算的流程，介绍了产品前台展示的两个页面“产品列表页.html”和“产品详情页.html”的制作方法。讲解了如何使用JavaScript 实现订单的统计和信息交互动态功能，最后对通过购物车下订单的 4 个步骤分别设计了 4 个页面。本书内容广泛、新颖别致，是网页开发前端布局设计的最佳参考资料。本书中的每个实例都融合了适合其类别的动态功能，拥有各自的设计特点，非常适合读者在设计制作时参考和应用。本书也是网页制作的最佳素材宝典，在实际应用中能令您创意无限，使制作更加简化与方便。本书由王志晓负责第 15 章的编写，陈益材负责第 69 章程序的编写，牛海建负责本书案例的美工设计与创意。参与本书编写的还有于荷云、白爱娟、王玉州、杨成、杨倩倩、张洁、彭飞飞、李涵等。由于编者水平有限，本书疏漏之处在所难免，欢迎各位读者与专家批评指正。编 者 2016 年 3 月 V 目 录 前言 第 1 章 HTML5 基础知识 1 1.1 HTML 文档基本结构 2 1.1.1 HTML 文档编辑器 2 1.1.2 HTML 文档类型 2 1.1.3 HTML 文档标准结构 5 1.2 HTML 标签、元素和属性 6 1.2.1 HTML 标签的概念 6 1.2.2 元素和元素形式 7 1.2.3 属性的定义 8 1.2.4 大小写规范 9 1.3 常用 HTML5 标签 9 1.3.1 基础标签 9 1.3.2 格式标签 11 1.3.3 表单标签 13 1.3.4 框架标签 24 1.3.5 图像标签 24 1.3.6 音/视频标签 27 1.3.7 链接标签 31 1.3.8 列表标签 32 1.3.9 表格标签 34 1.3.10 样式/节标签 35 1.3.11 元信息标签 38 1.3.12 编程标签 40 第 2 章 CSS 基本语法和应用 42 2.1 CSS 层叠样式表 43 2.1.1 CSS 的作用、类型与冲突 43 2.1.2 编辑 CSS 层叠样式表 44 2.1.3 在 HTML 文档中应用 CSS 的方法 46 2.2 CSS 的基本语法 49 2.2.1 CSS 的 3 种选择器 50 2.2.2 选择器的声明 54 2.2.3 CSS 样式继承 56 2.2.4 使用 CSS 注释 58 2.3 CSS 盒模型控制 58 VI2.3.1 CSS 盒模型概念 58 2.3.2 外边距 margin 的控制 60 2.3.3 边框 border 的样式设置 62 2.3.4 内边距 padding 的设置 64 第 3 章 DIV+CSS 网页基础布局 66 3.1 div 元素的基础知识 67 3.1.1 div 标签控制方法 67 3.1.2 HTML 中的元素 69 3.1.3 元素的样式设置 70 3.2 DIV+CSS 基础布局 72 3.2.1 网页宽度的设置 72 3.2.2 水平居中的设置 73 3.2.3 div 的嵌套设置 75 3.2.4 div 的浮动方法 76 3.2.5 网页布局的实例 81 3.3 列表元素布局 84 3.3.1 列表元素布局导航 84 3.3.2 导航条的超链接 85 3.3.3 导航条的互动设计 87 3.4 元素的非常规定位方式 88 3.4.1 CSS 绝对定位 88 3.4.2 CSS 固定定位 90 3.4.3 CSS 相对定位 92 3.4.4 CSS 程序的简化 93 第 4 章 JavaScript 编程应用基础 95 4.1 成功网站的特点和嵌入网页的动画技术 96 4.1.1 成功网站所具备的特点 96 4.1.2 嵌入网页的动画技术 97 4.2 JavaScript 应用基础 100 4.2.1 JavaScript 的特点 100 4.2.2 在网页中嵌入 JavaScript 101 4.3 JavaScript 的图片轮播应用 102 4.3.1 设计首页的版面 103 4.3.2 创建和编辑站点 105 4.3.3 使用 DIV+CSS 布局网页 105 4.3.4 使用动画技术 111 第 5 章 Photoshop 网页设计与应用 117 5.1 网站的策划准备工作 118 5.1.1 网站建设前期的总体策划 118 VII 5.1.2 定位网站的主题 118 5.1.3 拟定网站访问群体 119 5.2 网站策划的重点 119 5.2.1 网站栏目的设计 120 5.2.2 网站 VI 形象的定位 120 5.2.3 网站设计的宣传标语 122 5.2.4 网站框架的确定 123 5.2.5 网站资料的收集 124 5.2.6 网站制作的注意事项 124 5.3 网页设计全程实例 125 5.3.1 首页版式的设计分析 126 5.3.2 网站首页的大小设计 127 5.3.3 页面框架的搭建 128 5.3.4 设计 Banner 图片 129 5.3.5 小导航的制作 130 5.3.6 大导航的制作 130 5.3.7 版权的设计 131 5.3.8 内容的设计 133 5.3.9 友情链接 133 第 6 章 HTML5+CSS 布局网页 135 6.1 网站首页的布局设计 136 6.1.1 首页图片的切片 136 6.1.2 调节网页图片 139 6.1.3 创建站点 142 6.2 使用 HTML5+CSS 布局网页 143 6.2.1 布局的整体规划 143 6.2.2 首页的 HTML5 布局 144 6.2.3 CSS 的样式美化 146 6.2.4 HTML5 兼容 IE 的设置 148 第 7 章 电子商城首页布局 150 7.1 电子商城系统规划 151 7.1.1 网站整体布局规划 151 7.1.2 建立网站的本地站点 151 7.1.3 商城首页布局分析 154 7.2 首页布局基础功能 156 7.2.1 重置样式表 global.css 156 7.2.2 跨平台自适应网页宽度 159 7.2.3 链接样式表和 JavaScript 160 7.2.4 布局小导航功能 160 VIII7.2.5 搜索功能的布局设计 164 7.2.6 大导航和二级菜单 167 7.2.7 制作首页图片的轮播 172 7.3 功能模块的首页布局 176 7.3.1 市场精选频道设计 177 7.3.2 特价商品和品牌馆 178 7.3.3 版权内容排版布局 180 第 8 章 用户管理系统布局 181 8.1 用户管理系统的规划 182 8.1.1 系统结构设计 182 8.1.2 页面规划设计 182 8.2 用户注册功能的布局 183 8.2.1 用户注册页面 DIV 183 8.2.2 CSS 样式设计 187 8.2.3 表单的交互验证 189 8.3 用户登录模块的设计 201 8.3.1 登录页面的设计 201 8.3.2 登录成功个人页面 204 8.4 找回密码的布局 205 8.4.1 确认用户的页面 206 8.4.2 选择找回方式 208 8.4.3 修改和找回密码 212 第 9 章 购物车系统布局 215 9.1 购物车系统规划 216 9.1.1 购物车系统功能 216 9.1.2 购物车系统流程 217 9.1.3 系统结构设计 219 9.1.4 页面规划设计 220 9.2 产品前台展示功能 220 9.2.1 产品列表页.html 221 9.2.2 产品详情页.html 227 9.3 购物车下订单功能 235 9.3.1 购物车.html 236 9.3.2 确认订单.html 247 9.3.3 付款.html 250 9.3.4 完成.html 253 第 1章 HTML5 基础知识 互联网中所有的网页都是用 HTML 格式的文本编写成的，浏览器用来解释这些文本，并将其呈现出来，所以用户要学习使用 HTML+CSS 进行网页前端设计和开发首先必须熟悉HTML 语言。HTML 语言有自己的语法格式和编写规范，这些都是由 HTML 规范定义的。创作者根据该规范创作网页，浏览器厂商根据该规范解释和渲染网页。本章将简单介绍HTML 语言的格式和 HTML5 布局常用标签。本章学习重点：HTML 文档类型 HTML 文档标准结构 HTML 标签概念 元素和元素形式 常用标签的使用 21.1 HTML 文档基本结构 在浏览器中，文本以一定的格式显示出来，图片及其他多媒体文件则通过 HTML 文档中所标识的路径被调用。浏览器从 HTML 代码中读取图像的位置，并被浏览器解释后显示出来，其他的多媒体格式也是如此。HTML 文本是由 HTML 标签组成的描述性文本，HTML标签可以说明文字、图形、动画、声音、表格、链接等。1.1.1 HTML 文档编辑器 设计者只要明白了各种标签的用法，便学会了 HTML。HTML 的标签格式非常简单，它是由文字及标签组合而成的。由于 HTML 只是文本，因此任何文本编辑器都可以编辑它，这种编写方法也称为“手工编写代码”的方式。如果要创建精彩效果，特别是实现精彩的布局，使用可视化编辑软件是非常必要的，对于专业布局工作人员我们推荐使用所见即所得的Dreamweaver 软件，如图 1-1 所示。图 1-1 Dreamweaver CC 2015 软件操作界面 1.1.2 HTML 文档类型 下面创建一个简单的 HTML5 文件。运行 Dreamweaver CC 2015 软件，选择菜单栏中的“文件”“新建”命令，打开“新建文档”对话框，如图 1-2 所示。3 图 1-2“新建文档”对话框 新手会质疑为什么有那么多的“文档类型”，其实这是 HTML 不同阶段的不同版本，不同的地方就是 DOCTYPE 声明以及 DOCTYPE 声明对网页起了什么作用。DOCTYPE（DOCument TYPE）主要用来说明用户使用的 XHTML 或者 HTML 是什么版本。浏览器根据用户使用 DOCTYPE 定义的“文档类型”来解释页面代码。说明：HTML 与 XHTML 有什么区别 可扩展超文本标记语言 XHTML（eXtensible HyperText Markup Language）是 HTML 4.01 的第 1 个修订版本，是 3 种 HTML4 文件根据 XML 1.0 标准重组而成的。也就是说XHTML 是 HTML 4.01 和 XML 1.0 的结合。由于 XHTML 1.0 是基于 HTML 4.01 的，并没有引入任何新标签或属性（XHTML 可以看作是 HTML 的一个子集），其表现方式与超文本标记语言 HTML 类似，只是语法上更加严格，几乎所有的网页浏览器在正确解析 HTML 的同时可兼容 XHTML。例如 XHTML 中所有的标签必须小写，所有的标签必须闭合，每一个属性都必须使用引号引起来。要写成，不能写成，在使用了之后必须有一个结束 段落。现在 HTML5 比较盛行，因此本书文档的编写也以该文档类型为主，HTML5 的标签及实例开发应用将在第 5 章进行详细介绍，作为前端的高级设计人员要全面了解一下DOCTYPE 的几种类型。XHTML 1.0 提供了 3 种 DOCTYPE 供用户选择。1.过渡型（Transitional）打 开 Dreamweaver CC2015，选 择“文 档 类 型”下 拉 列 表 框 中 的 XHTML 1.0 Transitional 新建一个 HTML 文档，然后切换到“代码”窗口，可以发现第 1 行就是定义文档类型的代码标准，如图 1-3 所示。4 图 1-3 定义 XHTML 文档标准 其中用于声明的代码如下：在 DOCTYPE 声明以后，接下来的代码是：通常 HTML4.0 的代码只是，这里的“xmlns”是什么呢？这里的“xmlns”是XHTML namespace 的缩写，称为“名字空间”声明。名字空间有什么作用呢？由于 XML 允许用户定义自己的标识，所定义的标识和其他人定义的标识有可能相同，但表示不同的意义，当交换或者共享文件的时候就容易产生错误。为了避免这种错误发生，XML 采用名字空间声明，允许用户通过一个网址指向来识别标识。名字空间就是用来给文档做一个标记，告诉别人这个文档是属于谁的，只不过这个“谁”是用了一个网址来代替的。XHTML 是 HTML 向 XML 过渡的标识语言，它需要符合 XML 文档规则，因此也需要定义名字空间。又因为 XHTML1.0 不能自定义标识，所以它的名字空间都相同，就是“http：/www.w3.org/1999/xhtml”。如果用户还不太理解也不要紧，在目前阶段我们只要照抄代码就可以了。为了被浏览器正确解释和通过标识校验，所有的 XHTML 文档都必须声明它们所使用的编码语言，代码如下：这里声明的编码语言是通用编码 utf-8，如果需要制作纯中文内容，可以定义为GB2312，繁体中文为 BIG5。utf-8 是一种针对 Unicode 的可变长度字符编码，又称万国码，由 Ken Thompson 于 1992年创建，现在已经标准化为 RFC 3629。utf-8 用 1 到 4 个字节编码 Unicode 字符，用于网页上可以在同一页面中显示中文简体、繁体及其他语言（如日文、韩文）。GB2312 即信息交换用汉字编码字符集。信息交换用汉字编码字符集是由中国国家标准总局于 1980 年发布，1981 年 5 月 1 日开始实施的一套国家标准，标准号是 GB23121980。GB2312 编码适用于汉字处理、汉字通信等系统之间的信息交换，通行于中国大陆，新加坡等地也采用此编码，中国大陆几乎所有的中文系统和国际化的软件都支持 GB2312。5 简体中文网站使用 GB2312 的比较多，从文字支持上来说 utf-8 要比 GB2312 多。一般企业网站可根据自己的情况选择网页编码。2.严格型（Strict）单击“文档类型”下拉列表框中的 XHTML1.0 Strict，新建一个 HTML 文档，代码如下（如图 1-4 所示）：图 1-4 定义严格型 XHTML 文档标准 1.1.3 HTML 文档标准结构 对于初学者来说，只要选择 HTML5 文档类型就可以了，它可以兼容用户的表格和 DIV 布局、表格标识等。在“文档类型”下拉列表框中选择 HTML5 选项，然后单击“创建”按钮，创建一个 HTML5 标准文档。一个 HTML 文档由 4 个基本部分组成，如图 1-5 所示。图 1-5 HTML5 文档标准 61）文档类型声明：表明该文档是 HTML 文档。在使用 HTML 语法编写 HTML 文档时要求指定文档类型，以确保浏览器能在 HTML5标准模式下渲染网页。文档类型声明如下：考虑到 HTML 语法不区分大小写，、等也是正确的。说明：注意，一些网页被保存为以.htm 为扩展名的文件。这里需要说明的是，HTML 文件既可以保存为*.html 文件，也可以保存为*.htm 文件，HTML 网页文件可以使用这两种扩展名，并且这两种扩展名没有本质的区别，主要是因为在某些较旧的系统上不能识别 4 位的文件扩展名。2）html 标签对：用来表示 HTML 文档的开始和结束。标签位于 HTML 文档的最前面，用来标识 HTML 文档的开始；而标签则放在 HTML 文档的最后面，用来标识 HTML 文档的结束。3）head 标签对：其间的内容构成 HTML 文档的开头部分。和构成 HTML 文档的开头部分，在此标签对之间可以使用、等标签对，这些标签对都是用于描述 HTML 文档相关信息的标签对，标签对之间的内容不会在浏览器的框内显示出来。4）body 标签对：其间的内容构成 HTML 文档的主题部分。是 HTML 文档的主题部分，在此标签对之间可以包含、等众多标签，对于可视化浏览器，可以将之间的内容作为一个画布，文本、图片、颜色等都在该画布中呈现出来。本书中重点介绍的 DIV 布局（即整个网页所见即所得的内容页面）全部包含在 body 标签对中。1.2 HTML 标签、元素和属性 HTML 是简单的文本标签语言，一个 HTML 网页文件是由元素构成的，元素由开始标签、结束标签、属性和元素的内容 4 个部分构成，用户在学习和使用 HTML 时要注意区分标签和元素这两个概念。1.2.1 HTML 标签的概念 标签是元素的组成，用来标记内容块，也用标签来标明元素内容的意义（即语义）。标签使用尖括号包围，如，这两个标签表示一个 HTML 文件。标签的使用有两种形式，即成对出现的标签和单独出现的标签。无论使用哪一种标签，7 标签中都不能包含空格。例如下面的代码是错误的，因为其中包含空格。1.成对出现的标签 成对出现的标签也就是包含开始标签和结束标签的形式，其基本格式如下：网页的内容 如前端布局经常用到的“网页的内容”就是一个标准的成对应用的标签。开始标签：表示一段内容的开始，例如表示 HTML 文件开始，到结束，从而组成了一个 HTML 文件。和标签描述 HTML 文档的相关信息，之间的内容是不会在浏览器的框内显示出来的。和在浏览器窗口中显示主要内容，也是 HTML 文件的主要部分。结束标签：、和是与开始标签对应的结束标签，结束标签比开始标签多一个斜杠。2.单独出现的标签 虽然并不是所有的开始标签都必须有结束标签对应，但通常建议“开始标签”最好用一个对应的“结束标签”关闭，这样能使网页易于阅读和修改。如果在开始标签和结束标签之间没有内容，那么就不必这样做，如换行标签可以写成（在后面的学习中读者将会了解它的用法）。例如下面的代码中就是一个单独出现的标签：网页内容的第一行 网页内容的另一行 1.2.2 元素和元素形式 标签用于为一个元素的开始和结束做标记，网页内容是由元素组成的，例如包含在、标签之间的都是元素内容。元素主要有以下几种形式。1）一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。例如和是标签，但在下面的代码中则是一个 head 元素。这是制作的网页 在上面这个元素中和是标签，但在下面的代码中则是 title 元素。这是制作的网页 同时，这个 title 是嵌套在 head 元素中的另一个元素。head、title 又被称为元素名，在后面的文档中会经常使用 head 元素（或者元 8素）、title 元素（或者元素）这样的简称来表示它们之间的元素内容。2）有一些元素有内容，但允许忽略结束标签。例如，下面的代码省略了结束标签。这是第一段文字 这是第二段文本 等同于：这是一段文本 这是另一段文本 3）有一些元素甚至允许忽略开始标签。例如，html、head 和 body 等元素都允许忽略开始标签，虽然 HTML 规范允许这样做，但一般不推荐这样做，否则会使文档变得很难阅读。4）有一些元素可以没有内容，因此不需要结束标签。例如，换行元素 br 可以写成：每一个 br 元素都没有内容。5）元素应该合理嵌套。和 HTML4 不同，所有的 HTML5 标签都必须合理嵌套，所有的嵌套都必须按顺序，以下代码：这里是强调的内容 必须修改为：这里是强调的内容 也就是说，嵌套必须是严格对称的。1.2.3 属性的定义 与元素相关的特性称为属性，用户可以为属性赋值（每个属性总是对应一个属性值，因此也被称为“属性/值”对）。“属性/值”对出现在元素开始标签的最后一个“”之前，通过空格分隔。在一个 HTML 文档中可以有任何数量的“属性/值”对，它们可以以任何顺序出现，但是不能在同一个开始标签中定义同名的属性（属性名是不区分大小写的）。虽然在前面的 HTML 例子中属性值都用引号包含，但在一些情况下开发者可以不用引号包含属性值，这时的属性值应该仅包含 ASCII 字符（az 以及 AZ）、数字（09）、连字符（-）、圆点句号（.）、下划线（_）以及冒号（：），但使用引号可以更好地表现，这也是W3C 提倡使用的，并且可以顺利地和未来的新标准衔接。引号可以是单引号或者双引号，属性的使用格式如下：9 内容 内容 或者 内容 1.2.4 大小写规范 元素名和属性都是不区分大小写的，例如下面 3 个标签的效果是相同的：、和 一些用户建议标签使用大写字母、属性使用小写字母，这是为了更好地阅读和理解HTML 文档，但建议用户都使用小写，这是未来 HTML 发展的方向，并且 HTML4 规范的更新版本 XHTML 规定标签名和属性必须是小写的。虽然元素和属性不区分大小写，但是有些属性的值确实区分大小写。例如，属性 class和 id 的值就是区分大小写的。并非所有属性的值都区分大小写，大部分属性的值是不区分大小写的。1.3 常用 HTML5 标签 前面介绍了 HTML5 的文档结构和编辑标准，是为了帮助前端工程师在编写文档的时候能够编写出符合标准的网页，如果要掌握 DIV+CSS 的布局方法，首先要深入学习和了解HTML5 的标签及功能应用。1.3.1 基础标签 HTML 基础标签一共有 9 个，如表 1-1 所示。其中、几个标签已经在前面用到，这里介绍其他常用基础标签的使用。表 1-1 基础标签 标 签 功 能 描 述 定义文档类型 定义 HTML 文档 定义文档的标题 定义文档的主体 to 定义 HTML 标题 定义段落 定义简单的折行 定义水平线 定义注释 101.HTML 标题使用的标签 HTML 标题是通过标签进行定义的，定义最大的标题，定义最小的标题。由于 h 元素拥有确切的语义，在使用时需要选择恰当的标签层级来构建文档的结构。注意，不要利用标题标签来改变同一行中字的大小，应当使用新的层叠样式表定义，达到漂亮的显示效果。例如：HTML5 的标题 1 HTML5 的标题 2 HTML5 的标题 3 HTML5 的标题 4 HTML5 的标题 5 HTML5 的标题 6 2.HTML 段落 HTML 段落是通过标签进行定义的。p 元素会自动在其前后创建一些空白，浏览器会自动添加这些空间，也可以在独立的样式表中规定新的段落样式。例如：这是第一段文字。这是第二段文字。3.属性 title title 规定元素的额外信息（可在工具提示中显示）。浏览器以特殊的方式使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹、书签列表时，标题将成为该文档链接的默认名称。例如：李白 4.换行标签 使用标签可插入一个简单的换行符。标签是空标签（意味着它没有结束标签，因此以下是错误的：）。在 XHTML 中把结束标签放在开始标签中，也就是。标签只是简单地开始新的一行，当浏览器遇到 标签时通常会在相邻的段落之间插入一些垂直的间距。5.注释标签 注释不会被浏览器显示出来。注释标签用于在源代码中插入注释，可使用注释对代码进行解释，这样做有助于在以后的时间对代码进行编辑，当编写大量代码时尤其有用。例如：这是一段普通的段落。11 1.3.2 格式标签 HTML 中的格式标签比较多，如表 1-2 所示。应用这些标签基本上可以实现对整个网页的格式组成，下面介绍几个常用布局的标签应用。表 1-2 格式标签 标 签 功 能 描 述 定义只取首字母的缩写 定义缩写 定义文档作者或拥有者的联系信息 定义粗体文本 定义文本的文本方向，使其脱离其周围文本的方向设置 定义文字方向 定义大号文本 定义长的引用 不赞成使用。定义居中文本 定义引用（citation）定义计算机代码文本 定义被删除文本 定义项目 定义强调文本 不赞成使用。定义文本的字体、尺寸和颜色 定义斜体文本 定义被插入文本 定义键盘文本 定义有记号的文本 定义预定义范围内的度量 定义预格式文本 定义任何类型的任务的进度 定义短的引用 定义浏览器不支持 ruby 元素时显示的内容 定义 ruby 注释的解释 定义 ruby 注释 不赞成使用。定义加删除线的文本 定义计算机代码样本 定义小号文本 不赞成使用。定义加删除线文本 定义语气更为强烈的强调文本 定义上标文本 定义下标文本 定义日期/时间 定义打字机文本 不赞成使用，定义下划线文本 定义文本的变量部分 定义视频 1.引用标签和标签 定义长的引用，在浏览器中呈现为一段缩进的文本。12例如：HTML5 网页设计要学习的内容为：HTML5、CSS3、JavaScript.定义短的引用，在浏览器中呈现为引号。HTML5 网页设计要学习的内容为：HTML5、CSS3、JavaScript.2.标签 pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符。标签的一个常见应用就是用来表示计算机的源代码。可以导致段落断开的标签（例如标题、和标签）绝对不能包含在所定义的块里。尽管有些浏览器会把段落结束标签解释为简单的换行，但是这种行为在所有浏览器中并不都是一样的。pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，以及链接、图像和水平分隔线。当把其他标签（例如标签）放到块中时就像放在HTML/XHTML 文档中的其他部分一样。例如：<；html>；<；head>；<；script type="；text/javascript"；src="；loadxmldoc.js"；>；<；/script>；<；/head>；<；body>；<；script type="；text/javascript"；>；xmlDoc=关于我们的文档（"；books.xml"；）；document.write（"；关于我们的文档已经装载，准备备用"；）；<；/script>；<；/body>；<；/html>；3.标签和标签 标签定义已经被插入文档中的文本。标签定义文档中已被删除的文本。标签和标签配合使用，用来描述文档中的更新和修正。13 大多数浏览器会改写为删除文本和下划线文本。例如：春风又过绿江南岸 4.文字字体格式标签、定义粗体文本。标签用于强调某些文本。定义斜体文本。标签将旁注呈现为小型文本。定义强调文本。定义更强烈的强调文本。一般浏览器会把 em 元素呈现为斜体，而将 strong 元素呈现为粗体。5.注音标签和 标签定义 ruby 注释（中文注音或字符）。标签定义字符（中文注音或字符的解释或发音）。标签是 HTML5 中的新标签。和标签一同使用。例如：陈小明chen xiao ming 6.下标和上标 定义下标文本。包含在标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。定义上标文本。包含在标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。例如：H2O E=mc2 7.突出显示文本 定义有记号的文本。标签是 HTML5 中的新标签，在需要突出显示文本时使用标签。例如：学习网页设计，主要就是学习HTML5、CSS3和JavaScript。1.3.3 表单标签 HTML5 中的表单标签在实际布局的时候和后台动态功能程序的开发是相对应的，一个 14网页布局的好与坏，和表单标签有很大关系。主要的表单标签如表 1-3 所示。表 1-3 表单标签 标 签 功 能 描 述 定义供用户输入的 HTML 表单 定义输入控件 定义多行的文本输入控件 定义按钮 定义选择列表（下拉列表）定义选择列表中相关选项的组合 定义选择列表中的选项 定义 input 元素的标注 定义围绕表单中元素的边框 定义 fieldset 元素的标题 不赞成使用。定义与文档相关的可搜索索引 定义下拉列表 定义生成密钥 定义输出的一些类型 1.标签 标签创建供用户输入的表单，其属性如表 1-4 所示。标签对用来表示创建一个表单，在标签对之间的表单控件都属于表单的内容，表单可以说是一个单独的容器。表 1-4 标签属性 属 性 描 述 action 定义一个 URL。当单击提交按钮时向这个 URL 发送数据 data 供自动插入数据 replace 定义表单提交时所做的事情 accept 处理该表单的服务器可正确处理的内容类型列表（用逗号分隔）accept-charset 表单数据的可能的字符集列表（用逗号分隔），默认值是unknown enctype 设置对表单内容进行编码的 MIME 类型 method 用于向 action URL 发送数据的 HTTP 方法，默认为 get target 在何处打开目标 URL 在表单标签中还可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。一般情况下，表单的处理程序 action 和传送方法 method 是必不可少的参数。（1）action 属性 该属性用于定义一个 URL，当单击提交按钮时向这个 URL 发送数据。真正处理表单的 15 数据脚本或程序在 action 属性里，这个属性值可以是程序或脚本的一个完整 URL。说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，例如发送 E-mail 等。（2）method 属性 该属性用于向 action URL 发送数据的 HTTP 方法。method=get：在使用这个设置时，来访者输入的数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，缺点是数据长度不能够太长。在没有指定method 的情况下一般会视 get 为默认值。method=post：在使用这种设置时，表单数据是与 URL 分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比POST 慢。（3）enctype 属性 该属性设置对表单内容进行编码的 MIME 类型。text/plain：以纯文本的形式传送。application/x-www-form-urlencoded：默认的编码形式。multipart/form-data MIME：上传文件的表单必须选择该项。（4）target 属性 target 属性用来指定目标窗口的打开方式。_blank：将返回信息显示在新打开的窗口中。_parent：将返回信息显示在父级的浏览器窗口中。_se