# html 5

## 语义化标签

> 针对搜索引擎优化

```html
<header>
  头部标签
</header>

<nav>
  导航标签
</nav>

<article>
  内容标签
</article>

<section>
  章节
</section>

<aside>
  侧边栏
</aside>

<footer>
  尾部
</footer>
```

## 多媒体标签

### video

```html
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
```

* 不支持 video 标签的旧浏览器会显示标签中间的提示文本

| 属性       | 值        | 描述                                                               |
| -------- | -------- | ---------------------------------------------------------------- |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。谷歌浏览器需要添加muted来解决自动播放问题。                     |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。                                         |
| height   | *pixels* | 设置视频播放器的高度。                                                      |
| loop     | loop     | 如果出现该属性，则当媒介文件完成播放后再次开始播放。                                       |
| preload  | preload  | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。             |
| src      | *url*    | 要播放的视频的 URL。                                                     |
| width    | *pixels* | 设置视频播放器的宽度。                                                      |
| muted    | bool     | 网页中的音频是否静音，如果设置，音频将被初始化为静音；其默认值为false，表示播放视频时将播放音频。muted="muted" |

### audio

```html
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
```

| 属性       | 值        | 描述                                                   |
| -------- | -------- | ---------------------------------------------------- |
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。谷歌浏览器支持                          |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。                             |
| preload  | preload  | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src      | *url*    | 要播放的音频的 URL。                                         |

##  input 新增类型

`email url number time date week month tel search color`

* tel 在移动端会弹出数字键盘

## 表单属性

* `required="required"`
* `placeholder="提示文本"`
* `autocomplete="on | off"` 自动补全, 为了保护隐私需要关掉
* `multiple="multiple"` file类型多个文件提交
* `disable`