常用H5新元素

header:定义页面的页眉

article:页面文章区域

aside:主题内容之外

section：定义页面的章节部分

footer：页面的页脚

audio:音频，src路径，controls显示控制面板，autoplay自动播放，loop循环

video:视频，src路径，controls显示控制面板，autoplay自动播放，loop循环，width宽度，height高度，poster当视频还未完全下载或用户还未点击播放前默认显示的封面，默认显示当前视频文件的第一帧

source:浏览器的视频格式兼容

details：用于描述文档或文档某个部分区域，需要和summary结合使用

<details>
	<summary>Hello</summary>
	<p>123456</p>
</details>

mark：带有记号的标签

nav：定义导航栏

progress：定义任务的进度，需要value和max值

<progress value="22" max="100">

fieldset：对表单元素进行分组，一般放在<form>标签里

<fieldset>
	<legend>页面登录</legend>
	<label>姓名：<input type="text" name=""></label><br>
	<label>密码：<input type="password" name=""></label><br>
</fieldset>

表单的type属性（input）：

1、text:文本框

2、password:密码

3、email:邮件，提供电子邮件的完整验证是否包含@符号，同时是否包含服务器名称。

4、tel:为了能够在移动端打开数字键盘，限制用户只能输入数字

5、url:网址，验证只能输入网址，必须包含http://

6、number:只能输入数字，不能输入其他字符。max属性为最大值，min属性为最小值，value为默认值。

7、search:搜索框

8、range:范围，max最大值,min最小值,value默认值

9、color:拾色器。

10、time:时间

11、date:日期，弹出日历，选择日期。

12、datetime-local:日期时间

13、month：月份

14、week：星期

表单新增的其他属性：

1、placeholder:提示文字

2、autofocus：自动获取焦点

3、autocomplete:on打开，off关闭。前提是必须成功提交，必须有name属性

4、required：必须输入

5、pattern：正则表达式验证

6、multiple：允许多选

表单新增事件：

1、oninput:监听当前指定元素的内容，只要内容改变就触发改事件，类似onkeyup/onkeydown。不同点oninput事件不受鼠标或键盘影响，只要内容改变就触发。

<form>
	<label>用户名：<input type="text" name="userid" id="userid"></label><br>
	<label>密码：<input type="password" name="pwd" id="pwd"></label>
</form>
<script type="text/javascript">
	document.getElementById('userid').oninput=function(){
		console.log(this.value)
	}
</script>

2、oninvalid:当验证不通过时触发。

<form>
	<label>用户名：<input type="text" name="userid" id="userid"></label><br>
	<label>密码：<input type="password" name="pwd" id="pwd"></label><br>
	<label>手机号:<input type="tel" name="phone" id="phone" pattern="^1d{10}"></label><br>
	<input type="submit" value="submit" >
</form>
<script type="text/javascript">
	document.getElementById('phone').oninvalid=function(){
		/*修改默认的提示信息*/
		this.setCustomValidity("请输入11位手机号")
	}
</script>

自定义属性。data-:

1、data-开头

2、data-后必须至少有一个字符，多个单词使用-连接

dataset：是一个数组，用于获取自定义属性的值

<p data-school-name="itcast">自定义属性</p>
<script type="text/javascript">
	var p=document.querySelector("p");
	//dataset中必须使用camel命名
	var schoolName=p.dataset['schoolName'];
	console.log(schoolName)
</script>