CSS3 和 H5 笔记整理

h5增加特性 语义标签化如 section article  meter footer progress等等

html代码

h5增加了重要的自定义属性的功能；

给标签添加自定义属性 必须以data-开头

自定义的属性 需要通过 dateset[]方式来获取

如自定义属性 data-box

获取自定义属性 dataset

设置自定义属性 dataset[“box”];

<!-- 定义数据列表—>

<datalist id="sex">
 ???<option >男</option>
 ???<option >女</option>
 ???<option >不祥</option>
</datalist>

<!—定义度量器—>

<label for="#">
 ???度量器：<meter value="50" max="100" min="0" low="30" high="80"></meter>
</label>

<!—定义进度条—>

<progress value="40" max="100" min="0"></progress>

<!—定义电话 pattern可用正则—>

<label for="">
 ???电话：<input type="tel" pattern="1\d{10}" />
</label>

<!--audio 兼容性写法 ???autoplay: 自动播放 ???controls:控制条 ???loop：循环-->

<audio controls loop>
 ???<source src=">
 ???<source src=""/>
 ???<source src=""/>
 ???抱歉，你的浏览器不支持音频标签！
</audio>

<!-- 类似的标签有video-->

//js代码 ??

//oninput 事件 ?在用户输入时触发

//oninvalid 事件 一般用于设置验证不通过时的 提示文字

//h5增加了一个类似jQuery操作类名的方法 ?classList

var box1= ?document.querySelector(‘.box1‘);
// ??????添加类名
 ?box1.classList.add(‘active‘);

// ??????删除类名
//box1.classList.remove(‘active‘);

// ??????判断是否包含某个类名 ?返回结果 true/false

 ?var f=box1.classList.contains(‘active‘);

// ??????切换类名 ??

//classList.toggle(‘active‘);

CSS3 和 H5 笔记整理

原文地址：https://www.cnblogs.com/vzaiBoke/p/9050852.html