HTML總結(二)之HTML常用標籤

學習標籤,重點是記住每一個標籤的語義。簡單理解就是指標籤的含義。即這個標籤是用來幹嘛的。
根據標籤的語義,在合適的地方給一個最爲合理的標籤,可以讓頁面結構更清晰。

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的路徑問題以及超鏈接。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章