常見HTML標籤的bug

2021-10-07 20:00:39 字數 2274 閱讀 2616

在說bug前,我們先簡單了解一下html的標籤。對於剛入門前端的朋友而言,首先我們接觸到的肯定會是標籤以及標籤的巢狀。

當然,bug這種東西我們都會考慮到版本問題,如果不考慮版本,那就有點耍流氓了,說不定什麼時候它就被修復了呢。我這裡用的是目前而言的高版本谷歌瀏覽器測試的。

現在由於移動端(也就是手機)的盛行,我們的介面**(html)為了適配移動端,在寫的時候更多會使用h5的語義化標籤。

關於h5,我以後會單開一篇部落格。

我們通常將標籤分成兩大塊:

1.塊級標籤

2.內聯標籤:行內塊標籤和行內標籤

簡單解釋一下這兩類標籤:

我們的頁面是由乙個乙個正方形的畫素點組成的。每個畫素點的寬為1px,高為1px。每個標籤都是由這些小塊組成,所以這些標籤的範圍都是長方形或者正方形的。當然css裡面提供了改變形狀的方式,我之後的部落格會寫一些。

塊級標籤(塊級元素)自帶了寬和高的屬性,我們可以給它們直接設定,同時它獨佔一行

行內塊標籤(行內塊元素)也自帶了寬和高的屬性,我們也可以給它們直接設定,但是它並不獨佔一行

行內標籤(行內元素)沒有寬和高的屬性,我們沒有辦法給它們設定寬和高,但是我們可以通過css的display屬性將其設定為塊級標籤或者行內塊元素,將其變為可以設定寬高屬性的元素,再設定它的寬和高,當然它也是不獨佔一行的。

對於不獨佔一行的標籤,我們有時候會需要對它們垂直方向的對齊方式進行設定。當然,這裡面也有要講究的地方。我們css篇再講。

然後我們再說一下標籤的巢狀

大多數的標籤巢狀都是這樣的:

塊級標籤包裹塊級標籤、行內塊標籤以及行內標籤

我們要注意:行內標籤最好不要包裹塊級標籤。

當然,這三類標籤的切換是很容易的:只需要以下幾行**

//以下三個屬性值可以無視原元素自帶的屬性,直接修改該元素屬性

display: block; //在指定元素內設定,會將其變成塊級元素

display: inline; //在指定元素內設定,會將其變成行內元素

display: inline-block; //在指定元素內設定,會將其變成行內塊元素

當然,這些是傳統css改變標籤(或者稱為元素)的方式

如果你學到了頁面的布局方式,那麼相應的你也會了解到一些其他的方式去改變它們。比如彈性盒子等。後面會再寫一篇關於彈性盒子的部落格。

p標籤,又稱段落標籤

雖然它也是塊級標籤,但是它的裡面不能包塊級標籤。

比如:

如果你這樣寫了**,那麼你會收到這樣乙個結果:

這樣的結果很明顯對於我們進行頁面布局是十分不利的。尤其是後期我們在使用dom去操作頁面內容的時候,你可能會找元素找的很難受。所以我們一開始就要避免這些bug的存在。如果你是新手,那麼關於dom是什麼,我後期會再開一篇部落格的。

img標籤的bug在於它的對齊方式,單純的img標籤它的垂直對齊需要兩個屬性:父元素的line-height屬性和自身的vertical-align兩個屬性,這兩個屬性在後面的部落格中也會詳解。

ps:你們可以試一下:單純的line-height和vertical-align並不能移動img的位置

我們來看一下它們一起使用的效果:

注意:img標籤如果沒有設定vertical-align屬性,那麼它預設是vertical-align:top;的效果,而其後的文字是vertical-align:baseline;的效果。img標籤沒有vertical-align:baseline;的效果。

當你將img的vertical-align改為bottom

總結:當我們在寫html的時候需要更加細心去發現更多的東西。

Html 常見標籤

標籤描述 定義粗體文字。定義大號字。定義著重文字。定義斜體字。定義小號字。定義加重語氣。定義下標字。定義上標字。定義插入字。定義刪除字。不贊成使用。使用 代替。不贊成使用。使用 代替。不贊成使用。使用樣式 style 代替。標籤描述 定義計算機 定義鍵盤碼。定義計算機 樣本。定義打字機 定義變數。定...

HTML常見標籤

協議 伺服器的ip位址 埠 請求的頁面 作用 在頁面上以標題的形式顯示文字。b 加粗 u 下劃線 i 傾斜 s 刪除線 不建議使用 strong 加粗 em 傾斜 ins 下劃線 del 刪除線 幫助中心 訂單操作 表頭 張三18 挖掘機 馬六 19.net 通常三個一起使用 html三種規範 xh...

HTML常見的BUG 了解

雙倍浮向 如果乙個元素新增float left並且有margin left 在ie6中顯示兩倍的margin值 hack 給元素新增display inline 預設大小 讓元素高度保持乙個最小的高度16px左右。hack 用font size 0 或者是overflow hidden 網頁中按鈕元...