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

时间 2019-11-10

标签 html 编程规范借鉴淘宝 kissy 栏目 HTML 繁體版

原文原文链接

基本规范

语义

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

大小写

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

缩进

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

空格

除去没必要要的空格 html

嵌套

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

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

引号

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

自定义属性

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

DOCTYPE

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

编码

推荐使用utf-8编码 url

注释

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

协议

若是链接和当前页面所使用的协议一致则忽略链接的协议的部分

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>