HTML5新增的标签（不兼容IE678）

一、<header>——页眉，用在页面的头部或者版块的头部

写法：<header></header>

 

二、<footer>——页脚，用在页面的底部或者版块的底部

写法：<footer></footer>

 

三、<nav>——导航

写法：<nav></nav> 格式自定，没有固定要求

<nav><a href="#">链接</a><a href="#">链接</a></nav>

<nav>
    <p><a href="#">妙味课堂</a></p>
    <p><a href="#">妙味课堂</a></p>
</nav>

<nav>
    <h2>妙味精品课程</h2>
    <ul>
        <li><a href="#">javascript</a></li>
        <li><a href="#">html+css</a></li>
    </ul>
</nav>

 

四、<hgroup>——页面上的一个标题组合

描述：一个标题和一个子标题

写法：<hgroup></hgroup>

<hgroup>
    <h1>妙味课堂</h1>
    <h2>带您进入富有人情味的IT培训</h2>
</hgroup>

 

五、<section>——页面上的版块

描述：用于划分页面上的不同区域,或者划分文章里不同的节。可以大板块用<section>，里面的小版块用<div>

写法：<section></section>

 

六、<article>——用来在页面中表示一套结构完整且独立的内容部分

描述：可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

写法：<article></ article >

 

七、<aside>——侧边栏、附属信息

描述：元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

写法：<aside></ aside>

<article>主体</article>
<aside>和主体相关的附属信息</aside>

 

八、<figure>—— 用于对元素进行组合。一般用于图片或视频

写法：<figure> < figure >

 

九、<figcaption>——figure的子元素 用于对figure的内容 进行说明

写法：<figcaption> <figcaption> 

<figure>
    <img src=“miaov.png”/>(注意没有alt)
    <figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption>
</figure>

 

十、<time>——用来表现时间或日期

写法：<time></time>

<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>  //datetime没有特殊用途，方便查找

 

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

描述：在输入框输入j，下面会显示javascript，和百度类似

<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>——可以展开的信息

十三、< summary>——details 元素的标题

描述：加了open属性则展开。默认是收缩的，只显示<sumary>的信息

<details open>
    <summary>妙味课堂</summary>
    <p>国内将知名的IT培训机构</p>
</details>

 

十四、<dialog></dialog>——定义一段对话

描述：没什么用

<dialog open>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>

 

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

描述：显示出来是斜体

 

十六、<mark></mark> ——需要标记的词或句子

描述：默认是黄色背景。可以通过背景色修改颜色

<mark>标记</mark>

mark{ background:Red;}

 

十七、<keygen>——给表单添加一个公钥

描述：对前端没什么用

<form action="http://www.baidu.com" method="get">
    用户: <input type="text" name="usr_name" />
    公钥: <keygen name="security" />
    <input type="submit" />
</form>

 

十八、<progress><progress>——定义进度条

描述：max写最大值，value写当前的值

<progress max="100" value="76">
    <span>76</span>%
</progress>