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)