WEB前端编码规范Word文档格式.docx
《WEB前端编码规范Word文档格式.docx》由会员分享，可在线阅读，更多相关《WEB前端编码规范Word文档格式.docx（30页珍藏版）》请在冰豆网上搜索。
<
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
2.网站head区代码规范：
head区是指<
和<
/head>
之间的内容。
必须加入的标签：
2.1公司版权注释
!
---
文件：
XXX.html
说明：
说明本HTML是用于什么功能
作者：
李四
时间：
2016/1/30
--->
2.2网页显示字符集
简体中文：
<
charset=utf-8"
>
繁体中文：
charset=BIG5"
英语：
charset=iso-8859-1"
2.3作者与版权信息
此处用于存储开发公司版权信息，如：
metaname="
author"
"
copyright"
版权所有"
/>
2.4网页的css,javascript规范
在引用CSS和JS文件时，统一放置在<
中，先放CSS引用，再放js引用。
linkhref="
style/style.css"
rel="
stylesheet"
type="
text/css"
html中javascript的书写：
scriptlanguage="
javascript"
text/javascript"
/script>
2.5网页标题
Title中使用“-”分割，如：
设备管理平台-运维系统。
2.6设置搜索关键词
keywords"
"
GoogleAdWords关键字工具：
查询特定关键词的常见查询及扩展匹配。
KEYWROD关S键字最多不超过5个建议长度：
小于等于100个汉字，如果使用的网页编码是UTF-8，不同关键字之间用英文“,”分隔。
2.7网站简介
description"
description是描述网页内容的，因此最好是可以用一句话来概括本网页的主题内容。
description不要超过255个字符，搜索引擎索引一般都会索引Description的前255个字符，因此，这255个字符是做搜索引擎优化的关键。
如果使用的网页编码是UTF-8，那么在Description中的标点符号最好都使用英文，例如英文的逗号、句号等。
如果是中文的话，那么就使用中文的标点符号即可。
2.8其它标签[非必需]
1.设定网页的到期时间。
一旦网页过期，必须到服务器上重新调阅，这样有利于页面信息。
expires"
wed,26feb200908:
21:
57gmt"
2.禁止浏览器从本地机的缓存中调阅页面内容。
pragma"
no-cache"
3.用来防止别人在框架里调用你的页面。
window-target"
_top"
4.自动跳转。
5指时间停留5秒。
5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
robots"
none"
CONTEN的T参数有all,none,index,noindex,follow,nofollow。
默认是all。
6.收藏夹图标
linkrel="
shortcuticon"
href="
/favicon.ico"
image/x-icon"
图片大小
16px*16px
7.订阅RSS浏览
是一种描述和同步网站内容的格式。
用户可以通过RSS阅读器订阅。
linkhref=”abc.aspx”title=”新现代教育网”type=”application/rss+xml”rel=”alternte”/>
2.9完整示例
3.html中元素的书写：
body>
区域标签
3.1段落
段落使用<
p>
标签进行定义
Thisisaparagraph<
/p>
3.2标题
即正文标题一般用<
h1>
/h1>
标签，最好和title标签的内容有关联。
标题使用<
至<
h6>
标签进行定义。
定义最大的标题。
定义最小的标题。
Thisisaheading<
h2>
/h2>
h3>
/h3>
h4>
/h4>
h5>
/h5>
/h6>
文章中的小标题一定也要加粗。
可以把网页中的重要内容做成这样。
用户不用登陆这个网页就可看到更新的内容。
3.3字体的设置标签
换行：
br/>
字体修饰不要使用<
font>
strong>
等进行标注，一般使用css样式进行字体样式排版
3.4注意事项
1.<
为了保证浏览器的兼容性，必须设置页面背景：
bodybgcolor="
#FFFFFF"
2.关闭所有的标签
。
即：
一定要有结束标记。
3.属性值用双引号“”括起来,属性统一使用小写
例如：
imgheight="
60"
width="
760"
src="
images/logo.gif"
4.给所有的属性赋值
正确的写法为：
input⋯⋯checked="
checked"
5.标签要合理嵌套
7.特殊字符用编码标识
如"
用"
&
lt;
表示，"
>
gt;
表示。
8.网页中图片优化
一定要加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本。
内容最好与关键词相关。
如：
imgsrc="
alt="
网站LOGO"
一些小图标最好用.png或.gif格式图片，比如说箭头，文章列表前的图标等，在CSS中做成背景。
这些小图标最好做一张图片，用CSS来定位。
9.用结构化的元素输出内容
ul>
li>
新现代<
/li>
/ul>
或者使用
dl>
dt>
/dt>
dd>
/dd>
/dl>
10．标签要有缩进，便于代码阅读修改。
11、tr、td必须定义在table之间；
table>
tbody>
tr>
td>
⋯⋯<
/td>
/tr>
/tbody>
/table>
注：
tbody绝对不可以省略。
12、button按钮必须定义在form之间，否则netscape不支持；
formaction=”⋯⋯”method=”post”>
inputtype=”button”name=”but”value=”back”>
/form>
13、html注释
（1）每一独立部分都要表明注释。
—右边begin-->
--右边end-->
—左边begin-->
—左边end-->
块代码的注释
—头部begin-->
大量代码块，使用此种样式，方便阅读
—头部end-->
（2）注释要用描述性语言，能够清楚的表达每一部分的意思
4.HTML元素的排序规则
能够使用的HTML元素包括：
div、p、ul、table、span、input、select等。
基本上div、table、ul、p都属于结构性比较强的元素，而span、input则是比较弱的元素，因此不允许有span嵌套div、table等等的情况出现，span可以嵌套input,可以嵌套span。
在写页面的时候可以先不考虑界面呈现，按照这样的规则，把数据直接绑定到HTML元素的节点上。
5.九大原则
原则一：
逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。
由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。
不要轻易修改共用的CSS，否则可能会影响其它页面。
在每个一级CSS前添加注释，说明哪些页面使用了该CSS。
原则三：
从总到分。
顺序应该是这样：
总体需要用到的＞＞结构＞＞模块＞＞二级模块＞＞细节；
并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。
最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。
结构性的东西应该慎重精细。
原则四：
尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。
1、图片文件的总量会变小；
2、利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；
3、显而易见，这样做非常便于管理，替换或新增的时候工作量很小。
原则五：
切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。
把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。
不光要控制图片文件的多少，还要考虑到这样切会不会造成页
升级会员 