学好html css未来,快速学习 HTML 和 CSS 前端互联网开发（10页）-原创力文档

无论什么东西 ，快速了解都是有可能的 ，之后就要通过反复使用、反复

操作获得并磨炼熟练程度。很多人被误导 ，总是以为 “一定要学到一定

程度才算学会 ，才可以拿出手……” 这是肤浅的。要尽快掌握 “最少必

要知识” (MAKE )，然后就开始行动、开始践行…… 真正的熟练 ，只

能在践行之中通过试错、改进、总结、纠正等必要的环节才能获得。

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

始写的

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

能开始行动。

HTML 是用来在纯文本内添加各种标记 (用尖括号括起来的标记 ，叫

做 “TAG” )，以便让浏览器能以正确的格式显示那些内容的 “语

言”。

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

1This is the first paragraph.

2 This is the second paragraph.

3 This is a word marked as strong.

4 This is a word marked as emphasized.

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

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 文件里加上这么一句 ：

1strong {color blue;}

那么整个文档里的所有被标记为 “加重”的文字 ()就都显示为蓝色

(blue )了…… 当然你还可以为所有加重的文字加上更多的样式 ：

1strong {

2 font-family  "Courier New";

3 font-size 20px;

4 border yellow solid 1px;

5 padding 3px;

6 margin 5px;

7 }

8

9

其实很直观的 ，不是吗 ？

2. 快速体验

打开 Safari ，输入以下网址 (将来还是推荐使用  Firefox 或者

Chrome 的 ，只不过 ，现在先用 Safari 玩玩…… )：

http///esr/faqs/smart-questions.html

这是篇工程师必须熟读、牢记的文章 —— 事实上 ，你读过之后就知道

了 ，无论是谁 ，不管哪一个行业 ，其实都应该深入了解这篇文章的。

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

文档。

基本上 ，任意一个浏览器 ，无论是 Safari, 还是 Chrome, Firefox,

Opera, 它们的一些基础快捷键都是一样的 ，比如 ，都可以用 ⌥-⌘-I 呼

出一个 “Developer Tools Pane”…… 即便在 Atom 里 ，也一样可

以用这个快捷键 —— 因为 Atom 本身也是个基于 Chromium 的浏览

器。

如果你没有安装 Safari 以外的浏览器 ，建议你把几个常用的浏览器全

都安装好 ，反正以后都用得着……

1brew cask install chrome

2brew cask install firefox

3brew cask install opera

以下我们先用 Safari 体验一下 HTML 和 CSS 的基本功能…… 请注

意 ：在这个过程中不要刷新浏览器 ，否则你刚刚做过的改动就都不见

了…… 当然 ，若是你想重新来过 ，就刷新一下浏览器好了。

在 Safari 上按下快捷键 ⌥-⌘-I 之后 ，底部会出现一个工具台 ，工具台

左侧 ，是当前文档的 HTML 源码 ，右侧是样式编辑器…… 上面还有一

些标签 ，等你以后再熟悉。

工具台最低部的左侧 ，> 标记右边 ，其实是个命令行输入框