你将理解一个HTML网页的完整结构，并了解如何让搜索引擎更好的找到你的网页。
目录
显示效果如下图所示：
相关知识
在前两关中，我们学习了基本的HTML网页相关概念和属性。你也已经动手写过最简单的HTML网页。
接下来，我们开始学习一个简单完整网页结构。它包含的主要元素，如下图所示：
我们来看如下示例：
<!DOCTYPE HTML>
<`HTML`>
<head>
<meta charset="utf-8">
<title>自我简介</title>
<meta name="description" content="张三的自我简介网站">
<meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
</head>
<body>
<h1 align="center">自我简介</h1>
<h2>简介</h2>
<p>在这里简单的描述一下你自己吧。</p>
</body>
</`HTML`>
显示效果如图：
从显示效果来看，该网页似乎与我们之前所学网页没有什么不同。但这个网页更容易被搜索引擎发现。
下面，我们将结合代码为大家讲解该网页完整结构和为什么更容易被搜索引擎发现。
声明文档格式：DOCTYPE（doc type 方法标准）
首先，第一行：
声明了该文档是HTML 5的文档。
因为在Web世界里，有很多各式各样的文档类型，所以我们首先需要做的便是声明该文档是HTML，以便浏览器正确显示网页。
如果你想声明为HTML 4.01的文档可以这样写：
<!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN"
"http://www.w3.org/TR/`HTML`4/loose.dtd">
因为本实训以HTML 5作为标准，所以统一使用第一种方式。
提示：
- 为什么与HTML4.01相比HTML 5声明中没有数字"5"呢？ 因为W3C认为之前的文档声明太过复杂，正好借此机会移除版本号，这样声明就更加简化；
- 在背景知识中，你能够了解更多HTML版本的历史信息。
根元素：HTML 元素
然后，元素告知浏览器其本身是一个HTML文档。
除去第一行外，其余的页面内容都应该包含在元素中，所以它也被称为根元素。
头元素：head 元素
与属性会给元素增添附加信息一样，head元素能为整个网页增添更多信息。可以用在head中的标签有, , ,
网页标题元素：title
本例网页主要内容是“自我简介”，所以title也设置为“自我简介”。
title元素的内容即网页标题，它是一个网页必需的元素之一。
<title>标题内容</title>
title内容显示位置：
元信息元素：meta
meta元素提供元数据信息，主要包括：
- 页面编码；
- 网页标题；
- 网页描述；
- 网页关键词。
这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。
编码格式：charset
<meta charset="utf-8">
该行定义了浏览器解析网页文档时使用的编码方式。通常，我们使用utf-8编码以支持各国语言。
描述：description
描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。
通常description的写法如下：
<meta name="description" content="一句话描述网页内容">
关键词：keywords
同理，关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。
通常keywords的写法如下：
<meta name="keywords" content="关键词一,关键词二,关键词三">
主体元素：body 元素
元素是一个文档的主体，文档内容都包含在元素中，最终呈现在网页上。带超链接的网页
超链接是网页互连的核心，网页之间通过超链接连接在一起。
我们使用 标签定义超链接。
一个简单的例子如下：
<a href="https://baidu.com">百度搜索</a>
点击a元素内容后打开百度搜索网页。
其中，href属性指定了超链接的目标，本例中即跳转到百度。
href 属性
href 属性是超链接最重要的属性，它用于指定超链接目标的 URL。
典型的超链接格式如下：
<a href="URL">
其中，目标URL有三种类型：
- 锚
URL (anchor URL)：指向同一页面内某一位置； - 相对
URL (relative URL)：指向同一网站的不同文件； - 绝对
URL (absolute URL)：指向另一个网站。
提示:
- URL：Uniform Resource Locator，统一资源定位器；
- 为什么叫作锚URL呢？
锚的含义取于船上的锚，船把锚沉在水底后，如果船随水飘移了，只要一拉锚的锁链就会回到抛锚的位置。同样的，在html中点锚链接就能回到指定位置。
这三种链接实际效果是如何的呢？下面让我们通过三组实例来加深理解。
锚 URL 实例：创建网页内导航
<body>
<h1>HTML 入门</h1>
<h2>本页目录</h2>
<ul>
<li><a href="#toc1">简介</a></li>
<li><a href="#toc2">第1关</a></li>
<li><a href="#toc3">第2关</a></li>
</ul>
<h2 id="toc1">简介</h2>
<p>HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
<h2 id="toc2">第1关</h2>
<p>初识HTML：简单的Hello World网页</p>
<h2 id="toc3">第2关</h2>
<p>HTML链接：带超链接的网页</p>
<hr>
<p><a href="#">回到顶部</a></p>
</body>
其中第5行：
<a href="#toc1">简介</a>
定义了一个指向#toc1目标的锚链接。所以，点击之后会定位到第10行：
<h2 id="toc1">简介</h2>
id属性值为toc1的位置。
所以，完整的一对页面内导航的写法为：
<a href="#id值内容">简介</a>
<开始标签 id="id值内容">内容<结束标签>
此外，当href="#"时，默认回到网页顶部位置。
相对 URL 实例：跳转到同一网站的另一个网页
<body>
<h2>主页</h2>
<h3>网站导航：</h3>
<ul>
<li><a href="./home.html">主页</a></li>
<li><a href="./blog.html">博客</a></li>
<li><a href="./project.html">项目</a></li>
<li><a href="./about.html">关于我</a></li>
</ul>
</body>
在上述例子中，因为home.html、blog.html、project.html和about.html均在同一文件夹中；所以第6行：
<a href="./blog.html">博客</a>
./blog.html链接到了同一文件夹中的blog.html页面。
我们说的相对URL是相对于什么呢？
是相对于当前网页home.html路径的URL。.代表当前路径，所以./blog.html代表当前路径下的blog.html网页。
<body>
<p>你可以使用搜索引擎，例如
<a href="https://www.google.cn" title="google搜索">Google</a>、
<a href="https://www.baidu.com" title="Baidu搜索">Baidu</a>、
<a href="https://www.bing.com" title="bing搜索">Bing</a>等，搜索网络信息。</p>
</body>
绝对URL即指定了完整的网页路径。
发送电子邮件
我们还可以将href属性值设置为mailto:邮箱地址，这样做可以调起邮箱应用，发送邮件到对应地址。
<p>发送邮件到：<a href="mailto:someone@email.com">someone</a>
target 属性：在何处打开链接
target属性规定了在何处打开超链接。
一个常用的例子如下：
<p><a href="https://www.baidu.com" target="_Blank">baidu</a></p>
其中，我们指定了 target="_blank"，所以在点击之后，将在新标签中打开链接。
分级标题
HTML提供了六级标题用于创建网页信息的层级关系。<h1> 定义重要等级最高的标题，之后<h2>到<h6>层级依次递减。
<body>
<h1>书籍标题</h1>
<h2>第一章</h2>
<h3>第一节</h3>
<h4>重点 1</h4>
<h5>1.1 标题</h5>
<h6>1.1.1 标题</h6>
</body>
- 注意请不要根据标题字体大小来选择级别，而应该根据内容。例如一本书的第一章是第二层级，但是有一部分人认为
<h2>字体太大，从而选择<h3>作为层级标题，这样做是不正确的。 段落与换行
如大家在之前的例子中看到的，我们使用p元素定义段落。p元素是HTML中最常用的元素之一。
例 1.<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>例 2.
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>例1和例2唯一的不同在于，例2中我们在段落内容中换行了。那么，在实际显示时，会显示换行吗？
大家可以看到，虽然我们在段落内容中换行了，但是显示时是不会换行的。那么如果我们想要在一个段落中换行要怎么做呢？我们可以使用
<br>标签。举例如下：
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。<br> 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>
列表
生活中我们经常使用列表，例如购物清单、待办事项。在HTML中，我们可以创建无序列表、有序列表和描述列表，而且一个列表中可以嵌套另一个列表。
通常，列表都是由父元素和子元素构成的，父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。
三种列表类型组成元素如下：
类型 父元素 子元素 有序列表 ol li 无序列表 ul li 描述列表 dl dt， dd 提示：
- ol: order list；
- ul: unorder list。
有序列表实例
如果列表顺序是不能随意交换时，我们使用有序列表。例如
<body> <p>健身房基本锻炼步骤</p> <ol> <li>热身</li> <li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li> <li>有氧运动(包括慢跑、单车、游泳、登山机等)</li> <li>拉伸、放松</li> </ol> </body>
无序列表实例
如果列表顺序不重要时，我们使用无序列表。例如：
<body> <p>购物清单</p> <ul> <li>酸奶</li> <li>苹果</li> <li>鸡胸肉</li> <li>白炽灯泡</li> </ul> </body>
描述列表实例
<body> <p>HTML里程碑</p> <dl> <dt>1995年11月24日</dt> <dd>HTML2.0发布，对应的IETF文档为RFC 1866</dd> <dt>1997年1月14日</dt> <dd>HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。 <dt>1997年12月18日</dt> <dd>HTML 4.0发布。</dd> <dt>2014年10月28日</dt> <dd>HTML5 发布。</dd> <dt>2016年11月1日</dt> <dd>HTML 5.1发布。</dd> </dl> </body>
文本格式化
一个网页中通常包含了文本信息，对于不同的文本类型，我们可以选择合适的 HTML 语义化元素进行标记。例如，em 元素用于标记强调部分内容，small 元素用于注解、署名等类型的文本。
常用的元素如下：
元素 作用 例 strong 表示内容的重要性 - em 表示内容的着重点 - mark 表示内容高亮显示 对搜索结果页面或文章中的搜索词进行突出显示 small 表示细则一类的旁注 通常包括免责声明、 注意事项、法律限制、版权信息等 b 希望读者注意的文字 如文档摘要里的关键词、评论中的产品名、文章导语等 i 表示不同于其他文字的文字，具有不同的语态或语气 如分类名称、技术术语、翻译的散文等 sub 定义下标 常见的下标包括化学符号等 sup 定义上标 常见的上标包括商标符号、指数和脚注编号等 <body> <h1>论语学而篇第一</h1> <p><small> <b>作者：</b><abbr title="名丘，字仲尼">孔子<sup><a href="#">1</a></sup></abbr>（<time>前551年9月28日－前479年4月11日</time>） </small></p> <h2>本篇引语</h2> <p>《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是 <strong>「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等</strong>道德范畴。</p> <h2>原文</h2> <p>子曰：「<mark>学而时习之，不亦说乎？</mark>有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p> </body>效果：
论语学而篇第一
作者：孔子1>（）
本篇引语
《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是 「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。
原文
子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」
引用
HTML中也有用于标记引用内容的元素——
q和blockquote元素:q元素用于短的引用，如句子里面的引用；blockquote元素表示单独存在的引用，它默认显示在新的一行。
<body> <h1>W3C</h1> <p> <dfn>W3C</dfn> (World Wide Web) 万维网联盟创建于1994年。它是 <q>Web技术领域最具权威和影响力的国际中立性技术标准机构</q>。 </p> <p>其官方定义为：</p> <blockquote cite="https://www.w3.org/"> The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. </blockquote> </body>效果：
W3C
W3C (World Wide Web) 万维网联盟创建于1994年。它是
Web技术领域最具权威和影响力的国际中立性技术标准机构
。其官方定义为：
The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
日常消费账单表格展示网页
在日常生活中财务报表、日历等，都常使用表格展示。通常，表格数据都由行和列组成。最基本的表格
在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和数据单元格(td)。
一个最基本的表格如下：
<body> <table> <!-- 第一行 --> <tr> <td>第一行第一个单元格数据</td> <td>第一行第二个单元格数据</td> </tr> <!-- 第二行 --> <tr> <td>第二行第一个单元格数据</td> <td>第二行第二个单元格数据</td> </tr> </table> </body>效果：
1 2 第一行第一个单元格数据 第一行第二个单元格数据 第二行第一个单元格数据 第二行第二个单元格数据
这是一个2行2列的表格，可以看到<table>元素中包含了两行，即两个元素；每行有两列，即每个中包含两个<td>元素。
提示：
-
tr: table row；
-
th: table head；
-
td: table data。
带边框的表格
在第一个例子中，表格没有边框，看起来不太明显。那么，如何设置带边框的表格呢？
我们可以指定
元素的border属性值。<table border="1"> </table>效果：
1 2 第一行第一个单元格数据 第一行第二个单元格数据 第二行第一个单元格数据 第二行第二个单元格数据
数字越大颜色越深
但是，这样的边框样式不太好看，我们可以通过编写CSS修改边框样式。在之后的课程中将会学习。
其他属性：
我们设定了
<table>元素的width属性，改变了表格的宽度；我们使用
<caption>元素设置了表格的标题；<caption>通讯录</caption>数据第一行
<tr>元素中，使用<th>元素指定了表头。本例中有三列信息，所以包含了三个<th>元素；并且，我们设置了
<th>元素的属性scope的值为col。
scope 属性
<th>元素的scope属性用于定义表头数据与单元数据关联的方法。本例中值为col，表示规定的是列的表头。其他的一些值含义如下：
值 含义 col 单元格是列的表头 row 规定单元格是行的表头 colgroup 单元格是列组的表头 rowgroup 单元格是行组的表头 列组和行组的概念将在
单元格跨越多行或多列的表格小节中讲述和使用。结构更清晰的表格
为了使表格的整体结构更加的清晰，我们还能够使用
<thead>、<tbody>和<tfoot>元素来定义表格。举例如下：
<body><table width="400"><caption>运动会跑步成绩</caption><thead><!-- 表格头部 --><tr><th scope="col">长度</th><th scope="col">李雯</th><th scope="col">王谦</th><th scope="col">周佳</th></tr></thead><tbody><!-- 表格主体 --><tr><th scope="row">100米</th><td>14s</td><td>16s</td><td>13s</td></tr><tr><th scope="row">200米</th><td>26s</td><td>23s</td><td>25s</td></tr><tr><th scope="row">400米</th><td>70s</td><td>73s</td><td>69s</td></tr></tbody><tfoot><!-- 表格尾部 --><tr><th scope="row">总用时</th><td>110s</td><td>112s</td><td>107s</td></tr></tfoot></table>
显示效果如图：
顾名思义，
<thead>元素标记表格第6行到第10行为头部；<tbody>元素包围了第15行到第32行的所有数据行；最后，<tfoot>元素标记表格的尾部。此例中，我们将列值的总和行作为表格的尾部。通常，我们都会建议大家使用这三种元素来定义表格，因为这样做表格的总体结构更为清晰。
单元格跨越多行或多列的表格
我们经常会看到这样的表格：
其中的单元格，跨越了多行或者多列。在
HTML中要如何实现呢？我们可以设定
colspan和rowspan属性让<th>或<td>单元格跨越多行或多列。上述表格代码如下：
<body><table><caption>彩排安排</caption><thead><!-- 表格头部 --><tr><th scope="rowgroup">时间</th><th scope="col">周一</th><th scope="col">周二</th><th scope="col">周三</th></tr></thead><tbody><!-- 表格主体 --><tr><th scope="row">上午8点</th><td>开场舞</td><td colspan="2">歌曲串烧</td></tr><tr><th scope="row">上午9点</th><td>小品</td><td>相声</td><td rowspan="2">大型魔术</td></tr><tr><th scope="row">上午10点</th><td>杂艺表演</td><td>乐队歌曲</td></tr></tbody></table></body>
在此例中，表格头部第7行，
scope="rowgroup"指定了该单元格是行组的表头。表格中，第3行的第3列和第4列为合并单元格，我们设置第18行colspan="2"，表示该单元格跨越两列；同理，第24行设置rowspan="2"表示该单元格跨越两行。所以，
要设置单元格跨越多行，只需设置属性
rowspan="n"； 设置单元格跨越多列，只需设置属性colspan="n"。n是单元格要跨越的行数或列数。