前端開發中最常見的12個HTML標籤錯誤

2021-09-01 11:01:29 字數 3841 閱讀 5534

開發者在寫html**的時候一定要仔細,並熟練掌握html規則,因為一不留神則可能出現一些微小的錯誤,但有可能會導致嚴重的後果。

本文列舉了一些在html中常見的錯誤,並且給出了如何避免錯誤的方法。相信這些方法會對前端開發者有一些幫助。

錯誤1:巢狀錯誤

正確使用html tag的結束標記非常重要,html tag的結束標記的順序要和開始標記一致,而新手往往會忽視這點。如果順序不對,系統會出現驗證錯誤並且得不到預期的結果。因此,要注意避免這樣的錯誤。

錯誤使用:

html**

<

div>

<

p>

<

a>this is my smashing text

p>

div>

a>

正確使用:

html**

<

div>

<

p>

<

a>this is my smashing text

a>

p>

div>

錯誤2:列表使用不當

在html中經常會用到排序列表(ol)和非排序列表(ul),它們不僅讓條目顯示更加靈活,還可以實現許多其他的功能。正確使用列表tag可以更方便的顯示資訊。但要注意避免在**中使用換行符。搜尋引擎會識別列表tag,因此要使用規範的html tag,這樣可以減小黑客攻擊的概率。

錯誤3:form tag使用不當

很多人都分不清form和table元素的區別,不知道應該先定義哪個,大多數人先定義table,其實這樣的用法是錯誤的。

錯誤的使用:

html**

<

table

>

<

form

>

<

tr>

<

td>..... 

td>

tr>

form

>

table

>

正確的使用:

html**

<

form

>

<

table

>

<

tr>.... 

tr>

table

>

form

>

錯誤4:在內聯元素(inline elements)中使用塊元素(block elements)

html中的元素既可以在內聯(inline)區域中顯示,也可以在塊(block)區域顯示。預設情況下,每個tag都是在內聯元素或塊元素中建立的。塊元素包括文件中的段落和div,而內聯元素需要放置在塊區域內。因此,使用內聯元素時,要注意將它們包含在塊元素中使用。

常見的塊元素(block elements):

html**

<

div>, <

h1>…<

h6>, <

p>, <

ul>, <

ol>, <

dl>, <

table

>, <

blockquote

>, <

form

>

常見的內聯元素(inline elements):

html**

<

span

>, <

a>, <

strong

>, <

em>, <

img/>, <

abbr

>, <

acronym

>

錯誤5:省略alt屬性alt="image" ,如果只是裝飾品可以使用

alt=" " 。

錯誤使用:

html**

<

imgsrc="smiley.gif"

alt=""

/>

正確使用:

html**

<

imgsrc="smiley.gif"

alt="smiley face"

width="42"

height="42"

/>

錯誤6:粗體和斜體使用錯誤

儘管 和

是常用的粗體和斜體標記,但實際上它們屬於語義上的表象標籤。因此,最好還是使用css格式中的多種樣式。比如在文件中需要突出的位置可以使用

。顯示的效果和、相同,但是看起來更漂亮。

錯誤7:不必要的換行符

標記用在段落內部的換行,在下一行中繼續該段落。而則是段落標記。但許多人經常在元素之間使用換行符,這種用法是錯誤的。

錯誤的用法:

html**

this is my first paragraph  

this will be my test description  

正確用法:

html**

<

p>this is my first paragraph

p>

<

p>this will be my test description

p>

錯誤8:strik標籤的錯誤使用

以前的 和

常用來修訂網頁文字。但是現在它們更多的被當做棄用標記。已經出現新的tag代替它們,比如

和 ,分別用於顯示文件中插入和刪除的內容。

錯誤9:內聯樣式

許多人都抱怨內聯樣式不好用,原因是css和語義上的html都是關於樣式和結構的內容,因此在html中直接使用樣式並不是最佳選擇。

錯誤用法:

html**

<

pstyle="font-size: 14px;font-weight: bol"

>

正確的方法是使用樣式表。

錯誤10:邊框

要知道,邊框屬性只是表象顯示。因此,它肯定會由於css發生改變。如果預設邊框被打亂了,請不要覺得奇怪。

錯誤用法:

html**

<

imgsrc="smiley.gif"

alt=""

border="0"

/>

正確的方式是通過樣式表來定義。

錯誤11:忽略標題標記

標題標記用來劃分文件結構和分隔區域,通常和都是這樣用的。標題標記根據需要放在合適的位置。最好的用法是根據1-6的規範格式來使用。

錯誤用法:

html**

<

strong

>this is my smashing heading

strong

>

<

p>this is my xyz description.

p>

正確用法:

html**

<

h1>this is my smashing heading

h1>

<

p>this is my xyz description.

p>

錯誤12:使用和

可以這樣說,

和 唯一的作用就是讓網頁更醜。如果想讓網頁中的某些部分更醒目和引人注意,選擇其他的解決方法也不要使用文字閃光的方法,因為這種方式真的很不受歡迎。

Python中最常見括號 的區別

在python語言中最常見的括號有三種,分別是 小括號 中括號 花括號 其作用也不相同,分別用來代表不同的python基本內建資料型別。python中的小括號 代表tuple元祖資料型別,元祖是一種不可變序列。建立方法很簡單,大多數時候都是小括號括起來的 1 tup 1,2,3 2 tup 3 1,...

Python中最常見括號 的區別

在python語言中最常見的括號有三種,分別是 小括號 中括號 花括號 其作用也不相同,分別用來代表不同的python基本內建資料型別。python中的小括號 代表tuple元祖資料型別,元祖是一種不可變序列。建立方法很簡單,大多數時候都是小括號括起來的 1 tup 1,2,3 2 tup 3 1,...

電氣設計軟體中最常見的10個錯誤

設計早期的裝置名稱重複,元件之間交叉引用的斷開鏈結以及耗時的元件生成,這些只是在低質量cad軟體中生成電氣設計時發生的一些令人頭疼的錯誤。這些花費大量時間修復的錯誤只是冰山一角。本文將深入 所有電氣工程師最終遇到的災難。只是為了好玩,讓我們把它作為電氣設計軟體中最常見的10個錯誤。1.塊只是不更新設...