html5新属性

一  快速生成doctype    html:xt <tab>过度版本    html:4s <tab>严格版本    不同的Doctype 语法是不同的,虽然浏览器解析的结果一致二 常见的语义标签   <p></p>   <a href=""></a>   <img src="">   非语义标签    <span></span>     <div></div>三 新语义标签         <header></header>        <nav></nav>        <main>            <article></article>              <aside></aside>        </main>            <footer></footer>四  新语义标签兼容性问题    color:hotpink    在低版本的ie中可使用js将该标签创建出来    并且diaplay:block;    判断条件:if lte IE 8  //lte :less  than  equal    [if lte IE 8]

   <script type="text/javascript">

   </script>   [endif]五 新语义标签兼容性js插件六 input的新type属性    <form>        <fieldset>            <legend> input新属性 </legend>

            <label>color:                <input type="color">            </label>        </fieldset>    </form>七 表单验证    input标签内加 required 会进行非空提示        通过设置正则可进行内容筛选  pattern="[0-9]{11}"//电话号的        oninvalid添加了表单元素验证  验证失败会调用        <script>            document.getElementById("btntel").oninvalid=function(){                if(this.value==""){                    this.setCustomValidity("请输入内容:")                              }else{                    this.setCustomValidity("谢谢:")                }            };        </script>八 input新属性       placeholder 默认的提示信息       autofocus  为某元素指定光标焦点       autocompleted  文本框中提示历史输入信息  必须有name属性 必须提交过一次以后   才会有提示       form 关联指定表单  表单之外的内容也可被获取,通过id       multiple    file 中可添加多个文件九  label 对媒体标签    1 ,video           <video src="F:\电影\电影\陪安东尼度过漫长岁月_bd.mp4" poster="1.jpg" controls loop width="200px" height="200px"></video>           poster    设置视频播放  开始播放会消失           width     设置视频宽           height    设置视频高           src       指定视频路径            controls  控制栏           loop      循环播放            autoplay  自动播放  

   * :<source src="陪安东尼度过漫长岁月_bd.mp4">            source可指定多个视频文件  2, audio       <audio src="" controls autoplay loop>               <source src="陪安东尼度过漫长岁月_bd.mp4">               <source src="">        </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当前最大值       <progress value="50"></progress>      <meter></meter>  自定义进度条  两个div   外部标示   内部伸缩十四  操纵class  div.classList.add(‘red‘)  div.classList.remove()  div.classList.toggle()  div.classList.contains()  判断

十五  新torm标签      list="food"  配合option属性作为选项,必须设置value      input通过list=datalist的id项相关联          <datalist>           <option value="拉拉"></option>           <option value="拉拉"></option>           <option value="拉拉"></option>       </datalist>       <keygen keytype="rsa"></keygen>output作用类似于span ,没有任何作用,语义性强,可以用来显示结果       <output name=""></output>       <input type="range" oninput="">