现在提起SEO大家都知道是什么?但是又有多少人能真正理解，SEO中还存在着非常多的细节大家没有注意的地方，今天我要谈的是SEO中的一个小小的细节–CSS优化。
DIV+CSS的网站设计，大家应该有了很多的了解了，我整理了一下，符合设计标准简单来讲有以下好处：简化代码、降低建设成本 ，下载速度快，有利于搜索引擎的收入及排名。
那么，我们知道这些好处，还需要在实际当中活学活用，今天的主题是以一个实例来体现css在SEO中的灵活运用，我发现，在大多数不怎么运用标准甚至一些符合标准的网站里，都犯有这点错误，哪一点?比如“狂骨CSS视频教程” 这里有9个字，但是在你网站的某个栏目中显示不了这么多的字，那怎么办?我看到很多网站都是将这个字体省略成“双人打僵尸…”，将后面多余的字体用省略号表示，如果是这样的话，搜索引擎将认为你的关键字就是“西米CC视频…”而不是“西米CC视频教程”，那我们如何去解决？
这个问题，如果全部显示出来，整个布局就乱了，就不够美观了，那怎么办?其实CSS中有两句简单的语句：
white-space:nowrap;
text-overflow: hidden;
第一句是对字体不换行，第二句是对溢出的字体隐藏)。就这两句就能解决这个问题了。这样的话就轻松解决了问题。即便是超出的部分，也不会在源文件中被砍掉了，而是以完整的标题提供给搜索引擎去索引了,这样就达到你要的效果了。
其实DIV+CSS是一门艺术，在我们今后的设计的过程中还有很多地方很适合SEO优化，希望大家慢慢的去摸索和尝试。
HTML 中最重要的标签是定义标题、段落和换行的标签。
学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。
标题
标题使用 h1>至 h6 标签进行定义，h1定义最大的标题，h6定义最小的标题。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML 会自动在标题前后添加一个额外的折行。
段落
段落使用
标签进行定义。
This is a paragraph
This is another paragraph
HTML 会自动在段落前后添加一个额外的空行。
不要忘记关闭标签
您可能注意到了，在编写段落时可以不带有
标签：
This is a paragraph
This is another paragraph
上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。
HTML 未来的版本不允许省略任何结束标签。
通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。
Continue Reading →
HTML 文档是由 HTML 元素构成的文本文件。
HTML 元素是通过使用 HTML 标签进行定义的。
HTML 标签
HTML 标签是用来标记 HTML 元素的。
HTML 标签被 < 和 > 符号包围。
这些包围的符号叫作尖括号。
HTML 标签是成对出现的，例如 b 和/b。
位于起始标签和终止标签之间的文本是元素的内容。
HTML 标签对大小写不敏感，b和 B的作用的相同的。
HTML 元素
还记得上一节中的那个例子吗：
<html>
<head>
<title>页面的标题</title>
</head>
<body>
<p>这是我的第一个页面。</p>
<b>此文本是粗体的。</b>
</body>
</html>
这就是一个 HTML 元素：
<b>此文本是粗体的。</b>
这个 HTML 元素由起始标签 b 开始。
这个元素的内容是：“此文本是粗体的。”。
这个 HTML 元素由终止标签 /b 结尾。
b标签的作用是定义一个显示为粗体的 HTML 元素。
为什么我们要使用小写的标签？
我们刚才讲到：HTML 标签对大小写是不敏感的：b 和 B 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的HTML标签。而我们总是使用小写。原因何在呢？
如果您希望为使用下一代HTML而做好准备，您就应该使用小写标签。万维网协会 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。
什么是 HTML 文件？
HTML 指超文本标签语言。
HTML 文件是包含一些标签的文本文件。
这些标签告诉 WEB 浏览器如何显示页面。
HTML 文件必须使用 htm 或者 html 作为文件扩展名。
HTML 文件可以通过简单的文本编辑器来创建。
做个实验如何？
第一步：如果您使用 Windows，请启动记事本。
如果您使用 Mac，请启动 SimpleText。在 OSX 中请使用 TextEdit，并设置一下参数：在参数设置中选择 Plain text 字体替代 Rich text 字体，然后选择“在 HTML 文件中忽略 rich text 命令”。这一点很重要，因为不这样的话，HTML 代码也许不能正常工作。
第二步：键入以下文本：
<html>
<head>
<title>页面的标题</title>
</head>
<body>
<p>这是我的第一个页面。<b>这是粗体文本。</b></p>
</body>
</html>
第三步：将这个文件存为 “mypage.html”。
第四步：启动您的浏览器。在浏览器的文件菜单中选择“打开”或者“打开页面”。这时会弹出一个对话框。单击“浏览”或者“选择文件”，找到您刚才创建的文件 – “mypage.html”，选定它然后打开，现在您会看到对话框中有一行地址，比如：”D:\mypage.html”。单击确定按钮，浏览器就会显示这个页面。
例子解释
HTML 文件中的第一个标签是 html。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 /html。这个标签告诉您的浏览器，这是 HTML 文件的结束点。
位于 head 标签和 /head 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。
title标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
body标签中的文本是将被浏览器显示出来的文本。
b 和 /b 标签中的文本将以粗体显示。
为什么我们要使用小写的标签？
我们刚才讲到：HTML 标签对大小写是不敏感的：b 和 B 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的 …
CSS初学者在刚开始用DIV+CSS布局的时候，常常被一个问题所困扰：当定义一个属性时，是使用ID，还是使用Class?在这我谈下自己在工作中对ID和Class的使用原则。希望对初学者有所帮助。
ID的使用原则
我们知道ID具有唯一性，也就是说在整个Xhtml中ID是不能重复的，所以我们在写网页的时候，大的结构用ID，比如：logo、导航、主体内容、版权等，根据命名规范分别命名为#logo、#nav、#contenter、#copyright。还有一种情况就是：我们要通过js作用一个层，以实现某种效果的时候，用ID。这也是由ID的唯一性决定的。
Class的使用原则
Class在CSS定义中具有普遍性，可以无限次的重复使用，这也体现了DIV+CSS布局的优越性。Class常用于结构内部，这样做的好处是有利于网站代码的后期维护与修改，这样会让所有的Class成为ID的子级或者孙级。
另外需要注意一点的是尽量不要让Class包含ID，比如.ff #childer{…},这样做显然不可取，不符合书写习惯。前面也介绍过良好的书写习惯，对写出规范的代码，和其他同事的合作，以至于后期的维护都是很有好处的。
