Html代码怎样书写规范.doc

Html代码如何书写规范 最近有朋友咨询到小编说，html代码如何书写规范呢？对此，小编整理了有关资料，现在为大家列举一些范例，看看到底该怎么书写html代码呢。 通用约定  标签 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )； 可选的闭合标签（closing tag），需闭合 ( 例如：/li 或 /body)； 尽量减少标签数量； XML/HTML Code复制内容到剪贴板 img?src=images/google.png?alt=Google?? input?type=text?name=title?? ?? ul?? ??liStyle/li?? ??liGuide/li?? /ul?? ?? !--?Not?recommended?--?? span?class=avatar?? ??img?src=...?? /span?? ?? !--?Recommended?--?? img?class=avatar?src=...?? Class 与 ID class 应以功能或内容命名，不以表现形式命名； class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔； 使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class； XML/HTML Code复制内容到剪贴板 !--?Not?recommended?--?? div?class=j-hook?left?contentWrapper/div?? ?? !--?Recommended?--?? div?id=j-hook?class=sidebar?content-wrapper/div?? 属性顺序 HTML 属性应该按照特定的顺序出现以保证易读性。 idclassnamedata-xxxsrc, for, type, hreftitle, altaria-xxx, role XML/HTML Code复制内容到剪贴板 a?id=...?class=...?data-modal=toggle?href=###/a?? ?? input?class=form-control?type=text?? ?? img?src=...?alt=...?? 引号 属性的定义，统一使用双引号。 XML/HTML Code复制内容到剪贴板 !--?Not?recommended?--?? span?id=j-hook?class=textGoogle/span?? ?? !--?Recommended?--?? span?id=j-hook?class=textGoogle/span?? b嵌套 a 不允许嵌套 div 这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如 a 不允许嵌套 a。 严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。 ? 语义嵌套约束 li 用于 ul 或 ol 下； dd，dt 用于 dl 下； thead，tbody，tfoot，tr，td 用于table下； 严格嵌套约束 inline-Level 元素，仅可以包含文本或其它 inline-Level 元素； a 里不可以嵌套交互式元素 a、button、select等； p里不可以嵌套块级元素div、h1~h6、p、ul/ol/li、dl/dt/dd、form等。 布尔值属性 HTML5 规范中 disabled、checked、selected 等属性不用设置值。 XML/HTML Code复制内容到剪贴板 input?type=text?disabled?? ?? input?type=checkbox?value=1?checked?? ?? select?? ??option?value=1?selected1/option?? /select?? 语义化没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。 通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝 此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。 常见标签语义 标签 语义 p 段落 h1h2h3... 标题 ul 无序列表 ol 有序列表 blockquote 大段引用 cite 一般引用 b 为样式加粗而加粗 storng 为强调内容而加粗 i 为样式倾斜而倾斜 em 为强调内容而倾斜 code 代码标识 abbr 缩写