html5新属性

Posted 2020-08-04 蒜香青豆也暖心

一  快速生成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="">