在網(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)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(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>

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

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

常用的內(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（獨(dú)立內(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)簽遠(yuǎn)不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。

天給學(xué)編程的你們推薦六款好用的IDE工具，快來看看吧！

一、Cloud Toolkit

Cloud Toolkit 是一款 IDE 插件，可以幫助開發(fā)者更高效地開發(fā)、測試、診斷并部署應(yīng)用。通過 Cloud Toolkit，開發(fā)者能夠方便地將本地應(yīng)用一鍵部署到任意機(jī)器（本地或云端），并內(nèi)置 Arthas 診斷、高效執(zhí)行終端命令和 SQL 等，提供 IntelliJ IDEA 版，Eclipse 版，PyCharm 版和 Maven 版。

工具的使用場景：

每次修改完代碼后，是否正在經(jīng)歷反復(fù)地打包？

在 Maven 、Git 以及其他運(yùn)維腳本和工具的之間頻繁切換？

采用 SCP 工具上傳？使用 XShell 或 SecureCRT 登錄服務(wù)器？替換部署包？重啟？

文件上傳到服務(wù)器指定目錄，在各種 FTP、SCP 工具之間頻繁切換？

工具地址：https://link.segmentfault.com/?enc=5YvdJW5UrcWb%2Fmp4Fe4sFw%3D%3D.qPsV2br9lhB4FZ1hrFRuqPwcBDBj4W1vokmF48SCI86bC9DMcy0r9QnB%2BUQq6a9l

二、Jetbrains全家桶

說起Jetbrains這家公司，大家一定不陌生，如果陌生那你也一定用過他家的IDE工具集，比如，以下的產(chǎn)品。

最有名氣的就是IDEA這個萬能IDE了，當(dāng)然一般也就是學(xué)習(xí)編寫Java程序時使用，jetbrains的IDE工具最具有的特色便是智慧了，代碼提示，代碼補(bǔ)全，以及數(shù)以萬計的插件、主題等。

不管是什么語言，目前常用的語言IDE都有它的一席之地。

Jetbrains各類工具的作用范圍

RM->RubyMine是一款針對于Ruby語言的IDE工具

PC->PyCharm是一款面向?qū)I(yè)的Python開發(fā)者的IDE工具

IJ->IntelliJ IDEA是一款功能強(qiáng)大，符合人體工程學(xué)的 JVM IDE，一般用于Java語言的開發(fā)

PS->PhpStorm是一款高效智能的PHP開發(fā)工具

GO->GoLand 使讀取、寫入和更改 Go 代碼變得非常容易

RD->JetBrains Rider 是一款基于 IntelliJ 平臺和 ReSharper 的跨平臺 .NET IDE

AC->AppCode適用于 iOS/macOS 開發(fā)的智能 IDE

WS->WebStorm 是一個適用于 JavaScript 和相關(guān)技術(shù)的集成開發(fā)環(huán)境

CL->CLion是一款智能的 C 和 C++ 編輯器，也是一款跨平臺的 IDE工具

DG->DataGrip是一個數(shù)據(jù)庫管理工具，基本上支持市面上所以數(shù)據(jù)庫環(huán)境的連接

R#->ReSharper是一款適用于.NET開發(fā)者的Visual Studio擴(kuò)展同時Jetbrains的工具與擴(kuò)展還遠(yuǎn)遠(yuǎn)不止這些，甚至還有自我開發(fā)的新型語言->kotlin，可以說是濃縮版的Java

具體地址：https://www.jetbrains.com.cn/products/#type=ide-vs

三、OpenSumi

OpenSumi 是一款面向垂直領(lǐng)域，低門檻、高性能、高定制性的雙端（Web 及 Electron）IDE 研發(fā)的框架。

框架早期由阿里集團(tuán)淘系工程團(tuán)隊及螞蟻集團(tuán)體驗技術(shù)部、研發(fā)效能團(tuán)隊聯(lián)合發(fā)起，共同研發(fā)的 IDE 標(biāo)準(zhǔn)化研發(fā)框架。它基于 TypeScript + React 進(jìn)行編碼，實現(xiàn)了包含資源管理器、編輯器、調(diào)試、Git 面板、搜索面板等核心功能模塊，開發(fā)者只要基于我們的起步項目進(jìn)行簡單配置，便可以快速地搭建屬于自己的本地或云端 IDE 產(chǎn)品，框架自身兼容 VS Code 插件生態(tài)，主流 VS Code 插件均可無縫在基于 OpenSumi 研發(fā)的產(chǎn)品中運(yùn)行，同時，框架也為開發(fā)者提供多種低成本，高定制的視圖定制能力，能滿足 IDE 場景下絕大多數(shù)的視圖定制場景。

針對小程序研發(fā)場景，支付寶小程序開發(fā)者工具以及淘寶小程序開發(fā)者工具便是使用了 OpenSumi 作為核心框架進(jìn)行實現(xiàn)。

具體地址：https://opensumi.com/zh

四、Atom

Atom 是由 GitHub 的程序員們打造的稱為“屬于21世紀(jì)”的代碼編輯器。它開源免費(fèi)跨平臺（支持 Windows、Mac、Linux 三大桌面平臺），并且整合 GIT 并提供類似 SublimeText 的包管理功能，作為一個現(xiàn)代的代碼編輯器，Atom 支持各種編程語言的代碼高亮(HTML / CSS / Javascript / PHP / Python / C / C++ / Objective C / Java / JSON / Perl / CoffeeScript / Go / Sass / YAML / Markdown 等等)、與大多數(shù)其他編輯器相比，Atom 的語言支持已經(jīng)算是覆蓋非常全面了。

另外，它的代碼補(bǔ)全功能（也叫Snippets）也非常好用，你只需輸入幾個字符即可展開成各種常用代碼，可以極大提高編程效率。

官方地址：https://atom.io/

五、FIDE

FinClip 推出的小程序 IDE 工具，界面與微信小程序的開發(fā)工具類似，發(fā)現(xiàn)功能挺強(qiáng)大的，界面非常的簡潔，上手門檻比較低，簡單易上手，這款 IDE 工具的實際名稱是 FIDE （ FinClip Integrated Development Environment ）是 FinClip 為便于開發(fā)者更簡單、高效地調(diào)試小程序的小程序開發(fā)調(diào)試工具。

FIDE的亮點(diǎn)是，它支持 「「小程序一鍵轉(zhuǎn)換成 APP」」 ，可以將已有小程序代碼導(dǎo)出為 IOS 與 Android 中可用的工程文件，由于導(dǎo)出的工程文件已經(jīng)集成了 FinClip SDK ，所以所生成的APP直接擁有小程序的運(yùn)行能力，后續(xù)可在這個 APP 上繼續(xù)上架更多小程序，自建自己的小程序生態(tài)。

工具地址： https://www.finclip.com/downloads/

六、NetBeans

NetBeans 是 Java 的集成開發(fā)環(huán)境。這是一個了不起的IDE，用戶評分為4.1分（滿分5分），用戶滿意度高達(dá)82%。它可以在Windows，Linux，macOS和Solaris上運(yùn)行。它具有內(nèi)置工具，可為從產(chǎn)品設(shè)計到部署的整個軟件開發(fā)生命周期增加價值。NetBeans 的一些主要功能包括：

它可以檢測錯誤并為您提供智能代碼編譯功能。

通過 NetBeans，您可以直接創(chuàng)建、調(diào)試、部署和測試應(yīng)用程序。

它具有非常簡單易用的管理功能。

它具有驚人的代碼比較功能，可幫助您同時編寫類似的代碼。

具體地址：https://netbeans.apache.org/

-----------------------------------

為了幫助大家，輕松，高效學(xué)習(xí)C語言/C++,給大家分享我收集的資源，從最零基礎(chǔ)開始的,幫助大家在學(xué)習(xí)C語言的道路上披荊斬棘！

編程學(xué)習(xí)書籍分享：

編程學(xué)習(xí)視頻分享：

整理分享（多年學(xué)習(xí)的源碼、項目實戰(zhàn)視頻、項目筆記，基礎(chǔ)入門教程）

對于C/C++感興趣可以關(guān)注小編在后臺私信我：【編程交流】一起來學(xué)習(xí)哦！可以領(lǐng)取一些C/C++的項目學(xué)習(xí)視頻資料哦！已經(jīng)設(shè)置好了關(guān)鍵詞自動回復(fù)，自動領(lǐng)取就好了！

.標(biāo)簽語義化

提到標(biāo)簽，很多剛?cè)腴T前端開發(fā)的人，肯定都會很納悶，這么多HTML標(biāo)簽我如何記住呢？我又應(yīng)該根據(jù)什么依據(jù)去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學(xué)習(xí)Web頁面開發(fā)的過程中，然后不斷的積累，不斷的總結(jié)，發(fā)現(xiàn)要想記住HTML標(biāo)簽以及怎樣更好的去使用這些標(biāo)簽，需要做到以下三點(diǎn)：

第一點(diǎn)：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。

第二點(diǎn)：根據(jù)內(nèi)容選擇使用HTML標(biāo)簽，什么意思呢？見下文分解。

第三點(diǎn)：遵循W3C的規(guī)范。

首先，第一點(diǎn)咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標(biāo)簽了，而且在開發(fā)頁面的過程中，你們會發(fā)現(xiàn)，咱們最常用的也就是那么幾個而已。

其次，第二點(diǎn)根據(jù)內(nèi)容選擇使用HTML標(biāo)簽，這一點(diǎn)非常關(guān)鍵，因為你掌握了這一點(diǎn)，你能很好地去使用HTML標(biāo)簽，并且能讓頁面變得很優(yōu)質(zhì)，這也會提高你網(wǎng)頁被搜索引擎收錄。

最后，也就是第三點(diǎn)，這一點(diǎn)自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現(xiàn)出一致的效果，那么必須遵循W3C的規(guī)范。

說了這么多，只是一些學(xué)習(xí)需要注意的問題，下面才是真正解開怎樣去使用和記住標(biāo)簽這個謎團(tuán)的方法。

我們在使用標(biāo)簽的過程中，大家會發(fā)現(xiàn)類似的標(biāo)簽，比如標(biāo)題標(biāo)簽（h1-h6）、p（段落標(biāo)簽）、a（超鏈接標(biāo)簽）以及圖片標(biāo)簽（img）等，通過這些標(biāo)簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標(biāo)簽該怎么，用于何處。而這些名稱的含義就是我們所說的標(biāo)簽語義化。隨著智能手機(jī)的出來，移動Web都是通過H5去開發(fā)頁面，而H5中的HTML標(biāo)簽就比之前版本的HTML標(biāo)簽更加具有語義化。

那么什么是標(biāo)簽語義化呢？所謂的標(biāo)簽語義化，指的就是標(biāo)簽所代表的含義。咱們可以通過標(biāo)簽的含義，正確地去使用它。

標(biāo)簽語義化的作用：

通過使用語義化標(biāo)簽，更能精準(zhǔn)地將其把內(nèi)容呈現(xiàn)出來。
通過使用語義化標(biāo)簽，讓頁面結(jié)構(gòu)更加的清晰，方便代碼的閱讀和維護(hù)。
能讓瀏覽器或網(wǎng)絡(luò)爬蟲更好地解析，從而更好地分析和抓取網(wǎng)頁中的內(nèi)容。
使用語義化標(biāo)簽還能讓搜索引擎得到更好的優(yōu)化。

如下圖所示，通過使用語義化標(biāo)簽和沒使用任何標(biāo)簽，就能直觀感受到語義化標(biāo)簽的好處。

普通的文本和使用語義化標(biāo)簽后的效果對比圖

那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當(dāng)我們把CSS去掉后，如果頁面中的結(jié)構(gòu)依然組織有序，并且有良好的可讀性，那么它就是非常良好的。

如何去使用這些標(biāo)簽?zāi)兀渴紫雀鶕?jù)內(nèi)容確定語義化的標(biāo)簽，其次再根據(jù)呈現(xiàn)需求，使用CSS樣式。因此HTML標(biāo)簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標(biāo)簽的語義化去記憶。如下圖所示，通過使用語義化標(biāo)簽，瞬間就能把普通的文本，以更清晰的結(jié)構(gòu)呈現(xiàn)出來。

使用語義化的普通文本，變得更為結(jié)構(gòu)清晰

2.常用標(biāo)簽分類匯總

通常我們常見的標(biāo)簽有標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線標(biāo)簽、換行標(biāo)簽以及div和span標(biāo)簽，這些標(biāo)簽又被統(tǒng)稱為排版標(biāo)簽。

在開發(fā)中，排版標(biāo)簽主要是和CSS搭配使用，主要是用于顯示網(wǎng)頁的整體結(jié)構(gòu)，也是網(wǎng)頁布局中常用的標(biāo)簽。下面我一一了解一下。

排版標(biāo)簽：

【1】標(biāo)題標(biāo)簽（h1-h6）

縮寫來源：標(biāo)題標(biāo)簽的英文單詞是head，因此它使用它的縮寫h來表示。
語義：標(biāo)題標(biāo)簽主要是用于突顯標(biāo)題內(nèi)容，它是h1-h6（分為1級標(biāo)題、2級標(biāo)題、3級標(biāo)題......6級標(biāo)題），級別依次遞減。級別越小，標(biāo)題就會越小。
語法格式如下：

標(biāo)題標(biāo)簽的使用

呈現(xiàn)的效果如下：

呈現(xiàn)的效果

一句話總結(jié)：使用了標(biāo)題標(biāo)簽的文字會加粗，會根據(jù)級別顯示文字的大小，并且一行只能放一個標(biāo)題。

【2】段落標(biāo)簽（p）

縮寫來源：p標(biāo)簽的英文單詞是paragraph，表示段落的意思。
語義：p標(biāo)簽可以把html文檔分割為若干段落。在網(wǎng)頁中要想把文字以段落的形式呈現(xiàn)，并且有條不紊的，那么段落就是必備的標(biāo)簽。
語法格式如下：

p標(biāo)簽語法格式

【3】水平線標(biāo)簽（hr）

縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
語義：它表示分隔線，用于將文字內(nèi)容分隔開，讓文檔結(jié)構(gòu)看起來更加清晰，層次分明。當(dāng)然在網(wǎng)頁中除了使用分隔線（hr）標(biāo)簽來實現(xiàn)，還可以通過圖片插入以及CSS樣式來實現(xiàn)，只不過使用hr標(biāo)簽是最簡單的方式。提示：CSS樣式是頁面中的重點(diǎn)，此處主要是介紹HTML，因此暫不做詳細(xì)說明。
語法格式：<hr />。
標(biāo)簽特點(diǎn)：它是一個單標(biāo)簽，hr標(biāo)簽?zāi)J(rèn)是以水平線的樣式進(jìn)行顯示。

【4】換行標(biāo)簽（br）

縮寫來源：br的英文單詞是break，打斷、換行的意思。
語義：表示換行的意思。在html中，一個段落的文字會從左到右依次排列顯示，直到瀏覽器窗口的最右端，才會自動換行。如果我們在實際開發(fā)中碰到需要將文本內(nèi)容強(qiáng)制換行顯示的，此時就可以使用換行標(biāo)簽實現(xiàn)。
語法格式：<br />。
標(biāo)簽特點(diǎn)：它也是一個單標(biāo)簽。
示例：將以下內(nèi)容通過br標(biāo)簽強(qiáng)制換行

文本

呈現(xiàn)效果：

使用br標(biāo)簽后的效果

【5】div和span標(biāo)簽

縮寫來源：div的英文是division，表示分割、分區(qū)的意思。span沒有縮寫，表示跨度、跨距和范圍的意思。
語義：div和span標(biāo)簽，沒有任何語言，主要是用于網(wǎng)頁布局使用。
語法格式：<div>這是一個div盒子</div> <span>這是一個span盒子</span>
div和span的區(qū)別：div標(biāo)簽，主要是用于布局，在沒有使用其它干預(yù)的情況下，一行只能放一個div。而span標(biāo)簽，也是用來布局，在沒有任何其它的干預(yù)的情況下，一行上可以放很多span標(biāo)簽。此處的效果，大家可以根據(jù)語法，自行在實現(xiàn)查看一下對比效果。

最后給大家來一個完美的總結(jié)：

排版標(biāo)簽的匯總

難道這就完了嗎？咱們的標(biāo)簽就只有這些常用的嗎？那當(dāng)然不是，咱們接下來再看我們的文本格式化標(biāo)簽。

文本格式化標(biāo)簽

文本格式化標(biāo)簽的作用：通常文本格式化標(biāo)簽主要用于網(wǎng)頁中文字樣式的設(shè)置，比如字體加粗、斜體或下劃線等效果，當(dāng)然后期也會通過CSS樣式來實現(xiàn)，會更加完美。

常見的文本格式化標(biāo)簽如下：

文本格式化標(biāo)簽

它們分別的區(qū)別：

b和strong：b標(biāo)簽只是加粗，strong除了加粗，還具有強(qiáng)調(diào)的意思，更具語義化。
i和em：i只是讓文本顯示斜體的效果，而em在斜體的效果上加強(qiáng)了語義。
s和del：s只是讓文本顯示刪除線，而得了不僅顯示刪除線，還加強(qiáng)了語義。
u和ins：u只是添加了下劃線，而ins不僅顯示了下劃線，還加強(qiáng)了語義。

我么網(wǎng)頁中除了排版標(biāo)簽、文本格式化標(biāo)簽，當(dāng)然還少不了圖片標(biāo)簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標(biāo)簽吧。

圖片標(biāo)簽（img）

縮寫來源：img的英文單詞是image，表示圖像、影像的意思。
語義：用于顯示圖片內(nèi)容。
語法格式：<img src='圖像url' />，在這個的語法中，我們發(fā)現(xiàn)img標(biāo)簽使用了src屬性，這個屬性主要是用于指定圖像的文件路徑，也是img的必須屬性。
img標(biāo)簽常見屬性如下所示：

img標(biāo)簽屬性

標(biāo)簽特點(diǎn)：img標(biāo)簽主要是用于在網(wǎng)頁中插入圖像，它是一個單標(biāo)簽。
知識點(diǎn)擴(kuò)展：通過img標(biāo)簽，我們會發(fā)現(xiàn)，html標(biāo)簽除了自身外，它們還具有一些屬性，這些屬性，我們稱為標(biāo)簽屬性，通過標(biāo)簽屬性可以設(shè)置標(biāo)簽的一些外在特性。標(biāo)簽屬性的基本語法格式：<標(biāo)簽名屬性1="值1" 屬性2="值2" ...>內(nèi)容 </標(biāo)簽名>。

標(biāo)簽屬性的特點(diǎn)：

一個標(biāo)簽可以擁有多個屬性，必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面。
屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
任何標(biāo)簽的屬性都有默認(rèn)值，省略該屬性則使用默認(rèn)值。
標(biāo)簽的屬性采用的是鍵值對的格式key="value"的形式。

圖片標(biāo)簽屬性使用

鏈接標(biāo)簽

縮寫來源：a標(biāo)簽的英文單詞是anchor，表示錨、鐵錨的意思。
語義：表示超文本鏈接。
語法格式：<a href ="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>。
常見的屬性：

a標(biāo)簽的常見屬性

提示：

比如添加作為外部鏈接，需要添加外部地址。
內(nèi)部鏈接，就是頁面直接內(nèi)部相互鏈接，因此只需要使用名稱即可，比如

內(nèi)部鏈接地址

如果沒有確定鏈接目標(biāo)，通常使用"#"表示暫時空鏈接。
除了可以創(chuàng)建文本鏈接，還可以給網(wǎng)頁中的元素，如圖像、表格、音頻、視頻都可以添加超鏈接。

注釋標(biāo)簽

注釋標(biāo)簽：用于在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的文字說明，此時就需要使用注釋標(biāo)簽。它是HTML中的一種特殊標(biāo)簽，它不會在瀏覽器中顯示，但是會在源代碼中查看到。
語法格式：

注釋標(biāo)簽

提示：注釋通常是給咱們開發(fā)者看的，程序是不會執(zhí)行這個代碼的。

好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結(jié)的內(nèi)容，能幫到正在瀏覽我這篇內(nèi)容的前端開發(fā)者，也希望你們有所收獲。如果喜歡的，可以點(diǎn)擊關(guān)注，會繼續(xù)給大家分享更多的內(nèi)容。

在線咨詢

上一篇：HTML從入門到精通-基礎(chǔ)篇
下一篇：網(wǎng)站制做，導(dǎo)航（條/欄）是最重要的設(shè)計

您的項目需求

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

整合營銷服務(wù)商

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

一、文檔類型聲明。

二、html主標(biāo)簽。

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

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

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

一、Cloud Toolkit