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="">
在表单可添加属性,如下:
- placeholder:占位符提示
- autofocus:获取焦点
- autocomplete: 规定是否使用输入字段的自动完成功能。
- multiple:支持多文件选择
- 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'>
表单验证:
添加属性:
- required:必须填写,不能为空
- 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>