perl书籍⽹页html制作⽬录⽂件及CSS命名规范总结
⽂件夹与⽂件名称、CSS样式命名、程序中的⼀些控件等等：
名称全部⽤⼩写英⽂字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；⽬录名应以英⽂、拼⾳为主（不到万不得已不要以拼⾳作为⽬录名称，经验证明，⽤拼⾳命名的⽬录往往连⼀个⽉后的⾃⼰都看不懂）。尽量⽤⼀些⼤家都能看懂的词汇。使得你⾃⼰和⼯作组的每⼀个成员能够⽅便的理解每⼀个⽂件的意义。⽽且当我们在⽂件夹中使⽤“按名称排例”的命令时，同⼀种⼤类的⽂件能够排列在⼀起，以便我们查、修改、替换、计算负载量等等操作 。
例如：images(图形⽂件)，flash（Flash⽂件）等。
命名⽅式：（性质_描素_位置_分类_数量）项相结合，采⽤简写、组合的⽅式形成通⽤规则。
例如：
news (性质)
news_title (性质_描素)
news_title_top (性质_描素_位置)
news_title_top_01 (性质_描素_位置_数量)
news_title_top_a_01 (性质_描素_位置_分类_数量)
news_title_top_b_01 (性质_描素_位置_分类_数量)
常⽤⽬录名：
data(数据库) images(图⽚) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语⾔) style (样式)等……
常⽤CSS名：
页⾯外围控制整体布局宽度：wrapper  头：header  内容：content/container  页⾯主体：main  侧栏：sidebar  尾：footer等……
更多命名查看:
第⼆部分：结构（ XHTML ）
⽹站的前端结构与表现分离，达到95%以上。正式上线后的⽹页代码结构要清晰、明朗，容易阅读，
布局与结构的镶套尽量控制在4-5层以内，严格遵循w3c的xhtml1.0 Transtitonal。
并遵循以下原则：
python安装环境1.        DDT类型：XHTML 1.0 Transitional
2.        编码：utf-8
3.        元标记必须项：
<meta name="keywords" content="" /> 该页⾯的关键词概况
<meta name="description" content="" /> 该页⾯的简要描述
<meta name="robots" content="all" />
具体内容根据SEO要求设置
4.        Html代码中的所有标签遵循XHTML 1.0的 书写规范 ，包括：
a)        标签全部使⽤⼩写；
b)        标签全部闭合；
c)          所有属性必须有值⽽且⽤双引号；
d)        把所有<；和&特殊符号⽤编码表⽰；
e)        所有的标签必须合理嵌套；
f)          注释中不要使⽤ --------  如这样写是错误的：<!-- 注释------------注释 -->；
5.        标签有语意：
a)        布局排版⽤<div>；
学生个人网页制作html代码css
b)        标题⽤<h1>——<h6>；
c)          段落⽤<p>；⽆序列表⽤<ul>，有序列表⽤<ol>；
6.        放弃不被IE⽀持的标签，如<abbr；放弃不被w3c推荐的html4标签，如：<center><font><b>等等；
7.        title的合理应⽤：<a>标签必须⽤title；<img>必须赋予alt值；<div>可以⽤title说明；
8.        根据⽹站的结构，对HTML进⾏模块化，⽐如：信息页⾯的头部尾部的通⽤⽂件，功能页⾯的头部尾部的通⽤⽂件，分页⽂件，可以模块化的信息列表模块。
9.        JS：页⾯中的JS处理成外部⽂件，不能在页⾯中使⽤⼤量JS脚本，同时注意js⽂件调⽤的位置，⽐如统计代码跟页⾯的加载没有任何关系，必须放在页⾯最底部；
10.    尽量不要使⽤框架；
11.    为表单添加<lable>标签；
12.    所有页⾯都需要定义背景颜⾊，系统默认值是可以被⽤户随意更改的
13.    图⽚采⽤gif, jpg,png压缩格式，以减⼩页⾯下载数据量，<img>标记要有width,height属性
第三部分：表现（ CSS ）
1.        CSS⽂件作为外部链接，在页⾯的<head>区链接调⽤，位置在元标记结束下⼀⾏，JS调⽤的上⼀⾏。视情况可以在页⾯中书写内联样式<style></style>，⽤于定义此页⾯特殊的样式和覆盖CSS样式库中⼀定需要更改覆盖的样式，位置在外部链接样式表的下⼀⾏；
2.        CSS⽂件视重要程度添加注释，⽅法为 /* 注释 */ ；
3.      CSS选择器命名书写规范：
#idname , .classname {
width: % 或px\em;
height: % 或px\em;
margin:
选项卡htmljs
border:
padding:
--------------------------------------------------------- 容器长宽确定
background: #fff url() repeat left bottom fixed 1px 2px;
color:
"FONT-SIZE: 9.5pt;">宋体 ”, Arial, Helvetica,sans-serif;
font-size:
line-height:
--------------------------------------------------------- 容器内容格式
display:
visibility:
overflow:
position:
top:
dw怎么设置按钮样式right:
bottom:
left:
float:
clear:
--------------------------------------------------------- 容器布局
jdk解压后怎么安装
}
每⼀个属性结尾都必须写分号，其中有的值如果不需要，可以不写，⼤体上是这样的顺序，也符合思考的顺序。
4.      有⼏点注意事项：
a)      "FONT-SIZE: 9.5pt;">必须以sans-serif字体做结尾；
b)      减少样式数量，尽量重复使⽤；
c)      必须清除float；
d)      单位：使⽤像素（px）；
e)      颜⾊值：使⽤# RRGGBB 格式
第四部分： UE 指导原则
1.        ⽹站LOGO的视觉统⼀，⽹站主体的视觉风格、⽂本颜⾊、链接颜⾊、修饰图⽚风格以及按钮和表单控件的视觉进⾏统⼀；
2.        为每⼀个页⾯设定⼀个最合适的标题<title>，使⽤户和搜索引擎⼀⽬了然知道页⾯的主题；
3.        为⼤部分页⾯加⼊元标记，即<meta>相关内容，描述页⾯属性；在最终页<link>加⼊具有亲和⼒的版权说明、免责声明、交互设计说明⽂档的链接地址；
4.        页⾯中必须有回到“⾸页”的链接——⼀般做法是将站点LOGO加上⾸页的链接，最好还是有回到⾸页的⽂字链接；
5.        如果⽹站栏⽬很多，要让⽤户知道所处的页⾯属于哪个栏⽬之下，以及很轻松的可以回到上⼀级栏⽬——标签是⼀种不错的⽅法；
6.        现在位置。如果上⼀条原则处理的很好，“现在位置”可以去掉；
7.        搜索。合理的放置搜索表单，最好在⾸屏，并且确保搜索结果的准确性；
表单设计原则 :
1.        ⾯向菜鸟和专业⽤户，填写项尽量精简，做简单的填写说明，仅放置与填写表单相关的链接，避免⽤户通过其他链接转移视线到别的地⽅，从⽽放弃填写表单
2.        清晰的验证——告诉⽤户为什么出现错误，并引导正确的填写；
3.        如果完成表单任务需要多个步骤，需要⽤图形或⽂字表明所需的步骤，以及当前正在进⾏的步骤——使⽤户知道离成功还有多远；
4.        如果可能，尽量先放置input、 textaera等需要键盘输⼊的项，再放置下拉、单选、复选等键盘操作的项，紧接着是“提交”按钮——就是说，减少键盘操作被⿏标操作打断的次数；
5.        ⽂本域允许更改内容的⽂本格式，⽐如加粗、字体⼤⼩、超链接、图⽚等等，⽽且，尽量让此内容与⽤户完成发布以后的内容格式相同；
6.        提供将表单保存为草稿的功能；
7.        设计符合习惯的表单。
个⼈总结
Web 开发的分散性和交互性，决定了 Web 开发必须遵从⼀定的开发规范和技术约定，只有每个开发⼈员都按照⼀个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调⼀致的⼯作，从⽽提⾼开发⼯作效率，提升⼯程项⽬质量。本规范并不是⼀个⼀成不变的必须严格遵守的条⽂，特殊情况下要灵活运⽤，做⼀定的变通，仅供个⼈参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。