网页组成部分

• 头部 header
• logo
• banner
• 导航 navigate
• 页脚 footer
• 主体 main
• 侧边栏 side

HTML 新增标签

结构标签

• header
• nav
• footer
• main
• aside
• section 有标题的一块内容
• actricle
• details

<details open>
    <summary>我的信息</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus exercitationem quam ipsam dolorum vitae, ducimus quas amet eligendi voluptate vel illum dolorem sunt, odit esse expedita dolores id obcaecati. Facilis.</p>
</details>

• summary
• dialog（弹框）

<dialog >
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis molestiae voluptate officia mollitia explicabo consequuntur, animi illo harum error porro blanditiis minima, nemo architecto rem unde at quis corporis esse!
</dialog>

文本标签

• mark 标记
• meter 表示度量 属性 max/min/value/low/high

<div>
    电量还剩多少：
    <meter max="100" min="0" low="20" value="90"></meter>
</div>

• progress 表示进度 属性 max/value

<div>
    充电：
    <progress max="100" value="60"></progress>
</div>

• ruby

<ruby>
    同志交友
    <rt>tong zhi jiao you</rt>
</ruby>

• rt
• time

HTML5 多媒体

相关标签

• video 属性： src / width / height / autoplay / loop / controls / preload / poster / muted
• audio 属性 ： src / preload / controls / autoplay / loop / muted
• sorce 属性 ： src / type
• track 自定义进度条

视频

• H5之前，视频用flash (.flv文件)
• H5制定了视频的标签zz
• 三种视频格式： mp4 / ogg / webm
• mime类型： video/mp4 video/ogg video/webm

音频

• H5之前，音频也用flash
• H5制定了音配标准
• 三种音频格式： mp3 / wav / ogg

<video src="../../dist/media/movie01.mp4" width="800" controls loop muted preload poster="../../dist/media/movie01.jpg"></video>

<hr>
<h2>音乐播放器</h2>
<audio src="../../dist/media/music.mp3" controls></audio>


<hr>

<video width="600" controls>
    <source src="../../dist/media/movie.ogg" type="video/ogg">
    <source src="../../dist/media/movie02.mp4" type="video/mp4">
</video>

• <audio> 定义声音内容
• <video> 定义视频
• <source> 定义媒介源
• <track> 定义用在媒体播放器中的文本轨道

HTML5全局属性

• contenteditable 让元素内设置可以编辑 值 true|false
• contextmenu 配合自定义右键菜单

body contextmenu="mymenu">
<menu type="context" id="mymenu">
    <menuitem label="分享到微信"></menuitem>
    <menuitem label="分享到QQ"></menuitem>
</menu>

• data-*
• draggable 元素是否可以拖动 值 true/false
• dropzone b
• translate 值 yes|no
• spellcheck 值 true|false