用HTML和CSS創建一個web頁面非常簡單。但是很容易犯錯誤，而且有很多事情你可能不會去想。大多數時候，這些小錯誤不會造成太大的影響。

但從長遠來看，它們會讓你的生活更加困難。這九個錯誤很容易犯，但是如果你早一點而不是晚一點改正它們，你的頁面就會看起來更好，更容易維護，並且按照你想要的方式運行。

1內聯樣式

HTML和CSS的一大優點是，你可以在任何時候格式化任何一行文本——任何一個單詞，真的——只要你想。但這並不意味著你應該利用這種能力。

下面是一個內聯樣式的示例，您可以使用它使段落比周圍的段落大，並以不同的顏色突出顯示：

這給了段落一個CSS樣式，以段落結束。看起來很有效率，對吧？

它有一個很大的問題：如果你想在你的網站上改變很多東西，你需要找到每一個內聯樣式的實例並進行改變。如果你有100個不同的段落是120%的文本大小和藍色，你將不得不找到所有的100個，並改變他們的任何你認為是一個更好的格式。

相反，使用CSS樣式表。以下是您在上面一段中使用的樣式：

現在，不用使用內聯樣式，只需使用以下行：

你的段落將是藍色的。當你對CSS中的“important”類進行更改時，它們都會更改。

2用於佈局的表格

人們過去經常使用表格來格式化頁面佈局。通過使用表，可以將頁面上的元素按列和行進行組織，並應用不同的對齊方式和樣式。即使是單單元表也可以用來正確對齊內容。但是這種使用桌子的方式通常是不受歡迎的。

與內聯樣式非常類似，使用CSS而不是HTML表格進行佈局更易於維護。同樣，如果您想在幾十頁或幾百頁上進行更改，那麼編輯樣式表要比遍歷每一頁並調整表容易得多。

除了易於維護之外，閱讀CSS佈局往往比閱讀HTML表要容易得多。尤其是如果最終在彼此之間嵌套了許多級別的表。在HTML文檔和樣式表之間來回切換以查看到底發生了什麼可能不太容易，但是頁面的內容將更清晰，更易於編輯。

在這裡或那裡使用表將頁面拆分為列並不是一種致命的罪惡。有時候，這比在CSS上亂搞要簡單快捷。但是如果你正在**巨大的多層表，你應該考慮用CSS重新格式化。

三。不推薦的html

與任何語言一樣，HTML也會定期更改。官方認可的標籤會改變，有些會被棄用。即使這些標籤仍然有效，也最好避免使用它們。

例如，如果你習慣用粗體和斜體的標籤，你就落後於時代了。和（表示“強調”）現在是標準標籤。、和其他也不推薦使用。

大多數不推薦使用的標籤都被CSS替換了，所以您需要使用樣式（最好不是內聯樣式）來獲得相同的效果。如果您不確定如何替換一個不推薦使用的標記，或者某個特定的標記仍在使用中，請查看官方的HTML文檔，或者運行一個快速搜索。

4內聯javascript

有些網頁使用JavaScript添加附加功能。它可以使網頁具有交互性，在輸入文本時驗證文本，添加動畫，提供對用戶操作的響應，等等。簡而言之，它可以通過提供附加的行為使頁面更有用。

與CSS非常相似，您可以將內聯JavaScript添加到HTML中。同樣像CSS，這通常是不鼓勵的。除了可能更難維護外，還有幾個其他原因值得我們這樣告誡。

內聯JavaScript可以使用比從不同文件鏈接的腳本更多的帶寬。一個稱為“縮小”的過程在將HTML和CSS發送給用戶之前對其進行壓縮，通過寬帶或移動連接需要較少的帶寬。然而，內聯JavaScript不能被縮小。它也不會被緩存，而一個單獨的JavaScript文件可以被緩存。

所有這些都使得內聯JavaScript更加佔用帶寬。

調試起來也比較困難，因為您可以對JavaScript文件使用JavaScript驗證程序。。。但它在內聯腳本上不起作用。而且，同樣，它使得HTML更乾淨、更易於維護。

5多個h1標籤

標題標籤很棒。他們使網頁更容易瀏覽，他們可以給你一個搜索引擎優化推進，他們可以用來強調某些要點。

但是標題標籤有六個層次是有原因的。你的頁面上應該只有一個H1標籤。這通常是頁面的標題（尤其是在博客和類似網站上）。你可能會認為，在H1標籤裡放一堆關鍵字會讓Google更容易找到它們，並在結果中給你的網站排名更高。

但它真正做的是讓你的頁面更混亂，更難閱讀。這將否定任何搜索引擎優化的好處，你可能會看到無論如何。

使用H2、H3和其他標題標記可以更好地勾勒出頁面的輪廓。標題的層次應該讓你的讀者知道以下部分有多重要。如果你誤導了他們，他們會知道的，他們不會高興的。

6跳過圖像高度

如果無法顯示圖像，則可以為每個圖像指定一個“alt”屬性，該屬性顯示特定的文本行。這似乎不是什麼大不了的事，尤其是在現代瀏覽器（臺式機和移動設備）可以顯示任何東西的情況下。

但不添加alt屬性是一個很大的錯誤，尤其是在**瀏覽頻繁的時代。移動連接並不總是很好，如果瀏覽器不能加載圖像，你的讀者就不知道他們應該在那裡看到什麼。alt屬性可以解決這個問題。

如果有人正在使用屏幕閱讀器或其他輔助功能，那麼alt屬性可能就是他們從圖像中得到的全部信息。

當然，還有潛在的搜索引擎優化好處。搜索引擎可以索引簡短的、描述性的alt屬性。但這裡最大的好處是幫助讀者。

7不關閉標記

有一些HTML標籤，你可以不關閉，如和。瀏覽器知道，當你開始另一個段落或列表項時，上一個段落或列表項就結束了。但這並不意味著你應該跳過結束標籤。

首先也是最重要的是，儘管瀏覽器技術有了進步，但如果你沒有關閉標籤，瀏覽器肯定有可能不正確地顯示你的內容。應用樣式可能會產生一些不可預知的結果，正如stackexchange用戶robertc所演示的那樣。

歸根結底，瀏覽器期待的是結束標記。他們不是絕對需要他們。。。但是當他們試圖顯示你的頁面時，使用正確的HTML肯定會給他們帶來好處。

幸運的是，關閉標記不需要花費太多時間，特別是如果您使用的是一個好的HTML編輯器。

8不包括doctype

在HTML文檔的開頭，您通常會看到DOCTYPE聲明，如下所示：

這是一件不常被談論的事情，但它是你頁面中的一個重要元素。DOCTYPE聲明告訴瀏覽器您正在使用哪種類型的HTML。這允許它正確地呈現HTML。

如果跳過DOCTYPE聲明，頁面將以“怪癖模式”呈現。這是現代瀏覽器對過時網頁的防禦。它會改變頁面的顯示方式。快速瀏覽一下Firefox的quirks模式，就會發現區分大小寫的變化，字體屬性不會繼承到表中，字體大小的計算方式不同，沒有alt屬性的圖像有時顯示不正確。

這些事情大部分都是相對次要的。但是，如果希望頁面正確顯示，則應確保瀏覽器已啟用其完全標準模式。

要做到這一點，你需要一個DOCTYPE。（如果你不知道該用什麼，就用吧。）

9忽略架構標記

模式標記幫助搜索引擎更好地瞭解頁面上的內容。更具體地說，這個標記告訴搜索引擎你在每個部分中寫的內容。

例如，在一篇文章中，可以使用模式標記告訴搜索引擎關於文章的標題、作者、日期、發佈者和其他有用信息。

有電影、書籍、組織、人、餐館、產品、場所、動作、不同類型的數據、音樂、雕塑、預訂、服務、自動取款機、啤酒廠的模式，以及幾乎所有你能想到的東西。太神奇了。

您完全可以不用使用模式標記就可以脫身。如果沒有它，您的頁面將正確顯示。你的讀者甚至不知道它在那裡。但加入這個加價會有很多收穫。搜索引擎將能夠提供關於你的頁面更詳細、有用的信息，包括豐富的片段。

使用Google的模式標記工具，這個過程實際上相當簡單。

習慣html最佳實踐

使這些最佳實踐成為習慣可能需要一段時間。有時你會覺得你花了很多額外的時間去做一些對你不太有幫助的事情。但是確保你的HTML和CSS佈局良好，易於使用和維護，從長遠來看會為你節省很多時間。

在創建網頁時，你發現還有哪些好習慣是有用的？你不同意上述任何一種做法嗎？在下面的評論中分享你的想法！