Web前端開發人員註意了,這些語法錯誤千萬別再犯了

来源:https://www.cnblogs.com/icodingedu/archive/2022/05/10/16254965.html
-Advertisement-
Play Games

8 個你應該立即停止使用的無效 HTML 元素 HTML 規範的開發是一個漸進的過程,有時會出現問題。隨著時間的推移,許多元素和屬性被添加到 HTML 中,直到後來 Web 社區集體意識到有更好的方法時才被刪除。由於已棄用和過時的元素和屬性已經存在於網路上,因此許多現代瀏覽器繼續支持它們的使用。儘管 ...


8 個你應該立即停止使用的無效 HTML 元素

HTML 規範的開發是一個漸進的過程,有時會出現問題。隨著時間的推移,許多元素和屬性被添加到 HTML 中,直到後來 Web 社區集體意識到有更好的方法時才被刪除。由於已棄用和過時的元素和屬性已經存在於網路上,因此許多現代瀏覽器繼續支持它們的使用。儘管它們可能仍然有效,但您應該始終遵循最新版本的要求 HTML。不能保證瀏覽器對過時和棄用元素的支持會持續下去。有效但執行不 A 力。

 

有幾種 HTML 元素和屬性是有效的並且應該被使用,但是這些特性的實現隨著時間的推移而發生了變化,而 Web 開發社區的一些人還沒有註意到。HTMLtables 就是一個很好的例子。table 在某一時刻,使用 HTML 元素創建網頁佈局是很常見的。幾乎沒有人再這樣做了,CSS 比 tables 以往任何時候都更強大。但是,即使是經驗豐富的 Web 開發人員,也存在許多其他不太嚴重的誤用和語法錯誤。以下是一些經常被誤用得完全有效且有用的 HTML 功能以及正確實現的示例。

DOCTYPE

 

雖然在技術上不是 HTML 元素,但 DOCTYPE 聲明應該是每個 HTML 文檔中出現的第一件事。這個聲明是瀏覽器文檔中代碼的語言。過去,這個聲明包括幾個部分,可能會有點複雜。然而,在 HTML5 中,這很簡單:

使用該聲明開始每個人 HTML 文檔,Web 瀏覽器將準確地知道您要說什麼。

識別字元集

Web 瀏覽器必須知道用於編寫文檔的字元集才能正確呈現它。在絕大多數情況下,要聲明的正確字元集是 UTF-8。如果您需要聲明其他任何內容,很可能您已經知道並知道如何去做。如果您不確定,請堅持使用 UTF-8 是一個安全的選擇。在 HTML5 中聲明字元集比在以前的 HTML 版本中要簡單得多。這是現代 HTML5 中聲明的正確語法:

只需將該行放到 head 您的 HTML 文檔中即可。

鏈接到版權信息

過去,通常使用 meta 標簽來提供版權信息。但是,這不是處理此任務的正確方法,並且網路爬蟲無法識別標簽的這種標簽外使用 meta。識別版權的正確方法是使用 HTML 文檔 link 中的元素,如下所示:head

您還可以在錨點和區域元素上使用 rel="license" 屬性值對。

停止註釋掉腳本

在過去,通常使用如下語法將腳本添加到 HTML 文檔中:

這是有充分理由的。在某一時刻,許多瀏覽器無法識別 script 標簽,並試圖將標簽之間的內容呈現為 HTML,從而導致它們以純文本形式顯示腳本。為了避免這個問題,開發人員會註釋掉文本,這樣它就不會被不受支持的瀏覽器呈現為 HTML。那些日子已經離我們很遠了。所有現代瀏覽器都支持該 script 標簽。只需完全刪除 HTML 註釋括弧,或者更好的是,將 JavaScript 編寫在單獨的文件中,然後使用 script 標記將其導入到當前的 HTML 文檔中,如下所示:

立即停止使用的 HTML 元素

還有不少元素曾經是 HTML 規範的一部分,但後來被棄用或廢棄。以下是您可能仍在使用的八個 HTML 元素,您應該立即停止使用它們以及您可以使用的替代標簽:

  1. applet:如果您仍在使用此標簽,那麼您遇到的問題比使用不推薦使用的標簽更大,因為 Java 正在作為一種 Web 編程語言退出。短期內切換到 objectorembed 元素,但長期停止在 web 上使用 Java。
  2. bgsound: 這個元素曾經被 IE 用來為網站添加背景音樂。背景音樂從一開始就是個壞主意。只是不要這樣做。如果您想將音頻內容添加到您的網站,請使用 audio 標簽,但不要將其設置為自動播放。
  3. frame:該 frame 元素及其所有相關元素已從 HTML 規範中刪除。不要使用它們。如果 iframe 您嘗試嵌入外部網頁,請使用 CSS,如果您嘗試設計網站佈局,請使用。
  4. hgroup:在過去,您可以通過將標題和副標題包裝在適當的標題級別並將兩個標題包裝在 hgroup 標簽中來對標題和副標題進行分組。但是,此元素已被棄用。相反,使用單個標題元素來包含標題和副標題,將副標題包裝在 span 標簽中,並使用 CSS 來控制副標題的樣式。
  5. dir:目錄元素曾經是什麼 HTML 規範的一部分,用於表示文件或頁面的列表。改用錨元素的無序列表。
  6. acronym:此元素已被棄用,請改用縮寫標簽 abbr。
  7. isindex:此元素在網頁上創建了一個文本欄位。但是,從 HTML 4.01 開始,可以使用呈現此標記的 form 元素 input 和屬性來完成同樣的事情,type="text" 這些標記是不必要的和過時的。
  8. plaintext, xmp, 和 listing: 這些標簽是以純文本而不是 HTML 顯示文本的不同方式。如果您想在 HTML 文檔中嵌入純文本,您有兩個選項,pre 以及 'code'。要以等寬字體顯示文本並保留空格 use pre,要顯示代碼,請使用該 code 元素並 < 通過 > 鍵入 < 和 > 替換每個符號來轉義所有符號。

由 CSS 更好地處理的任務

有許多元素和屬性曾經是 HTML 的一部分,但執行的任務更適合 CSS。這些元素已經被棄用,取而代之的是讓 CSS 控制網頁呈現。

由 CSS 屬性替換的元素

曾經使用 HTML 元素(如 font、basefont、center、strike 和 u. 這些元素都已被棄用,取而代之的是 CSS 提供的字體和排版控制項。要瞭解更多信息,請查看我們的字體和網頁排版教程。一個從未真正流行起來的獨特標簽是 multicol。此標簽可用於將文本分成多列,類似於報紙的外觀。現在可以使用 CSScolumns 屬性在現代瀏覽器中創建類似但更強大的效果。

由 CSS 屬性替換的屬性

廣泛的 HTML 元素屬性曾經可用於控制 HTML 元素的呈現。幾乎所有這些標簽都已被棄用,現在 CSS 提供了相同的功能。如果您不熟悉 CSS 以及如何實現這些屬性,我們的 CSS 教程將幫助您立即開始使用層疊樣式表。下麵是一些更常用的屬性和現在可以用來實現相同結果的 CSS 屬性。

  1. align:此屬性已被強大的 CSS 屬性組合所取代,包括 text-align、float 和 vertical-align.
  2. background 和 bgcolor:不要使用這些已棄用的 HTML 屬性應用背景圖像和顏色,而是使用 background-image 和 background-colorCSS 屬性。
  3. height 和 width:這些屬性的使用在某些元素上仍然有效。但是,在所有情況下,都可以通過使用同名的 CSS 屬性來實現相同的效果。
  4. clear:如果要強制一個元素清除一側或兩側的所有其他元素,請使用 clearCSS 屬性而不是 clearHTML 屬性。
  5. border:雖然此屬性在許多元素上仍然可以正常工作,但使用 borderCSS 屬性應用邊框是更好的做法。

其他資源

在本文中,我們介紹了一些最常見的元素和屬性,這些元素和屬性使用不當或已被棄用或過時。然而,我們真的只是觸及了冰山一角。如果您想瞭解已從 HTML 規範中刪除的所有 HTML 元素和屬性,請參閱以下資源:

- 過時 HTML 功能的WHATWG 列表 https://developers.whatwg.org/obsolete.html
- 來自官方 HTML5 文檔的過時 HTML 功能 https://www.w3.org/TR/html5/obsolete.html

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,非常 ...
  • OpenHarmony電話子系統為 OS 提供了基礎的無線通信能力。支持 TD-LTE/FDD-LTE/TD-SCDMA/WCDMA/EVDO/CDMA1X/GSM 等網路制式的通信模塊,能夠提供高速的無線數據傳輸、互聯網接入等業務,具備語音、簡訊、彩信、SIM 卡等功能。 ...
  • 在直播、語聊房、K 歌房場景中,為增加趣味性和互動性,玩家可以通過變聲來搞怪,通過混響烘托氣氛,通過立體聲使聲音更具立體感。ZegoExpress SDK 提供了多種預設的變聲、混響、混響回聲、立體聲效果,開發者可以靈活設置自己想要的聲音,如果需要試聽,可以啟用耳返進行測試。 ...
  • 在 OpenHarmony 生態發展過程中,涌現了大批優秀的代碼貢獻者,本專題旨在表彰貢獻、分享經驗,文中內容來自嘉賓訪談,不代表 OpenHarmony 工作委員會觀點。 ...
  • 如今,身材管理已成為人們日常生活中重點關註的內容,除了運動之外,熱量的攝入也是重中之重,想要維持理想的身體健康和體重狀態,人們需要長期測量自己每日攝入食物的體量、熱量和營養價值,這需要實踐者有極強的耐心、執行力和知識儲備,從而成為了一部分身材管理道路上的攔路虎。 因此很多運動健康類App中支持食物識 ...
  • 今天內容挺多,因為想的是必須在一天內把這個vuex完成,說實話這裡面要記得東西還是蠻多的,主要是分為原生的和簡便方法兩種都是vue官方定義的,只不過看你要用哪種,vuex感覺要是用熟練了不得了,直接可以把vue起飛了,數據到處用,那種起飛的感覺,曾經體驗過,所以這個應該還是可以多練練的。 明天進入v ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...