HTML和HTML5又有点区别,在于HTML5更具有结构化,编写代码的识别度更高,同时属性应用也比较的快。具体在于结构化标签的变化。
1.结构元素
header元素
具有引导和导航作用的结构元素,包含通常放在页面头部的内容。一个网页可以使用多个header,也可以为每一个内容块添加header元素。
<header>
<h1>网页主题</h1>
</header>
nav元素
nav元素:用于定义导航链接,该元素可以将具**有导航性质的链接归纳在一个区域中,是页面元素的语义更加明确,只要应用于传统导航条,侧边导航条,页内导航条,翻页导航。列如下面这段实例代码:
<nav>
<ul>
<li>首页</li>
<li>公司概况</li>
<li>产品展示</li>
<li>连系我们</li>
</ul>
</nav>
article元素
代表文档、页面或者与上下文不相关的独立部分,通常用于多个section元素的划分,一个页面中的article元素可以出现多次。
<article>
<header>
<h2>第一章</h2>
</header>
<setion>
<header>
<h2>第1节</h2>
</header>
</setion>
<setion>
<header>
<h2>第1节</h2>
</header>
</setion>
</article>
<article>
<header>
<h2>第一章</h2>
</header>
</article>
aside元素
用于定义当前页面或者文章的附属信息部分,包含当前页面的主要内容的相关引用、侧边栏、广告、导航条和其他有别于主要内容的部分。
aside元素主要分为两种:
- 被包含在article元素内作为主要内容的附属信息。
- 在article元素之外使用,作为页面或者站点全局的附属信息部分。
<article>
<header>
<h2>标题</h2>
</header>
<section>文章主要内容</section>
<aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>
section元素
对网页或程序中页面上的内容进行分块,通常由内容和标题组成。使用时应该注意:
- 不要设置样式为页面容器,不是一个普通的容器元素。当被直接定义样式或者通过脚本定义行,建议使用div。
- 如果article、aside、nav更符合条件,建议不要使用section。
- 没有标题的内容块不要使用section元素定义。
footer元素
定义一个页面或者区域的底部,通常包含放在底部的内容。
2.分组元素
figure和figcaption元素
figure元素用于定义独立的流内容,一般只一个单独的单元。figcaption元素内容与该主要内容有关,删除对文档流产生的影响。figcaption用于为figure添加标题,一个figure最多允许使用一个figcaption,同时应该放在figure的第一个或者最后一个子元素的位置。
<figure>
<figcaption>北京鸟巢</figcaption>
<p>被称作第四代体育馆的鸟巢国家体育馆是2008年北京奥运会标志性建筑</p>
<img src="##">
</figure>
hgroup元素
用于将多个标题组成一个标题组,与h1~h6组合使用。
hgroup元素使用注意:
- 只有一个标题元素不建议使用。
- 出现一个或者一个以上的标题和元素时使用。
- 当一个标题包含副标题、section、article时,建议使用hgroup和标题相关元素存放到header元素中。
<header>
<hgroup>
<h1>我的个人网站</h1>
<h2>我的个人作品</h2>
</hgroup>
<p>开心快乐每一天</p>
</header>
3.页面交互元素
details和summary元素
details元素用于描述文档或者文档某个部分的细节。summary元素经常与details配合使用,作为details的第一个子元素,为details定义标题。点击会显示列表。
<details>
<summary>显示列表</summary>
<ul>
<li>列表1</li>
<li>列表1</li>
</ul>
</details>
progress元素
<h1>我的工作进度</h1>
<p><progress min="0" max="100" value="50"></progress></p>
meter元素
表示指定范围内的数值。
high:度量位于界定为高的值
low :度量位于界定为低的值
max:定义最大值
min:定义最小值
value:定义度量的值|
4.文本层次语义元素
time元素:定义时间或者日期。有datetime:定义时间日期;pubdate:定义time中的日期/时间文档。
mark元素:标记文字
cite元素:引用
<p>我坚信的是,在我努力的时候我对自己是有所期待的,我知道我会成为更好的人,所以我从不怀疑我自己。</p>
<cite>——杨洋</cite>