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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容