html5语义化标签

1.语义化标签总结

基础布局标签

注意：IE8以后不兼容H5标签，如果需要兼容IE8一下的浏览器，则需要如下操作：

如果在sublime,或者WebStrom使用可是使用快捷点: cc:ie6+tab

生成内容：



或者

H5解决方案：可以引入上面的html5shiv.min.js，百度搜索进行下载即可。

2.H5表单

input标签新增属性


        
            新输入类型
            type=color
                
            
            type=date
                
            
            type=datetime
                
            
            type=datetime-local
                
            
            type=date
                
            
            type=email
                
            
            type=month
                
            
            type=week
                
            
            type=day
                
            
            type=number
                
            
            type=range
                
            
            type=search
                
            
            type=url

注意:有些效果显示在浏览器显示不明显（没有变化），在移动端会有变化。（移动端的支持比桌面端要好）

新表单元素

//定义下拉列表
  //（生成秘钥）
 //定义输出的一些类型。

使用方法：

剩余的两个理解就好。

3.新表单属性

操作对象:

在表单可添加属性，如下：

placeholder：占位符提示
autofocus：获取焦点
autocomplete: 规定是否使用输入字段的自动完成功能。
multiple：支持多文件选择
form：此属性不推荐使用

演示代码:



新表单属性

表单验证: > 添加属性：

required:必须填写，不能为空
pattern：可是使用正则来验证


        
            表单验证

4.音频（audio ）

音频属性： controls autoplay loop

controls:控制器
autoplay：是否自动播放
loop:是否循环播放
muted：是否静音

演示源码：

5.视频(video):

视屏播放器：

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

演示代码：

6.获取元素新方法

document.querySelector('li')

document.querySelectorAll('')

注意：这个选着器的使用方式和jQuery选着器使用方式是一样的。

7.类名操作（classList）

这是一个对象，对象有如下方法：

add() (添加一个类名)

remove() （删除一个类）

contains() （是否包含类）

toggle() （切换类）

示例代码：

// 获取要操纵的div 方便后续的操作 var div = document.querySelector('.showBox'); // querySelector // 新增class document.querySelector('input[value=add]').onclick = function(){ // alert('ADD'); div.classList.add('orange'); }

    // 移除class
    document.querySelector('input[value=remove]').onclick = function () {
        div.classList.remove('orange');
    }
    // 判断是否存在class
    document.querySelector('input[value=contain]').onclick = function () {
        alert(div.classList.contains('orange'));
    }
    // 切换class
    document.querySelector('input[value=toggle]').onclick = function () {
        div.classList.toggle('skyBlue');
    }

8.自定义属性（dataset）

代码演示：