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

转载于:https://www.cnblogs.com/ysshuai/p/6706492.html