html编程规范-借鉴淘宝的KISSY

基本规范

语义

使用符合语义的标签书写html文档,选择恰当的元素表达所需的含义。

大小写

元素的标签和属性必须小写,属性值必须加双引号。

缩进


  • 使用四个空格来表示缩进,不要使用tab键
  • 在块状元素,列表,表格元素使用新行,并且对它的子元素进行缩进。


空格

除去不必要的空格

嵌套

元素嵌套遵循HTML Script嵌套规则,只用firefox的插件:HTML Validator 进行检查。

正确区分自闭合元素和非自闭合元素。

引号

使用双引号来标识html的属性

自定义属性

通过给元素设置自定义属性来存放与javascript交互的数据,属性名格式为data-xx

DOCTYPE

页面文档类型统一使用HTML5 DOCTYPE.

编码

推荐使用utf-8编码

注释

建议对超过十行的页面模块进行注释,以降低开发人员的嵌套成本和后期维护的成本。

协议

如果连接和当前页面所使用的协议一致则忽略连接的协议的部分

TODO

使用TODO来标记待做的事情,便于后期搜索

在TODO后添加(姓名)来表示分类

焦点分离

将表现,行为和结构分离,不要在html和模版中加入除了结构以外的东西。

在文档中引入尽可能少的样式和脚本。

元素

结构性元素


  • P表示段落,只能包含内联元素,不能包含块级元素。
  • div本身没有特殊意义,可用于布局,几乎可以包含任何元素
  • br表示换行符
  • hr表示水平分割线
  • h1-h6表示标题,其中h1表示当前页面最重要的内容的标题
  • blockquote表示引用,可以包含多个段落,请勿纯粹为了缩进而使用blockquote,大部分浏览器默认将blockquote渲染成带有左右缩进
  • pre表示一段格式化好的文本


头部元素


  • title,每个页面必须有而且只能有一个title元素
  • base可用场景:首页,频道等大部分链接都为新窗口打开的页面
  • link,link引入css资源,可省去media和type属性,需要有rel属性
  • stype,type默认为text/css 可以省略
  • script type属性可以省略


文本元素


  • a:a存在href属性的时候表示链接,无href但是有name属性表示瞄
  • em,strong : em表示句意强调,加与不加会引起语义变化,可用于表示不同的心情或者语调;strong表示重要性的强调,可用于局部或者全局,strong强调的是重要性,不会改变句意。
  • abbr表示缩进
  • sub,sup主要用于数学和化学公式,sup还可以用于脚注
  • span本身没有特殊含义
  • ins.del 分别表示从文档中增加(插入)和删除。


媒体元素


  • img:请勿将img元素 作为定位布局的工具,不要用他来显示空白图片,给img元素添加alt属性
  • object:可以用来插入flash


列表元素


  • dl表示关联列表,dd是对dt的解释,dt和dd的对应关系比较随意。一个dt对应多个dd,多个dt对应一个dd,多个dt对应多个dd;可以用于名词/单词解释,日程列表,站点目录
  • ul:用于无序列表
  • ol:表示有序列表,可用于排行榜等
  • li表示列表项,必须是ul和ol的子集

表单元素

  • 推荐使用bottom代替input,但是必须声明type
  • 推荐使用fieldset,legend组织表单
  • 表单元素的name不能设置为action,enctype,method,novalidate,target,submit会导致表单提交混乱的。


文档模版

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample page</title>
        <link rel="stylesheet" href="css_example_url" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                页头
            </div>
            <div id="content">
                主体
            </div>
            <div id="footer">
                页尾
            </div>
        </div>
        <script src="js_example_url"></script>
        <script>
        // 你的代码
        </script>
    </body>
</html>

你可能感兴趣的:(html)