一、HTML5新增标签
HTML5新增了很多新的标签:
- <header>用在页面的头部或者板块的头部</header>
-
<footer>用在页面的头底部或者板块的底部</footer>
-
<nav>
<p><a href="">导航</a></p>
<p><a href="">导航</a></p>
</nav> -
<hgroup>组合
<h1>妙味课堂(标题)</h1>
<h2>妙味课堂解释(解释标题)</h2>
</hgroup> - <section>用来划分区域</section>
-
<article>表示结构完整且独立的内容部分(主体)</article>
- <aside>和主体相关的附属信息</aside>
-
<figure> 用于对元素进行组合,一般用于图片或者视频
<img src="" /> <!--注意没有alt-->
<figcaption>figure的子元素,用于对figure内容进行说明</figcaption>
</figure> - <time datetime="02-14">情人节</time>
- datalist标签,鼠标点击text框时,起到提示性作用,利用input中的list属性相关联
<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>简要信息</summary>
<p>详细信息</p>
</details> - dialog标签,对话框形式
<dialog open>
<dt>老师</dt>
<dd>2+2=?</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>对了</dd>
</dialog>
- <address>作者信息</address>
- <mark>标记</mark>
- keygen标签,一般用于公钥,后端人员用的较多
<form action="" method="get">
用户:<input type="text" name="username" />
公钥:<keygen name="security" />
<input type="submit" />
</form>
- progress标签,进度条
<progress max="200" value="90">
<span>90</span>%
</progress>