04-HTML標籤圖文詳解（一）

#一、排版標籤

#註釋標籤

<!-- 註釋  -->

#段落標籤<p>

<p>This is a paragraph</p>
<p>This is another paragraph</p>

屬性：

• align="屬性值"：對齊方式。屬性值包括left center right。 舉例：

段落，是英語paragraph“段落”縮寫。

HTML標籤是分等級的，HTML將所有的標籤分為兩種：

• 文字級標籤：p、span、a、b、i、u、em。文字級標籤裡只能放文字、圖片、表單元素。（a標籤裡不能放a和input）

• 容器級標籤：div、h系列、li、dt、dd。容器級標籤裡可以放置任何東西。

從學習p的第一天開始，就要死死記住：p標籤是一個文字級標籤，p裡面只能放文字、圖片、表單元素。其他的一律不能放。

錯誤寫法：（嘗試把 h 放到 p 裡）

	<p>
		我是一個小段落
		<h1>我是一級標題</h1>
	</p>

網頁效果如下：

上圖顯示，瀏覽器不允許你這麼做，我們使用Chrome的F12審查元素髮現，瀏覽器自己把p封閉掉了，不讓你去包裹h1。

PS：Chrome瀏覽器是世界上HTML5支援最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。

#塊級標籤<div>和<span>

div和span是非常重要的標籤，div的語義是division“分割”； span的語義就是span“範圍、跨度”。

CSS課程中你將知道，這兩個東西，都是最最重要的“盒子”。

div：把標籤中的內容作為一個塊兒來對待(division)。必須單獨佔據一行。

div標籤的屬性：

• align="屬性值"：設定塊兒的位置。屬性值可選擇：left、right、 center。

<span>和<div>唯一的區別在於：<span>是不換行的，而<div>是換行的。

如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實現各種樣式。

效果舉例：

div在瀏覽器中，預設是不會增加任何的效果的，但是語義變了，div中的所有元素是一個小區域。 div標籤是一個容器級標籤，裡面什麼都能放，甚至可以放div自己。

span也是表達“小區域、小跨度”的標籤，但是是一個文字級的標籤。 就是說，span裡面只能放置文字、圖片、表單元素。 span裡面不能放p、h、ul、dl、ol、div。

span裡面是放置小元素的，div裡面放置大東西的。舉例如下：

span舉例：

			<p>
				簡介簡介簡介簡介簡介簡介簡介簡介
				<span>
					<a href="">詳細資訊</a>
					<a href="">購買</a>
				</span>
			</p>

div舉例：

	<div class="header">
		<div class="logo"></div>
		<div class="nav"></div>
	</div>
	<div class="content">
		<div class="guanggao"></div>
		<div class="dongxi"></div>
	</div>
	<div class="footer"></div>

所以，我們親切的稱呼這種模式叫做“div+css”。div標籤負責佈局，負責結構，負責分塊。css負責樣式。

#換行標籤<br>（已廢棄）

當你打算結束一行，而又不想開始一個新段落時，<br>標籤就派上用場了。無論你將它置於何處，<br>標籤都會產生一個強制的換行。

This <br> is a para<br>graph with line breaks

效果如下：

上圖顯示，<p>標籤和<br>標籤的區別在於：<p>標籤會在段落的前後自動插入一個空行，而<br>標籤沒有空行；而且<br>標籤沒有屬性。

注意<br>沒有結束標籤，把<br>標籤寫為<br/>是經得起未來考驗的做法，XHTML 和 XML 都接受在開啟的標籤內部來關閉標籤的做法。

#水平線標籤<hr>（已廢棄）

水平分隔線（horizontal rule）可以在視覺上將文件分隔成各個部分。 效果如下：

屬性：

• align="屬性值"：設定線條置放位置。屬性值可選擇：left right center。
• size="2"：設定線條粗細。以畫素為單位，內定為2。
• width="500"或width="70%"：設定線條長度。可以是絕對值（單位是畫素）或相對值。如果設定為相對值的話，內定為100%。
• color="#0000FF"：設定線條顏色。
• noshade：不要陰影，即設定線條為平面顯示。若沒有這個屬性則表明線條具陰影或立體，這是內定值。 屬性效果演示：

#內容居中標籤<center>

此時center代表是一個標籤，而不是一個屬性值了。只要是在這個標籤裡面的內容，都會居於瀏覽器的中間。 效果演示：

到了H5裡面，center標籤不建議使用。

#預定義（預格式化）標籤：<pre>

含義：將保留其中的所有的空白字元(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行） 說明：真正排網頁過程中，<pre>標籤幾乎用不著。但在PHP中用於列印一個數組時使用。

效果演示：

上圖中，好像紅框部分的字型變小了，而且還出現了縮排，好吧， 這個其實是瀏覽器搞的鬼。 為什麼要有<pre>這個標籤呢？答案是：

所有的瀏覽器預設情況下都會忽略空格和空行。

好吧，其實這個標籤也用的比較少。

#二、字型標籤

#標題

標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具有align屬性，屬性值可以是：left、center、right。 效果演示：

#字型標籤<font>（已廢棄）

屬性：

• color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設定字型顏色。 設定方式：單詞 \ #ff00cc \ rgb(0,0,255)
• size：設定字型大小。 取值範圍只能是：1至7。取值時，如果取值大於7那就按照7來算，如果取值小於1那就按照1來算。如果想要更大的字型，那就只能通過css樣式來解決。 設定：用’+2’代表值是5 或直接給值
• face="微軟雅黑"：設定字型型別。注意在寫字型時，“微軟雅黑”這個字不能寫錯。 舉例：

<font face="微軟雅黑" color="#FF0000" size="10">vae</font>

效果：

#特殊字元（轉義字元）

•  ：空格 （non-breaking spacing，不斷打空格）
• <：小於號（less than）
• >：大於號（greater than）
• &：符號&
• "：雙引號
• '：單引號
• ©：版權©
• ™：商標™
• 绐：文字紿。其實，#32464是漢字紿的unicode編碼。

要求背誦的特殊字元有： 、<、>、©。

比如說，你想把<p>作為一個文字在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標籤，所以這裡需要用到轉義字元。應該這麼寫：

這是一個HTML語言的<p>標籤

正確的效果如下：

錯誤的效果如下：

其實我們只要記住前三個符號就行了，其他的在需要的時候查一下就行了。而且，EditPlus軟體中是可以直接點選這些符號進行選擇的：

來一張表格，方便需要的時候查詢：

#一些小標籤/小標記

• <u>：下劃線標記

• <s>或<del>：中劃線標記（刪除線）

• <i>或<em>：斜體標記

效果：

上面的這幾個標籤，常用於做一些小裝飾、小圖示。比如：

20180118_2340.png

這張圖中，我們通過檢視京東網站的程式碼發現，箭頭處的小圖示都是用的標籤<i>。

div的主要目的是用來佈局，而小裝飾卻可以用來

#粗體標籤<b>或<strong>（已廢棄）

效果：

#上標<sup>下標<sub>

上小標這兩個標籤容易混淆，怎麼記呢？這樣記：b的意思是bottom：底部舉例：

O<sup>2</sup>    5<sub>3</sub>

效果：

#三、超連結

超連結有三種形式：

1、外部連結：連結到外部檔案。舉例：

<a href="02頁面.html">點選進入另外一個檔案</a>

a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文字級的標籤。

href是英語hypertext reference超文字地址的縮寫。讀作“喝瑞夫”，不要讀作“喝夫”。

效果：

當然，我們也可以直接點進連結，訪問一個網址。舉例如下；

	<a href="http://www.baidu.com" target="_blank">點我點我</a>

2、錨鏈接： 指給超連結起一個名字，作用是在本頁面或者其他頁面的的不同位置進行跳轉。比如說，在網頁底部有一個向上箭頭，點選箭頭後回到頂部，這個就是利用到了錨鏈接。 首先我們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果如下：

上圖中解釋：

11行程式碼表示，頂部這個錨的名字叫做name1。 然後在底部設定超連結，點選時將回到頂部（此時，網頁中的url的末尾也出現了#name1）。注意上圖中紅框部分的#號不要忘記了，表示跳到名為name1的特定位置，這是規定。如果少了#號，點選之後，就會跳到name1這個檔案或者name1這個資料夾中去。

如果我們將上圖中的第28行程式碼寫成：

<a href="a.html#name1">回到頂部</a>

那就表示，點選之後，跳轉到a.html頁面的name1錨點中去。

說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0後才開始使用。為了向前相容，因此，name和id這兩個屬性都要寫上，並且值是一樣的。

3、郵件連結： 程式碼舉例：

<a href="mailto:[email protected]">點選進入我的郵箱</a>

效果：點選之後，會彈出outlook，作用不大。

#超連結的屬性

• href：目標URL
• title：懸停文字。
• name：主要用於設定一個錨點的名稱。
• target：告訴瀏覽器用什麼方式來開啟目標頁面。target屬性有以下幾個值：
  • _self：在同一個網頁中顯示（預設值）
  • _blank：在新的視窗中開啟。
  • _parent：在父視窗中顯示
  • _top：在頂級視窗中顯示

title屬性舉例：

<a href="09_img.html" title="很好看哦">結婚照</a>

效果如下：

target屬性舉例：

<a href="1.html" title="懸停文字" target="_blank">連結的內容</a>

blank就是“空白”的意思，就表示新建一個空白視窗。為啥有一個_ ，就是規定，沒啥好解釋的。 也就是說，如果不寫target=”_blank”那麼就是在相同的標籤頁開啟，如果寫了target=”_blank”，就是在新的空白標籤頁中開啟。

#備註1：分清楚img和a標籤的各自的屬性

區別如下：

<img src="1.jpg" />
<a href="1.html"></a>

#備註2：a是一個文字級的標籤

比如一個段落中的所有文字都能夠被點選，那麼應該是p包裹a：

<p>
	<a href="">段落段落段落段落段落段落</a>
</p>

而不是a包裹p：

<a href="">
	<p>
		段落段落段落段落段落段落
	</p>
</a>

a的語義要小於p，a就是可以當做文字來處理，所以p裡面相當於放的就是純文字。

#四、圖片標籤

img: 代表的就是一張圖片。是單邊標記。

img是自封閉標籤，也稱為單標籤。

#能插入的圖片型別：

• 能夠插入的圖片型別是：jpg(jpeg)、gif、png、bmp等。

• 不能往網頁中插入的圖片格式是：psd、ai

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以要先把圖片上傳到伺服器上。

#src屬性：圖片的相對路徑和絕對路徑

這裡涉及到圖片的一個屬性：

• src屬性：指圖片的路徑。

在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑

#1、寫法一：相對路徑

相對當前頁面所在的路徑。兩個標記.和..分表代表當前目錄和上一層路徑。

舉例1：

<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg">
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">

img 是image“圖片”的簡寫，src 是英語source“資源”的縮寫。

相對路徑不會出現這種情況：

aaa/../bbb/1.jpg

../要麼不寫，要麼就寫在開頭。

舉例2：

<img src="images/1.jpg">

上方程式碼的意思是說，當前html頁面有一個並列的資料夾images，在資料夾images中存放了一張圖片1.jpg效果：

相對路徑的面試題。現有如下檔案層級圖：

問題：如果想在index.html中插入1.png，那麼對應的img語句是？

分析：

現在document是最大的資料夾，裡面有兩個資料夾work和photo。work中又有一個資料夾叫做myweb。myweb資料夾裡面有index.html。 所以index.html在myweb資料夾裡面，上一級就是work資料夾，上兩級就是document資料夾。通過document資料夾當做一箇中轉站，進入photo資料夾，看到了1.png。

答案：

<img src="../../photo/1.png" />

#2、寫法二：絕對路徑

絕對路徑包括以下兩種：

（1）以碟符開始的絕對路徑。舉例：

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

（2）網路路徑。舉例：

<img src="http://img.smyhvae.com/20200122_200901.png">

大家開啟上面的img中的連結，可能有驚喜哦。

#相對路徑和絕對路徑的總結

相對路徑的好處：站點不管拷貝到哪裡，檔案和圖片的相對路徑關係都是不變的。 相對路徑使用有一個前提，就是網頁檔案和你的圖片，必須在一個伺服器上。

問題：我的網頁在C盤，圖片卻在D盤，能不能插入呢？

答案： 用相對路徑不能，用絕對路徑也不能。

注意：可以使用file://來插入，但是這種方法，沒有任何意義！因為伺服器上沒有所謂c盤、d盤。

下面的方法是行的，但是沒有任何工程上的意義，這是因為伺服器沒有碟符，linux系統沒有碟符：

<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />

總結一下：

• 我們現在無論是在a標籤、img標籤，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。

• 相對路徑，就是../ image/ 這種路徑。從自己出發，找到別人；

• 絕對路徑，就是http://開頭的路徑。

• 絕對不允許使用file://開頭的東西，這個是完全錯誤的！

#img標籤的其他屬性

• width：寬度

• height：高度

• Align（已廢棄）：指圖片的水平對齊方式，屬性值可以是：top、middle、bottom、left、center、right。該屬性已廢棄，替換為vertical-align這個CSS屬性。

• title：提示性文字。公有屬性。也就是滑鼠懸停時出現的文字。

• border（已廢棄）：給圖片加邊框，單位是畫素，邊框的顏色預設黑色。該屬性已廢棄，替換為border這個CSS屬性。

• Hspace（已廢棄）：指圖片左右的邊距。

• Vspace（已廢棄）：指圖片上下的邊距。

• alt：當圖片不可用（無法顯示）的時候，代替圖片顯示的內容。alt是英語 alternate “替代”的意思，代表替換資源。（有的瀏覽器不支援）

舉例：

<img src="images/1.jpg" width="300" height="`188" title="這是美女">

效果：

Alt屬性效果演示：（當圖片 src 不可用的時候，顯示文字。這樣做，至少能讓使用者知道，這個圖片大概是什麼內容）

• 圖片的align屬性：圖片和周圍文字的相對位置。屬性取值可以是：bottom（預設）、center、top、left、right。 我們來分別看一下這align屬性的這幾個屬性值的區別。

1、align=""，圖片和文字低端對齊。即預設情況下的顯示效果：

2、align="center"：圖片和文字水平方向上居中對齊。顯示效果：

3、align="top"：圖片與文字頂端對齊。顯示效果：

4、align="left"：圖片在文字的左邊。顯示效果：

5、align="right"：圖片在文字的右邊。顯示效果：

注意事項：（1）如果要想保證圖片等比例縮放，請只設置width和height中其中一個。 （2）如果想實現圖文混排的效果，請使用align屬性，取值為left或right。

最後，送上妹子的近照一張。樓主已經仁至義盡了：http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg

怎麼？還沒看夠？且看下文：HTML標籤----圖文詳解（二）