HTML5语义化标签总结

1.语义化标签总结

基础布局标签

 <header></header>
     <nav></nav>
 <main></main>
     <aside></aside>
     <article></article>
 <footer></footer>

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

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

生成内容：

<!--[if lt IE 9]>
    <script type="text/javascript" src='js/html5shiv.min.js'></script>
<![endif]-->

或者

<!--[if lte IE 6]>
    <script type="text/javascript">
        alert("我执行了");
        window.onload = function(){
            var createHeader = document.createElement("header");
            document.body.appendChild(createHeader);
        }
    </script>
<![endif]-->

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

2.H5表单

input标签新增属性

<form action="#">
        <fieldset>
            <legend>新输入类型</legend>
            <label>type=color
                <input type="color">
            </label>
            <label>type=date
                <input type="date">
            </label>
            <label>type=datetime
                <input type="datetime">
            </label>
            <label>type=datetime-local
                <input type="datetime-local">
            </label>
            <label>type=date
                <input type="date">
            </label>
            <label>type=email
                <input type="email">
            </label>
            <label>type=month
                <input type="month">
            </label>
            <label>type=week
                <input type="week">
            </label>
            <label>type=day
                <input type="week">
            </label>
            <label>type=number
                <input type="number">
            </label>
            <label>type=range
                <input type="range">
            </label>
            <label>type=search
                <input type="search">
            </label>
            <label>type=url
                <input type="url">
            </label>
        </fieldset>
    </form>

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

新表单元素

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

使用方法：

<input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>

剩余的两个理解就好。

3.新表单属性

操作对象:

<input type="text" name="">

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

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

演示代码:

<form action="#" id='form'>
<fieldset>
<legend>新表单属性</legend>
<!--  input标签 默认的 提醒信息  -->
<input type="text" name="" placeholder="请输入用户名">
<input type="email" name="" placeholder="请输入电子邮箱" autofocus>
<input type="file" multiple>
<!-- 必须 为 该标签 添加name属性  还需要改表单 曾经提交过-->
<input type="tel" name="telPhone" autocomplete placeholder="请输入电话号码">
<input type="submit" >
</fieldset>
</form>

<input type="text" name="userHabbit" placeholder="请输入你的爱好" form='form'>

表单验证:
添加属性：

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

<form action="#">
        <fieldset>
            <legend>表单验证</legend>
            <!-- email这个标签 自带了 表单的格式验证 不能验证 空的值 -->
            <input type="email" name="userEmail" required>
            <!-- 对 字符串 格式的验证 使用的是 正则
                pattern 中可以写正则 进行验证
            -->
            <input type="tel" placeholder="请输入电话号码"  name='userTel' required pattern="\d{3}"
                   oninvalid="    this.setCustomValidity('亲爱的用户你输入的格式不正确,请重新输入')">
            <input type="submit">
        </fieldset>
    </form>

4.音频（audio ）

音频属性： controls autoplay loop

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

演示源码：

<audio  controls autoplay loop>
    <source src="music/music.ogg" >
    <source src="music/郝云 - 活着.mp3" >
    亲爱的用户,你的浏览器版本太低,无法享受这个页面的所有功能,建议进行更新 ^_^ <a href="#">戳我下载</a>
</audio>

5.视频(video):

视屏播放器：

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

演示代码：

<!--<video src="movie/[报告老板][第二季]第11集_bd.mp4" controls  loop height="100px" width="300px"
    poster="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"></video>-->
<!--浏览器会从上往下 找到可以播放的 进行播放-->
<video  controls>
    <source src="movie/movie04.ogg">
    <source src="movie/[报告老板][第二季]第11集_bd.mp4">
    亲爱的用户,你的浏览器版本太久了,建议升级 <a href="#"> 点我下载 最新的浏览器(⊙o⊙)</a>
</video>

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=contains]').onclick = function () {
        alert(div.classList.contains('orange'));
    }
    // 切换class
    document.querySelector('input[value=toggle]').onclick = function () {
        div.classList.toggle('skyBlue');
    }

8.自定义属性（dataset）

代码演示：

<body>
<!-- html5为了规范自定义属性的写法,新增了一个 data-的属性 -->
    <div data-age='18' data-skill='eatFood' data-habbit = 'tableTannis'
         data-food-vegetable='西兰花' data-foodMeat='牛肉'></div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        // 所有 通过 data-的方式 添加的属性 都会保存在dom元素的 dataset属性中 他是一个对象
        // 设置属性时 能够使用大写字母 但是会自动帮我们转化为 小写的字母
        // 作用是 为了规范 自定义属性的写法
        console.log(document.querySelector('div').dataset);
        console.log(document.querySelector('div').dataset.age);
        console.log(document.querySelector('div').dataset.foodVegetable);
        console.log(document.querySelector('div').dataset.foodmeat);
    }
</script>

HTML5