Html书写规范-网站建设-郴邦科技-网络营销知名品牌-郴邦科技

首页
>
网建知识
>
Html书写规范

Html书写规范: 发布时间：2018/10/10 来源：郴邦科技浏览：96

1、推荐使用html5的文档声明。

	
	
		
		
			<!DOCTYPE HTML>

2、必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。

	
	
		
		
			<meta charset="utf-8">

3、title 不可缺少，控制在25个字、50个字节以内。“二级栏目 - 一级栏目 - 网站名称”。

4、keywords很重要，关键词，针对SEO。

注意： 5个左右,单个8汉字以内；禁忌堆砌，与网站主题无关。

5、description网站描述，字数尽量空制在80个汉字，160个字符以内。

6、建议采用响应式栅格化处理，兼容多个平台设备。

7、书写注释，方便程序开发嵌套。注释方式：

开始注释：
结束注释：
允许只有开始注释

注意：浮动的地方不要加注释，可能导致布局错位或文字的BUG。

8、img添加alt属性，增加可访问性。

	
	
		
		
			<img src="" alt="图片描述" title="图片描述">

9、带有实体名称的 ASCII 实体或特殊字符要使用实体名。

注意：实体名称对大小写敏感。

字符	名称	实体名
￥	人民币符号：元	¥
©	版权	©
®	注册商标	®
?	商标TM	™
·	间隔符号	·
"	双引号	"
&	&符	&
<	左尖括号（小于号）	<
>	右尖括号（大于号）	>
	半角空格
×	乘号	×
÷	除号	÷

10、标签一定要正确嵌套，标签一定要闭合。

11、用div等标签布局；表格型数据，table首选。

12、代码风格采用树形结构，提高可读性；避免冗余嵌套。

13、模块之间必须保持独立，区块化布局，方便随意增删改，多人协作维护。

14、非特殊情况下，css采用外链，加在<head>之间；js文件放在页面底部</body>之前。

15、自定义标签或者属性，用data-开头。

16、需要程序单独赋值或者控制的地方尽量用独立的标签包括起来，方便添加id和其他自定义属性。

17、可能程序在套用时候标签之间会出现空数据，产生（冗余标签）造成多余空白间距，请一定注释声明给后端程序员注意一下，将判断包住标签。

18、避免元素的滚动条和body的滚动条同时出现，影响体验。

19、需要异步加载的地方给出加载中（loading）状态效果。

下面给出html模版：


	
	
		<!DOCTYPE HTML> 
	

	
		<html> 
	

	
		<head> 
	

	
		<meta charset="utf-8"> 
	

	
		<meta name="renderer" content="webkit|ie-comp|ie-stand"> 
	

	
		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	

	
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />  
	

	
		<title>网站标题，控制在25个字、50个字节以内</title>  
	

	
		<meta name="keywords" content="关键词,5个左右,单个8汉字以内">  
	

	
		<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">  
	

	
		<link rel="Bookmark" href="favicon.ico" >  
	

	
		<link rel="Shortcut Icon" href="favicon.ico" />  
	

	
		<!--[if lt IE 9]>  
	

	
		<script type="text/javascript" src="Lib/html5.js"></script> 
	

	
		<script type="text/javascript" src="Lib/respond.min.js"></script> 
	

	
		<![endif]-->  
	

	
		<link href="h-ui/css/H-ui.css" rel="stylesheet" type="text/css" /> 
	

	
		<link href="lib/Hui-iconfont/1.0.9/iconfont.css" rel="stylesheet" type="text/css" /> 
	

	
		<link href="h-ui/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式--> 
	

	
		<!--[if IE 6]>  
	

	
		<script type="text/javascript" src="Lib/DD_belatedPNG_0.0.8a-min.js" ></script> 
	

	
		<script>DD_belatedPNG.fix('.pngfix,.icon');</script>  
	

	
		<![endif]-->  
	

	
		</head>  
	

	
		<body> 
	

	
		<header>网站头部</header> 
	

	
		<div>内容部分</div> 
	

	
		<footer>页脚</footer> 
	

	
		<script type="text/javascript" src="lib/jquery.min.js"></script>  
	

	
		<script type="text/javascript" src="h-ui/js/h-ui.js"></script>  
	

	
		</body> 
	

	
		</html>