HTML学习笔记（六）HTML5学习
结构/语义元素
<header>...header>：定义文档头部区域 <footer>...footer>：定义文档脚部区域 <section>...section>：定义文档中的节（页面中的一块区域） <article>...article>：定义页面独立的内容区域（独立的文章内容） <aside>...aside>：定义页面的侧边栏内容（相关内容或者引文） <nav>...nav>：定义导航链接的部分。
表单
新增的表单元素
<datalist>...datalist>：定义选项列表，与input元素配合使用
使用方法：
1 <input type="text" value="输入明星" list="star"/> 2 <datalist id="star"> 3 <option>刘德华option> 4 <option>刘若英option> 5 <option>刘晓庆option> 6 <option>郭富城option> 7 <option>张学友option> 8 <option>郭郭option> 9 datalist>
新增的input输入类型
| 类型 | 使用示例 | 含义 |
| 输入邮箱格式 | ||
| url | 输入url格式 | |
| number | 输入数字 | |
| range | 自由拖动滑块 | |
| search | 搜索框（体现语义化） | |
| color | 输入选取颜色 | |
| date | 选取日、月、年 | |
| month | 选取月、年 | |
| week | 选取周和年 | |
| time | 选取时间（小时和分钟） | |
| datetime | 选取时间、日、月、年（UTC时间） | |
| datetime-local | 选取时间、日、月、年（本地时间） |
新增的表单属性
| 属性 |
|
|
| autocomplete |
<input type="text" autocomplete="off"> |
|
| autofocus |
<input type="text" autofocus> |
autofocus 属性是一个 boolean属性. autofocus 属性规定在页面加载时，域自动地获得焦点。 |
| form | form 属性规定输入域所属的一个或多个表单。 | |
| placeholder |
<input type="text" placeholder="请输入用户名"> |
对用户输入进行提示，提示用户可以输入的内容占位符，当用户输入的时候，里面的文字消失，删除所有文字，自动返回 |
| required |
<input type="text" required> |
设置必填项，内容不能为空 |
| multiple |
<input type="file" multiple> |
可以设置选择多个文件 |
| accesskey |
<input type="text" accesskey="s"> |
规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
新增的多媒体元素
<audio>...audio>：定义音频内容 <video>...video>：定义视频内容 <source>...source>：定义多媒体资源 （多浏览器支持） <embed>...embed>：定义嵌入的内容
audio元素
使用方法：
<audio src="./music/1.mp3">audio>
属性：
- autoplay：自动播放
- controls：播放控件
- loop：循环播放，loop="2"代表循环两次，loop="-1"代表无线循环
auto支持3种音频格式：ogg、mp3、wav
多浏览器支持的方案，如下：
需要用到source元素
<auto> <source src="./music/1.mp3" /> <source src="./music/1.wav" /> <source src="./music/1.ogg" /> 您的浏览器不支持HTML音频播放功能 auto>
video元素
使用方法：
<video src="./videos/1.mp4 controls">video>
属性：
- autoplay：自动播放
- controls：播放控件
- loop：循环播放，loop="2"代表循环两次，loop="-1"代表无线循环
- width：设置播放窗口宽度
- height：设置播放窗口高度
video支持3种视频格式：ogg、mp4、webM
多浏览器支持方案：
<video> <source src="./videos/1.ogg" /> <source src="./videos/1.mp4" /> 您的浏览器不支持HTML视频播放功能 video>