【HTML5与CSS3基础教程】 第3章 基本HTML结构

第3章 基本HTML结构

语言标签查询工具：rishida.net/utils/subtags/ 传送门

创建页面标题
title元素是必须的，title中不能包含任何格式、HTML、图像或指向其他页面的链接。好的页面标题有助于提高其在搜索引擎中的排名。

创建分级标题
h1, h2, h3, h4, h5, h6
对于副标题（无法成为独立标题的子标题），使用段落标签，并为其加上subhead类是一个不错的方法。

创建页眉
如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。

标记导航
nav中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼而有之。无论是哪种情况，应该仅对文档中重要的链接群使用nav。

主要内容
main元素包围着代表页面主题的内容。最好在main开始标签中加上role="main"。不能将main放置在article、aside、footer、header或nav元素中。

创建文章
article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可以独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。
可以将article嵌套在另一个article中，只要里面的article与外面的article是部分与整体的关系。
一个页面可以有多个article元素。例如，博客主页的几篇文章。

定义区块
section元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。
section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。
从语义上讲，section标记的是页面中的特定区域，而div则不传达任何语义。
如果只是出于添加样式的原因要对内容添加一个容器，应使用div而不是section。
section和article的区别在于，section在本质上组织性和结构性更强，而article代表的是自包含的容器。

指定附注栏
一部分内容与主题内容相关性没有那么强，但可以独立存在。可以使用aside，使用它的例子还包括重要引述、侧栏等等。

创建页脚
footer元素代表嵌套在它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚。
如果一个footer包着它所在的区块的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。
页脚通常包含关于它所在区块的信息，如指向相关文档的链接、版权信息、作者及其他类似条目。
页面级的footer通常包含版权信息以及不属于页面全局导航（位于header里）的一些链接。

创建通用容器
div是一个没有任何语义含义的容器。span是与div对应的一个元素。div是块级内容的无语义容器，而span则是短语内容的无语义容器。

使用ARIA改善可访问性
ARIA（无障碍网页倡议-无障碍的富互联网应用）

地标角色	简述
role="banner"（横幅）	通常显示在页面的顶端，header元素，只用1次
role="navigation"（导航）	导航性元素，每个nav元素建议添加
role="main"（主体）	主要内容，main元素，仅使用1次
role="complementary"（补充性内容）	主体内容补充的支撑部分，aside或div元素，不要过度使用
role="contentinfo"（内容信息）	版权声明和隐私权声明的链接等，footer元素，仅使用1次

为元素指定类别或ID名称
尽管并非必须，但是可以给HTML元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别。可以对具有给定id或class名称的元素添加样式，或者创建指向具有特定id的元素的链接，还可以使用JavaScript获取id和class属性，从而对元素添加特定的行为。
添加id在开始标签中输入id="name"，指定类别在开始标签中输入class="name another-name"，多个类别用空格隔开
一个文档中每个id都必须是唯一的，而class名称可以分配各任意数量的元素，并且一个元素可以有一个以上的class
在class和id名称中，通常使用短横线分隔多个单词，例如class="footer-page"

为元素添加title属性
可以使用title属性为网站上任意部分加上提示标签。还可提升无障碍访问功能。
添加提示标签，在开始标签中输入title="lable"

添加注释
实例不解释：<!-- 注释部分 -->
对于私人化的注释要格外小心。