WEB前端编码规范Word文档下载推荐.docx
- 文档编号:1452662
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:43
- 大小:796.40KB
WEB前端编码规范Word文档下载推荐.docx
《WEB前端编码规范Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《WEB前端编码规范Word文档下载推荐.docx(43页珍藏版)》请在冰点文库上搜索。
2.1公司版权注释
---
文件:
XXX.html
说明:
说明本HTML是用于什么功能
作者:
李四
时间:
2016/1/30
--->
2.2网页显示字符集
简体中文:
繁体中文:
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关键字工具:
查询特定关键词的常见查询及扩展匹配。
KEYWRODS关键字最多不超过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.自动跳转。
refresh"
5;
url="
5指时间停留5秒。
5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
robots"
none"
CONTENT的参数有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/>
正确的写法为:
input……checked="
checked"
5.标签要合理嵌套
div>
<
/div>
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.九大原则
原则一:
一般要写兼容多种浏览器的网页,最省事的方法就先写适合chrome的样式,并在chrome进行调度。
测试时可以使用多种浏览器。
原则二:
逐步叠加的方式,如果需要用这个样式的模块很多,并且会存在些许的不同,千万不要把样式一步写到位,最好把框架性的先写好,细节性的留到第二个步骤,甚至第三个步骤,当然最好步骤不要超过三步,这样很不利于维护。
由若干个二级定义对一级定义进行补充,这样的既可以减少代码,又可以减少繁多的CLASS命名。
不要轻易修改共用的CSS,否则可能会影响其它页面。
在每个一级CSS前添加注释,说明哪些页面使用了该CSS。
原则三:
从总到分。
顺序应该是这样:
总体需要用到的>
结构>
模块>
二级模块>
细节;
并且这个文档最不容易修改的处于最上端,频繁用于修改的在末端。
最忌讳即兴发挥,这样写出的东西经不起推敲,稍有变化就要忙得乱成一团。
结构性的东西应该慎重精细。
原则四:
尽量把能够放在一组的小图标或者图片放在一个图片文件里,这样的好处有很多。
1、图片文件的总量会变小;
2、利于下载,太多的小图片下载效果是不理想的,常常会发现这个图片出来,那个没出来,这样在写样式的时候只需要写一个总体的,对于具体的要显示的只需要标一个位置,非常省时间,样式也很精炼;
3、显而易见,这样做非常便于管理,替换或新增的时候工作量很小。
原则五:
切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。
把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。
不光要控制图片文件的多少,还要考虑到这样切会不会造成页面增加许多额外的代码。
原则六:
图片使用能名称表达图片意义的名词命名,尽量不要使用编号命名。
原则七:
涉及多行多列的特别是列宽有不固定的,坚决用表格,千万不要为了DIV而DIV。
多个图片规则排列时,可以使用<
原则八:
尽可能不把样式直接写到元素的标签里(除非这个样式出现的几率特别小,有相当程度的偶然性)。
原则九:
尽量不要用ID来定义或索引样式,ID的唯一性比较高,且用ID索引样式效率非常低而且兼容性的问题也比较明显。
6.文件命名原则
6.1前台文件组织
在前台页面文件中,每个大类功能模块(子系统)单独创建一个文件夹,使用与之相关的有意义的英文名词命名。
例如有一个系统包括后台管理(admin)、前台商城(shop)、会员中心(member)和商家中心(store)等子系统,文件夹组织:
每个子系统中应该包含一个缺省的html文件,文件名统一用index.html,即当用户缺省访问该目录时,自动加载该页面。
公用页面(如登录login.html、页头header.html、页脚footer.html、导航navigation.html、菜单menu.html、信息/错误提示message.html等),可以统一放在common目录中。
6.2页面命名规则
具有管理功能的页面,如用名、角色、设备、日志、文章等的管理,可以归纳为列表(list.htm)、新建(add.html)、编辑(edit.html)等几类操作,所以在页面组织时,每类模块单独创建一个文件夹,使用能够表达模块意义的英文名词命名,并在其中分别创建list.html、add.html、edit.html等文件,对应于内容列表、添加、编辑等操作。
示例:
其它说明:
1.在列表页面里统一使用“四栏式”显示风格,即列表页面里必须包括模块目录/位置提示、工具栏(含添加、编辑、删除、刷新、查询等操作控件)、表格、分页操作等部分。
2.表格用于显示查询内容,在list.html打开时,必须默认加载一定的记录;
表格栏目仅显示用户常用或关心的字段;
在显示时必须对表格内容进行必要的格式处理;
对记录常用的操作可以放置于操作栏内(如上图中的操作栏内放置有编辑和删除两个操作按钮)。
3.表格可以统一使用easyuidatagrid或bootstapdatatables。
6.3.资源文件的命名原则
资源文件包括css、js、图片等内容。
所有资源文件统一存储在web根目录resource文件夹中。
每个子系统(大类)文件夹命名规则同6.1规则。
每个子系统文件夹中分别包括css、js和images,示例:
多个子系统公共使用的资源,统一存储在common文件夹中,如常用的js操作,可以命名为generic.js,放置在common/js/generic.js。
6.3图片命名规则
图片分成两部分,一是网页设计时使用的静态资源,通常不会因系统的运行而发生变化,另一类是程序生成、用户上传、终端上传的图片。
(1)静态图片存储在resources\大类目录\images中,使用能表达图片意义的英文单词命名,不能使用图片编号命名。
网面使用的小图标,可以放置在一个图片文件中,使用css裁切和背景方式显示在页面中。
(2)动态图片存储在resources\upload目录中,在其中创建分类图片目录。
例如,与系统相关的图片存储在system目录中,设备监控相关图片存储在management中等。
为了避免同一文件夹中文件数量限制,在分类目录中,按上传日期分成不同的次级目录,命名规则为上传文件所在的yyyyMM(年度月份),其中月份使用两位数字表示。
上传的图片统一使用GUID标识进行命名,即在上传时,由接收的java程序自动生成guid编号+.图片扩展名进行命名。
注意:
保存图片时,文件扩展名必须保持不变。
7.常用HTML标识符
HTML标记一览:
标记
类型
译名或意义
作用
备注
文件标记
HTML>
●
文件声明
让浏览器知道这是HTML文件
HEAD>
开头
提供文件整体资讯
标题
定义文件标题,将显示于浏览顶端
BODY>
本文
设计文件格式及内文所在
排版标记
--注解-->
○
说明标记
为文件加上说明,但不被显示
P>
段落标记
为字、画、表格等之间留一空白行
BR>
换行标记
令字、画、表格等显示于下一行
HR>
水平线
插入一条水平线
CENTER>
居中
令字、画、表格等显示于中间
反对
PRE>
预设格式
令文件按照原始码的排列方式显示
DIV>
区隔标记
设定字、画、表格等的摆放位置
NOBR>
不折行
令文字不因太长而绕行
WBR>
建议折行
预设折行部位
字体标记
STRONG>
加重语气
产生字体加粗BOLD的效果
B>
粗体标记
产生字体加粗的效果
EM>
强调标记
字体出现斜体效果
I>
斜体标记
TT>
打字字体
COURIER字体,字母宽度相同
U>
加上底线
H1>
一级标题标记
变粗变大加宽,程度与级数反比
H2>
二级标题标记
将字体变粗变大加宽
H3>
三级标题标记
H4>
四级标题标记
H5>
五级标题标记
H6>
六级标题标记
FONT>
字形标记
设定字形、大小、颜色
BASEFONT>
基准字形标记
设定所有字形、大小、颜色
BIG>
字体加大
令字体稍为加大
SMALL>
字体缩细
令字体稍为缩细
STRIKE>
画线删除
为字体加一删除线
CODE>
程式码
字体稍为加宽如<
KBD>
键盘字
字体稍为加宽,单一空白
SAMP>
范例
VAR>
变数
斜体效果
CITE>
传记引述
BLOCKQUOTE>
引述文字区块
缩排字体
DFN>
述语定义
ADDRESS>
地址标记
SUB>
下标字
SUP>
上标字
指数(平方、立方等)
清单标记
OL>
顺序清单
清单项目将以数字、字母顺序排列
UL>
无序清单
清单项目将以圆点排列
LI>
清单项目
每一标记标示一项清单项目
MENU>
选单清单
清单项目将以圆点排列,如<
DIR>
目录清单
DL>
定义清单
清单分两层出现
DT>
定义条目
标示该项定义的标题
DD>
定义内容
标示定义内容
表格标记
TABLE>
设定该表格的各项参数
CAPTION>
表格标题
做成一打通列以填入表格标题
TR>
表格列
设定该表格的列
TD>
表格栏
设定该表格的栏
TH>
表格标头
相等于<
,但其内之字体会变粗
表单标记
FORM>
决定单一表单的运作模式
TEXTAREA>
文字区块
提供文字方盒以输入较大量文字
INPUT>
输入标记
决定输入形式
SELECT>
选择标记
建立POP-UP卷动清单
OPTION>
选项
每一标记标示一个选项
图形标记
IMG>
用以插入图形及设定图形属性
连结标记
A>
加入连结
BASE>
基准标记
可将相对URL转绝对及指定连结目标
框架标记
FRAMESET>
框架设定
设定框架
FRAME>
框窗设定
设定框窗
IFRAME>
页内框架
于网页中间插入框架
IE
NOFRAMES>
不支援框架
设定当浏览器不支援框架时的提示
影像地图
MAP>
影像地图名称
设定影像地图名称
AREA>
连结区域
设定各连结区域
多媒体
BGSOUND>
背景声音
于背景播放声音或音乐
EMBED>
加入声音、音乐或影像
其他标记
MARQUEE>
走动文字
令文字左右走动
BLINK>
闪烁文字
NC
ISINDEX>
页内寻找器
可输入关键字寻找于该一页
META>
开头定义
LINK>
关系定义
定义该文件与其他URL的关系
STYLESHEET
STYLE>
样式表
控制网页版面
SPAN>
自订标记
独立使用或与样式表同用
·
●表示该标记属围堵标记,即需要关闭标记如<
/标记>
○表示该标记属空标记,即不需要关闭标记。
IE表示该标记只适用于INTERNETEXPLORER。
NC表示该标记只适用于NETSCAPECOMMUNICATOR。
反对表示该标记不为W3C所赞同,通常这标记是IE或NC自订,且己为众所支持,只是HTML标准中有其它同功能或更好的选择。
弃用表示该标记己为W3C所
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 前端 编码 规范