codecamp

H-ui Html书写规范

文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/

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

  1. <!DOCTYPE HTML>

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

  1. <meta charset="utf-8">

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

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

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

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

6、采用栅格化处理,常用980栅格,1000栅格

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

开始注释:<!-- 注释 -->
结束注释:<!-- /注释文案 -->
允许只有开始注释

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

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

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

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

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

字符名称实体名
¥人民币符号:元&yen;
©版权&copy;
®注册商标&reg;
商标TM&trade;
·间隔符号&middot;
"双引号&quot;
&&符&amp;
<左尖括号(小于号)&lt;
>右尖括号(大于号)&gt;
 半角空格&nbsp;
×乘号&times;
÷除号&divide;

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

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

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

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

下面给出html模版:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  8. <title>网站标题,控制在25个字、50个字节以内</title>
  9. <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
  10. <meta name="description" content="网站描述,字数尽量空制在80个汉字,160个字符以内!">
  11. <link rel="Bookmark" href="favicon.ico" >
  12. <link rel="Shortcut Icon" href="favicon.ico" />
  13. <!--[if lt IE 9]>
  14. <script type="text/javascript" src="Lib/html5.js"></script>
  15. <script type="text/javascript" src="Lib/respond.min.js"></script>
  16. <script type="text/javascript" src="Lib/PIE_IE678.js"></script>
  17. <![endif]-->
  18. <link href="h-ui/css/H-ui.css" rel="stylesheet" type="text/css" />
  19. <link href="iconfont/iconfont.css" rel="stylesheet" type="text/css" />
  20. <link href="h-ui/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式-->
  21. <!--[if IE 6]>
  22. <script type="text/javascript" src="Lib/DD_belatedPNG_0.0.8a-min.js" ></script>
  23. <script>DD_belatedPNG.fix('.pngfix,.icon');</script>
  24. <![endif]-->
  25. </head>
  26. <body>
  27. <header>网站头部</header>
  28. <div>内容部分</div>
  29. <footer>页脚</footer>
  30. <script type="text/javascript" src="lib/jquery.min.js"></script>
  31. <script type="text/javascript" src="h-ui/js/h-ui.js"></script>
  32. </body>
  33. </html>
H-ui 概述
H-ui CSS写作注意事项
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

框架

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }