在網(wǎng)頁(yè)開(kāi)發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？

果想開(kāi)發(fā)一個(gè)網(wǎng)站，除了要精通后端開(kāi)發(fā)語(yǔ)言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語(yǔ)言，它包含有眾多的標(biāo)簽，我們可以通過(guò)這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見(jiàn)的網(wǎng)頁(yè)。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類型聲明。

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主標(biāo)簽。

這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對(duì)的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁(yè)面的元信息。

link：用來(lái)定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁(yè)面標(biāo)題的標(biāo)簽。

script：用來(lái)調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級(jí)標(biāo)簽。

塊級(jí)標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒(méi)有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：

<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>

前端頁(yè)面顯示的效果如下圖：

常用的塊級(jí)標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同，它不能獨(dú)自占有一行，會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<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樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒(méi)有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。

內(nèi)聯(lián)塊級(jí)標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級(jí)標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<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樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來(lái)劃分布局頁(yè)面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁(yè)面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。

5、表單標(biāo)簽。

這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開(kāi)發(fā)網(wǎng)頁(yè)時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來(lái)后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開(kāi)發(fā)中很少用到，所以，這里就沒(méi)有做相應(yīng)的介紹。

例

簡(jiǎn)單的 HTML5 文檔：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

文檔內(nèi)容......

</body>

</html>

瀏覽器支持

所有主流瀏覽器都支持 <html> 標(biāo)簽。

標(biāo)簽定義及使用說(shuō)明

<html> 標(biāo)簽告知瀏覽器這是一個(gè) HTML 文檔。

<html> 標(biāo)簽是 HTML 文檔中最外層的元素。

<html> 標(biāo)簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標(biāo)簽）的容器。

HTML 4.01 與 HTML5之間的差異

HTML5 中，增加了一個(gè)新屬性：manifest。

HTML 與 XHTML 之間的差異

xmlns 屬性在 XHTML 中是必需的，但在 HTML中不是。

然而，即使 XHTML 文檔中的 <html> 沒(méi)有使用 xmlns 屬性，W3C 上的 HTML 驗(yàn)證器也不會(huì)報(bào)錯(cuò)。這是因?yàn)?"xmlns=http://www.w3.org/1999/xhtml" 是一個(gè)固定值，即使您沒(méi)有包含它，此值也會(huì)被添加到 <html> 標(biāo)簽中。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
manifestNew	URL	定義一個(gè) URL，在這個(gè) URL 上描述了文檔的緩存信息。
xmlns	http://www.w3.org/1999/xhtml	HTML 不支持。只有 XHTML 支持。規(guī)定 XML 的 namespace 屬性（如果您需要您的內(nèi)容符合 XHTML，則使用這個(gè)屬性。）。

全局屬性

<html> 標(biāo)簽支持 HTML 的全局屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

一下html中文件標(biāo)簽和文本標(biāo)簽的使用

目的是學(xué)會(huì)使用，所以借助工具可以省好多時(shí)間

1.文件標(biāo)簽：構(gòu)成html最基本的標(biāo)簽

html:html文檔的根標(biāo)簽

head：頭標(biāo)簽。用于引入html文檔的一些屬性。引入外部的一些資源

title：標(biāo)題標(biāo)簽

body：體標(biāo)簽

<!DOCTYPE html>:html5中定義該文檔是html

2.文本標(biāo)簽：和文本有關(guān)的標(biāo)簽

注釋:<!-- 注釋內(nèi)容 –->

<h1> 到<h6>:標(biāo)題標(biāo)簽自帶換行的效果

<p>：表示段落的標(biāo)簽

<br>：換行標(biāo)簽<br/>和<br>的寫(xiě)法都不會(huì)報(bào)錯(cuò)

<hr>：顯示一條水平線（也是一個(gè)自閉和標(biāo)簽）水平線有一些屬性我們可以控制它的樣式。hr里面表示高度是size而不是height.對(duì)齊方式默認(rèn)是居中的。

<b>：字體加粗

<i>：斜體

<font>:字體標(biāo)簽（通過(guò)屬性來(lái)修改字體的字號(hào)，大小，顏色，以及字體的樣式）

<center>:文本居然標(biāo)簽

這里講下網(wǎng)頁(yè)下面的版權(quán)標(biāo)簽是如何寫(xiě)出來(lái)的。

3.圖片標(biāo)簽：用來(lái)展示圖片的（圖片也是一個(gè)自閉合標(biāo)簽）

屬性:src:用來(lái)指定圖片的位置

什么都不寫(xiě)默認(rèn)就是./的形式

../表示上一級(jí)目錄

4.列表標(biāo)簽：

有序列表:ol,li(li表示的是列表的每一項(xiàng))

無(wú)序列表:ul,li

5.鏈接標(biāo)簽：

a:定義一個(gè)超鏈接

屬性：

href:指定訪問(wèn)資源的URL(統(tǒng)一資源定位符，就是路徑的表示形式)

target：（是目標(biāo)的意思）指定打開(kāi)資源的方式

_self:在當(dāng)前頁(yè)面打開(kāi)

_blank:在空白頁(yè)面打開(kāi)

6.表格標(biāo)簽：在HTML中的表格只有行的概念，沒(méi)有列的概念，將表格以行的形式進(jìn)行分割，然后再對(duì)行進(jìn)行操作。

table:定義表格

width:表格的寬度

border:邊框

cellpadding:單元格內(nèi)容左對(duì)齊（定義內(nèi)容和單元格的距離）

cellspacing:邊框合并(定義單元格之間的距離，如果指定為0，單元格的線會(huì)合為一條)

bgcolor:背景色

align:表格的對(duì)齊樣式

tr:定義行

bgcolor:背景色

align:表格的對(duì)齊樣式(是用來(lái)修改文本的對(duì)齊方式的)

td:定義單元格

colspan:合并列

rowspan:合并行

th:定義表頭單元格

<caption>:表格標(biāo)題

<thread>:表示表格的頭部分

<tbody>:表示表格的體部分

<tfoot>:表示表格的腳部分

7.塊標(biāo)簽：div和span是結(jié)合css使用的

span:文本信息在一行顯示，行內(nèi)標(biāo)簽，內(nèi)聯(lián)標(biāo)簽(意思就是它不會(huì)換行)

div:是會(huì)換行的。每一個(gè)div占滿一整行。塊級(jí)別的標(biāo)簽

8.語(yǔ)義化標(biāo)簽：html5中為了提高程序的可讀性，提高了一些標(biāo)簽

在線咨詢

上一篇：制作HTML5的表格
下一篇：手把手的教你用PHP將HTML生成PDF

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。