H5语义化标签

语义化:看到标签名就知道实现那块区域

<header>标签
定义页面头部
<footer>标签
定义页面脚部
<nav>标签
定义导航链接
<section>标签
定义页面中的区段
<article>标签
定义页面中的文章
<aside>标签

图片:
<figure>
    <picture>
        <img src="timg1.jpg" srcset="timg1.jpg 2x"/>
    </picture>
</figure>
srcset="timg1.jpg 2x":设置图片大小

音频，视频

音频:.mp3,.ogg

视频:.mp4,avi,.flv,

音频 

<audio controls="controls" loop="loop" autoplay="autoplay" 
       onmouseover="this.play()" onmouseout="this.pause()">
    <source src="medias/Truth%20of%20the%20Legend.ogg">
</audio>
controls="controls"
 loop="loop":循环播放
autoplay="autoplay" :自动播放
onmouseover="this.play()":当鼠标悬浮上去播放
onmouseout="this.pause()":当鼠标离开的时候暂停

视频:

<video controls="controls"  loop onmouseover="this.play()" onmouseout="this.pause()">
    <source src="medias/volcano.mp4">
</video>

 <span>我是</span><mark>标记</mark>:标记
<label>下载中:</label>
<progress value="50" max="100"></progress> :进度条
contenteditable="false":可以在页面修改
draggable="true":拖动
hidden:隐藏
<ul contenteditable="false" draggable="true" hidden>
    <li>曹操</li>
    <li>项羽</li>
    <li>曹操</li>
</ul>
<textarea spellcheck="true"> </textarea>
spellcheck="true":检查单词是否正确