码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 和 H5 笔记整理

时间:2018-05-17 15:21:33      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:auto   自动播放   jquery   res   标签   foo   一个   datalist   remove   

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 笔记整理

标签:auto   自动播放   jquery   res   标签   foo   一个   datalist   remove   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!