WEB前端编码规范Word文档格式.docx

上传人:b****2 文档编号:14873195 上传时间:2022-10-25 格式:DOCX 页数:30 大小:79.88KB
下载 相关 举报
WEB前端编码规范Word文档格式.docx_第1页
第1页 / 共30页
WEB前端编码规范Word文档格式.docx_第2页
第2页 / 共30页
WEB前端编码规范Word文档格式.docx_第3页
第3页 / 共30页
WEB前端编码规范Word文档格式.docx_第4页
第4页 / 共30页
WEB前端编码规范Word文档格式.docx_第5页
第5页 / 共30页
点击查看更多>>
下载资源
资源描述

WEB前端编码规范Word文档格式.docx

《WEB前端编码规范Word文档格式.docx》由会员分享,可在线阅读,更多相关《WEB前端编码规范Word文档格式.docx(30页珍藏版)》请在冰豆网上搜索。

WEB前端编码规范Word文档格式.docx

<

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、显而易见,这样做非常便于管理,替换或新增的时候工作量很小。

原则五:

切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。

把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。

不光要控制图片文件的多少,还要考虑到这样切会不会造成页

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 工程科技 > 材料科学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1