第一章 网页的构造块
一个网页主要包括文本内容、对其它文件的引用和标记。
语义化HTML：有含义的标记
HTML包含关于文档中内容的信息，这些信息称作标记，用以描述内容的含义，即语义。也就是说，HTML仅仅关心网页中要展示的内容，至于如何展示，那是CSS的事。
标记：元素、属性和值
非空元素：开始标记（start tag，元素名称和属性，如果有的话放在尖括号中）、内容和结束标记（end tag，一个斜杠后跟元素名称放在尖括号中）。
<label for="email">Email Address</label>
空元素：左尖括号、元素的名称和任何可能有的属性、一个可选的空格和一个可选的斜杠、右尖括号。
<image src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
网页的文本内容
浏览器呈现HTML时，会把多个空格或制表符压缩成单个空格，并把回车和换行符转换成单个空格，或者将他们一起忽略。
HTML过去只能使用ASCII字符；Unicode大大减轻了特殊字符问题的负担，UTF-8对页面进行编码，并用同样的编码保存HTML文件，已成为一种标准做法。
文件名
文件名使用小写字母（访问者输入方便），单词之间用短横线分割（搜索引擎更倾向于接受的方式），扩展名.html。
URL
URL包括模式（如：http、https、ftp、mailto、file）、服务器名称、路径、文件名。
“http://www.site.com/tofu/index.html”
若省略index.html也可以，因为路径中最后一个目录中的默认文件通常为index.html。在网站最顶层目录（通常称为根目录）中创建的默认页面（index.html）是网站的主页，当访问者只输入域名而没有指定路径信息（如 www.yourdomian.com）时，就会显示这个页面。
绝对URL和相对URL
| 文件名 | 绝对URL(可以再任何地方使用) | 相对URL（只能在you-are-here.html中使用） |
|---|---|---|
| index.html | http://www.site.com/about/ind… | index.html |
| data.html | http://www.site.com/about/inf… | info/data.html |
| image.png | http://www.site.com/img/image… | ../img/image.png |
| news.html | http://www.remote.com/press/n… | 无，请使用绝对URL |
一般来说，对指向站内网页的链接使用相对URL，对指向其他网站的链接使用绝对URL。
第二章 基本HTML结构
开始编写网页
一个空的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UFT-8">
<title></title>
</head>
<body>
</body>
</html>
页面标题
每个页面标题必须是间断的描述性的，而且是 唯一的。页面标题会被Google等搜索引擎采用，从而能够大致了解页面内容，并将页面标题作为搜索结果中的链接显示。所以要让每个页面的title是唯一的，从而提升搜索引擎结果排名，并让访问者有更好的体验。
HTML提供了6级标题（h1 ~ h6）用于创建页面信息的 层级关系，它们也构成了页面的大纲。浏览器会从h1到h6逐渐减小标题字号，不过要依据内容所处的层级关系选择标题级数，而不是你希望文字应该显示的大小。
HTML的文档大纲
...
<body>
<h1>Product User Guide</h1>
<h2>Setting it Up</h2>
<h2>Basic Features</h2>
<h3>Video Playback</h3>
<h2>Advanced Features</h2>
</body>
</html>
HTML通过h1~h6为页面定义一个基本的大纲（虽然目前浏览器还不能提供显示页面大纲的方法）。
HTML5提供了四个分块内容元素：article、aside、nav和section。下面是一个等价的大纲。
...
<body>
<article>
<h1>Product User Guide</h1>
<section>
<h1>Setting it Up</h1>
</section>
<section>
<h1>Basic Features</h1>
<section>
<h1>Video Playback</h1>
</section>
</section>
<section>
<h1>Advanced Features</h1>
</section>
</article>
</body>
</html>
推荐使用后者。
但是，还要对代码做一下调整。
...
<body>
<article>
<h1>Product User Guide</h1>
<section>
<h2>Setting it Up</h2>
</section>
<section>
<h2>Basic Features</h2>
<section>
<h3>Video Playback</h3>
</section>
</section>
<section>
<h2>Advanced Features</h2>
</section>
</article>
</body>
</html>
这样做的原因是： 迎合当前生态系统。在HTML5这样的新规范在最终确定之前，每天都在变化；而新版的的浏览器、屏幕阅读器和其他辅助技术也在推出，但它们的步调并不会完全同步，这意味着屏幕阅读和其他辅助技术还无法区分直接放在body里的h1和包含在article、aside、nav和section里的h1.因此，在生态系统赶上来之前，推荐最后一种做法。
对分级标题进行分组
<hgroup>
<h1>Giraffe Escapes from Zoo</h1>
<h2>Animals Worldwide Rejoice</h2>
</hgroup>
hgroup不能只包含一个标题，至少两个。
在一个hgroup中，只有 第一个 最高级别的标题会出现在大纲里。
普通页面构成
我们访问过的大部分网页都包含四个主要部件：带导航的页头、显示在主体内容区域的文章、显示次要信息的侧栏以及页脚。接下来将要讲到用header、nav、article、section、aside和footer定义页面结构，以及用以添加额外样式信息或实现其他目的的通用容器div，除了div，这些元素都是HTML5推出后才有的。
页眉header & 导航nav
...
<body>
<header>
<nav role="navigation">
<ul>
<li><a href="#gaudi">Barcelona's Architect</a></li>
<li lang="es"><a href="#sagradafamilia">La Sagrada Familia</a></li>
<li><a href="#park-guell">Park Guell</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h1>Fraquently Asked Questions</h1>
<nav>
<ul>
<li><a href="#answer1">What is your return policy?</a></l1>
<li><a href="#anser2">How do I find a location?</a></li>
</ul>
</nav>
</header>
<!-- heaer的链接指向这里-->
<article id="answer1">
<h2>What is your return policy?</h2>
<p>...[答案]...</p>
</article>
<article id="answer2">
<h2>How do I find a location?</h2>
<p>...[答案]...</p>
</article>
...
</article>
</body>
</html>
header
header元素标记页面中的一块包含介绍性或导航性内容的区域。
只在必要时使用header。大多数情况下，如果只有h1~h6或hgroup，没有其他需要与之组合的伴生内容，就没必要用header将它包起来。
header与h1~h6元素中的标题是不能互换的。它们都有各自的语义目的。
不能再header中嵌套footer元素或另一个header，也不能在footer或address中嵌套header。
nav
nav元素表示主导链接的区域。nav中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼有。
链接列表使用ul元素，如果是面包屑链接，则使用ol。
已经习惯使用ul或ol元素对链接进行结构化的情况下，nav并没有取代这种最佳实践，只不过在它们外围包上了一个nav。nav能帮助识别页面的主导航，并允许用户通过键盘直接跳至这些链接，提高页面的可访问性，提升访问者的体验。
不允许将nav嵌套在address中。
文章article & 区块section
article、section、nav和aside是HTML5中定义的四个分块内容元素，使用这些元素可以增强语义，在页面中并没有任何样式上的变化。
article定义：表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。它可以使一片论坛帖子，一篇杂志或报纸文章，一篇博客文章，一则用户提交的评论，一个交互式的小部件或小工具，或者任何其他独立的内容项。
section定义：代表文档或者应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
<article>
<h1>The Diversity of Papua New Guinea</h1>
<p>Papua New Guinea is home to more than 800 tribes and language ... </p>
<footer> <!--article 的页脚，而非页面的页脚-->
<p>Leandra Allen is a freelance journalist who earned her degree in anthtopology from the University of Copenhagen.</p>
<address>
You may reach her at <a herf="mailto:leandra@therunningwriter.com">leandra@therunningwriter.com</a>
</address>
</footer>
<section>
<h2>Reader Comments</h2>
<article>
<footer>travelgal wrote on <time datetime="2016-08-07"pubdate>August,07,2016</time>:</footer>
<p>Great article! I've always been curious about papua New Gunea.</p>
</article>
<article>
...
</article>
</section>
</article>
注意footer和address的使用。不能将article嵌套在address里面。
<article>
<h1 id="gaudi">Barcelona's Archite</h1>
<p>...</p>
<section>
<h2 id="sagrada-familia" lang="es">La Sagrada Familia</h2>
<p>...</p>
</section>
<section>
<h2 id="park-guell" lang="es">Park Guell</h2>
<p>...</p>
</section>
</article>
section不是一个像div一样的通用容器，因为section表达一定的含义，而div则没有任何语义上的含义。
article和section元素很容易混淆，因为它们的区别有时很细微。 如果你的内容是适合做聚合的一块独立的内容或一个小组件，就使用article；否则，在大多数情况下，使用section。
侧栏aside
如果一部分内容与页面主体内容不那么相关，但可以独立存在，可用aside元素表示。
...
<body>
<header> ... </header>
<article> ... </article>
<aside role="complementary">
<h1>Architectural Wonders of Barcelona</h1>
<p>...</p>
<ul>
<li lang="es">Arc de Triomf</li>
<li>The cathedral <span lang="es">(La seu)</span></li>
<li lang="es">Gran teatre del</li>
</ul>
<p>Gredit: <a href="http://www.barcelona.de/en/barcelona-architecture-buildings.html" re="external"><cite>Barcelona.de</cite></a>.</p>
</aside>
</body>
</html>
aside元素也可以写在article，或者在其中嵌套nav。浏览器在默认情况下并未对aside应用任何特殊样式，可以通过CSS控制其外观显示，大多将aside做为侧栏，也可以用在页面很多地方，包括抬升式引用、新闻站上列出相关文章的链接框、广告、nav元素组（如博客的友情链接）、Twitter源、商业站上相关产品列表。
HTML5不允许将aside嵌套在address内。
页脚footer
footer代表嵌套在它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。页脚通常包含关于它所在区块的信息，如指向相关文档的链接、版权信息、作者及其他类似条目。
不允许在footer里嵌套header或另一个footer，也不允许将footer嵌套在header或address里。
<body>
<header> ... </header>
<article> ... </article>
<aside> ... </aside>
<footer>
<p><small>© Copyright 2016 </small></p>
</footer>
</body>
通用容器div
不同于article、section、aside、nav，div是一个没有任何语义的容器。用div可以为其添加CSS样式或JavaScript效果。在HTML中，div是块级无语容器，而与之对应的是短语的无语容器span。
使用ARIA提升可访问性
WAI-ARIA（Web Accessibility Initiative’s Accessible Rich Internet Applications， 无障碍网页倡议之可访问的富互联网应用，也简称ARIA）是一种技术规范。在HTML提供语义功能之前，它会使用属性来填补一些语义上的空白。
地标角色（landmark role）是它众多特性中的一种，可以帮助用户识别区域，包括application、banner、complementary、contentInfo、form、main、navigation和search。
...
<body>
<!-- 开始页面-->
<div id="container">
<header role="banner">
...
<nav role="navigation">
... [包含连接的url]...
</nav>
</header>
<!-- 应用CSS后的第一栏-->
<div id="content" role="main">
<article>
...
</article>
<article>
...
</article>
...[所需要的其他区块]...
</div>
<!--第一栏结束-->
<!--应用CSS后的第二栏-->
<div id="sidebar">
<aside role="compelementary">
...
</aside>
<aside role="compelementary">
...
</aside>
...[所需要的其他区块]...
</div>
<!--结束第二栏-->
<footer role="contentInfo">
...
</footer>
</div>
<!--结束页面容器-->
</body>
</html>
