HTML5 新增语义化标签解析和使用案例.pdfVIP

HTML5 新增语义化标签解析及用法 HTML5标准添加的新元素当中，用于标识常见页面结构的包括：section、header、footer、 nav、article和mark等。 1.Header header元素定义文档的页面组合，通常是一些引导和导航信息。而定义中说明heaer标签 内通常包含section的头部信息，如h1~h6或hgroup等，但这不是必需的。同时也可以包含 列表、搜索框或主题相关的Logo。如下代码所示： 实际上，这是一段带有含义的HTML标签，用来表示头部信息，里面还有h1和 p 的内容， 而且与以下的页面代码一致的。 2.Footer footer元素定义文档或章节的末尾部分，通常包含一些章节的基本信息，如作者信息、相 关链接及版权信息。而联系信息相关的内容一般会配合adress标签。例如以下代码 需要注意的是，一个HTML页面上可以允许有一个或多个header和footer。 在footer标签内，不仅可以包含p标签等相关内容，同时也可以插入比如nav、ul、div等其 他元素。因此需要根据实际情况而布局页面。从上述代码可以看出，虽然footer标签的内容 插入了部分版权信息及相关的联系信息，但并不是带含义的内容，下面将介绍nav元素，它 可以帮助此部分含有语义内容。 3.Nav nav元素定义为用来构建导航，显示导航链接。nav标签的主要作用是放入一些当前页面 的主要导航链接，例如在页脚显示一个站点的导航链接。我们将刚才footer标签的实例代码 稍微更改一下，以表达导航语义的性质，如下代码所示 代码改写后，footer页脚内容在页面中已经表达出基本的含义，这就是一个页脚的导航链接 列表。当然，nav标签并不仅限于使用在footer 中，其具体使用的地方并没有严格的要求。 一般情况下，作为导航标签，在页面中任意地方都可以使用nav元素。但是为了更好地对页 面进行规划和被搜索引擎收录，建议在真正含有导航功能意义的地方，才使用nav元素标签。 4.Aside aside元素定义一个页面的区域，用来表示包含和页面相关的主要内容，其作用主要是装 载非正文类的内容，例如广告、侧边栏等。在传统的从wordpress博客模板中，其基本的布 局主要是两栏或三栏布局，如图2-1所示。 其中图2-1 所示的布局方式属于典型的博客页面布局，该布局的右侧边栏部分，即div class=aside/div区域，从页面的功能分布来看，一般作为页面主要内容的额外信息部分， 可以归结为非正文类的内容。基于这样的功能区域，我们可以使用aside元素标签作为该页 面区域，用来表示非正文类内容。同时，divclass=banner区域、divclass=footer区 域及divclass=nav区域都可以调整成前面提到的几个HTML5元素标签，如图2-2所示。 5.Article 在HTML5规范中，article元素表示文档、页面，用来显示一块独立的文章内容，如一则网 站新闻、一篇博客文章等。artile标签是可以相互嵌套的。例如如下代码 我们来解释一下上述代码。代码中使用article表示一篇文章主题内容元素，其内主要由三部 分组成。其中header部分主要表示文章的头部信息，一般包含标题、时间、作者等信息， 代码中使用h1元素表示文章的标题。第二部分目前使用p元素表示文章的主体内容。第三 部分是footer，该部分一般包含文章标签等相关信息。 6.Section 在HTML5规范中，section元素定义为文档中的节。比如章节、页眉、页脚或文档中的其他 部分。例如如下代码： 7.hgrou HTML5将hgroup标签定义为对网页或区段的标题元素进行组合，通常使用多级别的h1~h6 标签节点进行分组，例如副标题、标签行等。例如： 代码中，我们在header 内使用hgroup元素表示一组信息。hgroup 内共有h1和h2两部分元 素内容，它