整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。
head頭部有以下幾種常用標簽：
meta：主要提供有關頁面的元信息。
link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。
title：頁面標題的標簽。
script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖：
常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內聯標簽有：span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：
常用的內聯塊級標簽有：img、input、textarea。
4、區域標簽。
所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。
5、表單標簽。
這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：
?表單常用的標簽有：form、input、select、option、textarea 。
以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
.標簽語義化
提到標簽，很多剛入門前端開發的人，肯定都會很納悶，這么多HTML標簽我如何記住呢？我又應該根據什么依據去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發的過程中，然后不斷的積累，不斷的總結，發現要想記住HTML標簽以及怎樣更好的去使用這些標簽，需要做到以下三點：
第一點：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。
第二點：根據內容選擇使用HTML標簽，什么意思呢？見下文分解。
第三點：遵循W3C的規范。
首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標簽了，而且在開發頁面的過程中，你們會發現，咱們最常用的也就是那么幾個而已。
其次，第二點根據內容選擇使用HTML標簽，這一點非常關鍵，因為你掌握了這一點，你能很好地去使用HTML標簽，并且能讓頁面變得很優質，這也會提高你網頁被搜索引擎收錄。
最后，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現出一致的效果，那么必須遵循W3C的規范。
說了這么多，只是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。
我們在使用標簽的過程中，大家會發現類似的標簽，比如標題標簽（h1-h6）、p（段落標簽）、a（超鏈接標簽）以及圖片標簽（img）等，通過這些標簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標簽該怎么，用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來，移動Web都是通過H5去開發頁面，而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。
那么什么是標簽語義化呢？所謂的標簽語義化，指的就是標簽所代表的含義。咱們可以通過標簽的含義，正確地去使用它。
標簽語義化的作用：
如下圖所示，通過使用語義化標簽和沒使用任何標簽，就能直觀感受到語義化標簽的好處。
普通的文本和使用語義化標簽后的效果對比圖
那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉后，如果頁面中的結構依然組織有序，并且有良好的可讀性，那么它就是非常良好的。
如何去使用這些標簽呢？首先根據內容確定語義化的標簽，其次再根據呈現需求，使用CSS樣式。因此HTML標簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標簽的語義化去記憶。如下圖所示，通過使用語義化標簽，瞬間就能把普通的文本，以更清晰的結構呈現出來。
使用語義化的普通文本，變得更為結構清晰
2.常用標簽分類匯總
通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽，這些標簽又被統稱為排版標簽。
在開發中，排版標簽主要是和CSS搭配使用，主要是用于顯示網頁的整體結構，也是網頁布局中常用的標簽。下面我一一了解一下。
排版標簽：
【1】標題標簽（h1-h6）
標題標簽的使用
呈現的效果如下：
呈現的效果
一句話總結：使用了標題標簽的文字會加粗，會根據級別顯示文字的大小，并且一行只能放一個標題。
【2】段落標簽（p）
p標簽語法格式
【3】水平線標簽（hr）
【4】換行標簽（br）
文本
呈現效果：
使用br標簽后的效果
【5】div和span標簽
最后給大家來一個完美的總結：
排版標簽的匯總
難道這就完了嗎？咱們的標簽就只有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化標簽。
文本格式化標簽
文本格式化標簽的作用：通常文本格式化標簽主要用于網頁中文字樣式的設置，比如字體加粗、斜體或下劃線等效果，當然后期也會通過CSS樣式來實現，會更加完美。
常見的文本格式化標簽如下：
文本格式化標簽
它們分別的區別：
我么網頁中除了排版標簽、文本格式化標簽，當然還少不了圖片標簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。
圖片標簽（img）
img標簽屬性
標簽屬性的特點：
圖片標簽屬性使用
鏈接標簽
a標簽的常見屬性
提示：
內部鏈接地址
注釋標簽
注釋標簽
好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結的內容，能幫到正在瀏覽我這篇內容的前端開發者，也希望你們有所收獲。如果喜歡的，可以點擊關注，會繼續給大家分享更多的內容。
例
簡單的 HTML5 文檔：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
瀏覽器支持
所有主流瀏覽器都支持 <html> 標簽。
標簽定義及使用說明
<html> 標簽告知瀏覽器這是一個 HTML 文檔。
<html> 標簽是 HTML 文檔中最外層的元素。
<html> 標簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標簽）的容器。
HTML 4.01 與 HTML5之間的差異
HTML5 中，增加了一個新屬性：manifest。
HTML 與 XHTML 之間的差異
xmlns 屬性在 XHTML 中是必需的，但在 HTML中不是。
然而，即使 XHTML 文檔中的 <html> 沒有使用 xmlns 屬性，W3C 上的 HTML 驗證器也不會報錯。這是因為 "xmlns=http://www.w3.org/1999/xhtml" 是一個固定值，即使您沒有包含它，此值也會被添加到 <html> 標簽中。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| manifestNew | URL | 定義一個 URL，在這個 URL 上描述了文檔的緩存信息。 |
| xmlns | http://www.w3.org/1999/xhtml | HTML 不支持。只有 XHTML 支持。 規定 XML 的 namespace 屬性（如果您需要您的內容符合 XHTML，則使用這個屬性。）。 |
全局屬性
<html> 標簽支持 HTML 的全局屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
