首页 > 代码库 > Html书写规范

Html书写规范

2024-07-31 22:24:12   219人阅读

<style type="text/css">#cnblogs_post_body ol {padding-left: 0px;}body {line-height: 1.6;}body, th, td, button, input, select, textarea {font-family: \5fae\8f6f\96c5\9ed1,arial;_font-family: arial,\5b8b\4f53;font-size: 13px;color: #333;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;}table {width: 100%;empty-cells: show;background-color: transparent;border-spacing: 0;}.table-bordered {border: 1px solid #ddd;border-collapse: separate;border-left: 0;}.table-bordered th, .table-bordered td {border-left: 1px solid #ddd;}.table td {text-align: left;}.label-important, .badge-important {background-color: #b94a48;}.label, .badge {display: inline-block;padding: 2px 4px;font-size: 11.844px;font-weight: bold;line-height: 14px;color: #fff;text-shadow: 0 -1px 0 rgba(0,0,0,0.25);white-space: nowrap;vertical-align: baseline;}.label {border-radius: 3px;}.prettyprint {padding: 8px;background-color: #f7f7f9;border: 1px solid #e1e1e8;}pre {display: block;padding: 9.5px;margin-bottom: 10px;font-size: 14px;line-height: 20px;word-break: break-all;word-wrap: break-word;white-space: pre-wrap;border-radius: 4px;color: #333;}pre .tag {color: #007;}pre .value, pre .tag .value {color: #d14;}code, pre {font-family: monaco,menlo,consolas,"Courier New",monospace;}.pl-20 {padding-left: 20px;}.prettyprint.linenums {box-shadow: inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0;}pre ol.linenums {list-style: decimal outside none;margin: 0 0 0 33px;}pre ol.linenums li {padding-left: 12px;color: #bbb;line-height: 18px;text-shadow: 0 1px 0 #fff;}pre .attr {color: #088;}</style>

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 http-equiv="X-UA-Compatible" content="IE=edge" /> 
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 
  7. <title>网站标题，控制在25个字、50个字节以内</title> 
  8. <meta name="keywords" content="关键词,5个左右,单个8汉字以内"> 
  9. <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！"> 
  10. <!--[if lt IE 9]> 
  11. <script type="text/javascript" src="plug/html5.js"></script>
  12. <![endif]--> 
  13. <link href="templates/lfsp/css/lfsp.css" rel="stylesheet" type="text/css" /> 
  14. <link href="templates/lfsp/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式-->
  15. <!--[if IE 6]> 
  16. <script type="text/javascript" src=http://www.mamicode.com/"plug/DD_belatedPNG_0.0.8a-min.js" ></script> 
  17. <script>DD_belatedPNG.fix(‘.pngfix,.icon‘);</script> 
  18. <![endif]--> 
  19. </head> 
  20. <body>
  21. <header>网站头部</header>
  22. <div>内容部分</div>
  23. <footer>页脚</footer>
  24. <script type="text/javascript" src="plug/jquery.min.js"></script> 
  25. <script type="text/javascript" src="templates/lfsp/lfsp.js"></script> 
  26. </body> 
  27. </html>

<参考：http://lfsp.btwlo.com/htmlStructure.html>

Html书写规范


联系
我们