一 快速生成doctype html:xt过度版本 html:4s 严格版本 不同的Doctype 语法是不同的,虽然浏览器解析的结果一致 二 常见的语义标签 非语义标签 三 新语义标签
四 新语义标签兼容性问题 color:hotpink 在低版本的ie中可使用js将该标签创建出来 并且diaplay:block; 判断条件:if lte IE 8 //lte :less than equal [if lte IE 8] [endif] 五 新语义标签兼容性js插件 六 input的新type属性 七 表单验证 input标签内加 required 会进行非空提示 通过设置正则可进行内容筛选 pattern="[0-9]{11}"//电话号的 oninvalid添加了表单元素验证 验证失败会调用 八 input新属性 placeholder 默认的提示信息 autofocus 为某元素指定光标焦点 autocompleted 文本框中提示历史输入信息 必须有name属性 必须提交过一次以后 才会有提示 form 关联指定表单 表单之外的内容也可被获取,通过id multiple file 中可添加多个文件九 label 对媒体标签 1 ,video poster 设置视频播放 开始播放会消失 width 设置视频宽 height 设置视频高 src 指定视频路径 controls 控制栏 loop 循环播放 autoplay 自动播放 * : source可指定多个视频文件 2, audio video和audio的公共属性 src 指定视频路径 controls 控制栏 loop 循环播放 autoplay 自动播放十 获取dom元素 获取单个标签 document.querySelect('input').style 获取多个符合条件的元素 获取的是数组 querySelectorAll.backgroundColor='';找到的是第一个找到的元素,返回的是dom对象 十一 属性选择器: document.querySelect('li[skill]').style.backgroundColor=''; document.querySelect('.class').style.backgroundColor=''; document.querySelect('#id').style.backgroundColor=''; 十二 切换 标签后直接加 data-path="地址" data-info="内容" script中获取 document.querySelector(".imgBox").style.background="url("+this.dataset['path']+")"; document.dataset['name'] 1 如果data-后面有多个连接符命名,去掉-,使用驼峰命名 2 data-后面字母不能大写,获取undefined 十三 进度条 progress value当前值 max当前最大值 自定义进度条 两个div 外部标示 内部伸缩十四 操纵class div.classList.add('red') div.classList.remove() div.classList.toggle() div.classList.contains() 判断 十五 新torm标签 list="food" 配合option属性作为选项,必须设置value input通过list=datalist的id项相关联 output作用类似于span ,没有任何作用,语义性强,可以用来显示结果