HTML

网页的核心是内容与样式，HTML就是其前者——内容。脱离了内容的样式是没有意义的，也就是说离开HTML光谈CSS是没有意义的。HTML语言其实很好辨认，由两个尖括号：<和>包起来的就被称为标签，如果你看到某个文档里时不时出现标签，那这份文档十有八九都是由HTML语言（或者它的亲戚XML）写成的。

而由一对标签（比如和）包起来的所有文字内容，便被称为元素。元素开头的标签就被称为开始标签，而末尾的标签则被称为结束标签。开始标签和结束标签之间可以没有任何文字；

有一种特殊的自闭合标签，比如水平线或者图片，它们的斜杠位于尖括号里面，这样的标签本身就是一个元素。

元素都有它的名字，名字就是开始标签的那个尖括号后面的第一个单词，这个名字是给电脑看的，但它很重要！因为：

某些元素只能位在特定的元素内。

某些元素只能位在特定的位置上。

关于HTML，我要说的最后一个东西就是属性。属性会出现在元素的开始标签里，通过空格区分不同的属性，而写法是属性名="属性值"。对于使用css的设计师来说，class属性就是最重要也是最经常使用的属性之一。

CSS

这就是网页的第二个核心——样式。理论上讲它可以规定网页的一切表现，位置、颜色、大小、距离…设计稿上的所有效果都可以借助它一一呈现，但是在实际应用中配合功能和性能以及各方面的要求，导致设计师的构想并不一定能够完整表达。

HTML代码可以写在很多文件中，而css代码只能出现在两个地方：css文件或者html文件中。

选择器是用来告诉浏览器，样式需要应用到哪个元素上，它的功能非常强大——可以直接按元素名称选择，也可以按元素的id属性值选择，还可以按元素的class属性值来选择，甚至可以选择某个元素的兄弟、儿子、孙子，还能选择元素的状态。

在HTML及CSS中都经常提到的一个词，class，通常也被称作类。一个元素是可以拥有多个类的（但不能拥有多个id，整个HTML文件中的所有元素的id属性值都应该是唯一的），类名与类名之间使用空格隔开，而类名不能使用中文。通过类选择器选择元素，是CSS中最常见的选择方式。

CSS的属性和前面说过的元素的属性是完全不同的，有兴趣的话可以读一下这篇文章，之后我会尽量区分说明，请各位尽量避免混淆。每一条CSS属性-值都构成一个声明，每一句声明之后都需要一个半角分号;来作为结束（就像我们写作时所用的句号）。

至于大括号（{和}），这是css的语法标记，就像HTML中的尖括号，时刻不要忘，否则易出错。

HTML + CSS

HTML 与 CSS 结合在一起，设计稿就这样从一张图片变成了我们在浏览器中浏览的静态网页，当然这也就是以前可能会经常听到的 DIV + CSS 。这样话说起来很轻巧，但是无论是 HTML 还是 CSS 都是需要一个字一个字打出来的…而更多的问题，就在 HTML 与 CSS 的结合过程中产生了。

html元素是所有网页都必须要具备的，网页中的一切内容必须写在html元素内；

head元素是给浏览器和搜索引擎准备的，大部分并不会显示在页面上；

title元素中的内容会显示在浏览器标题栏的位置上；

link元素的href属性则指示了这个页面所使用的css文件的；

还有可能会出现script元素，它将会指示这个页面所使用的js文件；

body元素是放置网页内容的地方（你以后所写的99.9%的HTML代码都会位于这个元素内）。

标签之前的空格被称作“缩进”，良好的缩进习惯可以帮助写出易读的代码，在任何一个项目或者页面中，都应该正确使用缩进。上面所展示的代码就是一个基本的缩进示范，每个子元素都比其父元素缩进一个单位。

一般的缩进只要按下键盘左边的Tab键就好，但是在程序员中广泛存在一种究竟是一个Tab好还是两个空格好的争议（如同咸甜豆腐脑般的存在）。当然在书写过程中，没有人会去按两下空格，他们通常是把Tab的输入改为两个空格而已（所以你只要记得，缩进一个单位按一下Tab就好）