css中这两个#header nav有什么区别吗

html-css06

css中这两个#header nav有什么区别吗,第1张

header元素是一种具有引导和导航作用的结构元素,通常放在整个页面或页面内的一个内容区块的标题。而nav元素用于定义导航链接,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确,其中的导航元素可以链接到站点的其他页面或当前页的其他部分

(一)xhtml的规范:

1、所有的xhtml代码英文小写

2、属性的值一定要用双引号("")括起来,且一定要有值

3、每个标签都要有开始和结束,且要有正确的层次

4、表现与结构完全分离,代码中尽量不涉及任何的表现元素,如style、font、bgColor、border等

5、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询

6、给重要的区块加上注释

7、图片要加alt注释

(二)CSS的规范:

1、id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease(最新产品/new+Release) ,或者用下划线链接new_Release.

2、CSS样式表各区块用注释说明

注释的写法:

/* Footer */

内容区

/* End Footer */

3、尽量使用英文命名原则,尽量不缩写,除非一看就明白的单词

class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red}

.f60 { color: #f60}

.ff8600 { color: #ff8600}

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px}

.font9pt {font-size: 9pt}

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left}

.bottom { float:bottom}

(4)标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

(5)页面结构

容器:#container

布局:#layout

头部:#head、#header

尾部:#foot、#footer

侧栏:#sidebar

左边栏:#sidebarLeft

右边栏:#sidebarRight

页面主体:#main

栏目:#column

包装/外套:#wrapper、wrap

内容:#content

(6)导航

导航:#nav

主导航:#mainNav

顶导航:#topNav

左导航:leftNav

右导航:rightNav

下导航:bottomNav

二级导航:#subNav

菜单:#menu

二级菜单:#subMenu

下拉:.drop

下拉菜单:.dropMenu

(7)功能

标签:.tab、.tag

提示信息:.msg、.message

小技巧:.tips

注释:.note

热点:.hot

摘要:.summary

帮助:.help

投票:.vote

指南:.guild

商标:.branding

标签:.label

工具条:.tool、.toolBar

标题:.title

LOGO:.logo

搜索:.search

搜索条:.searchBar

搜索框:.searchBox

搜索输入框:.search_input

搜索输出框:.search_output

搜索结果:.search_results

注册:.register

登录:.login

登录条:.loginBar

登录框:.loginBox

友情链接:.friendLink、.link

广告/标语:.banner

版权信息:.copyright

加入我们:.joinUs

合作伙伴:.partner

服务:.service

网站地图:.siteMap、.map

缩略图:.screenShot

产品:products

产品价格:products_prices

产品描述:products_description

产品评论:products_review

最新产品:new_products

生产商:suppliers、publisher

编辑:editor

编辑评论:editor_review

博客:blog

论坛:forum

新闻:news

下载:download

网站信息:.siteinfo

法律声明:.legal

信誉:.credits

列表:.list

(8)其他

左中右:left、center、right

上中下:top、middle、bottom

按钮:btn

面包屑:breadcrumb(即页面所处位置导航提示)

滚动:scroll

当前:current

图标:icon

箭头:arrow

首页:homePage、home

二级页面:subPage

状态:status

常见问题:faqs、questions

关键词:keyword

(三)CSS文件名称

顶部:top.css

底部:bottom.css

共享 share.css

基本共用 base.css

布局,版面 layout.css

主要的 master.css

模块 module.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

行或排:row1th,row2th,row3th,row4th...

列或纵:col1th,col2th,col3th,col4th...

(四)页面图片等的遵循以下几条规范

页面图片用gif和jpg,在不失真前提下,越小越好。

名称分为头尾两部分,用下划线隔开。头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等。

一般来说:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner/icon

标志性的图片我们取名为:logo

在页面上位置不固定并且带有链接的小图片我们取名为button

在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu

装饰用的照片我们取名:pic

不带链接表示标题的图片我们取名:title

依照此原则类推,尾部分用来表示图片的具体含义。

下面是几个样例,大家应该能够一眼看明白图片的意义:

banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg

(五)SEO相关

1 允许全文检索的页面,为了使Internet 上的搜索引擎能够有效检索,在频道的首页的html的<head></head>之间应该加入Keywords 和Description 元标记,例如 :

<meta name=”keywords” content=”东方新干线,汽车,买车”>

<meta name=”description” content=”东方新干劲线,全球中文汽车信息第一站”>.

2.添加搜索引擎引导代码:

<meta name="robots" content="index, follow" />

<meta name="googlebot" content="index, follow" />

附:雅虎优化:13条技巧提高网页速度

网页打开速度,是网站做SEO的一个重要方面,包括搜索引擎本身也会对自己的网页考虑这个问题:最近,雅虎的Exceptional Performance团队在其开发者网络上提出了提高网页打开速度的13条规则,其中包括“减少http请求“,避免网页转向"等

具体内容如下:

1.减少http请求

2.减少多媒体,图片,声音的使用,传输以文字内容为先

3.用截止时间报头,由于时间是将来,对于缓存来说,可以减少部分http请求

4.支持Gzip

5.把CSS放在网页的顶部

6.活动的脚本文件放在底部

7.避免用CSS Expressions

8.把JavaScript和CSS单独化,与网页分离

9.减小DNS查表时间

10.最小化JavaScript

11.避免网页的转向

12.删除重复的脚本