小程序开发

你知道CSS网页头部优化技巧么?

2019-01-09 15:40
在div+css布局中,网站基本都能看到下面这样的架构:
<div class="wrap">
<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
</div>
而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏:
<div id="header"><BR><div id="title">这里是网站的标题</div>
<div id="nav">这里是网站导航栏</div><BR></div>

你知道CSS网页头部优化技巧么?

很多人一般都这样写的,当然这样写并没有什么语法错误。但对于div来说有个原则,那就是尽少的使用div的嵌套(和table一样的缺点:1、对于用户:浏览器要消耗资源对嵌套的关系进行解析,影响速度;2、对于搜索:搜索引擎对嵌套的层数可能有所限制)。而且这样写带给我们的可读性也不算太高。

那如何才是最优化,最科学的写法呢?我们选用其他的Xhtml代码来取代上面的div,那又如何选择呢??首先标题的选择——我们知道在xhtml中h1-h6是表示标题的,而header里的标题在全页来看是最重要的,我们选择h1来表示标题是顺其自然的。但是一定要记住的是,<h1>标签在一个页面中只能使用一次,多次使用会导致网站被搜索引擎降权。

其次导航栏的选择——导航栏是由多个小块内容组成,我们选择无序列表<ul><li></li></ul>来表示菜单最合适不过了,这样是最符合W3c规范的结构。

最后以上的内容可以优化成:
<div id="header"><BR><h1>这里是网站的标题</h1>
<ul><BR><li>这里是网站导航栏</li>
</ul><BR></div>

我们是北京专业的网站开发公司,公司成立10年来,为上百家企业提供了网站开发服务,如果您正好准备开发一个网站,那就联系我们吧,现在联系免费获取方案和报价单,还有机会获得虚拟主机一部!
免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。
小程序开发:webbj.cn北京小程序开发公司,免费获取思维导图!
    相关阅读
  • PHP与ASP.net两大网站开发架构优势对比
    PHP与ASP.net两大网站开发架构优势对比

    PHP与ASP.net两大网站开发架构优势对比 同是目前主流的网站开发架构,PHP与ASP.net各有哪些技术特点呢?他们分别适用于哪些不同的环境中呢? PHP架构优点 PHP比较容易学开发速度比较快,...

  • 网站改版或重建后该如何保持排名
    网站改版或重建后该如何保持排名

    很多时候,我们的网站需要改版或者重建。网站改版或者重建的目的很明确,一是为了提供更好更优质的内容或者服务,给用户带来更好的用户体验度;二是为了优化网站,提升网站在搜...

  • 北京网站建设建站流程
    北京网站建设建站流程

    第一步 客户提出需求 客户提供相关文字及图片资料:同时希望您能够告诉我您喜欢的网站类型及实例; 1.公司简介,各种联系方式; 2.尽量用文字详细说明制作的框架结构; 3.产品或项...

  • 选择seo关键词要避免的大误区
    选择seo关键词要避免的大误区

    在网络营销中,无论是做竞价广告和搜索引擎优化都需要选取关键词,但是在选取关键词中存在了误区,企业往往投放了大量的资金,也带来的了流量,但是没有转化,网络营销学院...

感受专业服务,从来电咨询开始
010-6975976518611391767
在线咨询在线咨询