首页 技术 正文
技术 2022年11月9日
0 收藏 393 点赞 2,435 浏览 2367 个字

1. 主体结构元素

  在HTML5中,为了使文档的结构更加清晰明确,增加几个与页眉、页脚、内容区块等文档结构相关联的结构元素。

1.1 article元素

  article元素表示文档、页面或应用程序中独立、完整、可以独立被外部引用的内容。可以是一篇博客或文章,或其他的任何独立的内容。

  除了内容部分,一个article元素可以有header元素、footer元素。

<article>
<header>
<h1>Title</h1>
<div><time>2015-04-09</time></div>
</header>
<div></div>
<footer>
<small>Copywrite</small>
</footer>
</article>

  article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。如一篇博客文章中,评论可以使用嵌套article元素,用来显示评论的article元素被嵌套包含在表示整体内容的article元素中。

<article>
<header>
<h1>Title</h1>
<div><time>2015-04-09</time></div>
</header>
<div></div>
<section>
<h2>Comments</h2>
<article>
<header>
<h3></h3>
<div></div>
</header>
</article>
<article>
<header>
<h3></h3>
<div></div>
</header>
</article>
</section>
<footer>
<small>Copywrite</small>
</footer>
</article>

1.2 section元素

  section元素用于对页面内容进行分块,一个section元素通常由内容及其标题组成。通常不在没有标题的内容区域使用section。

<article>
<h1></h1>
<section>
<h2></h2>
<div></div>
</section>
<section>
<h2></h2>
<div></div>
</section>
</article>
<section>
<h1></h1>
<article>
<h2></h2>
<div></div>
</article>
<article>
<h2></h2>
<div></div>
</article>
</section>

1.3 nav元素

  nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以有多个nav元素,作为页面整体或不同部分的导航。

  示例

<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

1.4 aside元素

  aside元素用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、导航条,以及其他类似的有别于主要内容的部分。

  aside元素的两种主要用法:

  1>、被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名称解释等。

<article>
<aside>
<h1>名称解释</h1>
<p></p>
</aside>
</article>

  2>、在article元素之外使用,作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是友情链接、博客中其他文章列表或评论等。

<aside>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</aside>

1.5 time元素

  time元素代表24小时中的某个时刻或某个日期,可以定义多种格式的日期和时间。

<time datetime="2015-04-18">2015年04月18日</time>

  编码时机器读到的部分在datetime属性里,元素在网页显示的是开始标记与结束标记之间的部分。

  pubdate属性

  pubdate属性是一个可选的、boolean值的属性,用于time元素上表示发布日期。

<time datetime="2015-04-18" pubdate>2015年04月18日</time>

2. 非主体结构元素

2.1 header元素

  header元素是具有引导和导航作用的结构元素,常用来放置整个页面或页面内的一个内容区块的标题。一个网页内并未限制header元素的个数,可以有多个,为每个内容区块添加header元素。

<header>
<h1>标题</h1>
</header>
<article>
<header>
<h1>标题</h1>
</header>
</article>

  在HTML5中,一个header元素通常包括至少一个heading元素(h1-h6)。

2.2 footer元素

  footer元素可以作为一个区块的脚注,通常包括脚注信息,如作者、相关阅读链接及版权信息等。

<footer>
<ul>
<li></li>
<li></li>
</ul>
</footer>

  可以为article元素或section元素添加footer元素。

<article>
<footer>
<p></p>
</footer>
</article>
<section>
<footer>
<p></p>
</footer>
</section>

2.3 address元素

  address元素用来在文档中呈现联系信息,包括文档作者、链接、邮箱等。

<footer>
<address>作者</address>
<time datetime="2015-04-18" pubdate>2015年4月18日</time>
</footer>
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,914
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,438
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,252
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,063
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,698
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,734