html代码规范

最新推荐文章于 2022-07-10 00:46:32 发布

猫晓四

最新推荐文章于 2022-07-10 00:46:32 发布

阅读量462

点赞数 1

文章标签： html

html代码规范

基本原则

简洁、清晰、容易维护
项目代码风格一致

整体规范

大小写

如无特殊说明，统一用小写字母

good：

<a href="...">...</a>

bad：

<A HREF="...">...</A>

缩进

嵌套的元素必须缩进
用2个空格在行首缩进，保证在所有环境下获得一致展现（如习惯敲tab缩进，需IDE设置tab为2个空格）

good：

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

bad：

<!DOCTYPE html>
<html>
<head>
</head>
</html>

页面规范
页面整体结构
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="gb2312" />
    <link rel="stylesheet" href="" charset="utf-8" />
    <title>Page title</title>
    <style>
        ...
    </style>
  </head>
  <body>
    <div id="header">
      页头
    </div>
    <div id="content">
      主体
    </div>
    <div id="footer">
      页尾
    </div>
    <script charset="utf-8" src="..."></script>
    <script>
        ...
    </script>
  </body>
</html>
页面区块说明
页头
 
 doctype统一使用 <!DOCTYPE html>

   
   
    
    元素设置lang
   
   
用meta元素表明当前页面字符集
css
 
 css一般位于页首
link元素外链文件时，需标明字符集
js
 
 js一般放于页尾
script元素外链文件时，需标明字符集
结构、样式、行为保持分离
尽量用外联文件引入css和js
good:
<link rel="stylesheet" href="page.css" charset="utf-8" />
 ...
<div class="mod"></div>
<div id="mod"></div>
 ...
<script charset="utf-8" src="page.js"></script>
如有必要，再style，script标签引入行内css、js
better:
<style>
  .mod-xx {
    width: 20px;
  }
</style>
<div class="mod-xx"></div>
<div id="mod"></div>
<script>
  $("#mod").on('click', function () {
    ...
  });
</script>
如有必要，再css、js直接写在html元素属性上
bad:
<div style="width:200px;height:100px"></div>
<div onclick="doSomehing()"></div>

元素规范
通用
语义化
good：
<ul>
  <li>列表一</li>
  <li>列表二</li>
  <li>列表三</li>
</ul>
bad：
<div>
  <div>列表一</div>
  <div>列表二</div>
  <div>列表三</div>
</div>
模块化
good：
<div class="links">
  <a href="...">...</a>
  <a href="...">...</a>
  <a href="...">...</a>
</div>
<div class="cont">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>
bad:
<a href="...">...</a>
<a href="...">...</a>
<a href="...">...</a>
<p>...</p>
<p>...</p>
<p>...</p>
注释
有必要时需添加注释
<--! main start -->
<div class="main">
  ...
</div>
<--! main end -->
具体元素说明
html教程
http://www.w3school.com.cn/html/
结构性元素
 
 
p
表示段落. 只能包含内联元素, 不能包含块级元素;
div
本身无特殊含义, 可用于布局. 几乎可以包含任何元素;
br
表示换行符;
hr
表示水平分割线;
h1-h6
表示标题. 其中 h1 用于表示当前页面最重要的内容的标题;
blockquote
表示引用, 可以包含多个段落. 请勿纯粹为了缩进而使用 blockquote, 大部分浏览器默认将 ##### blockquote 渲染为带有左右缩进;
pre
表示一段格式化好的文本;
 
 
头部元素
title
每个页面必须有且仅有一个 title 元素;
base
可用场景：首页、频道等大部分链接都为新窗口打开的页面;
link
link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性;
style
type 默认为 text/css, 可以省去;
script
type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字;
 
 
文本元素
a
a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点;
em,strong
em 表示句意强调, 加与不加会引起语义变化, 可用于表示不同的心情或语调; strong 表示重要性强调, 可用于局部或全局, strong强调的是重要性, 不会改变句意;
abbr
表示缩写;
sub,sup
主要用于数学和化学公式, sup还可用于脚注;
span
本身无特殊含义;
ins,del
分别表示从文档中增加(插入)和删除
 
 
媒体元素
img
 
 请勿将img元素作为定位布局的工具, 不要用他显示空白图片;
给img元素增加alt属性
good:
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
bad:
<img src="spreadsheet.png">
object
可以用来插入Flash;
 
 
列表元素
dl
表示关联列表, dd是对dt的解释; dt和dd的对应关系比较随意： 一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录;
ul
表示无序列表;
ol
表示有序列表, 可用于排行榜等;
li
表示列表项, 必须是ul/ol的子元素;
 
 
表单元素
 
 推荐使用 button 代替 input, 但必须声明 type;
推荐使用 fieldset, legend 组织表单
表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导- 致表单提交混乱


属性规范
通用
使用双引号来标识属性
good：
<a class="maia-button">Sign in</a>
bad:
<a class='maia-button'>Sign in</a>
语义化，尽量描述html元素本身，而非表现
good:
<div class="main-cont"></div>
<div class="sub-cont"></div>
bad:
<div class="red"></div>
<div class="right"></div>
class
一般用于关联css样式
<style>
  .main-cont {
    ...
  }
</style>
...
<div class="main-cont">
...
</div>
多个单词之间用中划线连接
good：
<div class="main-cont"></div>
bad:
<div class="mainCont"></div>
多个class属性，遵循一般到特殊的顺序
<div class="panel panel-special ..."></div>
id
一般用于关联js行为
<script>
  $("#J_btnClose").on('click', function () {
    ...
  });
</script>
<a id="J_btnClose" href="javascript:void(0);">关闭</a>
用驼峰命名
good:
 <div id="mainCont"></div>
bad:
 <div class="main-cont"></div>
有绑定js事件的时候，加上前缀“J_”
good:
 <div id="J_mainCont"></div>
bad:
 <div class="main-cont"></div>


参考
 
 http://www.w3.org/TR/html4/
http://www.w3.org/TR/html5/
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
http://codeguide.bootcss.com/
http://docs.kissyui.com/1.3/docs/html/tutorials/style-guide/html-coding-style.html

猫晓四

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html代码规范

html代码规范基本原则简洁、清晰、容易维护项目代码风格一致整体规范大小写如无特殊说明，统一用小写字母good：a href="...">...a>bad：A HREF="...">...A>缩进嵌套的元素必须缩进用2个空格在行首缩进，保证在所有环境下获得一致展现（如习惯敲tab缩进，需IDE设置tab为2个空格）good：html
复制链接

扫一扫