1.2 HTML文档结构_Web应用开发技术与案例教程-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

1.2 HTML文档结构

在万维网中，网页都是用HTML语言所组织起来的文档，由浏览器解释这些文档并呈现。HTML标准定义了HTML文档特定的文档结构、语法格式和编写规范。

1.2.1 HTML标签

1.标签的作用

HTML标签是HTML元素的组成部分，用来标记内容块，每一个标签描述了一种功能。HTML标签是由“<”和“>”所括住的指令标签。HTML标签不区分大小写，但习惯上用小写字母表示。

2.双标签和单标签

HTML语言中所使用的标签有双标签和单标签两种形式。但无论是哪种形式，在标签名中都不允许包含空格。

1）双标签：成对出现的标签，由开始标签和结束标签构成，必须成对使用。

这类标签的语法是：

标签对中的<标签名>是开始标签，</标签名>是结束标签。开始标签告诉Web浏览器从此处开始执行该标签所表示的功能，而结束标签告诉Web浏览器在这里结束该功能。例如<title>表示文档标题的开始，</title>表示文档标题的结束。“内容”就是这对标签施加作用的部分。常用的双标签有：表示html文档的<html></html>，文档头<head></head>，文档体<body></body>，段落标签<p></p>等。

HTML允许没有结束标签，解析器也可以识别，但建议开始标签还是要有对应的结束标签来关闭，这样也便于网页的阅读和修改。

2）单标签：只需单独使用就能完整地表达意思。

在HTML中，这类标签的语法是：

如果开始标签和结束标签之间没有内容，就可以用单标签表示。常用的单标签有：<br>，表示换行。

HTML标签对大小写不敏感：<P>等同于<p>。许多网站都使用大写的HTML标签，但在以后的HTML版本中可能会强制要求小写。

3.注释标签

注释标签用于在源代码中插入注释，加入注释有助于对源代码功能的解读和后期修改。

注释标签的格式为：

在浏览Web页面时，注释不会显示出来。

1.2.2 HTML元素

1.元素定义

在学习HTML时，需要区分标签和元素的含义。网页内容是由元素组成的，而标签是为一个元素的开始和结束做标记。

HTML元素指的是从开始标签（Start Tag）到结束标签（End Tag）的所有代码。通常一个元素由开始标签、属性、元素内容和结束标签构成。可参考表1-1所示示例。

表1-1 HTML元素示例

HTML元素语法要求：

● HTML元素以开始标签起始。

● HTML元素以结束标签终止。

● 元素的内容是开始标签与结束标签之间的内容。

● 某些HTML元素内容为空。

● 空元素在开始标签中进行关闭（以开始标签的结束而结束）。

● 大多数HTML元素可设置属性。

大多数HTML元素可以嵌套（可以包含其他HTML元素）。HTML文档是由嵌套的HTML元素构成的。在嵌套时需要按顺序关闭标签，以做到对称。HTML元素嵌套形式如下。

2.块级元素和行内元素

HTML可以将元素分为块级元素（Block Level Element）和行内元素（Inline Element）。

● 块级元素，一般都是从新行开始。常见的块级元素如段落元素p。

● 行内元素，也叫作内联元素，一般都是语义级别的基本元素，常见的行内元素如超链接元素a。

块级元素与行内元素的区别：

1）块级元素会独占一行。行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。

2）块级元素的宽度默认自动填满其父元素宽度（width），除非设定了宽度。行内元素的宽度随元素的内容而变化，宽度不可改变。

3）块级元素的高度（height），行高（line-height）以及内边距（padding）和外边距（margin）都可改变。行内元素对高度和行高设置无效，外边距仅对水平方向有效而垂直方向无效，内边距上下左右设置有效。

4）块级元素可以容纳行内元素和其他块级元素。form这个块级元素比较特殊，只能用来容纳其他块级元素。行内元素只能容纳文本或者其他行内元素。

1.2.3 HTML属性

为了增强元素的功能，许多单标签和双标签的开始标签内可以包含一些属性。属性是与元素相关的特性，每个属性总是对应一个属性值，称为“属性/值”对。属性在使用时的语法是：

属性值被包含在引号中，以空格分隔。“属性/值”对之间无先后次序，数量任意。

例如下面的属性值定义。

在任何元素中都可以使用的属性，称为全局属性，例如规定元素唯一标识的属性“id”。HTML事件可以触发浏览器中的行为，比如当单击某个HTML元素时启动一段JavaScript代码。通过在HTML元素内设置事件属性，可以调用JavaScript程序，例如在元素内设置“onload”可以在文档加载时运行脚本。

文档资料

元素的全局属性和事件属性

来源：www.cmpedu.com

请访问网站链接或扫描二维码查看。

1.2.4 HTML文档的基本结构

一个HTML文档由标题、段落、文本、表格、列表等各种元素组成，HTML使用标签来描述这些元素。实际上，HTML文档就是由标签和元素组成的文本文件。一个HTML文档包括四个部分，如图1-5所示。

1）文档类型声明：文档的第一行，用DOCTYPE声明文档类型，验证文档是否符合文档类型定义。

图1-5 HTML文档结构示例

2）html标签对：html标签对用来标识HTML文档的开始和结束。

3）head标签对：head标签对之间的内容构成文档的头部，用于对这个HTML文档进行一些必要的定义，如设置字符编码等。

4）body标签对：body标签对之间的内容构成文档的主体，文档主体中才是要显示的各种文档内容。

1.HTML文档类型声明

在用HTML语言编写文档时，需要指定文档类型，以确保浏览器能按照文档类型的标准渲染网页。在HTML文档中，用DOCTYPE声明来指定文档类型，它的目的是要告诉标准通用标记语言解析器或者浏览器应该按照什么规则来解析文档。

DOCTYPE声明必须放在HTML文档的第一行，在html标签之前定义。DOCTYPE没有使用或格式不正确会导致文档以兼容模式呈现，建议直接复制粘贴DOCTYPE声明而不是自己输入。DOCTYPE声明的语法格式为：

HTML 4.01需要对DTD进行引用，有三种DOCTYPE声明。

（1）HTML 4.01 Strict

（2）HTML 4.01 Transitional

（3）HTML 4.01 Frameset

HTML 5的DOCTYPE声明只有一种，格式简明扼要，仅用一个DOCTYPE来触发标准模式，如下所示。

2.<html>标签对

<!DOCTYPE>标签之后是<html>标签，用来标识HTML文档的开始，并告知浏览器这是一个HTML文档。</html>标签放在HTML文档的最后，用来标识HTML文档的结束，这对标签是双标签，必须成对使用。<html></html>标签对是所有其他HTML元素的容器，在<html>和</html>标签之间是文档头和文档主体。文档头由<head>标签定义，文档主体由<body>标签定义。

3.<head>标签对

<head>和</head>构成HTML文档的头部分，在此标签对之间可以使用<title>、<style>、<base>、<link>、<meta>、<script>等辅助性标签，这些标签都是描述HTML文档头部信息的标签。除了<title>的元素内容会在文档的标题栏显示，<head></head>之间的内容是不会在浏览器页面中显示出来的。

要将网页的标题显示到浏览器的顶部，只要在<title></title>标签对之间加入要显示的文本即可。例如：

<title></title>标签对只能放在<head></head>标签对之间使用，并且只有全局属性。

元数据<meta>标签用来描述HTML文档的信息，元数据不会在浏览器页面中显示，但会被解析器解读。meta元素可用于指定网页的描述、关键词、作者、文档最后的修改时间及其他元数据。<meta>标签位于<head></head>区域内，它是单标签，没有结束标签。例如：

上面的代码段中用meta元素的name属性说明了元数据的关键字：Author，content属性定义了这个关键字的值：Patterson。如果将name的属性值设为keywords，可以向搜索引擎说明网页的关键词。

charset属性可以声明网页所使用的字符编码，告知浏览器选择正确的编码。例如：

其中gb2312是简体中文字符集。其他常用的字符集还有表示西欧字符集的ISO-8859-1和几乎覆盖所有字符和符号的UTF-8。在HTML 5中默认的字符编码是UTF-8，又称万国码，可以兼容世界上大多数语言。

4.<body>标签对

<body>标签对是HTML文档的主体部分，在<body>和</body>标签对之间可包含<p>、<img>等标签，它们所定义的文本、图像等将会在浏览器的框架内显示出来。<body>标签在</head>标签之后出现，结束标签</body>需在</html>前使用。

在设计网页时，通过在<body>标签对内使用段落、列表、表格等文字设计标签，可以在HTML文档中编排文字并设置文字格式，使页面更加结构化和条理化，便于浏览者快速获取所需信息。

1.2.5 文本设计

1.段落和换行

段落是通过<p>标签定义的。<p>表示段落开始，</p>表示段落结束，在此标签对之间添加的文本将按照段落的格式显示在浏览器页面上。

<p>标签可以使用align属性来设置段落的对齐方式。align属性值可设为：left（左对齐）、center（居中对齐）和right（右对齐），默认属性值为left。其语法格式为：

浏览器会自动地在段落的前后各添加一个空行。但不建议将<p>标签用于换行。当需要结束一行，并且不想开始新段落时，可以使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。它是单标签。

如下所示，用aligh属性设置段落居中对齐，并且每行文字都用<br>换行。

在页面中会呈现如图1-6所示的效果。

2.分级标题

一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<hn>，其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

<h1>…</h1> 第一级标题

<h2>…</h2> 第二级标题

<h3>…</h3> 第三级标题

<h4>…</h4> 第四级标题

<h5>…</h5> 第五级标题

<h6>…</h6> 第六级标题

下面示例中列出了各级标题。

在浏览器中的显示效果如图1-7所示。

图1-6 段落居中对齐

图1-7 分级标题

3.基本文字格式

在使用Word等文本编辑工具时，可以给字体设置“加粗”“斜体”“删除线”等格式。在Web页面中，也可以通过一些文本格式设置，呈现出这些效果。常见的文字格式化标签均为双标签，每个标签所设定的文字格式作用于开始和结束标签之间的文本。

文档资料

常见文字格式元素

来源：www.cmpedu.com

请访问网站链接或扫描二维码查看。

可以搭配使用体现文字的修改。例如：

在页面中会呈现如图1-8所示的效果。

这些文本格式标签是可以叠加使用的，如【例1-2】所示。

【例1-2】文本格式叠加示例。

代码的页面显示效果如图1-9所示。

图1-8 标记文字修改

图1-9 文本格式叠加代码显示效果

4.水平分割线

网页中可以用水平分割线从视觉上实现页面内容的分隔，使得页面的显示更加清晰。水平分割线用<hr>标签实现，<hr>为单标签。水平分隔线会横跨整个页面，并且随着浏览器窗口的宽度自动调整。水平分隔线的使用示例如下所示。

【例1-3】水平分割线示例。

代码的页面显示效果如图1-10所示。

5.字符实体

在网页上普通字符可以在HTML的<body>内添加，但某些特殊字符是不能直接使用的，比如在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示这些特殊字符，必须在HTML源代码中使用字符实体（Character Entities）。

文档资料

常见字符实体

来源：www.cmpedu.com

请访问网站链接或扫描二维码查看。

字符实体在HTML文档中的使用可参考如下代码。

其中，&nbsp表示空格，&lt表示“<”，以上字符实体的使用代码在浏览器中的显示效果如图1-11所示。

图1-10 水平分割线

图1-11 使用字符实体

1.2.6 列表

HTML的列表有三种形式：无序列表、有序列表和自定义列表。

1.无序列表

无序列表采用符号来标记每个列表。无序列表用<ul></ul>标签对实现，每个列表项用<li></li>标签对来表示。例如：

浏览器显示结果如图1-12所示。默认每个列表项使用粗体圆点进行标记，也可以使用CSS样式来设置标记符号。

2.有序列表

有序列表使用数字对每个列表项进行标记，数字用来表示顺序。有序列表用<ol></ol>标签对实现，每个列表项用<li></li>标签对来表示。例如：

浏览器显示结果如图1-13所示。默认每个列表项使用数字1，2，…进行标记，也可以使用CSS样式来设置标记序号。

图1-12 无序列表

图1-13 有序列表

3.自定义列表

自定义列表通常用于对某个条目进行定义、解释或说明。自定义列表用<dl></dl>标签对实现，每个条目从<dt>标签开始。条目的解释说明以<dd>标签开始。例如：

浏览器显示结果如图1-14所示。默认<dd>标签内的文字缩进显示。

4.列表嵌套

在一个列表中可以包含其他列表，称之为列表嵌套。列表嵌套可以体现多层次的内容。例如：

浏览器显示结果如图1-15所示。

图1-14 自定义列表

图1-15 列表嵌套

1.2.7 表格

在HTML文档中使用表格不但可以呈现数据之间的关系，还可以组织文本、图形等的布局。

1.表格的相关元素

HTML文档中的表格与Excel文档中的表格形式相似，可以由如下的元素来构建表格。

● table元素：用来定义表格。

● caption元素：用来定义表格的标题。

● tr元素：用来定义表格中的行。

● td元素：用来定义单元格。

● th元素：用来定义表头。

● thead元素：用来定义表格头。

● tbody元素：用来定义表格主体。

● tfoot元素：用来定义表格尾。

● colgroup元素：用于对表格中的列进行组合，以便对其进行格式化。

● col元素：规定了colgroup元素内部的每一列的列属性。通过使用<col>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

其中，table元素、tr元素、th元素和td元素是创建表格的基本元素。简单的表格由table元素，一个或多个tr元素，一个或多个th、td元素即可组成。例如下面的代码可生成三行两列的表格。

图1-16 简单表格页面

在浏览器中该表格显示效果如图1-16所示。

2.表格的结构

表格以标签<table>开始，以</table>结束。<table></table>是表格其他元素的容器。在HTML 5中，<table>标签仅支持border属性，用于规定表格各单元是否有边框。border属性值可设为1或其他数字数值。

类似于Word文档中表格通常会有标题，在HTML文档中可用<caption>标签定义表格标题，对表格的内容做一个简要的概括。<caption>标签必须放到<table>标签之后。每个表格只能定义一个标题或不设标题。

每个表格都有多行，每行又可以被分割为多个单元格。HTML用tr元素定义表格中的一行，<tr></tr>标签包含在<table></table>标签内，它是单元格的容器。

表格中的单元格通常有两种形式。一种是表头，用来对单元格数据的性质进行归类，例如成绩单中包括学生的学号、姓名、成绩，这些归类可排列在表格头部，作为表头。另一种是标准单元格，用来表示数据。

表头用th元素创建，<th></th>标签包含在<tr></tr>标签内。<th>元素中的文本通常呈现为粗体并且居中。

标准单元格用td元素创建，<td></td>标签包含在<tr></tr>标签内。<td>元素中的文本通常呈现为普通的左对齐文本。

th元素的scope属性用于规定当前th单元格是哪些单元格的表头。<th>和<td>元素都可以使用headers属性，<th>元素中的headers属性用于规定与当前表头单元格相关联的一个或多个表头单元格，<td>元素中的headers属性用于规定与当前标准单元格相关联的一个或多个表头单元格。

表格中有时存在跨越多行或者多列的单元格，<th>和<td>元素都可以使用与之相关的两个重要的属性。

● rowspan属性：设置单元格跨越的行数。

● colspan属性：设置单元格跨越的列数。

表格中的多行可以按照内容分开组织为表格头、表格主体和表格尾三个部分。用thead元素来定义表格头，tbody元素定义表格主体，tfoot元素定义表格尾。通过使用这些元素，使浏览器能保持表格头和表格尾不动，仅使表格主体滚动。当打印跨越多个页面的长表格时，表格的表头和表尾可被打印在表格的每张页面上。

<thead>、<tbody>和<tfoot>元素应结合起来使用，这三个元素必须包含在<table>元素内，<tfoot>必须定义在<tbody>元素前，这样在表格主体数据完全加载前就可以先呈现表格尾。每一个<thead>、<tbody>和<tfoot>元素至少包含一行，并且必须包含相同的列数。

下面的代码展示了如何运用这些元素建立一个有表头、主体、表尾，并且有跨行单元格的HTML表格。表格在浏览器中的呈现效果如图1-17所示。

【例1-4】表格综合示例。

图1-17 表格综合示例

1.2.8 语义元素

HTML语义化是指可使用合理的HTML元素来格式化文档内容。通俗地说，语义化就是对数据和信息进行处理，使得机器可以理解。

在浏览Web页面时，页面中的每一部分内容都包含一种含义，浏览者可以粗略地通过观察判断内容的语义。但对搜索引擎和Web浏览器来说，只能通过元素或标签来判断内容的语义。因此，要尽可能地使HTML文档语义化，以便于浏览器进行解析。同时，也更方便开发人员阅读代码文档，理清代码结构。

一个HTML语义元素的存在意味着被标记的内容有相应的结构化的意义。例如：

如上代码，<p>是语义元素，<span>是无语义元素。<p>元素和<span>元素显示的文字效果相同，区别在于<p>元素清楚地定义了其内容为段落，而<span>元素却没有特殊含义。

常见的无语义元素：<div>和<span>。

之前介绍过的<html>、<head>、<title>、<meta>、<body>、<p>、<br>、<h1>到<h6>、<ul>、<ol>、<li>、<dl>、<table>、<caption>、<tr>、<td>、<thead>、<tfoot>等对内容进行了定义的元素均为语义元素。

在HTML文档中使用语义元素有几大优势：

● HTML文档结构清晰，便于代码维护和团队开发。

● 便于其他设备（如屏幕阅读器、盲人阅读器、移动设备）解析，以语义的方式渲染网页。

● 有利于搜索引擎的优化。

● HTML文档语义化会减少代码量，加快页面加载。

HTML正在朝着更加健壮的语义化的HTML文本结构发展，在HTML 5中增加了更多的语义元素，使HTML文档的页面结构更加清晰。

文档资料

HTML 5新增语义元素

来源：www.cmpedu.com

请访问网站链接或扫描二维码查看。

1.2.9 网页基本框架

HTML 5新增了多个元素以使网页的结构和框架更加语义化，便于浏览器和搜索引擎更好地解析页面的内容和相互之间的关系，例如header、nav、aside、section、article、footer等元素。图1-18展示了这些元素对应的网页框架。

HTML用<body>定义了文档主体，在<body>内又可以使用这些元素将文档主体按照逻辑关系分隔成多个区块。

图1-18 网页框架及结构元素

1.文章块

文章块是页面中独立且结构完整的内容，比如论坛帖子、文章、评论等。<article>元素可以用来定义文章块。在<article>元素内可用<header>元素表示文章块的标题，文章块的附加信息如作者、版权信息等可用<footer>元素作为文章块的页脚。例如：

<article>元素内可以嵌套使用<article>，内层的内容在原则上需与外层内容相关联。例如，在文章末尾，访客留下的评论可以用<article>元素嵌套在文章块的<article>内。

2.内容块

与具有独立、完整的内容的<article>元素不同，<section>元素用于对页面中的内容划分区域或者对文章进行分段。一个<section>元素通常由内容和标题组成。例如：

在HTML 5之前的版本中，使用<div>和<span>元素来划分区域、布局网页，但<article>和<section>元素的出现并不意味着可以取代<div>元素。当一个元素需要定义为设置样式的容器或通过脚本定义行为时，应当使用<div>元素而不是<section>元素。

3.导航栏

导航栏一般位于页面的顶部或者正文的左右两侧，作用是从当前页面跳转到其他页面，也可以在当前页面的不同部分之间跳转。<nav>用来定义页面中的导航链接，一个页面中可以包含多个<nav>元素，为整个页面或页面的不同部分导航。例如：

图1-19 导航栏

在浏览器中显示效果如图1-19所示。

4.侧边栏

侧边栏表示当前页面或文章的附属信息，比如广告、与当前页面或文章内容相关的导航、友情链接等，<aside>元素用来定义侧边栏，常与列表元素一起使用。如果希望侧边栏也有导航作用，可以在<aside>元素内嵌套使用<nav>元素。例如：

5.标题栏和脚注栏

<header>元素通常作为整个页面或者页面中的一个文章块的标题。<header>元素内通常嵌套使用<h1>～<h6>元素，也可以包含<nav>、<form>等元素。

<footer>元素可以作为整个页面或者页面中的一个文章块、内容块的脚注。如果附加信息有联系人的信息或地址等，应该在<footer>元素内使用<address>元素。脚注默认显示为斜体。例如：