HTML 常用的標(biāo)簽
在講HTML常用標(biāo)簽之前谎僻，我們先認(rèn)識(shí)下HTML艘绍。
HTML秫筏，超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言航夺。
您可以使用 HTML 來建立自己的 WEB 站點(diǎn)阳掐，HTML 運(yùn)行在瀏覽器上冷蚂，由瀏覽器來解析。
最基本的HTML5結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head> <!-- head標(biāo)簽是所有頭部元素的容器艺骂。head標(biāo)簽內(nèi)的元素可包含腳本钳恕、樣式表和提供頁面的元信息等等忧额。以下標(biāo)簽都可以添加到 head 部分：title、base轴脐、link大咱、meta碴巾、script 以及style丑搔。頭部的內(nèi)容不會(huì)顯示在瀏覽器的啤月。 -->
<meta charset="utf-8"> <!-- 設(shè)置字符集谎仲，如果字符集不對(duì)浙垫，可能導(dǎo)致亂碼夹姥。一般建議utf-8國際編碼 -->
<title>網(wǎng)頁標(biāo)題</title> <!-- SEO相關(guān)標(biāo)簽辙售，title定義文檔的標(biāo)題,百度建議一般不要超過32位,meta定義頁面關(guān)鍵詞和頁面的描述-->
</head>
<body> <!-- 正文部分飞涂，所有在瀏覽器上可見的內(nèi)容必須寫在body標(biāo)簽內(nèi)部 -->
</body>
</html>
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行较店，位于html標(biāo)簽之前泽西。<!DOCTYPE>是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令捧杉，有助于瀏覽器中正確顯示網(wǎng)頁。其它聲明方式及最新html標(biāo)準(zhǔn)可以通過以下鏈接學(xué)習(xí)：
HTML簡介：http://www.runoob.com/html/html-intro.html
HTML標(biāo)準(zhǔn)：https://www.w3.org/TR/html51/
MDN：https://developer.mozilla.org/zh-CN/
二灰粮、HTML常用標(biāo)簽基本用法
1粘舟、a標(biāo)簽定義超鏈接柑肴，指定頁面間的跳轉(zhuǎn)（HTTP get請(qǐng)求）旬薯。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點(diǎn)晰骑，可以在當(dāng)前頁面打開，新開窗口硕舆。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">谷歌</a>
2抚官、form標(biāo)簽定義提交方式凌节、提交地址彪见、表單字符集以及如何對(duì)其進(jìn)行編碼，需要提交的表單一定要放在form標(biāo)簽內(nèi)捕犬。
<form id="form1" name="form1" method="post|get" action="提交到的地址"></form>
3、input標(biāo)簽用于為基于Web的表單創(chuàng)建交互式控件垢粮，以便接受來自用戶的數(shù)據(jù)蜡吧。通常和form標(biāo)簽配合使用
<form action="demo_form.asp">
輸入框: <input type="text" name="請(qǐng)輸入"><br>
按鈕: <input type="button" name="按鈕"><br> <!--無跳轉(zhuǎn)請(qǐng)求-->
<input type="submit" value="提交"> <!--有跳轉(zhuǎn)請(qǐng)求-->
</form>
4昔善、button標(biāo)簽定義一個(gè)按鈕君仆。在 button元素內(nèi)部钥庇，您可以放置內(nèi)容上沐，比如文本或圖像参咙。這是該元素與使用 input元素（空元素）創(chuàng)建的按鈕之間的不同之處蕴侧。
<button type="button">點(diǎn)我!</button>
5、h1 - h6標(biāo)簽被用來定義 HTML 標(biāo)題择葡。h1定義重要等級(jí)最高的標(biāo)題敏储，h6定義登記最低的標(biāo)題已添。從大到小排列就是這樣的。h1>h2>h3>h4>h5>h6
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
6缆蝉、p標(biāo)簽定義段落
<p>這是一個(gè)段落贝搁。</p>
7雷逆、hr標(biāo)簽定義 HTML 頁面中的主題變化（比如話題的轉(zhuǎn)移）膀哲，并顯示為一條水平線某宪。br標(biāo)簽插入一個(gè)簡單的換行符。兩者都是空標(biāo)簽衣迷，沒有結(jié)束符壶谒。
<h1>HTML</h1>
<p>HTML 是用于描述 web 頁面的一種語言。</p>
<hr>
<h1>CSS</h1>
<p>CSS 定義如何顯示 HTML 元素陨界。</p>
<p>
使用 br 元素<br>在文本中<br>換行搜变。
</p>
7帜矾、ul標(biāo)簽定義無序列表虏束。
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
8、ol標(biāo)簽定義了一個(gè)有序列表彼水，列表排序以數(shù)字來顯示凤覆。
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
9、small標(biāo)簽定義小型文本（和旁注）拥峦。
<p> runoob.com - the world's largest web development site.</p>
<p><small> Copyright 1999-2050 by Refsnes Data.</small></p>
10、strong標(biāo)簽定義重要的文本玄柠。有強(qiáng)調(diào)的作用色彩
<strong>加粗文本，強(qiáng)調(diào)重要性</strong>
11铐伴、div標(biāo)簽和span標(biāo)簽是html里沒有語義的兩個(gè)標(biāo)簽，在CSS中通常稱為塊級(jí)元素和內(nèi)聯(lián)元素户矢，在html里邊沒有這樣的說法。
div標(biāo)簽它是可用于組合其他HTML元素的容器，標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分虏劲。通常用于文檔布局励堡，以便通過 CSS 來對(duì)這些元素進(jìn)行格式化。
<div style="color:#0000FF">
<h3>這是一個(gè)在 div 元素中的標(biāo)題。</h3>
<p>這是一個(gè)在 div 元素中的文本砾层。</p>
</div>
span用標(biāo)簽于對(duì)文檔中的元素進(jìn)行組合。標(biāo)簽沒有固定的格式表現(xiàn)。當(dāng)對(duì)它應(yīng)用樣式時(shí)秕重，它才會(huì)產(chǎn)生視覺上的變化。提供了一種將文本的一部分或者文檔的一部分獨(dú)立出來的方式。
<p>我的母親是 <span style="color:blue">偉大</span> 的庐扫。</p>
12、kbd標(biāo)簽定義鍵盤文本。目前已廢棄验靡，不推薦使用，但 是可以通過CSS實(shí)現(xiàn)豐富的效果辞州。
<kbd>鍵盤輸入</kbd>
13涝涤、video標(biāo)簽定義視頻崭孤，比如電影片段或其他視頻流。目前嗤形，video元素支持三種視頻格式：MP4搔预、WebM经伙、Ogg。可以在 <video> 和 </video> 標(biāo)簽之間放置文本內(nèi)容酪劫，這樣不支持video元素的瀏覽器就可以顯示出該標(biāo)簽的信息遮咖。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 video 標(biāo)簽麦箍。
</video>
14揍诽、audio標(biāo)簽交排，HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的audio元素的提示文本 玄帕。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素裤纹。
</audio>
15委刘、svg標(biāo)簽，SVG 文件可通過以下標(biāo)簽嵌入 HTML 文檔：<embed鹰椒、object或者iframe锡移。這樣SVG的代碼可以直接嵌入到HTML頁面中，或您可以直接鏈接到SVG文件漆际。
embed：
- 優(yōu)勢(shì)：所有主要瀏覽器都支持淆珊，并允許使用腳本
- 缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法：
<embed src="circle1.svg" type="image/svg+xml" />
object：
- 優(yōu)勢(shì)：所有主要瀏覽器都支持，并支持HTML4奸汇，XHTML和HTML5標(biāo)準(zhǔn)
- 缺點(diǎn)：不允許使用腳本施符。
語法：
<object data="circle1.svg" type="image/svg+xml"></object>
iframe：
- 優(yōu)勢(shì)：所有主要瀏覽器都支持往声，并允許使用腳本
- 缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法：
<iframe src="circle1.svg"></iframe>
在Firefox、Internet Explorer9戳吝、谷歌Chrome和Safari中浩销，你可以直接在HTML嵌入SVG代碼。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
三骨坑、HTML注意事項(xiàng)
1撼嗓、HTML標(biāo)簽和屬性是不區(qū)分大小寫的柬采，建議HTML標(biāo)簽和屬性都小寫欢唾，屬性值必須用雙引號(hào)包圍。
2粉捻、HTML標(biāo)簽都是以開始標(biāo)簽起始礁遣，以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對(duì)出現(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)簽之間叛氨。
3呼渣、HTML標(biāo)簽之間盡量縮進(jìn)與換行，每行代碼不要過長寞埠，方便閱讀和維護(hù)屁置。
4、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則仁连。禁止a標(biāo)簽嵌套a標(biāo)簽蓝角，p標(biāo)簽嵌套div標(biāo)簽。
5饭冬、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽帅容，少使用table布局、iframe框架嵌套以及flash播放器伍伤。
這批文章也只是講解了一些html常用標(biāo)簽的最基本的用法并徘，介于知識(shí)內(nèi)容寬泛，標(biāo)簽的屬性并沒有擴(kuò)展開來扰魂，這就需要我們主動(dòng)利用搜索工具及學(xué)習(xí)文檔學(xué)習(xí)麦乞，html掌握基礎(chǔ)并不難蕴茴，基本上了解標(biāo)簽的語義意思也就會(huì)使用了。
