整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
調(diào)查了身邊五六年經(jīng)驗(yàn)以上的幾個(gè)前端同學(xué)和同事，盡然發(fā)現(xiàn)絕大部分人都不知道，當(dāng)然，在看到這個(gè)文章之前，我也不知道這個(gè)，平時(shí)雖然都一直在做web前端開(kāi)發(fā)，但真沒(méi)涉及到這塊，或者說(shuō)涉及到了，也解決了，但是還真沒(méi)探究過(guò)這個(gè)問(wèn)題，你是否躺槍了呢？
這是一個(gè)很讓人困惑的CSS特征，我之前也談到過(guò)它。我們大家都知道，當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的，但是，對(duì)于一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度，而不是高度。
下面是一個(gè)實(shí)例演示代碼，你可以調(diào)整容器的寬度，但你會(huì)發(fā)現(xiàn)，黃塊塊的padding-bottom的距離也會(huì)隨之寬度而變大或變小。
HTML代碼
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>寬度是: <span id="op">400px</span></output>
<output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代碼
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代碼中，我們對(duì)內(nèi)部子元素聲明了3個(gè)豎向的距離，都是百分比形式。當(dāng)移動(dòng)滑塊時(shí)，我們的js代碼只需修改了容器的寬度。但是，這個(gè)這三個(gè)屬性高度都跟隨著變化，可以看出，它們的百分比計(jì)算是基于容器的寬度，而不是高度的。
切圖網(wǎng)致力于web前端技術(shù)開(kāi)發(fā)，關(guān)注用戶體驗(yàn)，關(guān)注移動(dòng)web前端，響應(yīng)式，微場(chǎng)景等技術(shù)，如果你對(duì)此感興趣請(qǐng)加公眾微信賬號(hào)：qietuwang
程序開(kāi)發(fā)過(guò)程中，我們始終要謹(jǐn)記的一點(diǎn)就是：程序是寫(xiě)給人看的，不是寫(xiě)給機(jī)器看的。任何項(xiàng)目開(kāi)發(fā)，都必須要考慮到人員迭代，我們不能讓下一個(gè)接手你代碼的人，在看到你寫(xiě)的代碼時(shí)會(huì)說(shuō)出這樣的話，“這個(gè)代碼是人寫(xiě)出來(lái)的嗎？可讀性太差了”。因此，我們必須遵循一定的規(guī)范，讓代碼的可讀性更強(qiáng)。
今天，我們就一起來(lái)看下前端開(kāi)發(fā)過(guò)程所能涉及到的跟HTML有關(guān)的規(guī)范問(wèn)題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應(yīng)當(dāng)采用駝峰式命名，首字母小寫(xiě)，后面每個(gè)單詞首字母大寫(xiě)，而且對(duì)于具體的文件應(yīng)當(dāng)具有語(yǔ)義化，能夠給人一種直觀的感受這個(gè)文件的作用是什么。現(xiàn)在前端開(kāi)發(fā)開(kāi)發(fā)過(guò)程中都講求模塊化開(kāi)發(fā)，甚至是組件化開(kāi)發(fā)，在文件命名時(shí)更應(yīng)該以模塊名或者組件名來(lái)命名。
例如在寫(xiě)一個(gè)AngularJS應(yīng)用時(shí)，由于會(huì)涉及到Controller，Service，F(xiàn)ilter等概念，我們會(huì)分別建立一個(gè)文件，假如這個(gè)模塊的名字是庫(kù)存管理stockManage，我們可以這樣來(lái)命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說(shuō)的語(yǔ)義化指的是使用具有語(yǔ)義化的標(biāo)簽，在H5中添加了類似于header, nav, article, section, aside, footer等標(biāo)簽，從單詞的意思上我們也很容易看出標(biāo)簽的含義。
我們不推薦使用只有div標(biāo)簽的頁(yè)面，例如
不推薦使用
而是應(yīng)該使用以下這種帶有語(yǔ)義化的標(biāo)簽。
推薦使用
img標(biāo)簽是網(wǎng)頁(yè)用來(lái)顯示照片的標(biāo)簽，在頁(yè)面所有標(biāo)簽中占據(jù)的比例非常之高，但是在使用img標(biāo)簽時(shí)也有下面需要注意的點(diǎn)。
給定width和height屬性
因?yàn)闉g覽器在加載圖片的過(guò)程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設(shè)定高度和寬度，這樣在圖片加載過(guò)程中會(huì)不斷的計(jì)算，重排頁(yè)面的布局，在網(wǎng)絡(luò)不好的時(shí)候就會(huì)經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動(dòng)的情況。因此給img元素設(shè)定width和height屬性是必要的。
alt屬性
img標(biāo)簽的alt屬性表示的是在圖片無(wú)法顯示時(shí)，使用文字來(lái)代替顯示，它可以用在以下幾個(gè)場(chǎng)景中：
網(wǎng)路延遲太大
src屬性指定路徑出錯(cuò)
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網(wǎng)頁(yè)SEO效果，強(qiáng)烈建議在img標(biāo)簽中使用alt屬性。
而且很重要的一點(diǎn)是img標(biāo)簽的引入是需要呈現(xiàn)出與頁(yè)面相關(guān)的內(nèi)容，其他情況應(yīng)該使用CSS樣式實(shí)現(xiàn)。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁(yè)面文件，CSS樣式文件和Javascript腳本文件。我們應(yīng)該讓三者各司其職，在HTML中不應(yīng)該出現(xiàn)CSS和JS表達(dá)式；在JS文件中，不應(yīng)該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應(yīng)當(dāng)盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應(yīng)當(dāng)遵循下面的原則。
一個(gè)HTML文件應(yīng)該只引入一個(gè)CSS文件
合理運(yùn)用JS合并技術(shù)（Gulp, Webpack插件），保證引入JS文件不多于兩個(gè)
不使用行內(nèi)腳本元素（<script>alert('Hello World')</script>）
不在標(biāo)簽上使用style內(nèi)聯(lián)樣式
不要使用style屬性
腳本加載在網(wǎng)頁(yè)加載過(guò)程中是一個(gè)很耗性能的過(guò)程，如果把JS文件放在head標(biāo)簽里，它的加載會(huì)一直阻塞DOM的解析，造成頁(yè)面延遲。
因此現(xiàn)在講求的是腳本的異步加載過(guò)程，我們會(huì)使用到async關(guān)鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點(diǎn)可以非常方便的實(shí)現(xiàn)當(dāng)前頁(yè)面間的跳轉(zhuǎn)，現(xiàn)在越來(lái)越多的教程網(wǎng)頁(yè)由于是單頁(yè)面，經(jīng)常會(huì)用到錨點(diǎn)跳轉(zhuǎn)。
對(duì)錨點(diǎn)知識(shí)還不了解的，可以看看我寫(xiě)的這篇文章《神奇的html錨點(diǎn)，讓你的網(wǎng)頁(yè)在內(nèi)部自由的跳轉(zhuǎn)》。
今天這篇文章主要總結(jié)了前端開(kāi)發(fā)過(guò)程中的HTML規(guī)范問(wèn)題，相信大家也或多或少遇到過(guò)，希望這篇文章能加深大家的認(rèn)識(shí)。
ideo元素與audio元素所具有的屬性大致相同，
下面來(lái)看一下這兩個(gè)元素都具有哪些屬性。
src屬性和autoplay屬性
src屬性用于指定媒體數(shù)據(jù)的URL地址。
autoplay屬性用于指定媒體是否在頁(yè)面加載后自動(dòng)播放，使用方法如下。
<video src="sample.mov" autoplay="autoplay"></video>
在文件中創(chuàng)建多媒體元素<video>，并在元素的src屬性中，
設(shè)置播放的視頻文件的URL地址，并設(shè)置頁(yè)面加載完成后自動(dòng)播放這個(gè)文件。代碼如下。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>使用多媒體元素播放文件</title>
</head>
<body>
<video id="vdoMain" src="../Video/2.ogv" autoplay="true">
你的瀏覽器不支持視頻
</video>
</body>
</html>
perload屬性
perload屬性用于指定視頻或音頻數(shù)據(jù)是否預(yù)加載。如果使用預(yù)加載，
則瀏覽器會(huì)預(yù)先將視頻或音頻數(shù)據(jù)進(jìn)行緩沖，這樣可以加快播放速度，
因?yàn)椴シ艜r(shí)數(shù)據(jù)已經(jīng)預(yù)先緩沖完畢。
該屬性有3個(gè)可選值，分別是none、metadata和auto，其默認(rèn)值為auto。
none值表示不進(jìn)行預(yù)加載。
metadata表示只預(yù)加載媒體的元數(shù)據(jù)（媒體字節(jié)數(shù)、第一幀、播放列表、持續(xù)時(shí)間等）。
auto表示預(yù)加載全部視頻或音頻。
該屬性的使用方法如下。
<video src="sample.mov" preload="auto"></video>
poster（video元素獨(dú)有屬性）和loop屬性
當(dāng)視頻不可用時(shí)，可以使用該元素向用戶展示一幅替代用的圖片。當(dāng)視頻不可用時(shí)，
最好使用poster屬性，以免展示視頻的區(qū)域中出現(xiàn)一片空白。
該屬性的使用方法如下。
<video src="sample.mov" psoter="cannotuse.jpg"></video>
在文件中創(chuàng)建一個(gè)video元素，為video元素設(shè)置poster屬性，并選取一幅圖片作為該屬性的值。代碼如下。
<html>
<head>
<meta charset="utf-8" />
<title>設(shè)置video 元素的poster 屬性</title>
</head>
<body>
<video id="vdoMain" src="../Video/2.ogv" controls="true" poster="../Images/1.jpg">
你的瀏覽器不支持視頻
</video>
</body>
</html>
運(yùn)行實(shí)例，在播放視頻文件之前，在視頻播放區(qū)域中首先將顯示poster屬性指定的圖片，
loop屬性用于指定是否循環(huán)播放視頻或音頻，
其使用方法如下。
<video src="sample.mov" autoplay="autoplay" loop="loop"></video>
controls屬性、width屬性和height屬性（后兩個(gè)是video元素獨(dú)有屬性）
controls屬性指定是否為視頻或音頻添加瀏覽器自帶的播放用的控制條。
控制條中具有播放、暫停等按鈕。其使用方法如下。
<video src="sample.mov" controls="controls"></video>
說(shuō)明
開(kāi)發(fā)者也可以在腳本中自定義控制條，而不使用瀏覽器默認(rèn)的控制條。
width屬性與height屬性用于指定視頻的寬度與高度（以像素為單位），
使用方法如下。
<video src="sample.mov" width="500" height="500"></video>
在文件中創(chuàng)建一個(gè)video元素，首先在元素的src屬性中設(shè)置需要播放的視頻文件，
然后分別設(shè)置video元素的寬度與高度。代碼如下。
<html>
<head>
<meta charset="utf-8" />
<title>設(shè)置video 元素的大小</title>
</head>
<body>
<video id="vdoMain" src="../Video/2.ogv" autoplay="true" width="360" height="220">
你的瀏覽器不支持視頻
</video>
</body>
</html>
error屬性
在讀取、使用媒體數(shù)據(jù)的過(guò)程中，正常情況下該屬性為null，
但是任何時(shí)候只要出現(xiàn)錯(cuò)誤，該屬性將返回一個(gè)MediaError對(duì)象，
該對(duì)象的code屬性返回對(duì)應(yīng)的錯(cuò)誤狀態(tài)碼，其可能的值如下。
MEDIA_ERR_ABORTED（數(shù)值1）：媒體數(shù)據(jù)的下載過(guò)程由于用戶的操作而被終止。
MEDIA_ERR_NETWORK（數(shù)值2）：確認(rèn)媒體資源可用，但是在下載時(shí)出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤，媒體數(shù)據(jù)的下載過(guò)程被終止。
MEDIA_ERR_DECODE(數(shù)值3）：確認(rèn)媒體資源可用，但是解碼時(shí)發(fā)生錯(cuò)誤。
MEDIA_ERR_SRC_NOT_SUPPORTED（數(shù)值4）：媒體資源不可用，媒體格式不被支持。
error屬性為只讀屬性。
networkState屬性
該屬性在媒體數(shù)據(jù)加載過(guò)程中讀取當(dāng)前網(wǎng)絡(luò)的狀態(tài)，其值如下。
NETWORK_EMPTY（數(shù)值0）：元素處于初始狀態(tài)。
NETWORK_IDLE（數(shù)值1）：瀏覽器已選擇好用什么編碼格式來(lái)播放媒體，但尚未建立網(wǎng)絡(luò)連接。
NETWORK_LOADING（數(shù)值2）：媒體數(shù)據(jù)加載中。
NETWORK_NO_SOURCE（數(shù)值3）：沒(méi)有支持的編碼格式，不執(zhí)行加載。
networkState屬性為只讀屬性，讀取網(wǎng)絡(luò)狀態(tài)的實(shí)例代碼如下。
currentSrc屬性、buffered屬性
可以用currentSrc屬性來(lái)讀取播放中的媒體數(shù)據(jù)的URL地址，該屬性為只讀屬性。
最靠譜的WEB前端教程——整整140集，全程干貨無(wú)廢話，學(xué)完變大佬！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
