HTML5記錄
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供瀘水網(wǎng)站建設(shè)、瀘水做網(wǎng)站、瀘水網(wǎng)站設(shè)計、瀘水網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、瀘水企業(yè)網(wǎng)站模板建站服務(wù)，十多年瀘水做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
一、VS code引入插件后運(yùn)行，終端執(zhí)行
二、引入外部js文件：
1、js的exports.a = a；方式暫時不知道怎么做
2、直接引入，script之后可以直接使用。參照html-vue項目
3、數(shù)據(jù)類型
String、Number、Boolean、Null、undefined、symbol、Object、Array、Function
三、 JS顯示數(shù)據(jù)方式：
window.alert()
document.write()
innerHTML=‘’
console.log()
四、 let、const、var
五、全局變量、局部變量注意點
如果變量在函數(shù)內(nèi)沒有聲明（沒有使用 var 關(guān)鍵字），該變量為全局變量。
六、事件：
onchange、onclick、onmouseover、onmouseout、onkeydown、onload…
html dom onclick之類的直接使用，vue是@click，小程序是bindTap
七、 this關(guān)鍵字：
1、在對象方法中， this 指向調(diào)用它所在方法的對象。
2、單獨(dú)使用 this，它指向全局(Global)對象。
3、函數(shù)使用中，this 指向函數(shù)的所屬者。
4、嚴(yán)格模式下函數(shù)是沒有綁定到 this 上，這時候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對象，可以將 this 引用到任何對象。
八、 箭頭函數(shù)：
1、有的箭頭函數(shù)都沒有自己的 this 。 不適合定義一個 對象的方法。
2、當(dāng)我們使用箭頭函數(shù)的時候，箭頭函數(shù)會默認(rèn)幫我們綁定外層 this 的值，所以在箭頭函數(shù)中 this 的值和外層 的 this 是一樣的。
3、箭頭函數(shù)是不能提升的，所以需要在使用之前定義。
4、使用 const 比使用 var 更安全，因為函數(shù)表達(dá)式始終是一個常量。
九、閉包：
閉包是一種保護(hù)私有變量的機(jī)制，在函數(shù)執(zhí)行時形成私有的作用域，保護(hù)里面的私有變量不受外界干擾。
直觀的說就是形成一個不銷毀的棧環(huán)境。
閉包會持有父方法的局部變量和參數(shù)并且不會隨父方法銷毀而銷毀
不必要的閉包只會增加內(nèi)存消耗
十、 事件
body事件：onload、onunload
元素事件：onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus
事件捕獲
document.getElementById(‘demo’).addEventListener(‘事件名’, 方法名, 是否捕獲傳遞)
方法名：如果是相應(yīng)事件，則只可寫方法名methodName，寫成methodName()則會自動執(zhí)行
如果方法需要傳遞參數(shù)，則只可以使用匿名函數(shù)， function( { methodName(p1, p2) } );
是否捕獲傳遞：默認(rèn)false，即冒泡傳遞
IE8和更早版本： x.attachEvent("onclick", myFunction) ;
十一、Window加載，頁面聲明周期入口
window.onload = function () { }
十二、數(shù)據(jù)存儲
localStorage不會被自動刪除，
sessionStorage 網(wǎng)頁關(guān)閉會自動刪除
cookie
sql
manifest文件
區(qū)別：
localStorage只要在相同的協(xié)議、相同的主機(jī)名、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)。
sessionStorage比localStorage更嚴(yán)苛一點，除了協(xié)議、主機(jī)名、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁）下。
十三、 CSS聲明權(quán)重（選擇器）
內(nèi)聯(lián)ID偽類屬性類元素/類型通用
!important會改變優(yōu)先級
十四、 元素隱藏/顯示
1、dispatch：none 隱藏 不占用空間
2、visibility：hidden 隱藏，仍然占用空間
3、v-if 存在/不存在
4、v-show 只生成一次，占用內(nèi)存
十五、 Position
static 默認(rèn)方式，沒有定位
fixed 相對于瀏覽器窗口固定定位，不占用文檔流，其他元素會相對位移
absolute 相對于最近的已定位父元素定位，不占用文檔流，其他元素會相對位移
relative 相對于自身的定位
sticky 粘滯定位，基于用戶的滾動位置定位
十六、 float
1、只能左右浮動
2、左右浮動，直到外邊緣碰到另一個浮動元素
3、浮動之后的元素將圍繞它
4、浮動之前的元素不受影響
5、如果是圖像浮動，下面的文本流將環(huán)繞它
6、clear聲明的元素， 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。
推薦使用flex布局
十七、 文字顯示…
單行
任意行
十八、 box-shadow順序
十九、 flex布局
容器屬性：
屬性 / 說明可選值
f方向： lex-direction
換行：flex-wrap
簡寫：flex-flow
主軸上的對齊方式：justify-content
交叉軸上如何對齊：align-items
多根軸線的對齊方式：align-content。
如果項目只有一根軸線，該屬性不起作用
項目item屬性:
order：排列順序，越小越靠前
flex-grow：放大比例，2比1占用的空間大一倍
flex-shrink：縮小比例，默認(rèn)1，當(dāng)空間不足時等比例縮小。如果一個項目的屬性為0，其他項目都為1，則空間 不足時，前者不縮小
flex-basis：定義了在分配多余空間之前，項目占據(jù)的主軸空間
flex ：簡寫
align-self：允許單個項目與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch
設(shè)置下拉列表框的默認(rèn)值:使用關(guān)鍵字selected
select name = "pronvince"
option value ="SH"上海/option
option value ="BJ"北京/option
option value ="JS"江蘇/option
option value ="HB" selected="selected"湖北/option
option value ="ZJ"浙江/option
/select
如果希望設(shè)置默認(rèn)值，在option 的標(biāo)簽里加入:selected = "selected"即在展示時，為默認(rèn)值。
html 有一個selected屬性，selected=‘true’時，即選中，selected=‘false’則未選中。在html5中則將selected=‘true’可以縮寫為selected,因為selected=‘false’是默認(rèn)屬性，比如： Volvo Saab Opel Audi 那么第4個option就是被選中的元素。
meter 標(biāo)簽是HTML5新增的標(biāo)簽，定義度量衡。僅用于已知最大和最小值的度量。也就是必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。
meter?min="0"?max="20"5/meter
meter2?out?of?10/meter
meter30%/meter
high????number????定義度量的值位于哪個點，被界定為高的值。????
low????number????定義度量的值位于哪個點，被界定為低的值。????
max????number????定義最大值。默認(rèn)值是?1。????
min????number????定義最小值。默認(rèn)值是?0。????
optimum????number????定義什么樣的度量值是最佳的值。如果該值高于?"high"?屬性，則意味著值越高越好。如果該值低于?"low"?屬性的值，則意味著值越低越好。????
value????number????定義度量的值。
可以用CSS的偽元素對默認(rèn)的顯示方式處理下（因為很可能各個瀏覽器的顯示方式不一）：
!doctype?html
html?lang="en"
head
meta?charset="UTF-8"
titleCoolwp.net?Demo/title
style
.deal?meter?{?-webkit-appearance:?none;?}
.deal?::-webkit-meter-bar?{
height:?1em;
background:?white;
border:?1px?solid?black;
}
.deal?::-webkit-meter-optimum-value?{?background:?green;?} /*?好?*/
.deal?::-webkit-meter-suboptimum-value?{?background:?orange;?} /*?湊合?*/
.deal?::-webkit-meter-even-less-good-value?{?background:?blue;?} /*?糟糕?*/
.deal?::-moz-meter-bar?{
background:?rgba(0,96,0,.6);
}/style
/head
body
p
默認(rèn)的：meter?low="69"?high="80"?max="100"?optimum="100"?value="92"A/meter
meter?low="69"?high="80"?max="100"?optimum="100"?value="72"C/meter
meter?low="69"?high="80"?max="100"?optimum="100"?value="52"E/meter
/p
p?class="deal"
處理后的：meter?low="69"?high="80"?max="100"?optimum="100"?value="92"A/meter
meter?low="69"?high="80"?max="100"?optimum="100"?value="72"C/meter
meter?low="69"?high="80"?max="100"?optimum="100"?value="52"E/meter
/p
/body
/html
實際顯示效果：
重慶分公司
重慶分公司
