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

果想開發(fā)一個網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，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)簽。

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

<html>

</html>

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

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

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

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

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

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

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

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

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

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

塊級標(biāo)簽的特性是：獨自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時，默認繼承父標(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>

前端頁面顯示的效果如下圖：

常用的塊級標(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)簽與塊級標(biāo)簽不同，它不能獨自占有一行，會與其它內(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樣式代碼跟塊級標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

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

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

內(nèi)聯(lián)塊級標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級標(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>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標(biāo)簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

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

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

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

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

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

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

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

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

例

使用 <cite> 標(biāo)簽來定義作品的標(biāo)題：

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

瀏覽器支持

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

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

<cite> 標(biāo)簽定義作品（比如書籍、歌曲、電影、電視節(jié)目、繪畫、雕塑等等）的標(biāo)題。

注釋：人名不屬于作品的標(biāo)題。

HTML 4.01 與 HTML5之間的差異

在 HTML5 中，<cite> 標(biāo)簽定義作品的標(biāo)題。

在 HTML 4.01 中，<cite> 標(biāo)簽定義一個引用。

全局屬性

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

事件屬性

<cite> 標(biāo)簽支持 HTML 的事件屬性。

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

TML是一種用來描述網(wǎng)頁的標(biāo)記性語言。學(xué)習(xí)HTML可能并不難，主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況，整理出平時常用的HTML標(biāo)簽。

HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客

1、最基本的HTML結(jié)構(gòu)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML標(biāo)簽

a、布局標(biāo)簽

div標(biāo)簽定義文檔中的分區(qū)或節(jié)（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。

aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

header標(biāo)簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

section標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

footer 標(biāo)簽定義文檔或節(jié)的頁腳，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

article標(biāo)簽規(guī)定文章獨立的其他內(nèi)容，比如：標(biāo)題、內(nèi)容、評論，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

b、文本標(biāo)簽

h1-h6標(biāo)簽可定義標(biāo)題

p標(biāo)簽定義段落

b/strong標(biāo)簽加粗

em標(biāo)簽來表示強調(diào)的文本，斜體

strong標(biāo)簽表示重要文本

u標(biāo)簽下劃線

s標(biāo)簽刪除線

br標(biāo)簽表示回車換行

hr標(biāo)簽表示水平線

span標(biāo)簽被用來組合文檔中的行內(nèi)元素。

blockquote標(biāo)簽表示塊引用

pre標(biāo)簽可定義預(yù)格式化的文本，保持原有格式的一種標(biāo)簽。

sub標(biāo)簽下標(biāo)，

sup>標(biāo)簽上標(biāo)

 表示一個空格

©表示版權(quán)符

<表示<

>表示>

c、a標(biāo)簽定義超鏈接，指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點，可以在當(dāng)前頁面打開，新開窗口。

d、多媒體標(biāo)簽

img標(biāo)簽主要在網(wǎng)頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設(shè)置，否則圖像會變形。

audio標(biāo)簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>

video標(biāo)簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>

e、序列化標(biāo)簽

ul和li無序列表標(biāo)簽

<ul>

</ul>

ol和li有序列表標(biāo)簽，可以使用type屬性規(guī)定有序列表符號的類型。1 按數(shù)字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。

<ol>

</ol>

dl標(biāo)簽定義了定義列表（definition list），dl標(biāo)簽用于結(jié)合 dt（定義列表中的項目）和 dd（描述列表中的項目）。

<dl>

<dd>用來計算的儀器 ... ...</dd>

</dl>

f、表格標(biāo)簽

table標(biāo)簽和tr標(biāo)簽，th標(biāo)簽和td標(biāo)簽，合并單元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表單標(biāo)簽

form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標(biāo)簽內(nèi)。

input標(biāo)簽用于搜集用戶信息

密碼，輸入的字符會被掩碼（顯示為星號或原點）

文件類型的表單，上傳文件時，form表單一定要設(shè)置為enctype="multipart/form-data"

隱藏表單

提交

重置

radio單選

<input name="sex" type="radio" value="1" />男

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多選

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />數(shù)據(jù)庫

<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>

label標(biāo)簽為input元素定義標(biāo)注，如果您點擊label元素文本，就會觸發(fā)此input控件。

textarea標(biāo)簽，設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度

<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

button標(biāo)簽定義一個按鈕

提交按鈕

重置按鈕

select標(biāo)簽和option標(biāo)簽下拉列表

單選菜單列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多選列表下拉框，shift加鼠標(biāo)單擊，可以連續(xù)選擇多個選擇，CTRL+鼠標(biāo)點擊，可以點擊多個。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可簡寫成selected，表示選中

3、其他HTML事項

a、HTML標(biāo)簽和屬性是不區(qū)分大小寫的，建議HTML標(biāo)簽和屬性都小寫，屬性值必須用雙引號包圍。

b、HTML標(biāo)簽都是以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對出現(xiàn)的，稱為雙標(biāo)簽，比如：p標(biāo)簽、div標(biāo)簽，也有的HTML標(biāo)簽在開始標(biāo)簽中結(jié)束的標(biāo)簽，稱為單標(biāo)簽，比如：hr標(biāo)簽、br標(biāo)簽。大多數(shù) HTML 元素可擁有屬性，文本內(nèi)容都是寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。

c、HTML標(biāo)簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。

d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽，p標(biāo)簽嵌套div標(biāo)簽。

e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽，少使用table布局、iframe框架嵌套以及flash播放器。

來源：PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽（http://www.leixuesong.cn/2045）

在線咨詢

上一篇：如何在Word中批量添加填空題的下劃線？
下一篇：經(jīng)典技術(shù)回顧和借鑒-JSP編程