html5-语义化标签

<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的内容进行说明

<img src="miaov.png"/>(注意没有alt)

<figcaption>dadada</figcaption>

</figure>

<time></time>用来表现时间或日期

<p>我们在每天早上<time>9:00</time>开始营业</p>

datatime属性不会影响代码,其作用只是为了参照!!!

<address></address>定义文章或页面作者的详细联系信息

<mark></mark> 需要标记的词或句子

-------------具有功能的语义化标签----------------

<datalist></datalist> 选项列表。与input元素配合使用，来定义input可能的值。

<option value="javascript">javascript</option>

</datalist>

<details></details>用于描述文档或文档某个部分的细节(点击显示下拉信息)

该元素用于摘录引用等应该与页面的主要内容区分开的其他内容

Open属性默认展开

<summary></summary>details 元素的标题

<p>国内将知名的IT培训机构</p>

</details>

<dialog></dialog> 定义一段对话

</dialog>

类似于dl和dt的关系老版火狐默认是不显示dt内容的需要open属性，和给distails语义标签加open效果类似。

<keygen> 给表单添加一个公钥

用户：<input type="text" name="usr_name"/>

公钥：<keygen name="security" />

</form>

相对于前段有些鸡肋，会在页面上显示一个input输入框输入内容被form表单提交时会被加密显示。

<progress></progress> 定义进度条

<span>76</span>%

</progress>

会在页面显示一个进度条 max表示到最后的数值,value表示已达到的数字,会以百分比的形式显示进度条的颜色改变;span是为了向下兼容,有的浏览器不显示进度条就会出现"76%"

猜你喜欢