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; }
- onchange、oninput、onpropertychange三者的區(qū)別:
- 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)容為:"+" "+selection.getRangeAt(i)+"<br/>"; } oCon.innerHTML=con; } } </script> </body>
- 通過getSelection()來獲取選中區(qū)域文檔的元素節(jié)點;如:
- 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對象,通過創(chuàng)建一個Range對象,然后通過
- 語法:
-
- Range對象的collapse()和detach()方法
-
r.collapse(false)
:取消Range選中的內(nèi)容;即Range對象無選中內(nèi)容; -
r.detach()
:釋放掉創(chuàng)建的Range對象;不再使用的時候;
-