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="1d{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');