HTML & CSS · 前端開發者手冊

## HTML & CSS >**HTML** - 超文本標記語言, 通常被稱為 HTML, 是被用于創建網頁的標準標記語言. Web瀏覽器能將 HTML 文件渲染成可見的或者可聽到的. HTML 隨著線索提示, 語義化地描述了網站的結構, 使它成為一種標記語言, 而不是編程語言. - wikipedia.org >**CSS** - 層疊式樣式表(CSS)是用于描述外觀和格式化標記語言編寫的文檔的樣式表語言. 盡管經常被用來改變用 HTML 和 XHTML 編寫的網頁和用戶界面的樣式, 但也可用于任何 XML 文檔, 包括純 XML, SVG 和 XUL. 跟 JavaScript 和 HTML 一樣, CSS是被大多數網站用于為Web應用程序創建富有吸引力的網頁, 用戶界面的一種基礎技術, 也為許多移動應用程序創建用戶界面. - wikipedia.org 就像建造房子, 你可以認為 HTML 是骨架, 而 CSS 是油漆和裝飾. **綜合學習:** <ul> <li><a href="https://www.codecademy.com/tracks/web" target="_blank">codecademy.com HTML & CSS</a> [interact]</li> <li><a href="https://www.khanacademy.org/computing/computer-programming/html-css" target="_blank">Intro to HTML/CSS: Making webpages</a> [watch]</li> <li><a href="http://learn.shayhowe.com/html-css/" target="_blank">Learn to Code HTML & CSS</a> [read]</li> <li><a href="http://learnlayout.com/" target="_blank">Learn CSS Layout</a> [read]</li> <li><a href="http://www.pluralsight.com/courses/front-end-web-development-get-started" target="_blank">Front End Web Development: Get Started</a> [watch][$]</li> <li><a href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1118008189&linkCode=as2&tag=fronenddevejo-20&linkId=V4CUOSZZARJURWZD" target="_blank">HTML and CSS: Design and Build Websites</a> [read][$]</li> <li><a href="http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css" target="_blank">Front-End Web Development Quick Start With HTML5, CSS, and JavaScript</a> [watch][$]</li> <li><a href="http://www.amazon.com/gp/product/1590597656/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590597656&linkCode=as2&tag=fronenddevejo-20&linkId=VFZVICLZO6GUZQI2" target="_blank">HTML Mastery: Semantics, Standards, and Styling</a> [read][$]</li> <li><a href="http://www.pluralsight.com/courses/css-positioning-1834" target="_blank">CSS Positioning</a> [watch][$]</li> <li><a href="http://www.pluralsight.com/courses/html-document-flow-1837" target="_blank">HTML Document Flow</a> [watch][$]</li> <li><a href="https://frontendmasters.com/courses/introduction-html5-css3/" target="_blank">Introduction to HTML5 and CSS3</a> [watch][$]</li> <li><a href="http://codepen.io/shshaw/full/gEiDt" target="_blank">Absolute Centering in CSS</a> [read]</li> <li><a href="https://webdesign.tutsplus.com/courses/understanding-the-css-box-model" target="_blank">Understanding the CSS Box Model</a> [watch]</li> <li><a href="https://webdesign.tutsplus.com/courses/solid-html-form-structure" target="_blank">Solid HTML Form Structure</a> [watch]</li> <li><a href="https://webdesign.tutsplus.com/courses/semantic-html-how-to-structure-web-pages" target="_blank">Semantic HTML: How to Structure Web Pages</a> [watch]</li> </ul> **精通:** <ul> <li><a href="http://css4-selectors.com/selectors/" target="_blank">CSS Selectors from CSS4 till CSS1</a> [read]</li> <li><a href="http://flukeout.github.io/" target="_blank">CSS Diner</a> [interact]</li> <li><a href="https://frontendmasters.com/courses/css3-in-depth/" target="_blank">CSS3 In-Depth</a> [watch][$]</li> <li><a href="http://www.atozcss.com/" target="_blank">atozcss.com/</a> [watch]</li> <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a> [read]</li> </ul> **參考/文檔:** <ul> <li><a href="http://htmlelement.info/" target="_blank">htmlelement.info</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" target="_blank">MDN CSS reference</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">MDN HTML element reference</a></li> <li><a href="http://cssvalues.com/" target="_blank">cssvalues.com/</a></li> <li><a href="http://csstriggers.com/" target="_blank">CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes" target="_blank">HTML attribute reference</a></li> </ul> **術語表:** <ul> <li><a href="https://www.codecademy.com/articles/glossary-html" target="_blank">HTML Glossary Programming reference for HTML elements</a></li> <li><a href="https://www.codecademy.com/articles/glossary-css" target="_blank">CSS Glossary - Programming reference for CSS covering Comments, Properties, and Selectors</a></li> </ul> **標準和規范:** <ul> <li><a href="http://www.w3.org/TR/html5/" target="_blank">HTML5 from W3C</a> : 5th major revision of the core language of the World Wide Web</li> <li><a href="https://html.spec.whatwg.org/multipage/semantics.html#semantics" target="_blank">The elements of HTML from the Living Standard</a></li> <li><a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax" target="_blank">The HTML Syntax</a> from the Living Standard</li> <li><a href="http://www.w3.org/standards/techs/html#w3c_all" target="_blank">All W3C HTML Spec</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" target="_blank">Global attributes</a></li> <li><a href="https://drafts.csswg.org/css2/" target="_blank">Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</a></li> <li><a href="http://www.w3.org/TR/css3-selectors/" target="_blank">Selectors Level 3</a></li> <li><a href="http://www.w3.org/Style/CSS/current-work#roadmap" target="_blank">All W3C CSS Specifications</a></li> </ul> **CSS 架構設計:** <ul> <li><a href="http://oocss.org/" target="_blank">oocss</a> [read]</li> <li><a href="https://smacss.com/" target="_blank">SMACSS</a> [read][$]</li> <li><a href="https://frontendmasters.com/courses/smacss/" target="_blank">SMACSS</a> [watch][$]</li> <li><a href="http://atomicdesign.bradfrost.com/" target="_blank">Atomic Design</a> [read]</li> </ul> **編寫規范:** <ul> <li><a href="https://github.com/necolas/idiomatic-css" target="_blank">idiomatic-css</a> [read]</li> <li><a href="http://mdo.github.io/code-guide/" target="_blank">Standards for developing flexible, durable, and sustainable HTML and CSS</a> [read]</li> <li><a href="http://cssguidelin.es/" target="_blank">cssguidelin.es</a> [read]</li> <li><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#General_Formatting" target="_blank">Google HTML/CSS Style Guide</a></li> </ul> **HTML/CSS 簡報:** <ul> <li><a href="http://html5weekly.com/" target="_blank">HTML 5 Weekly</a></li> <li><a href="http://css-weekly.com/archives/" target="_blank">CSS Weekly</a></li> </ul> **譯者補充:** * [CSS 3 教程](https://waylau.gitbooks.io/css3-tutorial/content/docs/Introduction.html)