• 欢迎访问ByWei.Cn,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,加入百味博客 软件定制QQ群
  • 已升级为最新版主题,并将持续优化改造中,支持说说碎语功能,可像添加文章一样直接添加说说,博客主题升级啦
  • 感谢您百度求点赞啊!百度网址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏百味博客吧
  • 博主热烈欢迎 软件定制开发 联系:http://www.bywei.cn

html代码书写规范文档

Web前端 百味博客 10年前 (2013-04-08) 1867次浏览 0个评论 扫描二维码
  1. 文档类型声明及编码:统一为html5声明类型<!DOCTYPE html>,编码统一为<meta charset=”utf-8″ />;书写时实现层次分明的缩进,建议统一使用TAB键进行缩进。
    目的:统一性和网站提高开发合作效率。
  2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部( </body>之前 );
  3. 所有编码均遵循xhtml标准,标签必须闭合,包括br (<br />),hr(<hr />)等;属性值必须用双引号包括,且写完整,如checked=”checked”;
    注意:在html5中,以上标签不再有闭合的了(如:<br><hr><base target=”_blank”>)
  4. css使用<link href=”css/style.css” rel=”stylesheet” />,js使用<script src=”js/jquery.js”></script>在html5中 type=”text/css”和type=”text/javascript”不再必要!
    页面统一的新建html文件代码如下:

    01 <!DOCTYPE HTML>
    02 <html>
    03 <head>
    04 <meta charset="utf-8">
    05 <title>新建html页面的代码结构</title>
    06 <meta name="keywords" content="" />
    07 <meta name="description" content="" />
    08 <link href="css/style.css" rel="stylesheet"/>
    09 </head>
    10 <body>
    11
    12 <script src="http://pic.lvmama.com/js/common/losc.js"></script>
    13 </body>
    14 </html>
  5. 在页面中尽量避免使用style属性,如:style=”…”;
  6. 书写链接地址时,必须避免重定向,例如:href=”http://www.lvmama.com/”, 即须在URL地址后面加上“/”;
  7. 给区块代码及重要功能(比如循环)加上注释,方便后台添加功能;
  8. 特殊符号使用:尽可能使用代码替代:比如 <(&lt;) & >(&gt;) & 空格( &nbsp;)等等;
  9. 充分利用无兼容性问题的html自身标签,比如span, em, strong, optgroup, label等等;需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置, 如果没有,可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;
  10. 语义化html,如 标题根据重要性用h1~h6 (同一页面只能有一个h1),段落标记用p,列表用ul;
  11. HTML应在保证弹性的基础上尽量减少嵌套层数,尽可能减少div嵌套,如:
    01 <div>
    02   <div>
    03   欢迎访问XXX, 您的用户名是<div>用户名</div>
    04   </div>
    05 </div>
    06 完全可以用以下代码替代:
    07 <div>
    08   <p>
    09   欢迎访问XXX, 您的用户名是<span>用户名</span>
    10   </p>
    11 </div>;
  12. 必须为含有描述性表单元素(input, textarea)添加label,如:
    1 <p>姓名:<input type="text" id="name" name="name" /></p>
    2 须写成:
    3 <p><label for="name">姓名:</label><input type="text" id="name" /></p>
  13. 重要图片必须加上alt属性;给重要的元素和截断的元素加上title;
  14. 使用table标签时(尽量避免使用table标签),请不要用width/height/cellspacing/cellpadding等 table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如 thead,tr,th,td,tbody,tfoot,colgroup,scope;
  15. 书写页面过程中,请考虑向后扩展性;

百味博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:html代码书写规范文档
喜欢 (0)
[微信扫一扫]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址