html5
DOCTYPE是html的声明，现在能见到的一般有三种html:4s,html:xt,html:5,现在最流行的就是html 5
平常学习或者工作中有不了解的地方可以查资料，有两个网址 W3C中国：w3cschool 盈科中国：w3school
html5较以前的版本，又有了好多新标签，其中常用的有header. nav . main .article .aside. footer
使用HTML5中新的语义标签,内容更为直观,即使删除了注释,依旧能够看出该标签的作用,语义性更强
html5又增加了好多表单属性
1.autocomplete能够记录用户的输入,并且给予提示，标签需要添加name属性，而且只有提交了一次以后才会出现提示
2.autofoucs添加该元素可以让标签变成首先获得焦点的标签，如果页面中多个元素设置了该属性,最后一个会获得焦点
3.form 表单关联，当我们想要提交数据时,需要把表单元素放到对应的form标签中,这个属性的出现让表单元素的放置位置不在受到约束，
想要某个表单外元素跟该表单建立联系,只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可，虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性
4.multiple多选，如果想要在某个input标签中选择多个值,可以使用该属性，该属性可以用在type为file标签内
5.placeholder占位提示，输入元素内默认显示一些提示信息,当用户输入之后自动消失，直接为该属性赋值想要提示的内容即可使用
在浏览器版本小于IE8时，header标签就无法显示，我们就需要用JS在页面中创建header标签，还要修改header样式，添加display:block;但是随之而来又有一个问题，这样一来用高版本就出出现两个header，所以这时候我们就需要hack语法，
<!--[if lte IE 8]>
<script>
alert("这段js代码执行了");
</script>
<![endif]-->表单验证
required属性，只需要添加这个属性，就可以自带验证效果，不需要赋值，进行非空验证
然而为了更好的用户体验，就需要自定义验证，使用pattern，后面加正则表达式，例如pattern="[0-9]{3}"
设置自定义验证信息：dom.setCustomValidity("这里输入提示信息");
<form>
<fieldset>
<legend>用户注册</legend>
<label for="">用户名
<input type="text" name="" value="" required>
</label>
<label for="">密码
<input type="password" name="" value="">
</label>
<label for="">确认密码
<input type="password" name="" value="">
</label>
<label for="">邮箱
<input type="email" name="" value="">
</label>
<label for="">手机号
<input type="tel" name="" value="" required pattern="[0-9]{11}" id='btnTel'>
</label>
<input type="submit" name="" >
</fieldset>
</form>
datalist测试代码，只是body内部的代码，其中option标签 作为单标签,双标签都可以使用，
id:id属性,想要使用该datalist的元素需要通过list=id的方式来指定
进度条的两种方式
process 其需要设置两个属性 max: 总工作量 value: 已完成工作量
meter 常见属性
- high:规定较高的值
- low:规定较低的值
- max:规定最大值(可以超过,但是进度条已经满了)
- min:规定最小值
- value:规定度量的值
配合使用进度条taggle更美观
audio标签
- src:音频的地址
- controls:音频播放控制器
- autoplay:自动播放
- loop:循环
- poster:指定视频不播放时显示的封面
video标签视频
src=指定 视频的路径
conrols 控制栏
loop 循环播放
autoplay 自动播放
poster 设置视频封面 如果视频 播放了 那么封面就没用了
width: 设置的是 video标签的宽度
height: 设置的是 video标签的高度
视频 还是会保持 自己的 宽高比
直接右键 即可 保存视频 主流的视频网站 由于 视频需要用来挣钱 还是使用flash
实际开发中 如要要使用 h5的多媒体标签 需要注意 不要使用有版权的视频
DOM元素获取方法
querySelector 返回符合要求的第一个元素
querySelectorAll 匹配所有符合要求的元素
oninvalid
元素无效事件:配合表单验证,会在验证失败时触发
oninput
配合input标签使用,当用户在输入内容是触发
