- HTML+CSS+JavaScript网页设计与布局：从新手到高手
- 王修洪 张振
- 449字
- 2024-12-21 07:32:36
2.3 HTML5的主体结构
标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。下面将向用户介绍HTML5的基本文档结构和新增的语义化标签。
2.3.1 HTML5结构性标签体系
HTML5变革最明显的地方，是让人机交互、人网交互变得更加舒适，更贴合用户。这对文档结构和语义化标签体系的革新，起到了很大的作用。
如同XHTML语义化一样，HTML5语义化标签的使用也应该遵循：每个标签都有它特定的意义，而语义化，就是让用户在适当的位置用适当的标签，以便让人和机器（机器可理解为浏览器，也可理解为搜索引擎）都一目了然。
1. 语义更明确简洁的结构
从“头”说起，一个标准的XHTML头部代码应该是这样：
能记住吗？你会去死记硬背吗？当然不会！用户只需要机械地复制粘贴即可。再看看一个标准的HTML5头部是怎样的。
现在的DOCTYPE好记多了。同DOCTYPE变化一样，字符集的声明也被简化了。
HTML5的头部可以如此简单，可以轻易地记住！并且，可以忽略大小写，引号以及最后一个尖括号前的反斜线。
为什么可以如此松散？其实，如果把XHTML当成text/html发送，浏览器一样可以很好地解析，浏览器并不在乎代码的语法。所以，HTML5是形而上的，它可能会破坏原有的一些标准，但仍可在浏览器中有很好地表现。
当然，为了团队协助与后续维护的方便，用户还是应该统一一种自己喜欢的风格的写法，例如：
使用新的DOCTYPE后，浏览器默认以标准模式显示页面。例如，使用Firefox打开一个HTML5页面，然后执行【工具】|【页面信息】命令，将打开【页信息】对话框，其中标注出当前页面是以标准模式显示的。
另外，目前HTML5虽然并不为所有浏览器所支持，但这个能省去100多字节（对于日PV百万级以上的站点，能省下不少的流量）的头部已可以完美地兼容了。如果对浏览器解析模式有研究的话，应该知道，页面在没有定义DOCTYPE的情况下会触发怪异模式，而只要定义了<!doctype html>浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD。
2. 新的语义化标签体系
语义化编码是一个合格前端开发者必备的技能，但随着网页的日渐丰富化，仅仅用原有的XHTML标签去语义化显然已经力不从心。于是，HTML5提供了一系列新的标签及相应属性，以反应现代网站的典型语义。下面以具体的实例来说明，如下所示。
上面是一个简单的博客页面部分HTML，由头部、文章展示区、右侧栏、底部组成。编码整洁，也符合XHTML的语义化，即便是在HTML5中也可以有很好的表现。
但是对浏览器来说，这就是一段没有区分开权重的代码，而不是以一个让机器也能读懂语义的标签来定义相应的区块。例如，标准浏览器（例如Firefox、Chroome甚至新版的IE）都有一个快捷键可以带引客户直接跳转到页面的导航，但问题是所有的区块都是用DIV定义的，并且DIV的ID值是同开发者定的，所以，浏览器并不知道哪个应该是导航链接所在区块。
那么，将上面的代码换成HTML5就可以写成如下形式。
原来，HTML的页面结构可以如此之美，不用注释也能一目了然。对于浏览器，找到对应的区块也不再会茫然无措。
2.3.2 新增的主体结构标签
HTML5相比于HTML 4，改变最大的就是增加了很多新的标签，新增加的标签较以往的标签更加语义化。其中，用于控制页面主体内容的结构标签，可以划分为主体结构标签。
1. article标签
该标签表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专用于独立地分类或复用。例如，一个博客的帖子、一篇文章、一个视频文件等。
示例2-1：article.html
上面的示例可以看到article里面嵌套了header、footer、p标签（见下图）。
可以看到相比于HTML 4，XHTML更加语义化。header表示文章的头部（标题），p表示文章的正文，footer表示文章的底部。需要注意的是article可以嵌套article。
示例2-2：article1.html
此示例比上一个示例是一篇更加完善的博文，不仅有正文，还有正文的评论。整体使用了article标签，与上一示例一样，header表示文章头部，正文还是p标签，section标签区分正文与评论。评论也是独立的内容部分，也包含header和p（见下图）。
2. section标签
该标签用来定义文档中的节（Section），例如章节、页眉、页脚或文档中的其他部分。用于成节的内容，会在文档流中开始一个新的节。它主要用于表示对网站或应用程序中页面上的内容进行分块。section标签通常由内容及其标题组成，如下代码所示。
提示
section和article的区别是：section的作用是对页面上内容进行分块，article是独立的完整的内容。语义上有区别。
3. nav标签
HTML5结构标签<nav>标签用于构建一个页面或一个站点内的链接，表示一个可以用作页面导航的链接组。其中的导航标签链接到其他页面或当前页面的其他部分。
但是，并不是链接的每一个集合都是一个<nav>，比如：赞助商的链接列表及搜索结果页面就不是，因为它们是当前页面的主内容。如下代码所示：
提示
<nav>标签适用的版块包括普通的导航、侧边栏的导航、页内导航。
4. aside标签
该标签定义article以外的内容，aside的内容应该与article的内容相关，表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、导航条以及广告；或者Web 2.0博客网站的tag。用于成节的内容，会在文档流中开始一个新的节。
此实例第一个aside展示了文章版权信息，第二个aside展示了相关文章的友情链接。aside标签的主要用法如下所述。
被包含在<article>标签中作为主要内容的附属信息部分，其中的内容可以是与当前文档有关的参考资料、名词解释等。
在<article>标签之外使用，作为页面或网站全局的附属信息部分（见下图）。
5. time标签与微格式
time标签代表24小时中的某个时刻或某个日期，表示时刻时允许带时差，可以包括如下格式。
在上面的代码中，日期与时间之间要用“T”字符隔开；以“Z”结尾的格式表示使用UTC标准时间编码；最后一种格式为添加时差。
time标签的“pubdate”是一个可选的boolean型属性，可以用在article标签中的time标签上，表示具体发布日期，如下代码所示。
2.3.3 新增的非主体结构标签
与主体结构标签相对应的，就是非主体结构标签。这些标签，用于放置辅助主体内容的信息。例如，放置主体内容的标题，将标题进行群组化，添加页面的页眉页脚等。
1. header标签
header标签是页面加载的第一个标签，包含了站点的标题、Logo、网站导航等，是一种具有引导和导航作用的结构标签，通常用来放置整个页面或页内的一个内容区块的标题。
一个网页内并未限制header标签的个数，可以拥有多个，可以为每个内容区块增加一个。header标签中可以包含多个"h1～h6"标签、hgroup标签、nav标签、form标签、table标签等。
2. hgroup标签
hgroup标签是将标题及其子标题进行分组的标签，通常用于对网页或区段（Section）的标题进行组合，特别惯用于标题类的组合，例如文章的标题与副标题。
3. footer标签
footer标签包含了与页面、文章或是部分内容有关的信息，可以作为其上层父级内容区块或是一个根区块的脚注，通常包括其相关区块的脚注信息，例如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或是其他重要的法律信息。
一个页面中也未限制footer标签的个数。可以为article标签或section标签添加footer标签。
4. address标签
address标签用来在文档中呈现联系信息，包括文档或文档维护者的名字、邮箱、电话号码等。
一般包含版权数据、导航信息、备案信息、联系方式等内容，如下代码所示。
2.4 HTML5文件的编写方法
对于比较熟悉HTML5代码的用户，可以直接手写HTML5文件。而对于对HTML5代码不太熟悉的用户，则需要借助HTML编辑器来编写HTML5文件，例如使用Dreamweaver来编写HTML5文件。
2.4.1 手工编写HTML5
由于HTML5是一种标记语言，而标记语言是以文本形式存在的，因此所有的记事本工具都可以作为它的开发环境（见下图）。
若要使用记事本编写HTML5文件，则需要执行【程序】|【记事本】命令，打开一个记事本，并在记事本中输入HTML代码。
编辑完HTML文件后，执行【文件】|【保存】命令，或按Ctrl+S快捷键保存记事本，在弹出的【另存为】对话框中，将其扩展名保存为.html或.htm（如下图）。
单击【保存】按钮，即可保存该文件。然后，使用浏览器打开该文件，在浏览器中预览最终效果（如下图）。
2.4.2 使用Dreamweaver编写
对于一些不太熟悉HTML代码的用户来讲，为了避免代码编写错误及编写效率低下等问题，还需要使用专门的HTML网络编写软件进行编写。使用HTML网页编写软件，在编写的过程中可以出现语法错误和格式提示，便于用户更改与查阅。最常用的HTML代码编写软件便是由MACROMEDIA公司开发的Adobe Dreamweaver软件了。
Adobe Dreamweaver简称“DW”，其中文名称为“梦想编织者”，是目前业界最流行的静态网页制作与网站开发工具。Dreamweave是集网页制作和管理网站于一身的所见即所得的网页编辑器，不仅可以帮助不同层次的用户快速设计网页，还可以借助其内置的功能使用ASP、JSP、PHP、ASP.net和CFML等服务器语言为网站服务。
1. 欢迎界面
当用户启用Dreamweave CC时（见下图），会出现一个欢迎界面，以帮助用户进行相应的操作，包括组建浏览的文件、新建、了解等操作。
2. 工作界面
在欢迎界面中执行某项操作之后，便可以进入到工作界面中。Dreamweave CC 2015所提供的工作界面是一种可伸缩、自由定制的界面，用户可以根据工作习惯自由设置界面。其中，默认的灰色界面颜色使整个界面显得更加紧凑。
Dreamweave CC 2015工作界面中窗口组成的具体情况，如下所述（参见下图）。
□ 菜单栏 菜单栏中包含各种操作执行菜单命令，以及切换按钮，如【最小化】、【最大化】、【还原】和【关闭】等按钮。
□ 工作区切换器 允许用户更改窗口的界面以“新手”“代码”“默认”“设计”或“Extract”方式显示，以及允许用户新建工作区、管理工作区和保存当前工作区等操作。
□ 标签选择器 位于【文档】窗口底部的状态栏中，用于显示环绕当前选定内容的标签，以及该标签的父标签等，可体现出这些标签的层次结构。
□ 面板组 显示Dreamweaver提供的各种面板，默认显示插入、CSS设计器、CSS过渡效果和文件等面板。
□ 编码工具栏 用于显示Dreamweaver中的各种编码工具，包括打开文档、显示代码浏览器、选择父标签等15种常用工具。
3. 文档视图
Dreamweaver CC 2015为用户提供了多种文档视图，以帮助用户更为便捷地编辑网页内容。
□ 【设计】视图
【设计】视图以可视化的形式来显示网页内容（如下图），其界面中并不存在HTML编码，外形类似于用户在浏览器中查看Web页面时的状态。
用户可通过单击【文档】工具栏中的【设计】按钮，或执行【查看】|【设计】命令，切换到该视图中。
□ 【代码】视图
【代码】视图以HTML代码形式来显示网页编辑内容，用户可以利用界面中【编码】工具栏中的各类工具，来提高代码的编辑效果。用户可以通过单击【文档】工具栏中的【代码】按钮，或执行【查看】|【代码】命令，切换到该视图中（见下图）。
□ 【拆分】视图
【拆分】视图是一个复合型的工作区，它可以同时显示【设计】和【代码】2种视图样式，在其中一个窗口中创建和编辑网页时，所做的更改会即时显示在另一个窗口中。用户可通过单击【文档】工具栏中的【拆分】按钮，或执行【查看】|【代码和设计】命令，切换到该视图中（如下图）。
除此之外，为了适应新的平板扩展显示宽度，Dreamweaver为用户提供了垂直和水平拆分两种格式。用户可通过执行【查看】|【垂直拆分】命令，来显示垂直拆分格式，而再次执行该命令，则取消垂直拆分格式，转而使用水平拆分格式。
□ 【实时视图】
【实时视图】类似于【设计】视图，但相对于【设计】视图来讲，【实时视图】可以更逼真地显示文档在浏览器中的表示形式，并能够像在浏览器中那样与文档进行交互（如下图）。
在【实时视图】中无法对素材进行编辑，用户可通过【代码】视图来编辑网页内容，并通过刷新操作将编辑结果显示在【实时视图】中。用户可通过单击【文档】工具栏中的【实时视图】按钮，或执行【查看】|【实时视图】命令，切换到该视图中。
□ 【实时代码】视图
【实时代码】视图只有在【实时视图】模式下，才可以显示。用户需要先切换到【实时视图】模式下，再通过单击【文档】工具栏中的【在代码视图中显示实时视图源】按钮，或执行【查看】|【实时代码】命令，来显示该视图模式。而【实时代码】主要用于执行该页面的实际代码，并不能进行编辑；当在【实时视图】中与该页面进行交互时，它可以显示动态变化（如下图）。
4. 编码工具栏
在Dreamweaver中的【代码】视图中，用户可以通过编辑HTML代码的方式来制作网页，而【编码】工具栏则位于该视图中。其【编码】工具栏显示在【文档】窗口的左侧，包含了可用于执行多种标准编码操作的按钮（如下图）。
Dreamweaver为用户提供了实时显示提示功能，用户只需将鼠标移至【编码】工具栏的按钮上，系统即会显示工具提示信息。默认情况下，【编码】工具栏中各个显示按钮的具体功能如下表所示。
通过上表，用户已了解【编码】工具栏中的工具，此时便可以使用工具栏中的按钮来快速编写比较规范的代码。
5. 编写HTML代码
了解Dreamweaver的基本操作界面之后，便可以编写HTML代码了。
启动Dreamweaver软件，在欢迎屏幕中的【新建】栏中，选择所需创建的文档类型，即可快速创建所选文档类型的空白文档（如下图）。
或者，执行【文件】|【新建】命令，在弹出的【新建文档】对话框中，激活【新建文档】选项卡，在【文档类型】列表中选择“HTML”文档类型，然后在【框架】列表中选择一种框架类型，单击【创建】按钮即可，如下图。
然后，单击【文档】工具栏中的【代码】按钮，或执行【查看】|【代码】命令，切换到该视图中，如下图。
修改HTML的文档标题，将代码中的<title>标记中的“无标题文档”修改为“春晓”。然后，在<body>标记中输入网页内容，如下图。
修改完HTML代码之后，执行【文件】|【保存】命令，在弹出的【另存为】对话框中，设置保存位置和名称，单击【保存】按钮即可，如下图。
此时，在Dreamweaver中，按下F12功能键，使用默认浏览器查看最终效果，如下图。
2.5 练习：创建HTML5文档
练习要点
● 新建文档
● 设置页面属性
● 输入文本
● 设置文本格式
● 保存文档
● 预览文档
在创建HTML5文档时，用户可以通过许多开发工具实现。其中，最熟悉就是Dreamweaver。在Dreamweaver CC版本中，用户可以直接创建HTML5文档，并在【编辑器】中编辑HTML5代码内容，如下图。
操作步骤
STEP|01 执行【文件】|【新建】命令，在【文档类型】列表框中选择【HTML】选项，创建一个空白页面，如下图。
STEP|02 然后，在页面下方的【属性】面板中，单击【页面属性】按钮，如下图。
STEP|03 在弹出的【页面属性】对话框中的【外观（CSS）】选项卡中，设置页面文本大小、文本颜色和背景颜色，如下图。
STEP|04 激活左侧的【标题／编码】选项卡，在【标题】文本框中输入页面标题，并单击【确定】按钮，如下图。
STEP|05 在【设计】视图中，输入“送孟浩然之广陵”诗词内容，如下图。
STEP|06 在【属性】面板中，激活【CSS】选项卡，单击【居中对齐】按钮，设置对齐格式，如下图。
STEP|07 执行【文件】|【保存】命令，在弹出的【另存为】对话框中，设置保存名称，单击【保存】按钮，如下图。
STEP|08 最后，按下F12键，在弹出的浏览器中查看最终效果，如下图。
2.6 练习：制作第一个HTML5网页
练习要点
● 新建文档
● 设置背景颜色
● 设置标题
● 设置副标题
● 设置段落内容
当为序列应用特效之前，需要对序列进行嵌套。在本练习中，如下图，将通过制作穿梭效果，来详细介绍嵌套序列，以及视频效果、音频过渡效果、动画关键帧的使用方法和操作技巧。
操作步骤
STEP|01 启动Dreamweaver，在欢迎界面中选择【HTML】选项，创建一个空白页面，如下图。
STEP|02 切换到【代码】页面中，在<title></title>标签内输入网页标题，同时输入设置背景颜色的<style>代码，如下图。
STEP|03 然后，在<body></body>标签内，输入h1标题和h3标题的代码及标题文本，如下图。
STEP|04 在h3标题下方输入<pre></pre>代码，并在代码中间输入诗歌正文，如下图。
STEP|05 在</pre>代码下方，输入<h5></h5>代码，并在代码中间输入标题文本，如下图。
STEP|06 随后，在</h5>代码下方输入<pre> </pre>代码，并在代码中间输入注解内容，如下图。
STEP|07 使用同样的方法，在下方分别输入【韵译】和【评析】代码及文本，如下图。
STEP|08 最后，按下F12键，在弹出的浏览器中查看最终效果，如下图。
2.7 新手训练营
练习1：制作嵌套列表
downloads\2\新手训练营\嵌套列表
提示：本练习中，将使用XHTML来制作一个项目列表和编号列表嵌套在一起的嵌套列表，其编号列表嵌套在项目列表中。具体代码如下所示。
练习2：制作特定表格
downloads\2\新手训练营\特定表格
提示：本练习中，将使用XHTML代码制作一个3行×4列、宽度为200px、边框粗细为1、单元格边距和间距为2，以及表格标题位于顶部的一个特定表格。具体代码如下所示。
练习3：制作选择列表
downloads\6\新手训练营\选择列表
提示：本练习中，将使用XHTML代码来制作一个具有下拉功能的选择列表。具体代码如下所示。
使用浏览器预览，其效果如下图所示。
练习4：制作日期选择器
downloads\6\新手训练营\日期选择器
提示：本练习中，将使用XHTML代码，来制作一个日期选择器。具体代码如下所示。
使用浏览器预览，其效果如下图所示。
