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