前端-書籍推薦
因為曾經在高中買來《C Primer Plus》和大學買來的《Clean Code》（挑戰自己買的英文版的結果就啃了一點）給我一種經典的書都特別厚的一本就夠讀大半年的感覺。加上剛上大學圖便宜買的有關做網站的舊書（應該是Table布局和Dreamweaver比較火的時代的書，這些書倒是很薄）讓我一度認為做網頁不就是table然後tr、td什麽的套唄，高大上點不就是div+CSS嘛有什麽大不了，給我設計好什麽網頁不都ok能做出來麽？這種感覺。然後看網絡課程，在網上找資料學習後才發現以前的自己太逗了，之後就一直靠網絡課程、MDN、博客、百科這些渠道學習，但一想到網上大牛們評價特別高的書還沒看過就總感覺少了點什麽。最近將這些書看了看，發現以前只知道要這麽做比較好的地方現在也更加明白這樣做的意義，也糾正了以前理解的一些錯誤。
我這裏我只總結一些我以前掌握不紮實的和我認為比較重要的。
JavaScript DOM編程藝術 第2版
第5五章 最佳實踐
- 平穩退化：
現在基本所有帶交互的網站都使用Ajax，SAP也火起來了，平穩退化真是很難實現了（看到第七章發現我之前的觀點是錯了） - 分離JS
- 向下兼容
- 性能考慮
第6章 案例研究：圖片庫改進版
鍵盤訪問（提高可訪問性）
onclick已經幫我們處理了，eg：下面這個綁定了onclick的按鈕鼠標左鍵點擊和tab然後回車一樣彈出"clicked"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="alert(‘clecked‘)">"click" me</button> </body> </html>DOM core和HTML-DOM
由於HTML與XML的相似性及差異，JavaScript不僅實現了標準的DOM方法和屬性（即由W3C制定的），而且還實現了HTML特有的DOM方法和屬性。
DOM Core：標準的DOM方法和屬性
HTML-DOM：HTML特有的DOM方法和屬性
第7章 動態創建標記
若元素存在只是為了讓DOM方法處理他們，那麽用DOM方法來創建他們才是最合適的選擇
==漸進增強與Ajax==
一開始以Ajax為起點設計網站很難做到平穩退化，但一開始用老式的頁面刷新機制設計網站，在此基礎上用攔截請求用Ajax技術處理就可以實現平穩退化。（漸進增強：HTML全部完成->CSS全部完成->JS全部完成->網站完成）
==這樣得後端也得做一套頁面展示（點開鏈接和平穩退化用），前端不應再頁面加載時使Ajax（應該由後端生成）==
第8章 充實文檔的內容
不應使用DOM技術將重要內容添加到網頁上
現在主流的MVVM框架全是使用JS生成DOM。。
accesskey：快捷鍵
很多大網站都沒見用，FF裏要Alt+Shift+c才能使用下面設置的快捷鍵
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>第11章 HTML5
Modernizr：HTML5/CSS3 特性檢測庫
HTML5與CSS3基礎教程（第8版）
第1章 網頁的構造塊
文件名和文件夾名
文件名全部使用小寫字母，用短橫線分隔單詞，用 .html 作為擴展名。混合使用大小寫字
母會增加訪問者輸入正確地址以及找到頁面的難度
文件夾的名稱也應全部用小寫字母。關鍵是保持一致。如果使用小寫字母，訪問者和創建者就
不必在大寫字母和小寫字母之間轉換浪費時間了
語意
- ==提升可訪問性和互操作性==（內容對於借
助輔助技術的殘障訪問者是可訪問的，
同時對於臺式機、手機、平板電腦及
其他設備上的瀏覽器都是可訪問的）。 - 提升搜索引擎優化（SEO）的效果。
- 使維護代碼和添加樣式變得容易。
- （通常）使代碼更少，頁面加載更快。
萬維網的發明者 Tim BernersLee 曾說過一句著名的話：“萬維網的力量在於其普適性。讓包括殘障人士在內的每個人都能訪問萬維網，是極為重要的一點。”
small
small元素表示的含義是法律聲明等條文細則。默認情況下，它比其他的文字顯示得小一些，但是==顯示小字號並不是使用這個元素的理由==
（以前一直當small是小號字體=_=）
第3章 基本HTML結構
<html lang="language-code">
曾經使用Bootstrap4的時候沒找到中文翻譯，準備自己翻譯一下翻譯了兩頁有點感覺有點多，就往下翻了翻看看到底有多少工作量，然後看見有Translations，點進去一看發現大家基本都知道但很容易忘的一項翻譯的人給強調出來了：
HTML5標準的 doctype 頭部定義是首要的，否則會導致樣式失真（中國碼農往往直接抄國外站點將lang寫成en的小細節也要註意以免貽笑大方)。
註：以前搜過lang相關的裏面的規則很復雜的（網頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"？ - 知乎），但一般國內的頁面現在一般還都是zh-CN。
Emmet設置默認生成的lang為zh-CN：
下面代碼添加到Emmet的Settings-User
{
"snippets": {
"variables": {
"lang": "zh-CN"
}
}
}h1 ～ h6
- 不要使用 h1 ～ h6 標記副標題、標語以及無法成為獨立標題的子標題。
- 創建分級標題時，要避免跳過某些級別，如從 h3 直接跳到 h5。不過，允許從低級別跳到高級別的標題。
- 要依據內容所處的層次關系選擇標題級數，而不是根據你希望文字應該顯示的大小。
main
main元素是 HTML5 新添加的元素。記住，在一個頁面裏僅使用一次。
SEO
在 HTML 中，應該將附註欄(aside)內容放在 main 的內容之後。出於 SEO和可訪問性的目的，最好將重要的內容放在前面。可以通過 CSS 改變它們在瀏覽器中的顯示順序。
使用 ARIA 改善可訪問性
WAI-ARIA（Web Accessibility Initiative’s Accessible Rich Internet Applications，無障礙
網頁倡議 – 無障礙的富互聯網應用，也簡稱ARIA）是一種技術規範，自稱“有橋梁作用的技術” 。
- 使用地標角色
role="xxx" - 給元素添加title
title="xxx"
第8章 操作樣式表
@import
@import 指令會影響頁面的下載速度和呈現速度，在 Internet Explorer 中影響更為明顯。
@media
@media 規則只有screen 和 print（或許還應加上 all）瀏覽器支持的很好。
第9章 定義選擇器
偽元素
- :first-letter：選擇元素的第一個字母
- :first-line：選擇元素的第一行
:first-line的語法為::first-line。:first-letter的語法為::firstletter。註意，它們用兩個冒號代替了單個冒號。這樣修改的目的是將偽元素（有四個，包括::first-line、::first-letter、::before和::after）與偽類（如:first-child、:link、:hover等）區分開。
未來，::first-line和::first-letter這樣的雙冒號語法是推薦的方式，現代瀏覽器也支持它們。原始的單冒號語法則被廢棄了，但瀏覽器出於向後兼容的目的，仍然支持它們。不過，IE9之前的InternetExplorer版本均不支持雙冒號。因此，你可以選擇繼續使用單冒號語法，除非你為IE8及以下版本設置了單獨的CSS。
第12章 構建響應式網站
- 創建內容和 HTML
- 移動優先方法
- 逐步完善布局
視覺區域（viewport）
<meta name="viewport" content="width=device-width, initial-scale=1" />
- 視覺區域的寬度會被設成與設備寬度
- 頁面的默認縮放級別設成了 100%（換成縱向模式也一樣）
兼容舊版 IE
使用Respond.js
第13章 使用Web 字體
@font-face
第17章 視頻、音頻和其他多媒體
HTML5 並沒有提供任何保護媒體內容的方法。因此，如果你很在意對媒體文件的保護，那麽暫時不要使用 HTML5 原生多媒體。
附錄
HTML Reference
CSS Reference
圖解CSS3核心技術與案例實戰
單頁Web應用 JavaScript從前端到後端
Web性能權威指南
圖解TCP/IP(第5版)
JavaScript設計模式
前端-書籍推薦