还是先从说标签开始说起吧。
语化标签
header:页面头部或板块的头部
footer:页面底部或板块的底部
nav:导航
hgroup:标题组合
<hgroup> <span style="white-space:pre"> </span><h1>主标题</h1> <span style="white-space:pre"> </span><h2>副标题</h2> </hgroup>
section:板块或区块(最近访客)
article:独立的内容部分(帖子内容)
aside:和主体相关的附属信息(友情链接、广告、侧边栏sidebar)
figure:图片和文字组合
<figure> <span style="white-space:pre"> </span><img /> <span style="white-space:pre"> </span><figcaption>图票标题</caption> </figure
time:时间标签(发表文章的列表)
address:定义页面文章或作者的详细联系信息。
mark:标记。
功能标签
datalist:选项列表。与input配合使用,来定义input可能的值。
<input type="text" list="valList"> <datalist id="valList"> <option value="css">css</option> <option value="html">html</option> <option value="javascipt">javascipt</option> <option value="php">php</option> </datalist>
details:详情信息。
<details open> <summary>文章标题</summary> <p>该段落是展示文章内容的区域</p> </details>
dialogs:一段对话。
<dialogs> <dt>老师:</dt> <dd>1+1 等于?</dd> <dt>学生:</dt> <dd>等于 2</dd> <dt>老师:</dt> <dd>谁家的孩子,真聪明!</dd> </dialogs>
keygen:给表单添加一个公钥。(针对后端,前端这块没有什么作用)
<form action="http://www.baidu.com/" method="get"> 用户:<input type="text" name="userName" id=""> 公钥:<keygen name="security"> <input type="submit" value="提交"> </form>progress:进度条。
<progress max="200" value="65"> <!--向下兼容--> <span>65</span>% </progress>
如何作向下兼容
方法一
通过javascipt增加新元素,不过在css中要加上{display:block}哦
<script> document.createElement('header'); document.createElement('article'); document.createElement('aside'); document.createElement('section'); document.createElement('footer'); document.createElement('rzy'); </script>
<script src="html5shiv.min.js"></script>