<header></header> 页眉
主要用于页面的头部的信息介绍,也可用于板块头部
<nav></nav> 导航
一般用于网页的导航栏
<hgroup> 页面标题和标语的组合
<h1>妙味</h1>
<h2>我是dada</h2>
</hgroup>
一个标题和一个子标题,或者标语的组合
<footer></footer> 页脚
页面的底部 或者 版块底部
<section></section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节
<article></article> 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂进等。
<aside></aside> 和主体相关的附属信息
可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分; 需要注意的地方是 1. aside的内容应该与article的内容相关。 2. 被包含在<article></article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等 3. 在<article></article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。
<figure></figure> 用于对元素进行组合。一般用于图片或视频
<figcaption></figcaption> figrue的子元素 用于对figure的内容 进行说明
<figure>
<img src="miaov.png"/>(注意没有alt)
<figcaption>dadada</figcaption>
</figure>
<time></time>用来表现时间或日期
<p>我们在每天早上<time>9:00</time>开始营业</p>
<p>我在<time datatime="2008-02-15">情人节</time>有个约会</p>
datatime属性不会影响代码,其作用只是为了参照!!!
<address></address>定义文章 或页面作者的详细联系信息
<mark></mark> 需要标记的词或句子
-------------具有功能的语义化标签----------------
<datalist></datalist> 选项列表。 与input元素配合使用,来定义input可能的值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<details></details>用于描述文档或文档某个部分的细节(点击显示下拉信息)
该元素用于摘录引用等 应该与页面的主要内容 区分开的 其他内容
Open属性默认展开
<summary></summary>details 元素的标题
<details>
<summary>妙味课堂</summary>
<p>国内将知名的IT培训机构</p>
</details>
<dialog></dialog> 定义一段对话
<dialog open>
<dt>学生A</dt>
<dt>2+2等于?</dt>
<dt>学生B</dt>
<dt>4</dt>
</dialog>
类似于dl和dt的关系 老版火狐默认是不显示dt内容的 需要open属性,和给distails语义标签加open效果类似。
<keygen> 给表单添加一个公钥
<form action="http://www.baidu.com" method="get">
用户:<input type="text" name="usr_name"/>
公钥:<keygen name="security" />
<input type="submit" />
</form>
相对于前段有些鸡肋,会在页面上显示一个input输入框 输入内容被form表单提交时会被加密显示。
<progress></progress> 定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>
会在页面显示一个进度条 max表示到最后的数值,value表示已达到的数字,会以百分比的形式显示进度条的颜色改变;span是为了向下兼容,有的浏览器不显示进度条就会出现"76%"