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

放慢腳步

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

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

別追逐瀑布

我說(shuō)這是忽略，是因?yàn)槲蚁嘈旁谖覀冋J(rèn)為自己了解的前端語(yǔ)言知識(shí)和我們實(shí)際應(yīng)該了解的知識(shí)之間存在著巨大的差距。

HTML

檢查網(wǎng)站並評(píng)估其前端質(zhì)量是我的工作和愛(ài)好的一部分。我查看過(guò)許多網(wǎng)站的底層代碼，我只能證實(shí)網(wǎng)絡(luò)無(wú)障礙專(zhuān)家每天都在宣揚(yáng)的內(nèi)容：大多數(shù)HTML文檔都處?kù)对愀獾臓顟B(tài)。如果你不相信我，看看這些數(shù)據(jù)：

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

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

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

你可以通過(guò)在download屬性中定義一個(gè)值來(lái)更改可下載文件的名稱(chēng)。

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

你可以使用value屬性來(lái)更改有序列表中的編號(hào)。

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

CSS

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

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

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

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

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

 /* 僅當(dāng)用戶(hù)不偏好減少運(yùn)動(dòng)時(shí)才動(dòng)畫(huà)滾動(dòng)*/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

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

JavaScript

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

你可以使用nomodule屬性來(lái)僅在不支持JavaScript模塊的瀏覽器中運(yùn)行JavaScript代碼。

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

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

結(jié)論

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

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

以上是緩慢運(yùn)動(dòng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！