文章目录
第3章 基本HTML结构
3.1 开始编写网页
1.编写HTML5页面开头的步骤
1.输入<!DOCTYPE html>，声明页面为HTML5文档
2.输入<html lang=“language-code”>
language-code：页面内容默认语言的代码<html lang="es">：表示西班牙语<html lang="fr">：表示法语<html lang="en-US">：表示美国英语<html lang="en-GB">：表示英国英语
3.输入<head>，开始网页文档的头部
4.输入<meta charset=“UTF-8” />
5.输入<title></title>，包含页面的标题
6.输入</head>，结束页面文档的头部
7.输入<body></body>
8.输入</html>，结束页面
在
head部分，通常要页面标题，方便SEO，加载样式表、JavaScript文件 （不过，出于性能考虑，多数时候在页面底部</body>标签结束前加载JavaScript会是更好的选择）
搜索引擎可能会根据
lang属性指定的语言区分搜索结果，从而仅显示与搜索词语言相同的页面。屏幕阅读器也可能通过指定的语言调整其发音。
3.2 创建页面标题
页面标题通常是Google等搜索引擎的搜索结果中链接的文字，它也是判断搜索结果中页面相关度的重要因素。
总之，要让每个页面的title是唯一的，从而提升搜索引擎结果排名，并让访问者获得更好的体验。
提示 title元素是必需的
提示 title中不能包含任何格式、HTML、图像或指向其他页面的链接。
作为一种最佳实践，选择能简要概括文档内容的文字作为title文字。这些文字既要对屏幕阅读器用户友好，又要有利于搜索引擎排名。
其次，将网站名称放入title（这不是必需的）。常见的做法是将网站名称放在title的开头，不过将页面特有的文字放在开头更好。
3.3 创建分级标题
- HTML提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5或h6元素对各级标题进行标记
1.分级标题的重要性
对搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是等级最高的h1（这并不是说页面中的h1越多越好，搜索引擎还是足够聪明的）。
2.使用标题对网页进行组织的步骤
提示 创建分级标题时，要避免跳过某些级别，如从h3直接跳到h5。不过，允许从低级别跳到高级别的标题。
提示 不要使用h1～h6标记副标题、标语以及无法成为独立标题的子标题。例如，假设有一篇新闻报道，它的主标题后面紧跟着一个副标题，这时，这个副标题就应该使用段落
3.5 创建页面
- 如果页面中有一块包含一组介绍性或导航性内容的区域，应该用
header元素对其进行标记。
提示 只在必要时使用header。大多数情况下，如果使用h1～h6能满足需求，就没有必要用header将它包起来。
扫描二维码关注公众号，回复： 9521026 查看本文章
header与h1～h6元素中的标题（参见3.3节）是不能互换的。它们都有各自的语义目的。
不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。
3.6 标记导航
nav可以明确表示主导航连接的区域（集合链接群）。
<nav>
<ul>
<li><a href="#guadi">Barcelona's Architect</a></li>
<li lang="es"><a href="$sagrada- familia">La Sagrada Família</a></li>
<li><a href="#park-guell">Park Guell</a></li>
</ul>
</nav>
使用
ul或ol元素对链接进行结构化。在HTML5中，nav并没有取代这种最佳实践
HTML5不允许将nav嵌套在
address元素中。
HTML5规范不推荐对辅助性的页脚链接（如“使用条款”、“隐私政策”等）使用
nav，这不难理解。不过，有时页脚会再次显示顶级全局导航，或者包含“商店位置”、“招聘信息”等重要链接。在大多数情况下，我们推荐将页脚中的此类链接放入nav中。
如何判断是否对一组链接使用nav呢？归根结底，这取决于内容的组织情况。至少，应该将网站全局导航（让用户可以跳至网站各个主要部分的导航）标记为
nav。这种nav通常（但并不总是）出现在页面级的header元素里面
3.7 标记页面的主要区域
- 一个页面只有一个部分代表其主要内容。可以将这样的内容包在
main元素中，该元素在一个页面仅使用一次
<main role="main">
<article>
<h1 id="gaudi">Barcelona's Architect </h1>
<p>Antoni Gaudí's incredible buildings bring millions ...</p>
... [页面主要区域的其他内容] ...
</article>
</main>
3.8 创建文章
- HTML5对
article的定义如下：
article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。
提示 可以将
article嵌套在另一个article中，只要里面的article与外面的article是部分与整体的关系。
提示 一个页面可以有多个
article元素（也可以没有）。例如，博客的主页通常包括几篇最新的文章，其中每一篇都是其自身的article。
提示 一个
article可以包含一个或多个section元素。在article里包含独立的h1～h6也是很好的做法
3.9 定义区块
section定义：section元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。
section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
- 区别
section和div：从语义上讲，section标记的是页面中的特定区域，而div则不传达任何语义。
3.10 指定附注栏
- 指定附注栏的步骤
- 输入
<aside>。 - 输入附注栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
- 输入
</aside>。
- 输入
提示 在HTML中，应该将附注栏内容放在main的内容之后。出于SEO和可访问性的目的，最好将重要的内容放在前面。可以通过CSS改变它们在浏览器中的显示顺序。
提示 对于与内容有关的图像（如图表、图形或带有说明文字的插图），使用figure（参见第4章）而非aside。
提示 HTML5不允许将aside嵌套在address元素内。
3.11 创建页脚
- 当你想到页脚的时候，你大概想的是页面底部的页脚（通常包括版权声明，可能还包括指向隐私政策页面的链接以及其他类似的内容）。HTML5的
footer元素可以用在这样的地方，但它同header一样，还可以用在其他的地方。
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚
提示 页脚并不一定要位于所在元素的末尾，不过通常是这样的。
提示 不能在footer里嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。
注意只有页面级页脚有role=“contentinfo”
3.12 创建通用容器
div（来自division）：一个完全没有任何语义、含义的通用容器。
div并不是唯一没有语义价值的元素。span是与div对应的一个元素：div是块级内容的无语义容器，而span（写作<span>这里是内容</span>）则是短语内容的无语义容器，例如它可以放在段落元素p之内
div应该作为最后一个备用容器，因为它没有任何语义价值。大多数时候，使用header、footer、main（仅使用一次）、article、section、aside甚至nav代替div会更合适。但是，如果语义上不合适，也不必为了刻意避免使用div而使用上述元素。有用得上div的地方，只是需要限制其使用。
3.14 为元素指定类别或ID名称
- 可以给HTML元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别
3.15 为元素添加title属性
- 添加
title属性的好处- 提升无障碍阅读
- 鼠标移到某元素时会显示其title属性的值
<body>
<p title="Nice to meet you!">Hello World!</p>
</body>
3.16 添加注释
- 在HTML页面中添加注释的步骤
- 在HTML文档中希望插入注释的位置，输入
<!-- - 输入注释。
- 输入
-->结束注释文本。
- 在HTML文档中希望插入注释的位置，输入
提示 注释不能嵌套在其他注释里。
