學(xué)習(xí)前端 HTML 和 CSS

HTML —— 超文本標(biāo)記語言，通常被稱為 HTML, 是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。 網(wǎng)頁瀏覽器可以讀取HTML文件并將其渲染成可視化網(wǎng)頁。HTML 描述了網(wǎng)頁的結(jié)構(gòu)語義，隨著線索的呈現(xiàn)，使之成為標(biāo)記語言而不是編程語言。

— 維基百科

CSS —— 層疊樣式表 (CSS) 是一個層疊樣式表語言，用來描述用標(biāo)記語言來寫的外觀和格式。盡管經(jīng)常都是用 HTML 和 XHTML 來改變網(wǎng)頁和用戶界面的樣式，該語言可以應(yīng)用于任何類型的 XML 文檔，包括原生的 XML 、 SVG 和 XUL。 除了 HTML 和 JavaScript，CSS 是大多數(shù)網(wǎng)站的基礎(chǔ)的技術(shù)，用來創(chuàng)建炫酷的網(wǎng)站，web 應(yīng)用程序的用戶界面和很多移動應(yīng)用的用戶界面。

— 維基百科

就像建造房子一樣，可以認(rèn)為 HTML 用來搭建框架， CSS 用來繪畫和裝飾。

綜合學(xué)習(xí)：

• CSS 里的絕對居中 [閱讀]
• codecademy.com HTML 和 CSS [交互]
• CSS 定位 [視頻][收費]
• 前端 web 開發(fā)：開始使用 [視頻][收費]
• 前端Web開發(fā) HTML5，CSS 和 JavaScript 快速入門 [視頻][收費]
• HTML 和 CSS：設(shè)計和構(gòu)建網(wǎng)站 [閱讀][收費]
• HTML 文檔流 [視頻][收費]
• HTML 精通: 語義、規(guī)范和樣式 [閱讀][收費]
• 互聯(lián)網(wǎng)很難 [閱讀]
• HTML/CSS 簡介：制作網(wǎng)站 [視頻]
• 學(xué)習(xí)編寫 HTML 和 CSS [閱讀]
• 學(xué)習(xí) CSS 布局 [閱讀]
• MarkSheet [閱讀]
• 語義 HTML：如何設(shè)計網(wǎng)頁 [視頻]
• 結(jié)實的 HTML 表單結(jié)構(gòu) [視頻]
• 了解 CSS 盒模型 [視頻]
• 彈性網(wǎng)頁布局 [閱讀]

掌握 CSS：

• Flexbox 完整指南 [閱讀]
• CSS 烹飪 [交互]
• 從 CSS4 到 CSS1 的 CSS 選擇器 [閱讀]
• CSS 揭秘：更好的解決常見的網(wǎng)頁布局問題 [閱讀][收費]
• CSS3 [閱讀]
• 深入 CSS3 [視頻][收費]
• 什么是 Flexbox？！ 簡單免費的20個視頻教程幫助你掌握 CSS Flexbox [視頻]

參考文獻(xiàn)/說明:

• CSS 觸發(fā)器... 布局、樣式和混合使用的游戲, and Composite
• cssreference.io
• cssvalues.com
• Chrome 瀏覽器的默認(rèn) CSS
• Head - 可以在你的文檔的 header 中的所有內(nèi)容的列表
• HTML 屬性參考
• MDN CSS 參考
• MDN HTML 元素參考

詞匯表:

• CSS 詞匯表 —— CSS 覆蓋樣式、屬性和選擇器的編程參考
• HTML 元素的 HTML 詞匯表編程參考

標(biāo)準(zhǔn)/規(guī)范:

• 所有的 W3C CSS 規(guī)范
• 所有的 W3C HTML 規(guī)范
• CSS 2 級修訂 2 （CSS 2.2）規(guī)范
• CSS 索引 —— 由 CSS 規(guī)范定義的屬于列表
• 來自現(xiàn)存標(biāo)準(zhǔn)的 HTML 元素
• 全局屬性
• HTML 語法 from the Living Standard
• 來自 W3C 的 HTML 5.2
• 3 級選擇器

CSS 架構(gòu)設(shè)計：

• 元素設(shè)計 [閱讀]
• BEM
• ITCSS
• OOCSS [閱讀]
• SMACSS [閱讀][收費]
• 適用于CSS的可擴展模塊化體系結(jié)構(gòu)（ SMACSS ） [視頻][收費]
• SUIT CSS
• rscss

設(shè)計/編寫規(guī)范：

• CSS 編碼指南 [閱讀]
• css-architecture
• cssguidelin.es [閱讀]
• Idiomatic CSS [閱讀]
• MaintainableCSS [閱讀]
• 開發(fā)有彈性的、耐用的和可持續(xù)的HTML 和 CSS 標(biāo)準(zhǔn) [閱讀]

HTML/CSS 簡報：

• CSS 周報
• 聚焦前端