半点优化网 http://www.bdxc.net/
当前位置首页 > 网站技术问题> 正文

网页代码有什么规范?

2022-07-05 21:11:26 暂无评论 175 网站技术问题 规范   代码   网页

(一)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.删除重复的脚本

猜你喜欢