HTML规范

#### HTML规范 ##### 细节说明 推荐使用html5的文档声 <!DOCTYPE HTML> 必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码。 <meta charset="utf-8"> title 不可缺少,控制在25个字、50个字节以内。“二级栏目 - 一级栏目 - 网站名称”。 keywords很重要,关键词,针对SEO。 注意: 5个左右,单个8汉字以内;禁忌堆砌,与网站主题无关。 description网站描述,字数尽量空制在80个汉字,160个字符以内。 建议采用响应式栅格化处理,兼容多个平台设备。 书写注释,方便程序开发嵌套。注释方式: 开始注释:<!-- 注释 --> 结束注释:<!-- /注释文案 --> 允许只有开始注释 注意: 浮动的地方不要加注释,可能导致布局错位或文字的BUG。 img添加alt属性,增加可访问性。 标签一定要正确嵌套,标签一定要闭合。 用div等标签布局;表格型数据,table首选。 代码风格采用树形结构,提高可读性;避免冗余嵌套。 模块之间必须保持独立,区块化布局,方便随意增删改,多人协作维护。 非特殊情况下,css采用外链,加在<head>之间;js文件放在页面底部</body>之前。 自定义标签或者属性,用data-开头。 需要程序单独赋值或者控制的地方尽量用独立的标签包括起来,方便添加id和其他自定义属性。 可能程序在套用时候标签之间会出现空数据,产生(冗余标签)造成多余空白间距,请一定注释声明给后端程序员注意一下,将判断包住标签。 避免元素的滚动条和body的滚动条同时出现,影响体验。 需要异步加载的地方给出加载中(loading)状态效果。 ``` html <img src="" alt="图片描述" title="图片描述"> ``` 模板 ``` 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> ```