什么是html？
html是一种网页标记语言，叫超文本标记语言，我们平时上网所看到的所有网页均来自于html，英文全称Hyper Text（超文本） Markup（标记） Language（语言）。
图片、链接、音乐、视频、程序等等现在都是通过html实现。但严格讲，它并不算编程语言而是属于标记语言（标记标签 markup tag）。所以，不论你是否是程序员，这个语言最好掌握。期初学习时可能觉得html很简单，一度以为当个程序员太简单，后面会接触到html5、css3，兼容性，可能这还不是最难得，直到......javascript，WTF！！！没点基础还真会怀疑人生！总之，对于html而言，
并没有想象中的那么难，也没有想象中那么简单。
了解html的历史
- html1.0 - 2.0（1991-1995）：到底有没有1.0我也没搞清楚，网上找的资料也都存在争议，因为当时版本很多，无法确定谁的是初版。《Head First HTM》这本书里也是1.0-2.0的说法，但至少可以肯定的是虽然简陋，但确实已经支持超文本了。
- html3.2（1997.1）：那时候W3C的标准组织还未正式成立，很多标准制定都是在浏览器开发者相互讨论的环境下产生的，直到应用广泛的4.01也是没改善。3.0期初设计主要用来兼容2.0的，且过于复杂如表格，文字绕排和复杂数学元素的显示，浏览器厂商也根本不鸟，最后挂了！3.1也根本没有人提起，后来3.2去掉了很多3.0的特性才被认同。但那时大都是先有实现后才有标准。所以，html的标准就很不规范，加之浏览器之间的竞争，会产生只有自家浏览器支持的特性，也正因如此，那时候的浏览器对html页面中的错误都很宽容，这反而加重了页面的不标准性，很多web从业者写了更多的不标准页面。传说，时至今日互联网上仍有90%多的页面不符合标准。而在那个年代这种事很普遍就像今天h5页面普及一样，大家都这么干，当时，最大的两家浏览器厂家是Netpcape和Microsoft，那时候不像现在上网入口这么多，谁能统治浏览器，谁就能统治宇宙！浏览器为了保持领先，不停地增加自己的专用扩展包。战争的受害者永远都是百姓，这害得很多web开发者甚至要写两个单独的页面来做兼容，有的兼容差的，搞得浏览器还得想想怎么去显示。开发人员会经常会对着浏览器大骂：“他妈的支持个标准真有这么难吗?!”
- html4.0（1997.12）：战争总有结束的时候，这个救世主就是W3C万维网协会（world Wide Web Consortium）！他们看不下去了，认为这是互联网最基础的问题，应该得以解决，若这样战下去，是没有希望的，没有标准何来统一？于是，他们想制定出一个“标准”，将html分割成两种语言，一个负责表现，一个负责结构，这样岂不是更好？于是最初的html+css分离的html4.0标准诞生了，要求浏览器厂商也遵从这些标准，这确实解决了很多问题，但仍然有不完美，这就是后话了，起码世界安静了，能让开发人员睡个好觉了。
- html4.01（1999.12）：4.01闪亮登场，这个版本成了未来10年的经典款。相对于4.0只是做了稍许改变，做了些修补。正当大家各自安好便是晴天的时候，xhtml1.0来了。
-
xhtml1.0（2001）：这个期间诞生了一个新事物，xml，可扩展标记语言，它被设计用来传输和存储数据。语法严谨，对比html简直就是别人家的孩子，于是他们在了解接触中杂交出了xhtml1.0。xhtml承诺，因为它严格，又是90后，新方法多。只要遵从它的标准，天下即可统一。可问题是，80后和70后们，根本看不惯90后的做法，因为他们对4.01已经非常钟情，只需要完善4.01即可，根本不想要也不想懂xhtml的新方法。因为4.01比较灵活，而xhtml语法确实太过严谨。
比如：
- 标签必须都小写
- 非空标签必须成对出现
- 标签顺序必须正确
- 所有属性必须使用双引号
- 不允许属性最简化或省略
等等，这是违反鲁棒性原则（对自己输出要严格， 对他人的输入要灵活）的，因为xhtml并没有增加新的tag，它只是要求按照XML的规范来要求HTML，并定义了一个新的MIME type，application/xhtml+xml。W3C的初衷是想让浏览器强行检查错误，如果页面有HTML错误，浏览器就要显示错误信息。而实际情况是大家已经用4.01的标准做了大量不符合要求的网页了，你这么一搞，那就是啪啪打脸啊，自然不被大家认可，这也不符合浏览器向后兼容的原则。后来，W3C不得已，就在xhtml 1.0的标准之后加了一个附录C，允许开发者自己选择是使用XHTML语法或是旧的MIME type，来分发页面。因为旧的MIME type不会触发浏览器的强错误检查。也就是说，很多网站虽然宣称自己符合xhtml1.0标准，但并不能保证完全无错。主要要看web服务器使用的是那种mime type来分发的。但是，W3C仍不死心啊！又在XHTML 1.1中取消了附录C，还是让大家全部使用新的MIME type来分发，并要求大家把文档标记成xml。结果很显然，然并卵！W3C锲而不舍啊，在后来流产的XHTML 2.0身上，还是非要强行错误检查，强行检查错误就是如果你页面有错误，网页显示就是黄屏，哪怕只有一个小错误，你丫别想看这个网页了！这要是不失败难道还等着程序员给它送上神坛么？而且这个情况正好解释了乱战期间的先实现后标准的现象存在的合理性。因为，先有标准再来实现是行不通的。
- html5（2014.10）：上面的教训也为后来制定下一代标准，即html5的时候交了学费。所以，在html5诞生初期，带着鲁棒性原则的思想主线，向后兼容就成了h5最重要的原则。h5不但兼容4.01的大部分特性，还引入了许多新特性，甚至可以直接将旧网页的第一行改成<!doctype html>，让它变成一个HTML5页面，照样都会生成相同的DOM树，在浏览器里也会正常解析。老的已经运行了十几年，开发者确实已经需要更多特性来满足日益发展的需求了。h5正好满足了这个需求，不但支持博客、视频、图形功能，还有一大堆用来构建web应用的功能，所以，h5的成功就不难理解了。现在h5已经不单只一个技术或标准了，它已成为了一个技术合集的简称，在移动端的表现更像是一批黑马。但是，要注意的是，HTML5并不是直接由W3C制定的，w3c好像经历太多后累觉不爱了，觉得4.01可以作为最后一个版本了，html就这样吧。但总有一些另外的声音，Opera的伊恩-克森这时就提出来再改进下html的建议，但W3C的投票结果是NO，他们认为HTML已死，xHTML2才是未来，真是打不死的小强，死心不改啊！于是，Opera，Apple等浏览器厂商脱离W3C成立了WHATWG。接下来WHATWG的工作效率非常高，因为他们的工作组成员就是浏览器厂商，他们不仅可以说加就加，还可以实现，大家不断地提出一些好点子并且逐一做到了浏览器中，并且在短时间得出了一些成果。反观W3C的xHTML2没有什么实质性的进展，特别是从实现的角度来看，用原地踏步形容都不足为过。2006年蒂姆-伯纳斯-李（这个人也是牛的一逼，最好google下）写博文承认因为想法太不切实际了，导致失败，并建议重建HTML工作组。于是，2007年W3C组建了HTML5工作组并投票通过在WHATWG工作组的既有成果上开始工作而非从头开始。于是有了两个工作组并行的现象：一个专治，一个民主。但这都不重要了，重要的是只要他们的设计原则是统一的，对吗！
html结构
html的结构包括头部head，内容body，头部中可包含页面的标题title、关键词keywords、描述说明description等，它本身不会显示，主要是给浏览器看的，但非常之重要，可以影响网页显示的效果。<body></body>里面就是网页要显示的主要内容了，里面有很多闭合标签构成。
html、css、js的作用？
一个网站由N多个网页组成，一个网页则有html、css和js构成。
- html是主体，装载显示各种dom元素，属于结构框架层。
- html可以比做一个骨骼架构的人体。
- css用来装饰dom元素，属于显示表现层。
- css可以比做人体穿的衣服和妆容。
- javascript用来控制dom元素，属于动作交互层。
- javascript可以比做人体的可以控制动作的思想。
网站裸奔：如果没有衣服（css）的装饰，人只有躯干身体（html），那就是人（网站）在裸奔，之前我记得美帝好像还搞过一个网站裸奔活动，很多网站哪天全都下架了css，全都裸奔，想想也很壮观。
如果人（网站）没有可以控制其动作（抬胳膊，转向，走路，吃饭，说话）的思想（js），这人（网站）也可以称之为人，但更像一个植物人。当然，借助css3的新技术，可以把植物人打扮的更漂亮，甚至可以协助他做一些简单的动作，但没有js，他依然是无交互反馈的。
有了html5后，增加了更多新的骨头，去掉了以前老化无用的骨头，但作为人更重要的依然是思想，没有思想和闲鱼有何区别？而jQuery等框架的作用则更像是把控制人体的动作编排成一套招式，比如吃饭这个动作编排进了：拿起勺子→挖食物→把勺子送嘴边→张嘴→送食物进嘴→咀嚼。
html和html5区别
没有JavaScript的网页会由图2变为图1，只是好看了，但还是黑板，交互性依然不行。
HTML、XML、XHTML区别
- HTML：超文本标记语言。语法松散，不严格。可以理解为通过一系列标签集合组合成一个文本文件，用于网页浏览。
- XML：可扩展标记语言。用于存储数据和结构。XML来源于SGML，最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。注意，XML是用于传输数据，而非显示数据。其标签没有被预定义，需要根据自己需求自行定义标签。
- XHTML：可扩展超文本标记语言。基于XML，作用与HTML类似，但语法更严格。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在HTML4.01的基础上，用XML的规则对其进行扩展，得到了XHTML。其目的就是实现HTML向XML的过渡。
什么是html语义化？
所谓html语义化实际上是除了让人容易通过标签的意思理解外，也要易于搜索引擎和浏览器爬虫理解。简单讲就是在合适的时间合适的地方使用合适的有语义信息的标签，例header,nav,aside,footer,section,ul,ol,em,strong等代替那些没有语义div,span信息的标签和big,center,strike,font,b,u等完全可以用css来取代的标签。同时，语义化也有助于seo和团队的开发维护，它的目的是让机器更接近人的思想，都能看懂，提高处理效率。比如我们经常犯的错误就是在一个div里面对某一个词要加重强调的时候，会使用span包起来，然后控制span的css为font-weight为bold。这种显然不是语义化，因为有加重强调的标签strong。
结构表现行为分离原则
html（内容结构层）、css（样式表现层）、js（行为控制层）。html结构层作为网页的重要基础，其标签赋予内容的含义，主要包含内容（注意：这里的内容是指纯粹的数据信息本身，并不包含辅助信息，如装饰性的图片图标等）。css表现层则是定义您的html该如何显示。js行为层则是为页面增加一些交互动作。实际上，html4.0诞生的时候就是希望将css和html的分离开，css负责表现，而不是通过一些html的样式标签来实现，这样做好处在于一方面有利于搜索优化，另一方面方便修改维护和改版重构。在实现分离时候保持两个原则即可：
- html只管结构，不要太复杂，写html时不要管css和js的事儿，只管语义化，简洁化，不要涉及表现的标签、不要把样式写在行内。
- css表现层和js行为层分别用独自的.css和.js文件来写。写js行为控制样式的时候尽量不要去直接控制css样式，而是通过在结构层html上添加class和id，在css中定义class来是实现。
编码规范的黄金定律：
永远遵循同一套编码规范 -不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
HTML规范：
- <!doctype....>申明可写可不写；
-
<html>必须是root根元素； -
<head>和<body>是<html>中一定有且只有的元素； -
<head>必须有<title>标签，<meta>和<style>可选，只能在<head>里； -
block块级元素不能放在inline行级元素里； - 元素标签和属性不区分大小写（不敏感）；
- 非空元素标签不必成对出现；
- 属性不需要用
"号包围； - 一些属性可以默认为空（如checked和disabled）；
- 自闭和标签（img、br、link、input）以空格和反斜杠/结束；
- 特殊字符或实体（
&、<>），可不进行转义； - 元素标签嵌套无严格规定。
- 样式可写在行内。
XHTML规范：
- <!doctype....>申明必须要有；
- 对大小写敏感，元素标签和属性必须是小写的；
- 非空元素标签必须成对出现，有开始标签就必须有结束标签；
- 属性值必须用
"引号包围； - 元素属性不支持默认空值， 如checked属性必须写
checked="checked"或checked="true"，不能直接写checked=""或checked； - name属性不赞成使用；
- 自闭和空元素结束必须写空格和反斜杠/；（
<br />、<hr />、<input />） - 特殊字符如
&、<>必须用字符实体进行转义；（如&必须写成&而<必须写成<），html常见字符编码 - 元素标签要正确的嵌套；如
<b><i>这是错误的嵌套</b></i>和<b><i>这是正确的嵌套</i></b>。类似规则还有：<a>元素中不能包含其他的<a>元素；<pre>元素中不能包含<object>、<big>、<img>、<small>、<sub>或<sup>元素；<button>元素中不能包含<input>、<textarea>、<label>、<select>、<button>、<form>、<iframe>、<fieldset>或<isindex>元素；<label>元素中不能包含其他的<label>元素；<form>元素中不能包含其他的<form>元素等。 - 推荐使用注释，但不要在注释内容中使"--"，也就是说，"--"只能发生在XHTML注释的开头和结束，在内容中它们不再有效。如错误例子：
，可用等号或者空格替换内部的虚线。如正确例子： - 推荐使用级联样式表控制外观，实现页面结构和表现相分离，相应地会有部分外观属性不推荐使用，例如align属性等；
- 推荐使用外部链接来调用脚本。
<script type="text/javascript" src="js/menu.js"></script>，同时在html中使用在注释中插入脚本的行文会被删除； - 图片必须有说明文字，每个图片标签都必须有ALT说明文字。
HTML5规范
原则：
web标准的核心思想是结构（html）、表现（css）、行为（javascript）相互分离，互不干涉。并非某一个标准，而是一系列标准的集合。按照结构表现行为分离原则，编写网页时应先考虑结构，也就是在写html的时候，先不要管css样式的事儿，先把重点放在html的结构和语义化上，让html能够体现页面的结构或内容。之后在结构的基础上再去添加样式，最后在加上js交互行为。同时，在写javacript的时候尽量不要用js去直接操作样式，而是通过给html元素添加或删除class来控制样式变化。
- 规范。保证所写代码规范规整，近html5，远xhtml，保证结构表现行为分离，避免在html内使用样式属性和行为属性。
- 简洁。大道至简，保证代码的最简化，即便浏览器默认是忽略回车符的，也要避免多余的空格和空行出现。在任何时候都要牢记，能用一个元素解决的问题不要用两个，做减法而不是做加法。
- 语义。保持代码的语义化，尽量使用具有语义的元素。不要过多使用无意义的div。你的代码不光是给开发同事看的，更是给浏览器看，给搜索引擎蜘蛛看的。
- 实用。遵循标准，但是不能以牺牲实用性为代价。任何情况下都要保证使用最少的标签并保持最小的复杂度。
- 忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样。
- 字符。任何情况下只要是代码部分，必须使用英文半角而不是全角字符。
总结就是：实用为王的原则。遵循 HTML 标准和语义，不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
语法：
- 小写。html元素和属性名全小写。
- 闭合。所有非空元素必须闭合，不要省略可选的结束标签（closing tag）要有始有终（即便是有些可选的结束标签可以省略，也不要省，都闭合）。空的自闭合（self-closing）元素不要再尾部添加空格和反斜杠了（即便是加了也不算错误也不要加，牢记原则）。HTML5 规范中明确说明这是可选的。
- 迁移。用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
- 嵌套。所有元素必须正确嵌套。不要出现段落里面嵌套标题或标题里嵌套段落的槽糕情况。同时，嵌套元素应当缩进一次（即两个空格）。
- 引号。对于属性的定义，确保全部使用双引号，绝不要使用单引号。如：
<h1 class="hello-world">Hello, world!</h1>
注释：
- 详尽注释。解释代码解决问题、解决思路、是否为新鲜方案等。
- 模块注释。建议不使用模块结束注释，一来丑，二来浪费空间。
- 代办注释。这主要是给同事和自己看的，以防脑子不好使忘了。
文档：
- 文档类型使用html5标准文档模式（standard mode）
<!doctype html>在第一行进行声明，文档申明前不允许出现任何非空字符，确保在每个浏览器中拥有一致的展现。 - 强烈建议html元素上指定lang属性
<html lang="zh-CN">。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则等等。
扩展问题：lang到底写zh还是zh-CN，还是zh-cmn？
更多关于lang属性的知识可以从 此规范 中了解。这里列出语言代码表，可以参考。 - 指定明确的字符编码
<meta charset="UTF-8">。让浏览器轻松、快速的确定适合网页内容的渲染方式，这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致，（推荐使用国际标准UTF-8）。
<meta charset="UTF-8"> - IE兼容模式。Internet Explorer支持使用兼容性<meta>标签来指定使用什么版本的 IE来绘制渲染页面。如果不是特殊需要，通常通过edge mode来通知IE使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - 可以使用IE条件注释的方式兼容IE，但是不要添加额外的样式表。
更多信息可以阅读这篇 stack overflow 上的文章 - head部分的顺序（结束时不再需要反斜杠
/）：
第一部分：<meta>元素；（编码>内核>适配>关键词>描述>作者>蜘蛛>缓存>转码）
第二部分：<title>元素；
第三部分：<link> \ <style>样式表；
第四部分：<base>新窗口；
第五部分：<script>需要的js文件； - html5规范中引入css 和javascript文件时，不再需要指定type属性了，因为
text/css和text/javascript分别是它们的默认值。
HTML5 spec links
Using link
Using style
Using script - 文件拓展名默认使用html（推荐）或htm，便于操作系统或者程序辨认文件。
属性：
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。如果js控制时有问题，请使用 / 转义符解决。
- 省略type属性。使用style、link、script，不用指定type属性，因为 text/css 和 text/javascript 分别是他们的默认值。
- 省略Boolean属性值。布尔型属性可以在声明时不赋值，XHTML 规范要求为其赋值，但是 HTML5 规范不需要。元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。如disabled,checked,selected等。如果一定要为其赋值的话，请参考 WhatWG 规范：如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。
更多信息请参考 WhatWG section on boolean attributes - 省略url类属性资源协议头。
- 属性顺序。html属性应该按照特定的顺序出现以保证易读性。
class -> id,name -> data-* -> src,for,type,href,value -> title,alt -> aria-*,role。class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用，因此排在第二位。 - 多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。
- 不手动设置tabindex属性，让浏览器自动设置。
元素：
- 避免冗余标签。编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。
- 避免JavaScript 生成标签。通过JS生成的标签会让内容变得不易查找、编辑，并且降低性能，能避免时尽量避免。
- 段落文字应该用
<p>，避免使用<br>。 - 列表项放
<ul>、<ol>、<dl>，不要使用一系列的<div>或<p> -
<input>使用for属性绑定<label>。 - 使用
<label>标签包裹radio或checkbox和他们的文字，不用再使用for属性。 - 使用单选、复选替代下拉菜单。（
radio or checkbox instead of select menu） -
form button应制定type类型，使用type="submit"、type="reset"或type="button"。 - 首要的表单按钮首先出现(在dom中)，尤其是适用多个提交按钮的场合。视图中显示的顺序可以利用css修改。
- 有效使用
<thead>、<tfoot>、<tbody>、<th>（scope属性）。可以把<tfoot>放<tbody>前提高加载速度。（如果不写tbody，浏览器也给你自动加上） - 通过Javascript生成的元素让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
格式：
- 嵌套缩进，用两个空格来代替制表符Tab，这是唯一能保证在所有环境下获得一致展现的方法。
- 删除行尾空格。
- 块元素、列表元素、表格元素都放在新行。
- inline元素视情况换行。
- 努力保持每行长度小于80列，如果太长可换行。
编辑器配置：
- 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。
- 保存文件时，删除尾部的空白符。
- 设置文件编码为 UTF-8。
- 在文件结尾添加一个空白行。
css编码规范：
语法：
- 用两个空格来代替制表符（tab） --这是唯一能保证在所有环境下获得一致展现的方法。
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的 :后应该插入一个空格。
- 为了获得更准确的错误报告，每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow
）。 - 不要在 rgb()、rgba()、hsl()、hsla()或 rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替 0.5
；-.5px代替 -0.5px）。 - 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
- 尽量使用简写形式的十六进制值，例如，用 #fff代替 #ffffff。
- 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
- 避免为 0 值指定单位，例如，用 margin: 0;代替 margin: 0px;
代码示例：
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
对用到的术语有疑问的请参考 Wikipedia 上的 syntax section of the Cascading Style Sheets article。
声明顺序：
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
代码示例：
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
完整的属性列表及其排列顺序请参考 Recess。
不要使用@import：
与<link>标签相比，@import指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
- 使用多个
<link>元素 - 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
- 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
代码示例：
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
@import url("more.css");
</style>
请参考 Steve Souders 的文章了解更多知识。
媒体查询（Media query）的位置：
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。如：
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
带前缀的属性：
当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。
在 Sublime Text 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
单行规则声明：
对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。
这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。
代码示例：
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
简写形式的属性声明：
在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：padding、margin、font、background、border、border-radius
大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。
在 MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。
代码示例：
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Less 和 Sass 中的嵌套：
避免不必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。
扩展阅读：Nesting in Sass and Less
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}
Less 和 Sass 中的操作符：
为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。
// Bad example
.element {
margin: 10px 0 @variable*2 10px;
}
// Good example
.element {
margin: 10px 0 (@variable * 2) 10px;
}
注释：
代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
class 命名：
- class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
- 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
- class 名称应当尽可能短，并且意义明确。
- 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
- 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
- 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。
/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
选择器：
- 对于通用元素使用 class ，这样利于渲染性能的优化。
- 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
- 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
- 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。
扩展阅读：
Scope CSS classes with prefixes
Stop the cascade
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
代码组织：
- 以组件为单位组织代码段。
- 制定一致的注释规范。
- 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
- 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。
/*
* Component section heading
*/
.element { ... }
/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
.element { ... }
/* Contextual sub-component or modifer */
.element-heading { ... }
编辑器配置：
将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：
- 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。
- 保存文件时，删除尾部的空白符。
- 设置文件编码为 UTF-8。
- 在文件结尾添加一个空白行。
参照文档并将这些配置信息添加到项目的.editorconfig文件中。例如：Bootstrap 中的 .editorconfig 实例。
更多信息请参考 about EditorConfig。
推荐学习网站和书籍：
- https://www.w3.org/
- https://developer.mozilla.org/
- http://www.w3school.com.cn/
- https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css
- http://www.w3cschool.cn/
- http://www.w3ii.com/
- https://www.codecademy.com/
- http://www.webplatform.org/
- http://www.bilibili.com/video/av3514695/
- http://www.bilibili.com/video/av3143963/
chrome书签：
本文章著作权归作者本人和饥人谷所有，转载须说明来源
