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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...