谷歌 HTML/CSS 规范

论坛 期权论坛 期权     
前端开发   2019-7-8 06:12   3740   0
[h1]来自:Web Develop - SegmentFault[/h1]链接:https://segmentfault.com/a/1190000007023192(点击尾部阅读原文前往)
原文:https://google.github.io/styleguide/htmlcssguide.xml
[h1]背景[/h1]这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率。
[h1]通用样式规范[/h1][h2]协议[/h2]省略图片、样式、脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL,好处是无论你是使用   HTTPS 还是 HTTP 访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节。
复制代码
复制代码
  1. /* Not recommended */
  2. .example {
  3.   backgroundnull:url(https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-1d051329605f0f096e66a15dfaef368a);
  4. }
复制代码
  1. /* Recommended */
  2. .example {
  3.   background: url(//www.google.com/images/example);
  4. }
复制代码
[h1]通用格式规范[/h1][h2]缩进[/h2]一次缩进2个空格,不要使用 tab 或者混合 tab 和空格的缩进。
  1.   Fantastic
  2.   Great
复制代码
  1. .example {
  2.   color: blue;
  3. }
复制代码
[h2]大小写[/h2]以下都应该用小写:
HTML 元素名称,属性,属性值(除非 text/CDATA),CSS 选择器,属性,属性值。
  1. Home
复制代码
复制代码
  1. /* Not recommended */
  2. color: #E5E5E5;
复制代码
  1. /* Recommended */
  2. color: #e5e5e5;
复制代码
[h2]结尾空格[/h2]结尾空格不仅多余,而且在比较代码时会更麻烦。
  1. What?_
复制代码
  1. Yes please.
复制代码
[h1]通用元规范[/h1][h2]编码[/h2]在 HTML 中通过指定编码方式,CSS 中不需要指定,因为默认是 UTF-8。
[h2]注释[/h2]使用注释来解释代码:包含的模块,功能以及优点。
[h2]任务项[/h2]用 TODO 来标记待办事项,而不是用一些其他的标记,像 @@。
  1.   Apples
  2.   Oranges
复制代码
[h1]HTML 风格规范[/h1][h2]文档类型[/h2]HTML 文档应使用 HTML5 的文档类型:。
孤立标签无需封闭自身,
  1. [/code] 不要写成 [code]。
复制代码
[h2]HTML 正确性[/h2]尽可能使用正确的 HTML。
  1. Test
  2. This is only a test.
复制代码
  1. Test
  2. This is only a test.
复制代码
[h2]语义化[/h2]根据使用场景选择正确的 HTML 元素(有时被错误的称为“标签”)。例如,使用  h1 元素创建标题,p 元素创建段落,a 元素创建链接等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。
  1. All recommendations
复制代码
  1. All recommendations
复制代码
[h2]多媒体元素降级[/h2]对于像图片、视频、canvas 动画等多媒体元素,确保提供其他可访问的内容。图片可以使用替代文本(alt),视频和音频可以使用文字版本。
复制代码
复制代码
[h2]关注分离[/h2]标记、样式和脚本分离,确保相互耦合最小化。
[h2]实体引用[/h2]如果团队中文件和编辑器使用同样的编码方式,就没必要使用实体引用,如
复制代码
复制代码
复制代码
,除了一些在 HTML 中有特殊含义的字符(如 < 和 &)以及不可见的字符(如空格)。
[quote][code]
The currency symbol for the Euro is 鈥
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:55
帖子:11
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP