曾經(jīng)，我被網(wǎng)絡(luò)技術(shù)的飛速發(fā)展搞得暈頭轉(zhuǎn)向。似乎每天都有新的插件、框架、技術(shù)或語言特性發(fā)布。我堅信，為了生存，為了在自由職業(yè)者中競爭，我必須學(xué)習(xí)所有其他人擅長的東西：Webpack、React、Angular、SVGs、Houdini、CSS Grid布局、ES6，等等。活躍在Twitter上和參加各種會議并沒有幫助我解決這個問題，因為我不斷地接觸到所有新事物。

放慢腳步

在某個時刻，我放棄了。我決定自己無法跟上節(jié)奏。從職業(yè)角度來看，這并沒有改變我的任何現(xiàn)狀，因為實際上，沒有人期望我無所不知，而我之前的這種感覺僅僅存在于我的個人認知中。放慢速度是一個明智的決定，因為它不僅減輕了我的精神壓力，也幫助我專注于自己真正想學(xué)習(xí)的東西。我仍然閱讀新聞通訊、博客和Twitter，仍然會偶爾花些時間嘗試新事物，但我不會給自己施加壓力。我努力保持最新狀態(tài)，但我并不覺得有必要掌握所有知識。

過去幾年里，我一直就是這樣處理網(wǎng)絡(luò)技術(shù)發(fā)展的，但最近，尤其是在今年，我學(xué)習(xí)到了一些新的東西。它不是一個框架或語言——而是一種洞察力，即在我們對創(chuàng)新和進步的渴望中，我們忽略了利用HTML、CSS和JavaScript今天提供的眾多功能。換句話說：如果我們回顧過去而不是展望未來，我們可以學(xué)習(xí)到很多東西。

別追逐瀑布

我說這是忽略，是因為我相信在我們認為自己了解的前端語言知識和我們實際應(yīng)該了解的知識之間存在著巨大的差距。

HTML

檢查網(wǎng)站并評估其前端質(zhì)量是我的工作和愛好的一部分。我查看過許多網(wǎng)站的底層代碼，我只能證實網(wǎng)絡(luò)無障礙專家每天都在宣揚的內(nèi)容：大多數(shù)HTML文檔都處于糟糕的狀態(tài)。如果你不相信我，看看這些數(shù)據(jù)：

• 前1,000,000個主頁中，有98.1%都存在可檢測到的WCAG 2錯誤。
• 數(shù)千個網(wǎng)站包含<h7></h7>和<h8></h8>元素。
• 在標題和元數(shù)據(jù)之后，div是最流行的元素。
• 平均而言，我們只使用了110多個可用元素中的大約30個。

了解HTML語法和知道如何正確使用它之間存在著巨大的差異。在編寫結(jié)構(gòu)良好、語義化的HTML文檔方面，我們都可以進行一些復(fù)習(xí)。2020年，我花了很多時間學(xué)習(xí)HTML，我希望我構(gòu)建的網(wǎng)站用戶能夠從我的見解中受益。

我在2020年學(xué)習(xí)到的關(guān)于HTML的兩件我最喜歡的事情：

你可以通過在download屬性中定義一個值來更改可下載文件的名稱。

<a download="report.pdf" href="http://miracleart.cn/link/4bf2689c42aae35e6924a432e435e0b1">Download (2MB)</a>

你可以使用value屬性來更改有序列表中的編號。

<ol>
<li value="3">C</li>
  <li value="2">B</li>
  <li value="1">A</li>
</ol>

CSS

幾乎每次我在MDN或CSS-Tricks上查找CSS屬性時，我都會發(fā)現(xiàn)一些新的東西。自己試試看。搜索margin、list-style-type或color。我相信你會學(xué)到一些東西。

我在2020年學(xué)習(xí)到的關(guān)于CSS的內(nèi)容列表很長，以下是我最喜歡的兩點。

你可以使用url()函數(shù)作為content屬性的值（的一部分）。

div::before {
  content: url('marker-icon.png');
}

你可以在CSS中實現(xiàn)原生平滑滾動。

/* 僅當用戶不偏好減少運動時才動畫滾動 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* 在目標和視口頂部之間添加一些間距 */
  :target {
    scroll-margin-top: 0.8em;
  }
}

JavaScript

我經(jīng)常編寫JavaScript，但它不是我的核心優(yōu)勢，所以我一直在學(xué)習(xí)關(guān)于它的新知識。以下是今年我最喜歡的兩點：

你可以使用nomodule屬性來僅在不支持JavaScript模塊的瀏覽器中運行JavaScript代碼。

// nomodule.js
  console.log('This browser doesn’t support JS Modules.');

// module.js
  console.log('This browser supports JS Modules.');

結(jié)論

HTML是每個網(wǎng)站的支柱；知道如何編寫語義化的文檔應(yīng)該是每個Web開發(fā)人員的首要任務(wù)。CSS在某種程度上非常復(fù)雜，為了學(xué)習(xí)新的概念，我們必須理解它們與舊技術(shù)的比較，以及它們解決的問題。JavaScript框架和庫層出不窮，但它們都有一個共同點，那就是它們是用原生JavaScript編寫的。

在2020年，我重新學(xué)習(xí)了我已經(jīng)忘記的東西，并發(fā)現(xiàn)了關(guān)于已建立的元素和屬性的新知識。如果你只去尋找，就會發(fā)現(xiàn)很多隱藏的知識。我將在2021年進一步擴展這個話題，因為還有很多很棒的東西值得探索。

以上是緩慢運動的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！