转载

快速学习 HTML 和 CSS

无论什么东西，快速了解都是有可能的，之后就要通过反复使用、反复操作获得并磨炼熟练程度。很多人被误导，总是以为“一定要学到一定程度才算学会，才可以拿出手……” 这是肤浅的。要尽快掌握“最少必要知识”（MAKE），然后就开始行动、开始践行…… 真正的熟练，只能在践行之中通过试错、改进、总结、纠正等必要的环节才能获得。

1. HTML/CSS 都是了解一句话之后就可以开始写的

HTML 是什么东西呢？一句话就够了 —— 真用不着非得读完一本书才能开始行动。

HTML 是用来在纯文本内添加各种标记（用尖括号括起来的标记，叫做“ TAG ”），以便让浏览器能以正确的格式显示那些内容的“语言”。

所以，假设你在 HTML 里写的是这样的：

<p> This is the first paragraph.</p>
<p> This is the second paragraph.</p>
<p> This is a <strong>word</strong> marked as strong.</p>
<p> This is a word <em>marked</em> as emphasized.</p>

然后浏览器会将其显示成这样子：

This is the first paragraph.

This is the second paragraph.

This is a word marked as strong.

This is a word marked as emphasized.

格式（Format），通常很简陋，只包括字体大小、字体加重、倾斜、删除线、下划线等等；另外一个词叫样式（Style），除了最基本的格式之外，还可以包括更多的细节，行间距、字间距、背景色等等……

那么，CSS 是什么呢？

CSS 就是用来批量指定标签内容样式的方法。

你只要在 HTML 文件里加上这么一句：

<style>strong {color: blue;}</style>

那么整个文档里的所有被标记为“加重”的文字（ <strong> ）就都显示为蓝色（blue）了…… 当然你还可以为所有加重的文字加上更多的样式：

<style>
  strong {
    font-family: "Courier New";
    font-size: 20px;
    border: yellow solid 1px;
    padding: 3px;
    margin: 5px;
  }
</style>

其实很直观的，不是吗？

2. 快速体验

打开 Safari，输入以下网址（将来还是推荐使用 Firefox 或者 Chrome 的，只不过，现在先用 Safari 玩玩……）：

http://www.catb.org/esr/faqs/smart-questions.html

这是篇工程师必须熟读、牢记的文章 —— 事实上，你读过之后就知道了，无论是谁，不管哪一个行业，其实都应该深入了解这篇文章的。

打开之后，你会看到一个相对格式、样式都极端朴素的文档。

基本上，任意一个浏览器，无论是 Safari, 还是 Chrome, Firefox, Opera, 它们的一些基础快捷键都是一样的，比如，都可以用 ⌥ - ⌘ - I 呼出一个“Developer Tools Pane”…… 即便在 Atom 里，也一样可以用这个快捷键 —— 因为 Atom 本身也是个基于 Chromium 的浏览器。

如果你没有安装 Safari 以外的浏览器，建议你把几个常用的浏览器全都安装好，反正以后都用得着……

brew cask install chrome
brew cask install firefox
brew cask install opera

以下我们先用 Safari 体验一下 HTML 和 CSS 的基本功能…… 请注意：在这个过程中不要刷新浏览器，否则你刚刚做过的改动就都不见了…… 当然，若是你想重新来过，就刷新一下浏览器好了。

在 Safari 上按下快捷键 ⌥ - ⌘ - I 之后，底部会出现一个工具台，工具台左侧，是当前文档的 HTML 源码，右侧是样式编辑器…… 上面还有一些标签，等你以后再熟悉。

工具台最低部的左侧， > 标记右边，其实是个命令行输入框，在那里可以输入一些 javascript 命令，比如，你可以输入以下代码试试：

alert('hello');

在工具台的左侧，你可以看到 HTML 源码，随时可以点击鼠标右键，再点击 Edit as Html 之后做任意的修改 —— 别怕，你玩不坏它的。随便搞，胡搞瞎搞才好玩……

在工具台最低部的右侧，有一个 + —— 那是个按钮…… 边上还有个输入框，在里面输入 body ，于是，样式编辑器里面就聚焦于 body 这个元素了；这时候，再点一下那个 + 按钮……

你会看到多了一个 body 的字样，在这一行的下方输入：

font-family: 'Courier New';
font-size: large;
max-width: 1024px;
margin: auto 100px;
background-color: #eee;

当然，冒号后面的值，你都可以（也应该）随便写写多试试…… 比如， max-width: 1024px; 你可以试试 max-width: 768px; …… 在输入的过程中，你会发现 Safari 提供了列表选择功能和自动补全功能 —— 非常方便 —— 甚至，行末的分号是不用输入的……

好玩吧？你刚刚是重新定义了 body 这个元素里的内容的显示样式。

文章开头，有一个 Revision History 部分，里面是作者多次修改更新过的记录。在那个暗色的边框上点鼠标右键，选择 Inspect Element ……

你可以看到，这里面的所有内容都被包在一个 <div class="revhistory"> 的区块里。在右下角的输入框里输入 revhistory ，你会看到这个 class 并没有被定义样式。在输入框里已经输入了 revhistory 的情况下，再点一下那个 + 按钮…… 输入：

display: none;

…… 那一整块内容“不见了”！是呀，你刚刚要求的麽！

当我们用浏览器打开一个网页的时候，看到的那些内容是浏览器将从服务器那里获得的 HTML、CSS、JAVASCRIPT 等文件的内容，组合起来解析之后，“渲染”（Render）出来的…… 由于这个原理，Firefox 有一个插件，Greasemonkey，可以编制一些 JAVASCRIPT 脚本，用来改变任意网站的显示样式…… 在以下网站上，可以找到很多别人写好的用户脚本：

https://openuserjs.org/
https://greasyfork.org/en/scripts
http://userscripts-mirror.org/

注意：去看看体验一下就好，千万别玩过头了…… 给自己定个闹钟，15 分钟之后要回来干正事儿！ 很多人都是这样，一不小心就被各种东西分散了注意力。

3. 系统了解 HTML 和 CSS

行了！尝鲜之后，就需要快速系统了解 HTML 和 CSS 了。先去这个地方：

HTML http://www.w3schools.com/html/default.asp
CSS http://www.w3schools.com/css/default.asp

天了个噜，这个全球访问量最大的网页开发教程网站竟然是用微软的 asp 写的…… 可这背后有个特别重要的道理：

用的技术是否时髦或者是否过时，在另外一个因素面前完全没有意义：做的事情有没有价值。w3schools 做的事情明显价值很大…… 所以说，在很多的时候，“做对的事情”（do right things），远“比把事情做对”（do things right）重要得多…… 再进一步，技术是用来实现思想的…… 所以，思想更重要。只钻研技术，没有思想，其实很可怜的…… 当然，有丰富的思想却没有技术，那更可怜。

把 w3schools 上的这两个教程反复看个两三遍，对不止一遍 —— 当然，光看完不够，要每个要素都要逐一实验过。别觉得自己记不住，记不住的原因只有一个，就是用的次数不够多而已。

4. 读不止一个教程

一般来说，Documentation，只要看 Official Documentation 一个就够了，把一个 OD 读透就行。很多的时候，所谓的读透，只不过是把结构弄清楚，以便将来随便查询…… 真的不难。

可若是读教程，那有个好建议就是：

读一个以上的教程。同一个话题的书，可以读很多本 —— 这绝对是最好的学习习惯之一。

除了 w3schools 之外，有关 HTML/CSS 的教程，其实很多，你不妨搜索一下：

Google Web Fundamentals
MDN Learning web Developement

也一定有所收获。

5. 先学范儿，某种意义上也是对的

第一遍读完 w3schools 上的 HTML Tutorial 之后，要看的是这个：

HTML(5) Style Guide and Coding Conventions

凡事儿都需要做得有模有样…… 我一直认为所谓真正的专家，其实是那些真正用专家的标准要求自己的人，而不一定是那些被别人称为专家的人。

不管学什么，先认真观察那些专家的“范儿”，是有益处的，虽然有很多细节目前做不到，但目标就是将来要做到，所以要提前观察，提前模仿，提前准备…… 以后学各种语言的时候，都要这样，先去看看 Style Guide 和 Coding Conventions ……

6. 学会就能用一辈子：总结、整理、提炼重点

HTML5 的学习难度，确实比之前的 HTML3 高了一些，因为标签的数量明显增加了很多，并且还有各种浏览器不完全兼容的情况需要注意……

然而，最终，有些人跨越不过去的原因很简单：

基本的总结概括能力差而导致的任务量过大……

上学的时候，学习能力强的同学，经常做各种总结整理，并分享出来…… 殊不知，那些喜欢等别人整理好了再用的人，常常因为缺失了自己动脑总结整理的过程而使得这方面能力逐步下降直至退化为零…… 观察一下生活吧，学习能力差的人，其实说穿了都有统一的局限：

总结整理能力差
提炼重点能力差

其中的第二条，基本上与第一条是互为因果的关系。

所以，总结、整理、提炼重点，这类事情一定要自己动手做。别嫌麻烦，这种事情不是麻烦，是修炼。怕麻烦的人，就是这样在每一个重要的环节上都吃亏却觉得自己占了便宜，乃至于有一天发现自己吃了亏，却完全不知道哪儿吃了亏…… 而上一章中提到的 “ Atom 的 Snippets 最好自己动手写 ” 其实也是一样的道理。

在 w3schools 上把 HTML Tutorial 反复看两三遍的过程中，要不断地想：

我有什么办法把这些 Tag 分类，以便在脑子里形成一个清晰的框架呢？重点究竟是什么呢？

分类的一个基本技巧，虽然简单，很多人却并不知道：

总是有一些元素最终无法精确分类…… 于是只好放到“其它”这么个无奈而必须的类别中去。

说实话，“其它”这个无奈的类别，也是很多人总结整理的功夫总也练不成的主要原因，因为他们不知道那个“其它”是最终对谁来说都是因无奈而必要的类别，所以总是觉得自己做得不够好，或者干脆不会做…… 于是因为只好等别人的所以自己的能力不断退化；又由于他们确实不知道这个事实，所以，当他们在别人的分类中看到“其它”类别的时候，竟然反应不过来“那是最终对谁来说都是因无奈而必要的类别”…… 听起来有点绕，但仔细琢磨一下吧，看看是不是这么回事儿？

如果自己没把握，不妨还是“故技重演”，去网上搜索一下 HTML5 CheatSheet ，看看别人是怎么总结、怎么整理、如何分类、如何提炼重点的…… 然后自己再试试。

甚至为了锻炼自己的总结整理、提炼重点的能力，可以尝试很多种分类方法，比如，随便举个分类方法的例子：

隐含的：像 <head> 、 <link> 、 <meta> 标签所标记的内容，是不会在浏览器上直接显示的……
显示的：大多数 Tag 都是标记内容格式的，所以当然是属于“显示的”……

“显示的标签中”，也可以继续分类：

事关布局的（比如 <header> 、 <section> 、 <aside> 、 <footer> 等等）

事关内容的（比如 <p> 、 <table> 、 <blockquote> 等等）

事关提交的（比如 <form> 、 <input> 等等）

这种看起来耗时费力的事情，都不要偷懒不去做，因为这是一种虽然简单，但必然有积累效应的能力获取，以后你的总结整理能力会越来越强的，然后基本上最终就是遇到这种情况，“随手一做”就比别人弄得好 —— 当然，显然会学得更快、应用得更好…… 就好像你真的像他们说的那样“更聪明似的”…… 说实话，最终也确实是的。

可这么简单的东西居然是很大的窍门，那些笨蛋们怎么可能相信呢？