走进HTML5 新增标签

版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84812473

1. 结构标签

结构标签的实质就是有语义的div

• <article>     定义一篇文章
• <header>   定义一个页面的头部
• <nav>      定义导航链接
• <section>   定义一个区域
• <aside>      定义页面部分的侧边栏
• <hgroup>   定义文件中一个区域的相关信息
• <figure>     定义一组媒体内容和他们的标题
• <figcaption> 定义figure的标题
• <footer>     定义一个页面的底部
• <dialog>    定义一个对话框

---

补充：
最好不要嵌套使用 header/section/aside/article/footer
推荐写法：header/section/footer > aside/article/figure/hgroup/nav > div/figcaption

2. 多媒体标签

• audio 标签
  定义音频内容

<audio> 属性	描述
autoplay	页面加载后自动播放
controls	音频文件会有控制栏
loop	结束时重新播放

<audio src="../Source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">
	您的浏览器也该退休了，是否考虑一下Chrome这样的新鲜血液呢？
</audio>

---

• video 标签
  定义视频内容

<video> 属性	描述
autoplay	页面加载后自动播放
controls	音频文件会有控制栏
loop	结束时重新播放
width	设置播放器的宽度
height	设置播放器的高度

<video controls="controls" width="1024" height="768">
	<source src="../Source/pal4.mp4" type="video/mp4">
</video>

---

• source 标签
  解决浏览器兼容，设置音频或视频的多个源

<source > 属性	描述
src	媒体文件的路径
type	媒体文件的类型

3. Web应用标签

状态标签

• meter

<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>

• progress

<progress value="30" max="100">
<progress max="100"></progress>

---

列表标签

• datalist (比select更好用的下拉列表)

<input placeholder="请选择您喜欢的手机品牌" list="phoneList" />
<datalist id="phoneList">
	<option value="iPhone">iPhone</option>
	<option value="Samsung">Samsung</option>
	<option value="Huawei">Huawei</option>
	<option value="hTC">hTC</option>
	<option value="Meizu">Meizu</option>
</datalist>

• details

<details open="open">
   <summary>树下的猫</summary>
   <p>我是一只坐在树下的貓，每天我都坐在树下，看花花世界，人海茫茫……
   我每天都会做相同的梦，梦里看到一位公子，身患重病，危在旦夕。公子身边有一名女子，她的眼里尽是关切和深深的依恋。</p>
 </details>

4. 其他标签

• ruby(注释标签)

<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>

• mark(选中的状态)

<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>

• oninput(输出)

<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
	<input type="text" id="price" value="5000">
	*<input type="number" id="number" value="1">
	=<output name="totalPrice" for="price number"></output>
</form>