web开发规范 - html书写规范
head区代码规范
head区是指HTML代码的和之间的内容。
更多meta标签请访问这篇文章
必须加入的标签
a) 公司版权注释 <!— The site is designed by EHM,Inc 07/2005 —>
b) 网页显示字符集
简体中文:
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>
繁体中文:
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
英语:
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
c) 网页制作者信息 <META name=“author” content=“wangjiabinweb@163⋅com”>
d) 网站简介 <META NAME=“DESCRIPTION” CONTENT=“这是一些简介”>
e) 搜索关键字 <META NAME=“keywords” CONTENT=“xxxx,xxxx,xxx,xxxxx,xxxx,”>
f) 网页的css规范 <LINK href="…/css/style.css" rel=“stylesheet” type=“text/css”>
g) 网页标题 <title></title>
可以选择加入的标签
a) 设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
<META HTTP-EQUIV=“expires” CONTENT=“Wed, 26 Feb 1997 08:21:57 GMT”>
b) 禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV=“Pragma” CONTENT=“no-cache”>
c) 用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV=“Window-target” CONTENT="_top">
d) 自动跳转。
<META HTTP-EQUIV=“Refresh” CONTENT=“5;URL链接”> 5指时间停留5秒
e) 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
<META NAME=“robots” CONTENT=“none”>
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
f) 收藏夹图标
g) 所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE=“JavaScript” SRC=“script/xxxxx.js”></SCRIPT>
h) 附<body>标签:
<body>标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF">
字体
在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 <font size=?> 标记。
在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial 两种字体。一般使用中文宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt 和14.7px 的字号比较合适。
为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br> 来人工干预分段。
不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
请不要在网页中连续出现多于一个的 也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%。
排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记。
注意,一般情况下,请不要省略 </p> 结束标记 。
链接
网站中的链接路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:<a href=”aboutus/index.htm”> 而应该这样:<a href=”aboutus/”>,所有内页指向首页的链接写成<a href=”/”>。
在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:void(null)”代替原来的“#”标记。
表格
1px表格 style=“border-collapse: collapse”
实例如下:
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
设置亮、暗边框颜色
表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性可以对表格样式设置。
<table border=“1” width=“500” bordercolorlight="#000000" bordercolordark="#FFFFFF">
在写 <table> 互相嵌套时,严格按照的规范,对于单独的一个<table>来说,<table><tr>对齐,<td> 缩进两个半角空格,<td> 中如果还有嵌套的表格,<table>也缩进两个半角空格,如果<td>中没有任何嵌套的表格,</td> 结束标记应该与 <td> 处于同一行,不要换行。
如我们注意在源代码中不应有这样的代码:
<td><img src=”…/images/sample.gif”>
</td>
而应该是这样的:
<td><img src=”…/images/sample.gif”></td>
这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写:
<td><img src=”…/images/sample.gif”> </td>
一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody>标记,以便能够使这个大表格分块显示。
下载速度
首页Flash 网页大小应限定在 200K 以下,尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右,尽可能的使用背景颜色替换大块同色图片。
include
asp标准写法 <!–#include file=“inc/index_top.asp” -->
jsp 标准写法 <%@ include file="…/inc/index_top…jsp" %>
Alt和Title
Alt与Title都是提示性语言标签,请注意它们之间的区别。
在我们浏览网页时,当鼠标停留在图片对象或文字链接上时,在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
用法如下:
<p Title="给链接文字提示">文字</p>
<a href="#" Title="给链接文字提示">文字</a>
<img src="图片.gif" alt="给图片提示">
缓存
网页不会被缓存
// HTM网页
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
// ASP网页
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
clip_image005[1]Response.cachecontrol = "no-cache"
浏览器兼容性
创建站点时,应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下,尽可能将站点设计为具有最大的浏览器兼容性。
目前使用的 Web 浏览器有二十多种,大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户,但您应明确并不是每个人都在使用这两种浏览器的最新版本。
您的站点越复杂(在布局、动画、多媒体内容和交互方面),跨浏览器兼容的可能性就越小。例如,并非所有的浏览器都可以运行JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示,但比起有效地使用图形、布局和交互的页面,这样的页面在美感上可能要差得多。所以,应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。
所有的HTML 标签的属性都要用单引号或者双引号括起,即我们应该写 <a href=”url”> 而不 是 <a href=url>。
web开发规范 - html书写规范相关推荐
- java的书写规范_java书写规范以及技巧
一. Java命名的一般性指导 1. 类名首字母应该大写.属性(成员变量).方法.对象变量以及所有标识符(如形式参 数.实际参数.局部变量)的首字母应小写,其中包含的所有单词都应紧靠在一起,而 且大写 ...
- css命名规范和书写规范
1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(f ...
- java的书写规范_JAVA书写规范
命名规范 1.一般概念 1.尽量使用完整的英文描述符 2.采用适用于相关领域的术语 3.采用大小写混合使名字可读 4.尽量少用缩写,但如果用了,必须符合整个工程中的统一定义 5.避免使用长的名字(小于 ...
- html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
- java 代码书写规范_代码书写规范和命名规范
上一篇给大家分享了一下,关于文档编写的几个概念.这篇文章阐述如果编写代码书写规范以及命名规范文档.[以java语言为例] 1.代码书写规范 代码书写规范,能够让不同的人,写出相同风格的代码.很多人都看 ...
- (16)WEB前端开发规范之HTML规范
一.WEB前端开发规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本 ...
- 前端代码开发规范。web开发规范。web开发注意事项。前端开发如何写出更规范的代码
一.图片观看: 二.文字描述: 1,web开发基本原则: 1.结构html,样式css,行为js:三者要分离,尽量确保文档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里; ...
- Domino Web开发规则之一:Notes命名规范
所有的设计元素的命名都分成两部分,名称和别名,规定名称用中文命名,别名用英文,别名尽量使用简写,以WEB开发时不会产生较长的URL为前提,提高HTTP Request的响应速度.中文名称前面加上字母A ...
- 前端开发规范和开发文档的书写规范
1. 前端的开发规范 目录构建的规范 命名原则: 简洁 比如: src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包 不使用复数 比如: 不使用 imgs docs ...
- html格式标准写法,web前端HTML、CSS书写规范(必记)
1.规范目的: 使开发流程规范化,代码简洁.美观. 2.文件规范: 文件名用英文单词,多个单词用驼峰命名法. 例如:MaginLeft... 一些浏览器会将含有这些词的作为广告拦截,文件命名.ID.C ...
最新文章
- 1.8 其他正则化方法-深度学习第二课《改善深层神经网络》-Stanford吴恩达教授
- mysql 远程攻击_gopher 协议攻击内网 mysql
- Python全栈开发:socket
- 关于数据库中的锁,你不知道的是...
- C#_未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
- 让SQL2000的查询分析器能够直接编辑SQL2005的视图或存储过程
- 设置eclipse主题风格和取消黑色主题(详细)
- php 连接 sybase,thinkphp连接sybase数据库
- c语言编写个人收支管理系统,个人收支管理系统
- LeetCode 1055. 形成字符串的最短路径
- Typora完整教程
- 管理信息系统复试——三、管理信息系统战略规划与开发方法
- 12位中年程序员:代码一敲十年,收入虽高前途摇摆
- python画xy轴_用python建立两个Y轴的XY曲线图方法
- pr中轨道遮罩键的使用
- 工作流引擎WorkFlow开源项目
- 仿牛客社区项目笔记-帖子模块(核心)
- 卡诺图和Apple Watch的第一次亲密接触
- 超详细!Vue-coderwhy个人学习笔记(二)(Day3)
- android 点击图片动画效果,Android仿微信图片点击全屏效果