我了解的 HTML行 塊標籤

2021-10-07 16:32:19 字數 3206 閱讀 1841

塊標籤:單個標籤獨自一行佔據,無論在html 檔案內是如何書寫都會再起一行的,我們稱之為塊標籤。

行標籤:在html 書寫,都是在同一行中,不會主動的換行的我們稱之為行標籤,也叫內聯標籤。

這是我理解的行、塊標籤。這個兩個定義是在html中非常基礎的內容,屬於必須要弄清楚並且掌握的部分。對之後的頁面布局和css樣式的書寫都有著至關重要的意義。有時候,我們也將標籤稱之為元素。行、塊標籤=行、塊元素,只是叫法不同,表達的意思還是相同的。

前言現在,我們具體介紹什麼是行、塊標籤。這裡介紹的標籤都是他們最原本的樣子。下面內容如果不做特殊說明,提到的標籤都是雙標籤。如果遇到單標籤會特殊說明。

工具:編輯器visual studio code。瀏覽器 chrome。

常用的行標籤

標籤作用ab

表示加粗文字

br用於換行,在這之後的標籤將另起一行

em表示強調作用。在頁面中的顯示為 斜體

i表示斜體。頁面中和em標籤一樣,在頁面中使文字變成斜體

strong

表示強調作用。在頁面中顯示為 加粗

span

表示區域

我們把上面介紹的幾種標籤在html檔案裡面寫出來看看效果。因為行標籤沒有預設的寬高,所以我們在表中加入文字,這樣可以直觀的感受到行標籤的特點(因為標籤的特性,他們在沒有用過css設定寬高時,會被內部的元素『撐開』)。

lang

="en"

>

>

charset

="utf-8"

>

>

行標籤title

>

head

>

>

href

="">

>

>

b標籤,表示加粗b

>

>

strong標籤,表示強調,顯示為加粗strong

>

>

i標籤,表示斜體i

>

>

em標籤,表示強調,顯示為加粗em

>

>

span標籤,span包裹的區域,沒有額外的顯示樣式。span

>

>

這裡用於介紹br標籤

>

前面新增了br會換行 span

>

body

>

html

>

他們在頁面上的顯示為:

我們可以看到,雖然在**中,我們的幾個行標籤都是隔行書寫的,但是實際在頁面中的展示還是在同一行中的,直到br 標籤的位置,才換行了。當然這裡你可以使用『檢查』功能,將滑鼠移動到文字上看看他們在瀏覽器中是怎麼展示的。如果還是感覺不好理解,你可以將根據行標籤的特性:不會主動另起一行顯示,把他理解成頁面中的文字。因為文字在頁面中是不會主動換行,這樣可以方便理解一點。但是行標籤絕對不等同於文字。

這裡介紹下什麼叫父元素,什麼叫子元素。在html 中,標籤都是一層套一層的。根據塊標籤的介紹的最後一條,塊標籤中可以巢狀行、塊標籤。

>

div>

>

>

li>

ul>

div 就是乙個塊標籤,在div 的起始標籤和結束標籤之間,才是我們放置具體內容的地方。div 和 ul 兩個是兄弟標籤,沒有什麼特殊的意義。li 標籤就是做為ul 的內容,放置在 ul 標籤的內部。這樣,ul 標籤就是li 標籤的 父元素。li 標籤就是 ul 標籤的 子元素。這個關係非常重要。

標籤作用

div表示文件中的區域,沒有具體表現。在html中做為最最常用,最最基礎的標籤 。

p段落標籤,又來表示文字段落

ul表示無序列表,結合li使用,表現為列表的前面為 『點』 而不是數字

ol表示有序列表,結合li使用,表現為列表的前面為 數字

li表示列表項,不單獨使用,必須結合ul,ol一起使用

h1-h6

標題標籤,頁面顯示為加粗

同樣的,來看看效果:

lang

="en"

>

>

charset

="utf-8"

>

>

塊標籤title

>

head

>

>

>

div,最基礎的標籤div

>

>

標題標籤h1h1

>

>

標題標籤h2h2

>

>

標題標籤h3h3

>

>

標題標籤h4h4

>

>

標題標籤h5h5

>

>

標題標籤h6h6

>

>

p標籤,段落標籤 111p

>

>

p標籤,段落標籤 222p

>

>

>

無序標籤ul,必須結合li 111li

>

>

無序標籤ul,必須結合li 222li

>

>

無序標籤ul,必須結合li 333li

>

ul>

>

>

有序標籤ol,必須結合li 111li

>

>

有序標籤ol,必須結合li 222li

>

>

有序標籤ol,必須結合li 333li

>

ol>

body

>

html

>

顯示為

好了,我們發現,塊標籤會自動的換行。但是又有一點點的疑惑,塊標籤不是只是另起一行嗎,為什麼感覺標題標籤之間;段落標籤之間的像是換了兩行來書寫的。這個是正常的,部分標籤都會有自己自帶的css樣式,上面的標題標籤和段落標籤,就是因為這個原因導致的,兩行之間的間距會比較大。這個在後續的css介紹中也會詳細的說明。

HTML中的行級標籤和塊級標籤

一 塊級標籤 1.獨佔一行,不和其他元素待在同一行 2.能設定寬高 常見的塊級標籤 div,p,h1 h6,ul,li,dl,dt,dd 我們是p標籤 我們是p標籤 我們是p標籤 在瀏覽器開啟顯示。二 行級標籤 1.能和其他元素待在同一行 2.不能設定寬高 常見的行級標籤 a,span,strong...

行標籤與塊標籤

行標籤和塊標籤是html頁面標籤的兩種屬性,都是屬於css樣式。行標籤 表示這種標籤在頁面中只佔其本身大小,而在樣式中對其寬和高的設定是無效的,這種標籤是可以在一行中排列顯示的,也叫做水平分布。行標籤包括 a span label button input。效果展示 塊標籤 獨佔一行的,在樣式中對其...

html塊標籤,內聯標籤

1.內聯標籤和塊級標籤的主要區別 塊元素內聯元素 獨佔一行,預設情況下,其寬度自動填滿其父元素寬度 相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化 可以設定width,height屬性 行內元素設定width,height屬性無效 可以設定margin和paddi...