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