HTML5标签和表单

1.标签语义化

1.概念：

有意义的标签，见名知意。提倡使用正确的标签描述对应内容。

优点：代码具有可读性

​ 方便SEO

​ 方便更新和维护

2.结构化标签：

页头：<header></header>
主体：<main></main>
页脚：<footer></footer>
导航：<nav></nav>
侧栏：<aside></aside>
文章：<article></article>
独立区域/节/块<section></section>

3.图文列表标签

<figure>
	<img>
	<figcaption></figcaption>
</figure>

4.标题组

<hgroup></hgroup>

5.对话框

<dialog open></dialog>[加了open才可以看到]

6.画布

<canvas></canvas>

7.音频

<audio src="音频路径" controls autoplay loop></audio>

controls音乐控件（开关）

autoplay自动播放

loop循环播放

8.视频

<viedo controls width="" height="" poster="海报路径">
	<source src="视频格式1">
    <source src="视频格式1">
</viedo>

说明：如果不加source标签，就将arc属性加在video身上！

9.媒体标签

<embed src="音频/视频/图片路径">

2.表单新属性

1.表单标签的新属性

<form action="" novalidate autocomplete="on/off">
</form>
novalidate设置该表单中的数据不验证
autocomplete设置提示/类似于历史记录

2.input新增的属性

<input type="text| password|radio|checkbox|file|hidden|submit|reset|button" name="名字" value="值"| placeholder="提示"| required |minlength="最小长度" |maxlength="最大长度" |autofocus |disabled |readonly |checked>

reaquired 设置为必填

minlength=''最小长度

maxlegth=''最大长度

autofocus 打开页面时自动获取焦点

disabled 设置为不可用

readonly 设置为只读，主要用于 做权限

checked 设置单选或者复选，默认选中该选项

3.表单的新标签

1.数据列表

<input list="关联的数据列表id名">
<datalist id="">
	<option value="值">选项内容</option>
</datalist>

会提示值和选项内容，如果没有value属性，就只显示内容

2.输出标签