转自学习网站(百度原创):https://github.com/ecomfe/spec/blob/master/html-style-guide.md

本文是百度培训网站上关于HTML编码规范的笔记,非博主原创。

前言

HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护。

代码风格

缩进与换行

  1. [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
  2. [建议] 每行不得超过 120 个字符
  3. [强制] class 必须单词全字母小写,单词间以 - 分隔。
  4. [强制] class 必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。
  5. [强制] 元素 id 必须保证页面唯一。
  6. [建议] id 建议单词全字母小写,单词间以 - 分隔。同项目必须保持风格一致。
  7. [建议] idclass 命名,在避免冲突并描述清楚的前提下尽可能短。
  8. [强制] 禁止为了 hook 脚本,创建无样式信息的 class。
  9. [强制] 同一页面,应避免使用相同的 name 与 id。

标签

  1. [强制] 标签名必须使用小写字母。
  2. [强制] 对于无需自闭合的标签,不允许自闭合。
  3. [强制] 对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。
  4. [强制] 标签使用必须符合标签嵌套规则。
  5. [建议] HTML 标签的使用应该遵循标签的语义。
  6. [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
  7. [建议] 标签的使用应尽量简洁,减少不必要的标签。

属性

  1. [强制] 属性名必须使用小写字母。
  2. [强制] 属性值必须用双引号包围。
  3. [建议] 布尔类型的属性,建议不添加属性值。
  4. [建议] 自定义属性建议以 xxx- 为前缀,推荐使用 data-

通用

DOCTYPE

  1. [强制] 使用 HTML5 的 doctype 来启用标准模式,建议使用大写的 DOCTYPE
  2. [建议] 启用 IE Edge 模式。
  3. [建议] 在 html 标签上设置正确的 lang 属性。

编码

  1. [强制] 页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
  2. [建议] HTML 文件使用无 BOM 的 UTF-8 编码。

CSS 和 JavaScript 引入

  1. [强制] 引入 CSS 时必须指明 rel="stylesheet"
  2. [建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。
  3. [建议] 在 head 中引入页面需要的所有 CSS 资源。
  4. [建议] JavaScript 应当放在页面末尾,或采用异步加载。
  5. [建议] 移动环境或只针对现代浏览器设计的 Web 应用,如果引用外部资源的 URL 协议部分与页面相同,建议省略协议前缀。

head

title

  1. [强制] 页面必须包含 title 标签声明标题。
  2. [强制] title 必须作为 head 的直接子元素,并紧随 charset 声明之后。

favicon

  1. [强制] 保证 favicon 可访问。

viewport

  1. [建议] 若页面欲对移动设备友好,需指定页面的 viewport

图片

  1. [强制] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src
  2. [建议] 避免为 img 添加不必要的 title 属性。
  3. [建议] 为重要图片添加 alt 属性。
  4. [建议] 添加 width 和 height 属性,以避免页面抖动。
  5. [建议] 有下载需求的图片采用 img 标签实现,无下载需求的图片采用 CSS 背景图实现。

表单

控件标题

  1. [强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。

按钮

  1. [强制] 使用 button 元素时必须指明 type 属性值。
  2. [建议] 尽量不要使用按钮类元素的 name 属性。

可访问性 (A11Y)

  1. [建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。
  2. [建议] 当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。
  3. [建议] 在针对移动设备开发的页面时,根据内容类型指定输入框的 type 属性。

多媒体

  1. [建议] 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时,应当注意格式。
  2. [建议] 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
  3. [建议] 使用退化到插件的方式来对多浏览器进行支持。
  4. [建议] 只在必要的时候开启音视频的自动播放。
  5. [建议] 在 object 标签内部提供指示浏览器不支持该标签的说明。

模板中的 HTML

  1. [建议] 模板代码的缩进优先保证 HTML 代码的缩进规则。
  2. [建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。
  3. [建议] 在循环处理模板数据构造表格时,若要求每行输出固定的个数,建议先将数据分组,之后再循环输出。

"HTML编码规范" 笔记的更多相关文章

  1. 【原】Java学习笔记002 - JAVA SE编码规范

    /* * 编码规范: * 1.所有的命名遵循"见名知意"的原则 * 2.所有的命名不允许使用汉字或拼音 * 3.Java的工程命名建议使用小写,比如:oa.crm.cms... * ...

  2. Python开发【笔记】:PEP 8 编码规范

    PEP 8 编码规范     https://bk.tencent.com/document/bkrule/040101.pdf                                     ...

  3. 学习笔记之Python最简编码规范

    Python最简编码规范 - 机器学习算法与Python学习 https://mp.weixin.qq.com/s/i6MwvC4jYTE6D1KHFgBeoQ https://www.cnblogs ...

  4. 《从零开始学Swift》学习笔记(Day 56)——命名规范Swift编码规范之命名规范

    原创文章,欢迎转载.转载请注明:关东升的博客 程序代码中到处都是自己定义的名字,取一个有样并且符合规范的名字非常重要. 命名方法很多,但是比较有名的,广泛接受命名法有: 匈牙利命名,一般只是命名变量, ...

  5. 菜鸟笔记 -- Chapter 4.7 代码注释与编码规范

    4.7 代码注释与编码规范 在程序代码中适当的添加注释可以提高程序的可读性和可维护性.好的编码规范可以使程序更易阅读和理解.下面我们将介绍几种代码注释,以及应该注意的编码规范. 4.7.1 代码注释 ...

  6. 《从零開始学Swift》学习笔记(Day 56)—— Swift编码规范之命名规范

    原创文章,欢迎转载.转载请注明:关东升的博客 程序代码中到处都是自定义的名字,取一个有样而且符合规范的名字非常重要. 命名方法非常多,可是比較有名的,广泛接受命名法有: 匈牙利命名,一般仅仅是命名变量 ...

  7. PHP 高级编程(1/5) - 编码规范及文档编写

    PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...

  8. HTML编码规范

    HTML编码规范 1 前言 HTML作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用.本文档的目标是使HTML代码风格保持一致,容易被理解和被维护. 2 代码风格 2.1 缩进与换行 [强制 ...

  9. 字符编码终极笔记:ASCII、Unicode、UTF-8、UTF-16、UCS、BOM、Endian

    1.字符编码.内码,顺带介绍汉字编码 字符必须编码后才能被计算机处理.计算机使用的缺省编码方式就是计算机的内码.早期的计算机使用7位的ASCII编码,为了处理汉字,程序员设计了用于简体中文的GB231 ...

随机推荐

  1. R-画图

    1.par(mar=c(8,5.2,8,5.2),new=TRUE,cex=1.5,mfrow=c(2,2))   (参考:http://blog.sina.com.cn/s/blog_6caea8b ...

  2. web 页面间传值 js 封装方法

    用法 var id = getParam("id"); function getParam(strKey) { var url=document.URL; //var url=&q ...

  3. Linux(例如CentOS 7)打开TCP 22端口,基于SSH协议

    SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专 ...

  4. 第 9 章 数据管理 - 075 - 配置 VirtualBox backend

    配置 VirtualBox backend 在 VirtualBox 宿主机上启动 vboxwebsrv 服务: C:\Program Files\Oracle\VirtualBox > VBo ...

  5. 从mysql向HBase+Phoenix迁移数据的心得总结

    * 转载请注明出处 - yosql473 - 格物致知,经世致用 mysql -> HBase + Phoenix 1.总体方案有哪些? 1)通过Sqoop直接从服务器(JDBC方式)抽取数据到 ...

  6. Adb工具的简单使用

    Adb全称为Android Debug Bridge adb就是连接android手机与PC机的桥梁,可以在pc端对手机进行全面的操作 借助adb工具,可以管理设备或者手机模拟器的状态,进行手机操作, ...

  7. JVM内存模型和GC机制

    目录 1.JVM内存模型 2.GC 1.JVM内存模型 堆,栈,本地方法栈,方法区,程序计数器 2.GC 新生代收集器:Serial(单线程).ParNew.Parallel Scavenge: 老年 ...

  8. 理解去中心化 稳定币 DAI

    本文转载于深入浅出区块链, 原文链接 随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器. 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的机 ...

  9. .NetCore WebApi 添加 Log4Net

    一 .配置 1.vs2019 创建一个.net core web程序,选择webapi 2.项目中添加一个配置文件:添加--新建项--XML文件,命名为log4net.config 我使用的是log4 ...

  10. 【Java】【13】两个double类型比较大小

    /** * @return >0,第一位数大 */ public static int compare(double double1, double double2) { BigDecimal ...