`
luoleikexin
  • 浏览: 917 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

html编码规范

    博客分类：
  • html
htmlhtml5前端html 
阅读更多
原文地址 https://ouvens.github.io/frontend-resource/2015/11/15/html-css-code-style.html

1.HTML规范
1.1 文档类型
  • 统一使用HTML5的标准文档类型：<!doctype html>
    • HTML5文档类型具备前后兼容的特质，并且易记易书写
  • 在文档doctype申明之前，不允许加上任何非空字符
    • 任何出现在doctype申明之前的字符都将使得你的HTML文档进入非标准模式
  • 不允许添加属性强制改变文档模式
    • 避免出现不可控的问题

1.2 省略type属性
  • 在调用CSS和JavaScript时，可以将type属性省略不写
   不推荐：
<link type="text/css" rel="stylesheet" href="base.css">
<script type="text/javascript" src="base.js"></script>
   推荐：
<link rel="stylesheet" href="base.css">
<script src="base.js"></script>
    因为HTML5在引入CSS时，默认type值为text/css；在引入JavaScript时，默认type值为text/javascript

1.3 用双引号包裹属性值
  • 所有的标签属性值必须要用双引号包裹，同时也不允许有的用双引号，有的用单引号的情况
   不推荐： 
<a href=http://www.qunar.com class=home>首页</a>
   推荐：
<a href="http://www.qunar.com" class="home">首页</a>

1.4 属性值省略
  • 非必须属性值可以省略
   不推荐：
<input type="text" readonly="readonly">
<input type="text" disabled="disabled">
   推荐： 
<input type="text" readonly>
<input type="text" disabled>

    这里的 readonly 和 disabled 属性的值是非必须的，可以省略不写，我们知道HTML5表单元素新增了很多类似的属性，如: required

1.5 嵌套
  • 所有元素必须正确嵌套，不允许交叉，不允许inline元素包含block元素，不允许类似在ul下出现除了li外的其它子元素等等
   不推荐：
<span>
　　　<h1>这是一个块级h1元素</h1>
　　　<p>这是一个块级p元素</p>
</span>
<ul>
　　　<h3>xx列表</h3>
　　　<li>asdasdsdasd</li>
　　　<li>asdasdsdasd</li>
</ul>
   推荐：
<div>
　　　<h1>这是一个块级h1元素</h1>
　　　<p>这是一个块级p元素</p>
</div>
<div>
    <h3>xx列表</h3>
    <ul>
        <li>asdasdsdasd</li>
        <li>asdasdsdasd</li>
    </ul>
</div>
   规则可参考：   http://www.cs.tut.fi/~jkorpela/html/strict.html
   由于某些现实原因，在HTML5中对a元素做了一些变更，a元素除了可以包含inline元素外，也将可以包含block元素了。

1.6 标签闭合
  • 非自闭合标记必须关闭
   不推荐：
<div>balabala...
   推荐：
<div>balabala...</div>
    虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间
  •     自闭合标记无需关闭
    •        <base> <br> <col> <embed> <hr> <img> <input> <link> <meta> <param>...
1.7 使用img的alt属性
  • 为img元素加上alt属性
   不推荐：
<img src="banner.jpg">
   推荐：
<img src="banner.jpg" alt="520即将到来，爱就大声说出来">
    alt属性的内容为对该图片的简要描述，这对于盲人用户和图像损毁都非常有意义，即无障碍
对于纯粹的装饰性图片，alt属性值可以留空，如 alt=""

1.8 使用label的for属性
  • 为表单元素label加上for属性
   不推荐：
<label><input type="radio" name="color" value="0">蓝色</label>
<label><input type="radio" name="color" value="1">粉色</label>
   推荐：
<label for="blue"><input type="radio" id="blue" name="color" value="0">蓝色</label>
<label for="pink"><input type="radio" id="pink" name="color" value="1">粉色</label>
    for属性能让点击label标签的时候，同时focus到对应的 input 和 textarea上，增加响应区域

1.9 按模块添加注释
  • 在每个模块开始和结束的地方添加注释 
<!-- comment -->
注释内容左右两边保留和注释符号有1个空格位
在注释内容内不允许再出现中划线“-”，某些浏览器会报错

<!-- 新闻列表模块 -->
<div id="news" class="g-mod"
...
<!-- /新闻列表模块 -->
<!-- 排行榜模块 -->
<div id="topic" class="g-mod"
...
<!-- /排行榜模块 -->


1.10 格式
  • 将每个块元素、列表元素或表格元素都放在新行
  • Inline元素视情况换行，以长度不超过编辑器一屏为宜
  • 每个子元素都需要相对其父级缩进
   不推荐：
<div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div>
   推荐：
<div>
　　　<h1>asdas</h1>
　　　<p>dff<em>asd</em>asda<span>sds</span>dasdasd</p>
</div>


1.11 语义化标签
    1.在合适的场景选择语义合适的标签
    2.禁止使用被废弃的用于表现的标签，如 center, font等
    3.部分在XHTML1中被废弃的标签,在HTML5中被重新赋予了新语义,选用时请先弄清其语义,如:b, i, u等
    4.元素据标记:
                      head, title, base, link, meta, style
    5.章节标签:
                      html, body, section, nav, article, aside, h1-h6, hgroup, header, footer, address
    6.脚本标记:
                      script, noscript
    7.分组内容标记:
                       p, hr, pre, blockquote, ol, ul, li, dl, dt,dd,figure,figcaption,div
    8.文本标签:
                       a, em, strong, small, s, time, code, var, sub, sup, i, b, u, mark, span, br,del
    9.媒体标签:
                      img, iframe, embed, object, param, video, audio, source, track, canvas, map, area
    10.互动标签:
                        details, summary, command, menu
    11.表单标签:
                        form, fieldset, legend, label, input, button, select, optgroup, option, textarea,progress
    12.表格标签:
                        table, caption, colgroup, col, thead, tbody, tfoot, tr, td, th
    13.参考文档：
                        http://www.w3.org/TR/html5/
                        http://dev.w3.org/html5/markup/elements.html

1.12 文档模板 
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>网站项目名称-网站名称</title>
<link href="*.css" rel="stylesheet">
</head>
<body>
<div id=”doc”>
　　　<header id="hd">
　　　　　　头部诸模块
　　　</header >
　　　<div id="bd">
　　　　　　主体部分诸模块
　　　</div>
　　　<footer id="ft">
　　　　　　底部诸模块
　　　</footer>
</div>
<script src="*.js"></script>
</body>
</html>
    所有的项目页面都可以直接使用上述的标准文档模板，并根据实际情况做 “加法” ，诸如meta的description, keywords之类，其中#doc级别不是必须的，视情况加减

1.13 模块模板 
<section class="m-xxx g-mod">
　　　<header class="m-xxx-hd">
　　　　　　头部区域
　　　</header>
　　　<div class="m-xxx-bd">
　　　　　　模块正文
　　　</div>
　　　<footer class="m-xxx-ft">
　　　　　　底部区域
　　　</footer>
</section>
    所有的模块默认都是上面这种固有结构，特殊情况可视场景而变，换句话说，有的时候你的某个模块可能会是一个aside。
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics