我已經(jīng)在網(wǎng)站上工作了幾年，無論是專業(yè)的還是業(yè)余項目。有一天，我反思了這樣一個事實：我所有的 Web 開發(fā)教育都來自實際制作網(wǎng)站。在大多數(shù)情況下，我會有一個特定的問題，谷歌如何解決它，并在這個過程中學(xué)習(xí)新的東西。

我想知道我從未全面學(xué)習(xí) HTML 錯過了什么。忘記 CSS 和 JavaScript。我只是在談?wù)撛?HTML。在獲得了相當多的經(jīng)驗之后再回到 Web 開發(fā)的這樣一個基本方面似乎很愚蠢，但是很容易僅僅因為您知道足夠多的知識來做一些有用的事情就對一項技能過度自信。

所以我決定重新學(xué)習(xí) HTML 并發(fā)現(xiàn)我未知的未知數(shù)。

經(jīng)驗

對于上下文，我在中學(xué)時為一個班級項目制作了我的第一個網(wǎng)站。我們學(xué)習(xí)了基本的 HTML，嵌入 MP3 歌曲感覺就像魔術(shù)一樣。但是直到大學(xué)我才再次接觸 Web 開發(fā)。我制作了一個名為The Daily Lore的輕量級新聞聚合器 ，它仍在運行（我保留了原始版本）。

從那以后，我在兩個專業(yè)的網(wǎng)站上工作過，一個是非營利性網(wǎng)站，一個是個人網(wǎng)站，還有一些是做業(yè)余 項目的小網(wǎng)站，比如Make a README。

HTML5 簡介

我不認為自己是基于這種經(jīng)驗的 Web 開發(fā)專家，但我肯定比Coursera的HTML5 入門課程的典型學(xué)生擁有更多的知識 。我開始這門課程時就希望了解很多內(nèi)容，因為它是為沒有編程背景的完全初學(xué)者設(shè)計的。

當我瀏覽這些材料時，我實際上已經(jīng)知道了很多，但它仍然是一個很好的復(fù)習(xí)，特別是兩點：使用語義元素的重要性以及在可訪問性方面要考慮什么。

我一直有一個壞習(xí)慣，即使用通用<div>元素來制作我需要的東西，而不是代表特定內(nèi)容的語義元素，如 頁眉和 頁腳 元素。

可訪問性也是我從未深入考慮過的事情。我知道圖像應(yīng)該有alt描述，僅此而已。本課程的重點之一是使用適當?shù)恼Z義元素對于使站點更易于訪問很重要。

例如，使用屏幕閱讀器的人可以使用標題 元素（<h1>通過<h6>）跳轉(zhuǎn) ，因此使用它們并確保它們的順序正確很重要。僅使用它們來放大文本是錯誤的，因為它們的真正目的是定義內(nèi)容的結(jié)構(gòu)。它們就像一個目錄。

代替標題，我們可以使用<p>元素并通過 CSS 改變它們的字體大小來創(chuàng)建一個看起來相同的網(wǎng)站，但它的語義和可訪問性會較差。Web 開發(fā)不僅僅是讓網(wǎng)站看起來像我們想要的那樣。讓內(nèi)容也代表我們想要的也很重要。

可訪問性不僅僅是改善網(wǎng)站與屏幕閱讀器的工作方式。對于有視覺障礙或色盲的人，我們應(yīng)該考慮字體大小、字體樣式和顏色對比度。我們應(yīng)該考慮到有聽力損失的人可能更難識別正在播放的音頻或視頻。我們應(yīng)該讓標簽導(dǎo)航適合主要依賴鍵盤的人，也許是因為他們很難使用鼠標。當我們添加動畫時，我們應(yīng)該注意避免那些使人們更難以實際使用網(wǎng)站的動畫，例如在交互過程中改變頁面布局的動畫。并且我們應(yīng)該考慮何時頁面過載信息過多或元素過多，使人們難以理解事物或如何實際使用網(wǎng)站。

人們很容易忘記可訪問性，但我們應(yīng)該努力讓網(wǎng)站為盡可能多的人服務(wù)。可訪問性還與可用性和搜索引擎優(yōu)化密切相關(guān)。該課程指出，改進一個經(jīng)常意味著改進所有其他。

閱讀文檔

我有一個朋友，他可能是我認識的唯一一個讀過整本NFL 規(guī)則手冊的人 （2020 年版本有 87 頁長）。和他一起看足球很有趣，因為他非常善于理解比賽的細微差別和奇怪的情況。我認為使用 HTML 也有類似的機會。

嚴格的等價物是閱讀每個 HTML 元素的HTML 標準，但我決定閱讀每個元素的MDN 文檔，因為 MDN 有很多關(guān)于瀏覽器兼容性和在實踐中使用元素的信息。我閱讀了每個元素的整個頁面，做筆記，并為我想要記住的部分制作了Anki卡片。

有許多已棄用的元素我只是略讀了一下，我也懶得做筆記，但數(shù)十個標準化的元素和屬性對我來說是全新的。

我并不打算以 HTML 大師的身份從這次經(jīng)歷中走出來，而且我仍然需要應(yīng)用我所學(xué)到的知識（包括在這個網(wǎng)站上），但我發(fā)現(xiàn)僅僅了解可用的內(nèi)容是很有用的。盡管我不記得有關(guān)使用圖片 元素的所有細節(jié) ，但我知道它現(xiàn)在存在，并且我可以在以后的實施過程中隨時查找細節(jié)。這與根本不知道它和<img>在所有情況下使用普通是一個絕對的區(qū)別，因為我不知道更好。

觀察

當我閱讀文檔時，有些事情對我來說特別有趣，并且我有一些觀察。

該地址 元素是一般，不只是物理郵寄地址的聯(lián)系信息。

所述定義 元素表示正被定義的術(shù)語，而不是定義本身。

有一整套 ruby元素，主要用于顯示東亞字符的發(fā)音。

該賽道 元素提供一種標準的方式嵌入定時文本軌道視頻和音頻。我以前從未聽說過 WebVTT（Web 視頻文本軌道）格式。

該地圖元素似乎是不合時宜的，特別是考慮到它是沒有反應(yīng)。

所述數(shù)據(jù) 元素提供了一種機器可讀的翻譯內(nèi)容。這似乎有助于屏幕抓取，LinkedIn 等一些網(wǎng)站一直在積極嘗試阻止。

在正確選擇使用strong 與em與 i與 u與 b與 mark時，有一個微妙之處 。

有一些元素似乎是多余的。的 圖例 元素表示一個標題 字段集 元件，所述 字幕 元素表示一個字幕 表 元素，而 figcaption 元件表示用于字幕 圖形 元件。我不知道為什么一個元素不能為所有三個元素完成這項工作，因為其含義可能來自父元素。

HTML 的未來

當我閱讀文檔時，它不斷讓我思考 HTML 應(yīng)該如何發(fā)展的問題。瀏覽器不斷獲得越來越多的功能，以至于它們變得越來越像操作系統(tǒng)。甚至還有一個用于連接藍牙設(shè)備的實驗性API。

維基百科是 HTML 最初設(shè)計目的的完美網(wǎng)站：主要是通過超鏈接連接的靜態(tài)文檔。但是現(xiàn)在我們使用瀏覽器來交付完整的應(yīng)用程序，例如 Figma，它是一種設(shè)計工具，通過將 C++ 代碼編譯為 WebAssembly來有效地在瀏覽器中運行 C++ 代碼。

HTML 添加了一些元素和屬性，使無需 JavaScript 即可進行交互。例如， details 元素創(chuàng)建了一個可以在打開和關(guān)閉狀態(tài)之間切換的小部件。

但是隨著您的用例變得更加先進，僅僅依賴 HTML 提供的內(nèi)容很快就會變得困難。例如， Bootstrap的進度條不使用HTML 進度 元素。

我們不使用 HTML5 <progress> 元素，以確保您可以堆疊進度條、為其設(shè)置動畫并在其上放置文本標簽。

另一個例子是 表格 元素。純 HTML 表格 在顯示數(shù)據(jù)方面可能非常復(fù)雜，但沒有對交互功能（如排序、過濾和分頁）的內(nèi)置支持。

當元素變得更高級時，瀏覽器支持也會成為一個問題。該輸入 元件是最復(fù)雜的元件中的一個，因為它支持輸入類型和屬性的許多組合。理論上，您可以使用它輕松收集日期和時間，使用datetime-local 類型。但并非所有瀏覽器都支持它，即使在支持的瀏覽器中，它的工作方式也存在差異。

一些元素也很難設(shè)置樣式，例如 select 元素。因此，網(wǎng)站開發(fā)人員可能希望依賴標準功能，而不是使用庫或自己實現(xiàn)功能，但隨后他們不得不擔心它在某些瀏覽器中無法正常運行或與網(wǎng)站的其余部分在風(fēng)格上不一致。

我很想看看Web Components 是否變得更流行，并為這些問題提供一個很好的解決方案。如果他們這樣做，情況可能變得類似于編程語言，不同語言在標準庫 (HTML) 中應(yīng)包含多少功能的問題上采取不同的立場，以便社區(qū)或多或少地傾向于依賴第三方。方庫（Web 組件）。

Web Components 似乎正在獲得一些動力。 GitHub已經(jīng)開始使用它們，并將它們的組件發(fā)布到 WebComponents.org。

結(jié)論

經(jīng)過幾年的 Web 開發(fā)，很容易對 HTML 充滿信心。然而，我發(fā)現(xiàn)回去以更嚴格的方式學(xué)習(xí)它有很多價值。我了解了我可以對我工作的網(wǎng)站進行的許多改進，并且我對 HTML 及其開發(fā)方式有了更好的大局觀。雖然我仍然認為邊做邊學(xué)非常有效，但這次經(jīng)歷讓我想回去用自下而上的方法重新學(xué)習(xí)其他東西。