</html>你现在所看到的就是HTML，它是一种超文本标记语言，它的文档类型为HTML或者相似的如 XHTML 等，我们可以打开任何一个网页（网页都是由 HTML构成的），将它另存为，如果不你作任何修改的话，那么你将会得到一个以 .html 结尾的文档， .html 是最常见的 HTML 文档后缀，同时使用的还有 .htm ，这是在 DOS 时代，系统最长只能接受三位的后缀，但是现在的你，应该使用 html 。那CSS又在哪里呢？你问对了，在上面的四个情景下，要说的话，最后那个 很红的大号字 应该算是最容易说明 CSS 相关性的了，你可以试试，如果你也使用QQ邮箱（其实一般的情况都是可以的），先输入“给我借十元钱吃早饭”这段文字，然后选择它，再点击上面的编辑工具条（这个和Word／WPS等编辑器是很相似的，只不过它是网页版的），点击 Tt 这个按钮，选择 最大 这个选项，这会把上面这段文字放得到大，然后点击那个有一个颜色下边框的大写的 A 的按钮，选择大红色，这个时候就成了：很大的大号字了。现在关键的地方来了，点击那个工具条的 <HTML> 按钮，可以查看到邮件的源代码，可以看到（饿……）原来不是CSS：<font size="6" color="#ff0000"> 给我借十元钱吃早饭 </font>上面这个还是HTML，不过我们可以看到里面有 color="#ff0000" 这样的（本来还以为会使用标准的CSS呢），这个就表示，这个里面的文字的颜色为 #ff0000，而 #ff0000 是什么？这个以后会说，在这里就直接告诉你，它表示红色，虽然CSS没看着，不过没关系，把上面那三行删除掉，然后把下面这三行复制到删除的位置，再点一下编辑框的左上角的 返回编辑器 的按钮，你会发现，字还更大了一点，颜色也是红色：<div style="font-size: 3em; color: #ff0000"> 给我借十元钱吃早饭 </div>这是为什么呢？在这里， style="font-size: 3em; color: #ff0000" 这一段就是CSS示例了，它的作用就是样式化HTML元素，在上面的示例中，它样式化了它所属于的那一个 DIV 元素（什么是HTML元素？后面慢慢地说，在这里 DIV就是一个元素），让它的文字大小为 3em （font-size: 3em），文字颜色为 红色 (color: #ff0000) 。到现在为止你应该明白一点了：HTML构成网页，而CSS样式化HTML元素，所以，CSS样式化网页，你现在也应该清楚的知道了，网页都是由HTML构成的，然后，再想想，CSS是必须的吗？简单的解释一个网页我们现在先使用一个纯文本编辑器（如果你使用的是Windows系统，那么就打开记事本软件）新建一个文件，另存为 demo.html ，然后将下面这一段代码复制进该文件，再保存：<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>示例网页</title>
</head>
<body>
<h1>示例网页</h1>
<p>这只是一个很简单的示例网页而已，它来自stack.com" title="Matrix Stack">Matrix Stack</a>。</p>
</body>
</html>保存之后，再双击该文件看看。发现没，双击它，并不会再打开记事本，而是打开了一个浏览器（你系统当前所设置的默认浏览器），浏览器里面有两行内容，一行是字体大一些的，内容为 "示例网页" ，而下面的那一行则是字体小一些的一句话，类似下面这样的效果这只是一个很简单的示例网页而已，它来自 Matrix Stack 。为什么我们会看到这样的内容，我们输入的那些如 <html> 或者 <h1> 这些内容都云哪里了呢？如果你发现他们不见了，那就像前面说的一样，在现在的这个网页里面点一下鼠标的右键，然后点击查看源代码，你会发现，源代码就是你输入的那一段字符。在上面的这个示例中，那些在网页里面看不到的内容都是属于 HTML 标签，或者称之为HTML元素，比如 <h1> ，它就是一个HTML标签，HTML有很多个不同的标签，不同的标签有着它存在的特殊意义，比如 <h1> 表示“一级标题”，或者 Heading 1 ，在HTML中，标题有六级，分别为 h1 至 h6 ，同样的在上面的示例中，那些 <p> ，*<body> 等等的也都是HTML标签。我们打开任何一个网址，其实就是浏览器在帮你向网络上的某一台服务器请求数据，而一般情况下，如果请求到的数据浏览器直接为你显示出来了，那么请求到的数据一般就是HTML文档（为什么说一般就是HTML文档，而不是说肯定就是HTML文档？），就是上面这个示例中这样的文字，如上面所说的，因为HTML标签都是有特殊的意义的，浏览器会把每一个标签按它所表示的 意义展示 给浏览器使用者，这里说的展示，并不表现在直接把那些文字显示出来，比如，你可以做一个下面这样的示例，在上面的那个 demo.html 文件中的示例网页那一行下面，加上下面这一行：<h2>示例网页</h2> <h3>示例网页</h3>保存之后，再使用浏览器打开，你就会发现，同样的文字，因为使用的HTML标签不同，它的字体大小不同了，这种不同就是浏览器给这些标签作出的解释，当它遇到<h1> 之后，就知道了，这里面的内容是一个一级标题，我需要把这个文字加粗，并且以最大号儿的字体显示，但是 <h1; 这个是HTMl标签，这个文字就不需要显示。那么CSS在哪里呢？再来修改一下 demo.html 这个文件，把 <h1; 这一行改成下面这样的：<h1 style="color: #ff0000; ">示例网页</h1>再使用浏览器打开该文件，你会发现，示例网页这四个字现在变成了红色的了，在这里，你输入的 style="color: #ff0000; " 就是一行CSS代码，从前面关于那个QQ邮箱的示例中你应该已经知道了，这表示这个HTML元素里面的文字要以红色显示，看到没，CSS样式化了HTML元素，我们再来改一下这一行，改成下面这样的：<h1 style="color: #ff0000; font-size: 12px;">示例网页</h1>使用浏览器打开该文件，看到什么效果了？是不是除了把这四个字改成红色之后，字体还变得很小了？稍稍深入理解一下HTML与CSS在上面的这个示例中，我们创建了一个一级标题，一个二级标题，一个三级标题，以及一个段落（ <p> 创建的 ），最开始一级标题很大，还是加粗的，颜色为黑色，后来我们改成了红色，最后连字体都改成了很小的，那么在我们做这些修改之前，为什么 h1 就比 h2 大呢？原因很简单，还记得前面说过的浏览器看到HTML标签之后，会根据它的意义展示出该标签的内容，浏览器对于 h1 标签，它把字体大小改大，再把文字加粗等等，其实就只是为 h1 指定了一个默认的CSS样式，虽然你没有明示，但是浏览器却知道，现在开始，你需要安装一个谷歌浏览器（如果不知道怎么安装，那你就别再继续往下看了，学学电脑基础知识要紧），然后使用谷歌浏览器打开 demo.html 这个文件（请先把该文件还原成为上面未修改过的那个版本，也就是最开始保存的那个版本，只有一个一级标题和一个段落），打开该文件之后，你也会看到和前面类似的网页，现在在 示例网页 四个大字上面点鼠标后键，再点击弹出菜单中的 审查元素 选项，这会在浏览器的最下方打开一个分为两栏的子窗口，后边的你应该一看就明白，那就是你的网页源代码，而右侧，有很多选项，点击第一项 Computed Style 这一项，你就会看到下面这样的内容：display: block; font-size: 32px; font-weight: bold; height: 38px; width: 935px;上面这段内容中的 width: 935px 可能不一样，为什么不一样？这一段代码就是CSS样式，但是我们并没有指定过任何样式，为什么会有？这是因为浏览器会为每一个HTML标签根据其意义添加默认的样式，而上面这一段CSS样式就是谷歌浏览器为 h1 标签添加的默认样式，这个时候你应该知道为什么在上面我们能把它的字体改成很小了吧？还记得吗？我们把 h1 的 font-size 设置为 12px 之后，字体就变小了，这是因为新的样式会把旧的样式覆盖掉，所以，在上面的示例中，12px 会覆盖掉32px，所以，字体会变小。HTML与CSS的版本HTML与CSS就像我们常常使用的软件一样，也是有它们自己的版本的（比如我们中国人用得最多的软件QQ就有什么2011版，2012版或者2013版等），对于HTML来说，不同的版本体现在它们有很一些特有的标签，或者同一个标签的意义不一样，而对于CSS来说，不同的版本可能有它们各自特有的属性，事物总是处于发展的过程中，而且一般都是向好的方向发展，HTML与CSS也一样，新的版本总是提供了很多的功能与特性以满足现代的需求，比如最开始网页不能播放视频，然后可以了，但是在网页里面加一个视频很麻烦，而现在，不但可以播放视频了，而且加入一个视频也变得很简单；以前我们如果想做一个美观的网页很麻烦，而现在，什么3D技术，动画等等都可以通过CSS很简单的实现，所以，对于版本而言，如果你是一个新手，我建议你直接进入到最新版本中来，而我绝大多数情况下，也都是只讲最新的版本，但是由于最新版本并不是任何一个浏览器都能很好的支持，所以，如果你将来以这些技术为职业，那可能还需要自己云研究其它版本，或者兼容方案，比如在HTML5中，有一个<nav> 标签，它表示导航，这在HTML5以前是不存在的，所以不支持HTML5的浏览器看到这个标签之后就不知道怎么办，那么我们要么改用其它替代标签，要么使用一些特殊的方法告诉老的浏览器应该怎么办。如何查看以及如何定义一个HTML文档的HTML版本比如下面这个示例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" 3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns=3.o
www.hbbz08.com rg/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
</html>这个是某一个网站的HTML代码片段，中间省略了很多，该网页所使用的HTML版本可以从第一行查看到，即：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//Ew3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">不过有一个好消息是你以后写任何一个HTML文档都不再需要在网页里面加入这么长的一串了，只需要像下面这样即可：<!DOCTYPE html>最新的HTML5只要求你声明该文档的类型为HTML即可，不再需要指定HTML的确切版本，不用担心老浏览器不兼容，它们都会知道这是什么东西。一点小小的扩展在上面的所有这些示例中，我们都将CSS样式写在HTML标签里面，作为它们的一个属性，该属性名称为 style ，但是，这仅仅只是示例，在以后的文章中，有可能还会出现这种方式，但是请记住，这并不是说我们就应该这么写，而正好相反，我们不应该这么写，原因在于：HTML是用来定义文档结构的，我们不应该在文档结构中写入它的样式，而应该将它们分开，我们称之为结构与样式分离，从而达到内容与样式分离，简单的实现方法就是把CSS样式写进一个单独的以 .css 为后缀的文件中，然后在HTML文档中使用一个 link 标签将该CSS文档引入到HTML文档中来，这样我们如果想修改HTML中元素的样式就不需要修改HTML文档了，而仅仅只需要修改它的样式文件即可，