學習標籤,重點是記住每一個標籤的語義。簡單理解就是指標籤的含義。即這個標籤是用來幹嘛的。
根據標籤的語義,在合適的地方給一個最爲合理的標籤,可以讓頁面結構更清晰。
1 標題標籤<h1>—<h6>
(重要)
爲了使頁面更具有語義化,我們經常會在頁面中用到標題標籤。HTML提供了六個等級標籤。即<h1>—<h6>
.
語法規範:
<h1>我是一級標題</h1>
標籤語義:作爲標題使用,並且依據重要性遞減
特點:(1)加了標題的文字會變的加粗,字號也會依次變大
(2)一個標題獨佔一行
2. 段落和換行標籤(重要)
在HTML標籤中,<p>
標籤用於定義段落,它可以將整個網頁分爲若干段落。
語法規範:
<p>我是一個段落標籤</p>
標籤語義:可以把HTML文檔分割爲若干段落
特點:(1)文本在一個段落中會根據瀏覽器窗口的大小自動換行
(2)段落和段落之間保有空隙
在HTML中,一個段落中的文字會從左到右依次排序,直到瀏覽器窗口的右端,然後才自動換行。如果希望某段文本強制換行顯示,就需要使用換行標籤<br/>
標籤語義:強制換行
特點:(1)<br/>
是一個單標籤(在HTML中單標籤並不多,所以出現一個就要記住)
(2)<br/>
標籤只是簡單的開始新的一行。跟段落不一樣,段落之間會插入一些垂直間距,而換行沒有空隙。
3.文本格式化標籤
在網頁中,有時需要爲文本設置粗體、斜體或下劃線等效果,這時就需要用HTML中的文本格式化標籤,使文字以特殊的方式顯示。
標籤語義:突出重要性,比普通文字更重要
(1)語義:加粗
標籤:<strong></strong>
或<b></b>
說明:更推薦使用<strong>
,語義更強烈
(2)語義:傾斜
標籤:<em></em>
或者<i></i>
說明:更推薦使用<em>
,語義更強烈
(3)語義:刪除線
標籤:<del></del>
或者<s></s>
說明:更推薦使用<del>
,語義更強烈
(4)語義:下劃線
標籤:<ins></ins>
或者<u></u>
說明:更推薦使用<ins>
,語義更強烈
5.<div>
和<span>
標籤
<div>
和<span>
是沒有語義的,它們就是一個盒子,用來裝內容的
語法規範:
<div>這是頭部</div>
<span>今日價格</span>
div表示分割、分區;span表意爲跨度、跨距
特點:
(1)<div>
標籤用來佈局,但是一行只能放一個<div>
.(大盒子)
(2)<span>
標籤用來佈局,一行可以放多個<span>
. (小盒子)
4.圖像標籤(重點)
在HTML標籤中,<img>
標籤用於定義HTML頁面中的圖像
語法規範:
<img src="圖像URL"/>
src是<img>
標籤的必需屬性,它用於指定圖像文件的路徑和文件名
所謂屬性:簡單理解就是屬性這個圖像標籤的特性
圖像標籤屬性注意點:
(1)圖像標籤可以擁有多個屬性,必須寫在標籤名的後面
(2)屬性之間不分先後順序,標籤名與屬性,屬性與屬性之間均以空格分開。
(3)屬性採取鍵值對的格式,即key="value"
的格式,屬性=“屬性值”
好了,到此我們說完了HTML的常用標籤。下次我們再來一起學習HTML的路徑問題以及超鏈接。