11、HTML&CSS-CSS统筹

每天一句：你的时间有限，所以不要浪费时间去过别人的生活。你必须相信点滴的进步会连接着你的未来。

一、CSS文档统筹

整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可;
网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件;
> 根据页面类型分离文件
> 根据功能模块分离文件
> 根据标签类型分离文件
> 根据设备类型分离文件
> 根据代码规模综合分离文件

二、网页自身优化

• 页面主题优化
  实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容;

• 页面头部优化
  页面头部指的是代码中部分，具体一点就是中的"Description（描述)"和"Keywords(关键字)"

  • “描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出;
  • "关键字"部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字;
    <meta name="keywords" content="" />向搜索引擎说明你的网页的关键词；
    <meta name="description" content=""/>告诉搜索引擎你的站点的主要内容；
    <meta name="generator" content="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
    <meta name="author"content="你的姓名">告诉搜索引擎你的站点的制作的作者；

• 超链接优化
  搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。 怎样的链接才是合理的呢？

• 采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字。许多公司、个人都喜欢酷酷的Flash动画，网站的入口也做成Flash片断，，搜索引擎很难光顾这样的网站。而且个别设计者非常马虎，把网站的入口链接放在了Flash上，有时因为网络繁忙、缺少Flash插件而导致用户根本就看不到网站的内容；

• 按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里；

• 最好别使用图片热点链接，理由和第一点差不多；

• 图片优化(alt属性，title属性)
  图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt="";

• PageRank(pr值,友情链接)
  PR值是Google提出的一个重要参数，它标明了某个网站的重要程度，那么pr值是如何确定的呢？目前普通的解释为：假如有ABC三个网站，彼此互作友情链接，那么当一个访客通过A上的友情链接来到B时，Google就认为A为B投了“一票”，同理，如果有人从C访问B，那么B又得一票，如果全世界的网站上都有B的友情链接，B就是世界上最重要的网站了;
  那么如何提供我们自己的pr值，方法为交换链接！应该找一些和自己网站内容相近，且较为优秀的网站，但不要疯狂的交换链接，如果你的首页上一下子多了几百个友情链接，Google不但不会提升你的pr，有可能认为你作弊，从而把该网站从自己的数据库中删除;

• 避免大“体积”的页面
  有经验标明，搜索引擎不喜欢索引大体积的页面，即一个页面代码部分的体积不要太大，控制在100kb内为佳;
  最重要的一点！合理的代码结构,搜索引擎喜欢格式清晰，结构分明的页面，理论上XML是最合乎搜索引擎，当然，这太极端了，不过如果采用XHTML+CSS技术将页面数据同表现分离，即避免大量嵌套表格和其它冗余的代码还是能够完美实现这一要求的;

三、CSS规范

• 命名方法（语义化命名，结构化命名）
  id:结构化 header footer
  class: .border0 . red: .font12 .clearfix

• CSS命名规则

  • 建议使用小写字母;
  • 以英文字母开头，后面可以连接数字、字母、下划线、连字符和特殊字符，建议尽量使用英文字母，适当使用下划线和连接线；
  • 词必达意，名称要反映用途和相关信息，同时也要简短。
  • 绝对不可以数字开头;

四、其他

所有的元素都清除，不管有没有，都清除(项目中最好不要使用这种)
*{
    margin: 0;
    padding:0;
}

以下元素才需要清除
html, body, ul, li, p, h1, h2, h3,form, img{
    margin: 0;
    padding:0;
}