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标签使用,当用户在输入内容是触发

原文：http://www.cnblogs.com/sw1990/p/5812117.html