零基础建站培训介绍

当前位置:

HTML5大纲及网页编排示例

Html5较之前的HTML4,唯一的方式是采用<h1> ~ <h6>元素来创建大纲。因为正常习惯下,<h1> ~ <h6>表示了从第一级到第六级的层级递减标题,而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲,不单单对于搜索引擎的优化,更是为借助于屏幕阅读器浏览器网页的盲人(或弱视力)用户提供了巨大的帮助。

20

在HTML5中存在着一个大纲算法,它允许用户从一个Web页面生成一个信息结构目录,以便用户快速浏览网页,定位所需内容。

在解析HTML5文档时,浏览器不会将<h1>、<h2>和<ul>视作兄弟节点,<h1>比<h2>拥有更高的级别。

 

为了更好地表达HTML的文档结构、文档语义,HTML5新增了大量标签。这些标签包括section、article、nav、aside等,在上面大牛的博客中,他把这些标签分为了三类:

1)无作为标签,例如div、ul等

2)开始一个新的节点的标签,section、article、nav、aside、<h1>~<h6>。

3)可以成为一个根节点的标签  。《html5用户指南》中这样解释“某些元素(<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>)叫做成节的跟,并且它们可以拥有自己的大纲。但是,这些元素中的节和标题对于它们的祖先的大纲没有任何影响。”

 

如何查看这个Web页面的大纲?

这里有一个在线工具,复制HTML源代码粘贴到工具的文本框中,单击OutLine this!按钮,即可在浏览器中显示网页的信息结构目录。

HTML5分析工具:https://gsnedders.html5.org/outliner/

基于以上讲解过的知识点,下面来看看HTML5应该怎样编排网页的内容。代码清单3-31为一个标准博客网页的示例,这个示例中有一个标准博客网页应具备的基本要素,只缺少为了使用样式而补充添加的div元素。

网页编排示例

<!DOCTYPE html>
<head>
<title>网页编排示例</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 网页标题 -->
<header>
<h1>网页标题</h1>
<!-- 网站导航链接 -->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="help.html">帮助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文 -->
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<!--文章评论 -->
<section>
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>
<!-- 版权信息 -->
<footer>
<small>版权所有:陆凌牛</small>
</footer>
</body>

在这个示例中,使用了嵌套article元素的方式,将关于评论的article元素嵌套在了主article元素中。在HTML 5中,推荐使用这种嵌套article元素的方式。

与本文相关文章

  1. 网页挂马方式原理揭密(iframe挂马,script 挂马,图片伪装挂马)
  2. 使用CSS伪类:before, :after在网页插入内容
  3. 网站使用 iframe 引用优酷和土豆和腾讯视频,支持 HTML5 手机播放
  4. css实现网页调用服务器端字体@font-face属性
  5. wordpress网站如何正确添加canonical标签
  6. HTML5 video 播放视频不显示 (无效源)原因和解决方法
  7. 移动端html5 meta标签的作用
  8. 网页设计常用到的九大JavaScript脚本
  9. HTML5新增标签及含义