htmlcss规范文档格式.docx
- 文档编号:16860233
- 上传时间:2022-11-26
- 格式:DOCX
- 页数:14
- 大小:23.33KB
htmlcss规范文档格式.docx
《htmlcss规范文档格式.docx》由会员分享,可在线阅读,更多相关《htmlcss规范文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
body>
……
/body>
/html>
说明:
1.<
为DOCTYPE声明,DOCTYPE是documenttype(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
2.<
为名字空间声明。
3.<
为定义语言编码。
4.<
为调用外部样式表。
5.<
为调用外部的javascript文件。
3.2meta标签说明
为了能够更好的为搜索引擎准备内容,meta标签采用如下的定义方式,请在页面中据需要,自行添加。
∙允许搜索机器人搜索站内所有链接。
metaname=”robots”content=”all”/>
∙设置站点作者信息
metaname=”author”content=”设计者“/>
∙设置站点版权信息
metaname=”Copyright”content=”©
版权”/>
∙站点的简要介绍(推荐)
metaname=”description”content=”东方新干线,汽车,买车“/>
∙站点的关键词(推荐)
metaname=”keywords”content=”东方新干劲线,全球中文汽车信息第一站”/>
3.3页面内嵌样式表和页面内嵌javascript说明
请在html中的<
之间自行添加。
∙内嵌css代码
styletype=”text/css”>
/style>
∙内嵌javacript代码
styletype=”text/javascript”>
备注:
如无特殊需要,请尽量避免在html内部添加css和javascript,应统一采用外部链接的方式进行调用。
3.4xhtml代码规范
1.起始标签必须对应相应的结束标签
xhtml要求严谨的结构,所有标签必须关闭,如果是单独不成对的标签,在标签最后添加”/”来关闭。
例如:
1.成对标签<
strong>
/strong>
<
tr>
/tr>
2.不成对标签<
br/>
<
hr/>
<
inputtype=”text”/>
imgsrc=”logo,gif”alt=”logo“/>
2.所有标签的元素和属性名必须采用小写
与html不同,xhtml对大小写区分敏感,xhtml要求标签的元素和属性名必须小写,避免大写及大小写夹杂。
BODY>
必须写成<
“onMouseOver”必须写成“onmouseover”
3.所有属性必须添加引号
<
divid=mainFrame>
/div>
必须写成<
divid=”mainframe”>
4.所有标签必须采用合理嵌套
p>
b>
/p>
/b>
必须改为<
禁止inline级标签嵌套block级标签,如<
ahref=”#”>
div>
/a>
5.所有属性必须赋一个值
tdnowrap>
inputtype=”checkbox”name=”shirt”value=”medium”checked>
/td>
必须改为<
tdnowrap=”nowrap”>
inputtype=”checkbox”name=”shirt”value=”medium”checked=”checked”>
6把所有<
、&
、>
等特殊符号用编码表示
∙任何小于号(<
),不是标签的一部分,都必须被编码为&
lt;
∙任何大于号(>
gt;
∙任何与号(&
),不是实体的一部分的,都必须被编码为&
amp;
7.img标签中必须加alt属性
imgsrc=”../images/**.gif“alt=”logo”/>
除特殊情况外,不要在img标签中添加width和height属性,如有需要,请在css中定义。
8.注释
–这里是注释–>
4.css代码规范
4.1共享css模板
所有html页面都必须调用此共享css文件
comon.css文件代码如下:
BODY
{
margin:
0;
padding:
color:
#000;
font-size:
0.75em;
font-family:
arial,verdana,sans-serif;
text-align:
center;
line-height:
1.2;
background:
#ECECEC;
}
TD
12px;
*
DL,
DD,
DT,
OL,
UL,
LI
list-style-type:
none;
list-style-image:
url();
IMG
border:
.fL
float:
left;
.fR
right;
.clr
clear:
both;
.dpB
display:
block;
.dpI
inline;
.dpN
.taL
.taR
.taC
4.2css代码书写规范
1所有css属性和值必须采用小写的形式
如:
FONT-SIZE:
12PX;
必须改为font-size:
2所有css值的后面必须加分号结束
#FFF必须写成background:
#FFF;
3除特殊情况外,css代码必须采用简写形式(这样可以节约代码):
1.margin-top:
5px;
margin-left:
margin-right:
margin-bottom:
10px;
改写为:
5px5px010px;
2.padding-top:
padding-left:
padding-right:
padding-bottom:
5px
3.background-color:
#787878;
background-image:
url(../images/**.gif);
background-repeat:
no-repeat;
background-position:
lefttop;
改写为background:
#787878url(../images/**.gif)no-repeatlefttop;
常规的简写顺序(必须遵守)
Background(背景):
背景颜色、背景图像、背景位置、背景重复
Border(边框):
边框宽度、边框风格、边框颜色
border-bottom(底部边框):
底部边框宽度、底部边框样式、底部边框颜色
border-left(左侧边框):
左侧边框宽度、左侧边框样式、左侧边框颜色
border-right(右侧边框):
右侧边框宽度、右侧边框样式、右侧边框颜色
border-top(顶部边框):
顶部边框宽度、顶部边框样式、顶部边框颜色
font(字体):
字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style(列表样式):
列表样式图像、列表样式位置、列表样式类型
margin(空白):
顶部空白、右侧空白、底部空白、左侧空白
padding(间隙):
顶部间隙、右侧间隙、底部间隙、左侧间隙
4定义字体大小时,如果值是0的时候,可以省略单位(px,em,%等),其余情况必须添加相应的单位。
5代码书写格式
#mainbox{margin:
width:
100px;
统一写成
#mainbox
6background-position的值要统一单位
3px5px;
50%50%;
禁止写成文字和数字同时出现。
7如果css中出现html标签,则html标签必须采用大写的形式
#mainulli必须写成#mainULLI
8颜色代码值必须采用大写的形式,如果两个相邻的字母和数字两两相同,则采用所示形式
#cdfebc改写为#CDFEBC,#FF0000改写为#F00
9注意A标签在css中的书写顺序
A:
link
visited
A:
hover
actived
5.网站文件规范
5.1html文件规范
∙网站采用xhtml+css布局的方式,抛弃传统的表格布局,这样做的目的是为了确保html代码的整洁性,这样更利于弄清代码的结构,使其语义化。
(不是不用表格,表格不是用来布局,而是用在相应的数据表格位置)
∙为了确保网页的可读性,使字体能够根据不同的需要放大缩小,字体统一采用em做单位,下面前给出字体的px值和em值的对应关系:
11px——————————-0.7em
12px——————————-0.75em
13px——————————-0.8em
14px——————————-0.875em
15px——————————-0.95em
16px——————————-1em
17px——————————-1.05em
18px——————————–1.125em
19px——————————–1.2em
20px——————————–1.25em
∙根据设计的图片,把html代码相应的模块化,也就是说,根据设计中不同的功能模块,把html代码进行细分,在每一块功能区域的最外层用一个div进行嵌套,
相应id的值对应独立的css文件,即css文件名为id的值。
∙排版中我们经常会遇到需要进行首行缩进的处理,不要使用;
或者全角空格来达到效果,规范的做法是在样式表中定义p{text-indent:
2em;
}然后给每一段加上<
标记,注意,请不要省略<
结束标记。
∙为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<
来人工干预分段,请使用<
来控制分段(特殊情况除外)。
∙不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
∙所有的字号都应该用样式表来实现,禁止在页面中出现<
fontsize=?
>
标记。
∙请不要在网页中连续出现多于一个的;
也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用text-indent,padding,margin,来实现。
∙中英文混排时,我们尽可能的将英文和数字定义为verdana和arial两种字体。
∙行距建议用百分比来定义,常用的两个行距的值是line-height:
1.2/1.5。
(特疏情况除外)。
∙在编写代码时,请注意使用缩进和添加适当的注释,在每个功能块的上下添加必要的注释,如<
–navbegin→<
divid=”nav”>
……<
—navend→。
代码缩进的时候请使用Tab,避免使用空格进行代码缩进。
∙除特殊情况外,不要在标签中使用样式,如<
divstyle=”border:
1pxsolid#000”>
应该把样式写在相应的外部样式表中。
∙如遇到数据表格的时候,请使用table,但table的使用必须遵循语义的标准,
表格头部请使用<
thead>
/thead>
表格的主题内容请使用<
tbody>
/tbody>
表格的尾部请使用<
tfoot>
/tfoot>
表格的抬头请使用<
caption>
/caption>
如为table添加摘要信息,请在table标签内添加summary属性,如<
tablesummary=“这是一个具有亲和力的表格的演示”>
/table>
.
标准的html表格代码如下:
使用标准浏览器访问<
ahref=”http:
//www.DOMAIN.com/”>
http:
//www.DOMAIN.com/<
的用户逐月上升<
/caption>
th>
浏览器/月<
/th>
th>
2005/11<
2006/04<
/th>
2006/05<
总计<
td>
1,646(98.45%)<
6,978(99.48%)<
5,366(99.56%)<
InternetExplorer<
1,535(91.81%)<
5,905(86.41%)<
4,550(84.42%)<
∙制作页面的导航时,请使用<
ul>
ol>
dl>
来进行定义。
∙如果遇到标题时,请使用h1~h6进行定义,避免出现<
divclass=”title”>
的情况。
∙在网页上应尽量少使用Java和ActiveX。
因为并不是每一种浏览器都需要使用它,只有那些Netscape和Explorer的早期版本的使用者才需要它。
另外Mac在处理Java时也存在问题,过分地使用Java,会使Mac崩溃。
∙如果在页面设计时能够不使用框架就尽可能不使用框架,在使用框架时会产生许多的问题。
更重要的是,搜索引擎常常被框架混淆,从而不能收录网站内容,不利网站的推广。
∙如果可以使用图片或者其他方式替代Flash动画,尽可能不使用Flash动画,因为动画图标比较耗费系统资源,对于使用比较慢的计算机的访问者使网站的操作变得很困难。
∙图像链接尽量不要设置成ImageMap热点链接。
∙网页的体积是一个很重要的设计因素。
在不影响网页整体质量的前提下尽可能把网页做到体积最小,保证用户的快速下载。
一个标准的网页应不大于60K,通过56K调制解调器加载不应超过30秒的时间。
另外采用页面分块也有利于页面的快速显示。
5.2css文件规范
∙定义id,class时,请用英文,单词之间避免用空格,连字符,下划线,单词超过2个以上,第二个单词首字母大写,如#leftTitle,.footerNav。
∙对于每个独立的css文件中,子级元素的定义必须采用子类的定义方式,如
#mainNav.btn01,#mainNavDLDT,这样可以避免样式定义的冲突。
∙对于id,class的命名参见如下方式:
页头:
headerArea
登录条:
loginbarArea
标志:
logoArea
侧栏:
sidebarArea
广告:
bannerArea
导航:
navArea
子导航:
subNavArea
菜单:
menuArea
子菜单:
subMenuArea
搜索:
searchArea
滚动:
scrollArea
页面主体:
mainArea
内容:
contentArea
标签页:
tabArea
文章列表:
listArea
提示信息:
msgArea
小技巧:
tipsArea
加入:
joinusArea
指南:
guideArea
服务:
serviceArea
热点:
hotArea
新闻:
newsArea
下载:
downloadArea
注册:
regsiterArea
状态:
statusArea
按钮:
btnArea
投票:
voteArea
合作伙伴:
partnerArea
友情链接:
friendLinkArea
底部导航:
footerArea
版权:
copyRightArea
5.3html文件命名规范
1.文件名称统一用小写的英文字母、数字和下划线的组合,文件统一以.html为后缀名。
2.文件名称必须全部使用与内容相关的英文单词命名(尽量避免使用汉语拼音),对于一个单词难以表达的,可以考虑用多个单词加下划线(-)连接(不能超过四个单词)命名。
所有的名称起始和结尾不能使用下划线(-)。
3.如果出现三个或者三个以上的单词来命名时,最关键的单词排在最前面。
交易市场中产品添加的帮助文件命名为help_product_add.html。
4.命名中可以使用公认的单词缩写形式。
用户注册文件为user_reg.html而不必写成user_register.html。
5.出现两个或者两个以上文件内容相关或者相似时使用数字进行标注。
6.命名不准出现纯数字纯英文字母,不规则英文缩写,多个单词不用下划线连接等错误。
严禁使用汉字对文件命名。
以下形式为非法:
3.html;
tt.html;
productlist.html
update_pd.html(修改用户密码文件update-pwd.htm为合法因为pwd是password的缩写)
下面以“新闻”(包含“国内新闻”和“国际新闻”)这个栏目来说明html文件的命名原则
●所有属于“国内新闻”的新闻依次取名为:
china_1.html,china_2.html,…
●所有属于“国际新闻”的新闻依次取名为:
internation_1.html,internation_2.html,…
如果文件的数量是两位数,请将前九个文件命名为:
china_01.html,china_02.html以保证所有的文件能够在文件夹中正确排序。
5.4css文件命名规范
css文件以英文命名,避免使用汉语拼音,因为每个css文件对应html文件中的单独模块,所以css文件以html中id的值作为文件名,这样便于查找,css文件命名时,如果名字由两个或两个以上单词组成,那么从第二个单词开始,首字母大写。
样例参见5.2css文件规范。
5.5图片及动画命名规范
1.名称分为头尾两部分,用小写的英文字母、数字和中横线组合。
头部分表示此图片的大类性质,例如广告、标志、菜单、按钮、图标等等,如无特殊需要,图片应保存为.gif格式。
一般来说:
a)放置在页面顶部或尾部的导航、装饰图案等长方形的图片我们取名:
banner
b)放置在页面顶部、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- htmlcss 规范
![提示](https://static.bdocx.com/images/bang_tan.gif)