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

我想知道我從未全面學(xué)習(xí) HTML 錯(cuò)過了什么。忘記 CSS 和 JavaScript。我只是在談?wù)撛?HTML。在獲得了相當(dāng)多的經(jīng)驗(yàn)之后再回到 Web 開發(fā)的這樣一個(gè)基本方面似乎很愚蠢，但是很容易僅僅因?yàn)槟雷銐蚨嗟闹R來做一些有用的事情就對一項(xiàng)技能過度自信。

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

經(jīng)驗(yàn)

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

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

HTML5 簡介

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

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

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

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

例如，使用屏幕閱讀器的人可以使用標(biāo)題 元素（<h1>通過<h6>）跳轉(zhuǎn) ，因此使用它們并確保它們的順序正確很重要。僅使用它們來放大文本是錯(cuò)誤的，因?yàn)樗鼈兊恼嬲康氖嵌x內(nèi)容的結(jié)構(gòu)。它們就像一個(gè)目錄。

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

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

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

閱讀文檔

我有一個(gè)朋友，他可能是我認(rèn)識的唯一一個(gè)讀過整本NFL 規(guī)則手冊的人 （2020 年版本有 87 頁長）。和他一起看足球很有趣，因?yàn)樗浅Ｉ朴诶斫獗荣惖募?xì)微差別和奇怪的情況。我認(rèn)為使用 HTML 也有類似的機(jī)會(huì)。

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

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

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

觀察

當(dāng)我閱讀文檔時(shí)，有些事情對我來說特別有趣，并且我有一些觀察。

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

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

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

該賽道 元素提供一種標(biāo)準(zhǔn)的方式嵌入定時(shí)文本軌道視頻和音頻。我以前從未聽說過 WebVTT（Web 視頻文本軌道）格式。

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

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

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

有一些元素似乎是多余的。的 圖例 元素表示一個(gè)標(biāo)題 字段集 元件，所述 字幕 元素表示一個(gè)字幕 表 元素，而 figcaption 元件表示用于字幕 圖形 元件。我不知道為什么一個(gè)元素不能為所有三個(gè)元素完成這項(xiàng)工作，因?yàn)槠浜x可能來自父元素。

HTML 的未來

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

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

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

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

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

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

當(dāng)元素變得更高級時(shí)，瀏覽器支持也會(huì)成為一個(gè)問題。該輸入 元件是最復(fù)雜的元件中的一個(gè)，因?yàn)樗С州斎腩愋秃蛯傩缘脑S多組合。理論上，您可以使用它輕松收集日期和時(shí)間，使用datetime-local 類型。但并非所有瀏覽器都支持它，即使在支持的瀏覽器中，它的工作方式也存在差異。

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

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

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

結(jié)論

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