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
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...