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
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...