html及html5知識筆記

html標簽知識

  • img標簽為內(nèi)聯(lián)元素,但是其自帶width和height屬性,所以其可以設(shè)置寬高;
  • a標簽上的name屬性可以實現(xiàn)文檔內(nèi)的鏈接跳轉(zhuǎn);但是要保證為a標簽的name屬性和href屬性配合;
    • 代碼:
     <a name="mass">美好</a>
     <a href="#mass">跳轉(zhuǎn)到美好</a>
    
  • table表格
    • table內(nèi)聯(lián)樣式設(shè)置單元格的邊距cellpadding和間距cellspacing;
    • 合并單元格給td標簽設(shè)置內(nèi)聯(lián)樣式colspan="3",即合并三個單元格;
  • webStorage網(wǎng)頁存儲
    • 分為兩種:localStorage和sessionStorage兩種
    • localStorage:本地存儲對象;永久保存在本地瀏覽器中,不會過期,直到手動清除;
    • sessionStorage:會話存儲對象;用于臨時保存同一窗口的數(shù)據(jù),在關(guān)閉窗口或標簽頁后,數(shù)據(jù)就會刪除;
    • webStorage和Cookie的區(qū)別:
      • cookie始終在同源的http請求中攜帶,用于在瀏覽器和服務(wù)器端之間來回傳遞,而webStorage不會自動把數(shù)據(jù)傳遞給服務(wù)器端,僅在本地保存;
      • 數(shù)據(jù)的生命周期不同:
        • localStorage設(shè)置后永久在本地存儲,不會過期,直到手動清除;sessionStorage在窗口關(guān)閉后,就會清除;
        • cookie的生命周期一般在其設(shè)置的過期時間之前有效;
      • 存儲數(shù)據(jù)大小的限制:
        • cookie存儲的數(shù)據(jù)大小要求不超過4k;
        • webStorage存儲的數(shù)據(jù)可以達到5M以上,不同的瀏覽器設(shè)置可能不同;
      • 作用域的不同:sessionStorage不在不同瀏覽器中共享,即使在同一頁面中也不支持;而localStorage在所有同源窗口中都是共享的;同樣,cookie在所有同源窗口中也是共享的;
    • 參考鏈接:webStorage和cookie的區(qū)別

html5新增元素知識

  • html5新增頁面結(jié)構(gòu)元素:
    • article:文章,獨立性;
    • section:頁面分塊,用于評論區(qū)域等獨立區(qū)域;如果需要給其添加樣式,不能作為設(shè)置樣式的頁面容器,則需要給其添加一個div來設(shè)置樣式;
    • nav:導(dǎo)航,配合ul,li來完成導(dǎo)航欄制作;
    • aside:附屬信息,表示當前頁面和文章的附屬信息;
    • time: 時間信息;如:<time datetime="2019-02-21T10:40+09:00">2019-02-21</time>
    • header:頂部;
    • footer:底部;
    • hgroup:H標簽進行分組;
    • address:地址;
    • 代碼:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>html5新增的結(jié)構(gòu)元素</title>
     </head>
     <body>
     <div>
         <header>
             <h1>網(wǎng)頁標題</h1>
             <nav>
                 <ul>
                     <li><a href="#">首頁</a></li>
                     <li><a href="#">幫助</a></li>
                 </ul>
             </nav>
         </header>
         <article>
             <hgroup>
                 <h1>文章主標題</h1>
                 <h2>文章副標題</h2>
             </hgroup>
             <p>文章正文</p>
             <!--評論區(qū):獨立板塊-->
             <section>
                 <!--此時添加div的作用是:設(shè)置評論區(qū)的css樣式,section標簽不能設(shè)置樣式-->
                 <div>
                     <article>
                         <h1>評論標題</h1>
                         <p>評論內(nèi)容</p>
                     </article>
                 </div>
             </section>
         </article>
         <footer>
             <address>地址</address>
         </footer>
     </div>
     </body>
     </html>
    
  • html5新增的表單屬性
    • html4中表單標簽必須寫在form標簽中;通過設(shè)置action和method屬性來指定唯一的一個服務(wù)器和提交方法;
    • html5中表單標簽可以不放在form標簽中,通過id來指定form標簽;
     <form id="testform">
     </form>
     <textarea form="testform">xxxx</textarea>
    
    • html5針對表單標簽新增的表單屬性
      • formaction屬性:設(shè)置提交的服務(wù)器,可以給提交按鈕添加不同的fromaction屬性,可以將表單提交不同的頁面;
      • formmethod屬性:設(shè)置提交方法,分別對表單元素指定提交方法;
      • formenctype屬性:編碼類型;
      • formtarget屬性:指定提交后在何處打開頁面;
      • autofocus屬性:自動聚焦;
      • required屬性:若內(nèi)容為空白,無法提交且會出現(xiàn)信息提示字;
      • placeholder:占位符;默認字體設(shè)置;
      • list列表,datalist數(shù)表
        • 目的:給單行文本框添加一個list屬性,屬性值為某個datalist元素的ID值;已達到的效果:當文本框獲得焦點時,以提示文本的方式顯示下拉列表;
        • datalist標簽類似于select下拉列表,本身不顯示;
        • 代碼:
         <form>
            <input type="text" name="test" list="cur"/>
            <!--其中display:none可以不寫,寫的目的是為了滿足兼容性-->
            <datalist id="cur" style="display:none;">
                <option value="a">美好</option>
                <option value="b">美麗</option>
            </datalist>
         </form>
        
      • image提交按鈕的height和width屬性
        • 代碼:<input type="image" src="img/p1.jpg" alt="圖片提交按鈕" width="20" height="20"/>
  • html5改良的input元素
    • number:屬性有value,min,max,step;獲取表單的數(shù)值時使用valueAsNumber,直接獲取數(shù)值;針對于number表單元素;
    • range:滑塊條,屬性有:value,min,max,step;
  • 表單元素input元素的三個改變事件
    • onchange、oninput、onpropertychange三者的區(qū)別:
      • onchange事件只在鍵盤或者鼠標操作改變對象屬性,且失去焦點時觸發(fā);腳本觸發(fā)無效;
      • oninput事件與onpropertychange事件,只要對象屬性發(fā)生改變,就會立即觸發(fā),不用考慮是否失去焦點;
      • oninput為html5中標準事件,IE9以下瀏覽器不支持此事件;可通過addEventListener綁定二級事件;
      • onproperchange事件是IE瀏覽器專屬,在IE9以下瀏覽器使用此事件;
       var oInput=document.getElementsByTagname("input");
       if("oninput" in oInput){
           Object.addeventListener("input",fn,false);
       }else{
           Object.onpropertychange=fn;
       }
      
  • Range對象和Selection對象
    • Range對象基本概念:一個Range對象代表頁面上的一段連續(xù)區(qū)域,通過Range對象,可以獲取或修改網(wǎng)頁上的任何區(qū)域;
    • 獲取頁面中選取區(qū)域的文字內(nèi)容
      • 通過getSelection()來獲取選中區(qū)域文檔的元素節(jié)點;如:var sel=document.getSelection();包括所有選中區(qū)域的文本節(jié)點,相當于一個數(shù)組;每一個元素為一個文本節(jié)點;
      • 通過rangeCount來獲取選中區(qū)域的個數(shù);如sel.rangeCount;
      • 通過for循環(huán)來遍歷每個選中區(qū)域,然后通過sel.getRangeAt(i)來獲取每個選中區(qū)域;
      • 注:chrome瀏覽器中只能選中一個區(qū)域,而FireFox瀏覽器中可選取多個區(qū)域;
       <body>
       <h2>selection對象和range對象的使用讓我們紅塵作伴,活的瀟瀟灑灑,策馬奔騰共享人世繁華</h2>
       <input type="button" value="點擊" onclick="add2()"/>
       <div id="con"></div>
       <script>
           var oCon=document.getElementById("con");
           var con=null;
           function add2() {
               //獲取選中區(qū)域
               var selection=document.getSelection();
               //判斷選中區(qū)域的個數(shù)是否不為0
               if(selection.rangeCount>0){
                   con="您選中了"+selection.rangeCount+"段區(qū)域<br/>";
                   for(var i=0; i<selection.rangeCount; i++){
                       con+="選中的第"+(i+1)+"段區(qū)域內(nèi)容為:"+"&nbsp;&nbsp;"+selection.getRangeAt(i)+"<br/>";
                   }
                   oCon.innerHTML=con;
               }
           }
       </script>
       </body>
      
  • Range對象的方法: 選中節(jié)點范圍
    • rangeObject.selectNode(elementNode):選中elementNode元素節(jié)點;即此節(jié)點下的所有子孫節(jié)點,包括自己;
    • rangeObject.selectNodeContents(elementNode):選中elementNode元素節(jié)點內(nèi)的內(nèi)容,即該節(jié)點下的所有子孫節(jié)點,不包括自己;
    • rangeObject.deleteContents():刪除選中的內(nèi)容;
     <body>
     <div id="div1">
         <p>這是美好的日子啊</p>
         <p>這是美好的日子啊1</p>
         這是天空的藍牙
     </div>
     <form action="">
         <input type="button" onclick="delBtn(true)" value="刪除元素節(jié)點">
         <input type="button" onclick="delBtn(false)" value="刪除元素下所有內(nèi)容">
     </form>
     <script>
         var oDiv=document.getElementById("div1");
         //創(chuàng)建Range對象;
         var rangeObj=document.createRange();
         function delBtn(val) {
             if(val){
                 //選中元素節(jié)點
                 rangeObj.selectNode(oDiv);
                 rangeObj.deleteContents();
             }else{
                 //選中元素節(jié)點下的子孫節(jié)點
                 rangeObj.selectNodeContents(oDiv);
                 rangeObj.deleteContents();
             }
         }
     </script>
     </body>
    
  • Range對象的方法:選中特定的范圍
    • rangeObject.setStart(node,n):從文本節(jié)點中的第n個節(jié)點開始選中;
    • rangeObject.setEnd(node,m):從文本節(jié)點中的第m個節(jié)點結(jié)束選中;
      • 選中n到m之間的節(jié)點,包含n,不包含m;其中n從0取值;
    • rangeObject.setStartBefore(node1):將node1節(jié)點的起點位置作為range對象的起點位置;
    • rangeObject.setStartAfter(node1):將node1節(jié)點的終點位置作為range對象的起點位置;
    • rangeObject.setEndBefore(node2):將node2節(jié)點的起點位置作為range對象的終點位置;
    • rangeObject.setEndAfter(node2):將node2節(jié)點的終點位置作為range對象的終點位置;
    • 參考鏈接:range對象的選取的起終點位置
  • Range對象的復(fù)制,剪切
    • Range對象操作自己;需要接收返回值,然后對返回值進行操作;
    • rangeObj.cloneRange():復(fù)制Range對象;
    • rangeObj.cloneContents():復(fù)制Range對象下的內(nèi)容;
    • rangeObj.extractContents():剪切Range對象下的內(nèi)容;
  • Range對象insertNode(),compareBoundaryPoints()方法
    • rangeObj.insertNode(elenode):將節(jié)點插入到range對象區(qū)域的起點位置;
    • compareBoundaryPoints()方法:比較指定范圍的邊界點和當前范圍的邊界點;根據(jù)他們的順序返回-1,0,1;
      • 語法:curRangeObj.compareBoundaryPoints(how,sourceRange);即:當前選中的range對象范圍與源對象范圍的比較;
      • 返回值:-1,0,1;
      • how合法值:
        1)Range.START_To_START:比較兩個Range節(jié)點的開始點;
        2)Range.END_To_END:比較兩個Range節(jié)點的結(jié)束點;
        3)Range.START_To_END:比較sourceRange的開始點與當前范圍的結(jié)束點進行比較;
        4)Range.END_To_START:比較sourceRange的結(jié)束點與當前范圍的開始點進行比較;
      • 返回值:比較sourceRange邊界點和當前范圍的邊界點
        • 若sourceRange邊界點在當前范圍的邊界點之前,則返回1;
        • 若sourceRange邊界點在當前范圍的邊界點之后,則返回-1;
        • 若sourceRange邊界點與當前范圍的邊界點相同,則返回0;
      • 兩者比較的位置關(guān)系共有7種;
      • 方法實例驗證:
        • 知識點:獲取源Range對象,通過創(chuàng)建一個Range對象,然后通過r.selectNodeContents(elenode)來獲取區(qū)域;無需接收返回值;
         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>Range對象比較</title>
         </head>
         <body>
         <div>
             這是一段文字,用來體驗range對象的比較,通過與<span id="red" style="color:red;">美好的明天</span>進行比較,看范圍是否合適!
             <input type="button" value="點擊比較" onclick="Fn()"/>
         </div>
         <script>
             function Fn() {
                 var oSpan=document.getElementById("red");
                 var oRange=document.createRange();//創(chuàng)建一個range對象;
                 oRange.selectNodeContents(oSpan.firstChild);//此時oRange就已經(jīng)存在源區(qū)域;無需接收返回值;
                 var sel=document.getSelection();
                 if(sel.rangeCount>0){
                     //獲取選中區(qū)域的range對象;
                     var curRange=sel.getRangeAt(0);
                     //比較當前range對象和源對象
                     var how=Range.START_TO_START;
                     var num=curRange.compareBoundaryPoints(how,oRange);
                     if(num===-1){
                         alert("當前選中的區(qū)域的起點位置在源位置的起點位置的前面");
                     }else if(num===1){
                         alert("當前選中的區(qū)域的起點位置在源位置的起點位置的后面");
                     }
                 }
             }
         </script>
         </body>
         </html>
        
  • Range對象的collapse()和detach()方法
    • r.collapse(false):取消Range選中的內(nèi)容;即Range對象無選中內(nèi)容;
    • r.detach():釋放掉創(chuàng)建的Range對象;不再使用的時候;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,060評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,632評論 1 45
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,310評論 1 41
  • HTML5新增元素(下) output:輸出元素,與label同樣有for屬性,常作為實時(或JS)輸出的載體。 ...
    IOLG閱讀 1,183評論 0 1
  • 一、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8