你的HTML頁面書寫規(guī)范嗎？必須知道的HTML書寫規(guī)范

言：每一個行業(yè)都有自己的規(guī)范，不已規(guī)矩，不成方圓。尤其是代碼，代碼規(guī)范便于閱讀，便于維護。

1.用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

2.嵌套元素應當縮進一次（即兩個空格）。

3.對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。

4.不要在自閉合（self-closing）元素的尾部添加斜線

5.不要省略可選的結束標簽（closing tag）（例如，</li> 或</body>）。

6.為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現(xiàn)。<!DOCTYPE html>

7.語言屬性

根據(jù) HTML5 規(guī)范：

強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發(fā)音，有助于翻譯工具確定其翻譯時所應遵守的規(guī)則等等.

<html>

</html>

8.IE 兼容模式

IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<metahttp-equiv="X-UA-Compatible"content="IE=Edge">

9.字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

</head>

10.引入 CSS 和 JavaScript 文件

根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

<style>

/* ... */

</style>

11.

布爾（boolean）型屬性

布爾型屬性可以在聲明時不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。

12.

減少標簽的數(shù)量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現(xiàn)。請看下面的案例：

<span>

</span>

13.

不要使用 @import

與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數(shù)，還會導致不可預料的問題。替代辦法有以下幾種：

使用多個 <link> 元素

通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件

通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能

14.

class 命名

class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。

class 名稱應當盡可能短，并且意義明確。

使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的前綴。

使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

兩個概念應該是一個老生常談的問題了，新手前端和高級前端的區(qū)別也在于此。如何將JS性能優(yōu)化到最合適的程度，如何保證頁面更流暢的運行是前端永遠繞不開的話題，而節(jié)流和防抖能有效的優(yōu)化性能。下面我們一起看看：

防抖（Debounce）

我對函數(shù)防抖的定義：當函數(shù)被連續(xù)調用時，該函數(shù)并不執(zhí)行，只有當其全部停止調用超過一定時間后才執(zhí)行1次。

一個被經(jīng)常提起的例子：

上電梯的時候，大家陸陸續(xù)續(xù)進來，電梯的門不會關上，只有當一段時間都沒有人上來，電梯才會關門。

Talk is cheap，我們直接 show code 吧。

先做基本的準備（篇幅原因，HTML部分省略）：

let container = document.getElementById('container');
// 事件處理函數(shù)
function handle(e) {
 console.log(Math.random()); 
}
// 添加滾動事件
container.addEventListener('scroll', handle);

我們發(fā)現(xiàn)，每滾動一下，控制臺就會打印出一行隨機數(shù)。

基礎防抖

我們現(xiàn)在寫一個最基礎的防抖處理：

function debounce(func, wait) {
 var timeout;//標記
 return function() {
 clearTimeout(timeout);
 timeout = setTimeout(func, wait);
 }
}

事件也做如下改寫：

container.addEventListener('scroll', debounce(handle, 1000));

現(xiàn)在試一下，我們會發(fā)現(xiàn)只有我們停止?jié)L動1秒鐘的時候，控制臺才會打印出一行隨機數(shù)。

標準防抖

以上基礎版本會有兩個問題，請看如下代碼：

// 處理函數(shù)
function handle(e) {
 console.log(this); //輸出Window對象
 console.log(e); //undefined
}

沒錯，當我們不使用防抖處理時，handle()函數(shù)的this指向調用此函數(shù)的container，而在外層使用防抖處理后，this的指向會變成Window。其次，我們也要獲取到事件對象event。

所以我們要對防抖函數(shù)做以下改寫：

function debounce(fn, wait) {
 let timeout;
 return function() {
 let that = this;
 let arg = arguments;
 clearTimeout(timeout);
 timeout = setTimeout(function(){
 fn.apply(that,arg)//使用apply改變this指向
 }, wait);
 }
}

當然了，如果使用箭頭函數(shù)便可以省去外層聲明。

先觸發(fā)式防抖

以上的情況都是只有當連續(xù)觸發(fā)停止后才執(zhí)行，那如果我們想讓事件第一次觸發(fā)就執(zhí)行，后面的連續(xù)觸發(fā)都不執(zhí)行，直到停止觸發(fā)一段時間才可以再次觸發(fā)（比如防止頻繁點擊），該如何處理呢？

那么可以利用同樣的原理，稍作修改即可：

function debounce(fn, wait) {
 let timeout;
 return function(){
 let arg = arguments;
 let that = this;
 clearTimeout(timeout);
 !timeout && fn.apply(that,arg)
 timeout = setTimeout(function(){
 timeout = null;
 }, wait);
 }
}

節(jié)流 (Throttle)

顧名思義，節(jié)流就是節(jié)約流量，將連續(xù)觸發(fā)的事件稀釋成預設評率。 比如每間隔1秒執(zhí)行一次函數(shù)，無論這期間觸發(fā)多少次事件。

這有點像公交車，無論在站點等車的人多不多，公交車只會按時來一班，不會來一個人就來一輛公交車。

標準節(jié)流

function throttle(fn, wait) {
 let timeout; 
 return function () {
 if (!timeout) { 
 timeout = setTimeout(() => {
 timeout = null;
 fn.apply(this, arguments)
 }, wait)
 }
 }
}

用滾動事件來描述節(jié)流，其實是一個非常典型的場景，比如需要用滾動事件判斷是否加載更多等。

先觸發(fā)式節(jié)流

和防抖函數(shù)類似，以上的情況是先等待后觸發(fā)，如果我們想讓事件先觸發(fā)后等待，該如何處理呢？網(wǎng)上大部分文章都告訴你用時間戳的方式去實現(xiàn)，其實只要像防抖一樣稍作修改即可實現(xiàn)。

function throttle(fn, wait) {
 let timeout; 
 return function () {
 if (!timeout) { 
 fn.apply(this, arguments)
 timeout = setTimeout(() => {
 timeout = null;
 }, wait)
 }
 }
}

這樣，我們就會發(fā)現(xiàn)第一次觸發(fā)函數(shù)就會立即生效。

總結

關于防抖與節(jié)流，lodash、underscore等工具庫都有完善的實現(xiàn)可以直接用，本沒有必要造輪子。本文的目的僅僅是為了將其主要思想和實現(xiàn)思路展現(xiàn)出來。更重要的，知道防抖和節(jié)流的本質后，就知道在何時使用防抖或者節(jié)流，何時先觸發(fā)或后觸發(fā)。無論需求如何改變，都可以靈活的運用

TML 文檔是由 HTML 元素定義的。

HTML 元素(推薦學習：HTML入門教程)

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。

開始標簽
元素內容
結束標簽
<p>
This is a paragraph
</p>
<a href="default.htm" >
This is a link
</a>
<br />

注：開始標簽常被稱為開放標簽（opening tag），結束標簽常稱為閉合標簽（closing tag）。

HTML 元素語法

HTML 元素以開始標簽起始

HTML 元素以結束標簽終止

元素的內容是開始標簽與結束標簽之間的內容

某些 HTML 元素具有空內容（empty content）

空元素在開始標簽中進行關閉（以開始標簽的結束而結束）

大多數(shù) HTML 元素可擁有屬性

嵌套的 HTML 元素

大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文檔由嵌套的 HTML 元素構成。

實例：

不要忘記結束標簽

即使您忘記了使用結束標簽，大多數(shù)瀏覽器也會正確地顯示 HTML：

上面的例子在大多數(shù)瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產(chǎn)生不可預料的結果或錯誤。

注：未來的 HTML 版本不允許省略結束標簽。

以上就是HTML元素的語法與構成的詳細內容，更多請關注其它相關文章！

在線咨詢

上一篇：荷式開門，救命大法，請不要只是刷爆朋友圈！
下一篇：如何控制表單內tab鍵切換的順序

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

你的HTML頁面書寫規(guī)范嗎？必須知道的HTML書寫規(guī)范

言：每一個行業(yè)都有自己的規(guī)范，不已規(guī)矩，不成方圓。尤其是代碼，代碼規(guī)范便于閱讀，便于維護。

防抖（Debounce）

節(jié)流 (Throttle)

總結

您的項目需求