当前位置: 首页 > Web前端 > HTML

GoogleHTML-CSSSpecification

时间:2023-04-02 15:00:25 HTML

背景本文定义了HTML和CSS的格式和代码规范,旨在提高代码质量和协作效率。通用样式规范协议省略了图像、样式表、脚本和其他媒体文件URL的协议部分(http:、https:),除非文件在任一协议下都不可用。这种方案称为协议相对URL。好处是无论使用HTTPS还是HTTP访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一些字节。/*不推荐*/.example{background:url("https://www.google.com/images/example");}/*Recommended*/.example{background:url("//www.google.com/images/example");}一般格式规范Indent2spacesattime,donotusetaborIndentation混合制表符和空格。

  • Fantastic
  • Great
.example{color:blue;}以下大小写应为小写:HTML元素名称、属性、属性值(除非text/CDATA)、CSS选择器、属性、属性值。主页/*不推荐*/颜色:#E5E5E5;/*推荐*/颜色:#e5e5e5;尾随空格尾随空格不仅多余,而且比较代码时更麻烦。

什么?_

是的。通用元规范编码通过在HTML中指定,不需要在CSS中指定,因为默认为UTF-8。注释使用注释来解释代码:包括了哪些模块,它们做了什么,它们做了什么。任务项使用TODO来标记待办事项,而不是使用其他一些标签,如@@。

  • Apples
  • Oranges
HTML样式规范文档类型HTML文档应使用HTML5文档类型:。一个孤立的标签不需要自己关闭,`不要写。`HTML正确性尽可能使用正确的HTML。测试
这只是测试。测试
这只是一个测试。
语义根据使用场景选择正确的HTML元素(有时被错误地称为“标签”)。例如,使用h1元素创建标题,使用p元素创建段落,使用a元素创建链接,等等。正确使用HTML元素对于可访问性、可重用性和编码效率非常重要。所有推荐
所有推荐多媒体元素降级对于图像、视频、画布动画等多媒体元素,请确保提供其他可访问的内容。替代文本(alt)可用于图像,文本版本可用于视频和音频。专注于分离标记、样式脚本分离确保相互耦合最小化。实体引用如果团队中的文件和编辑器使用相同的编码方式,则不需要使用实体引用,如—、"、?,除了一些在HTML中有特殊含义的字符(如<和&)和不可见字符(如空格)。欧元的货币符号是“&eur;”。欧元的货币符号是“”。引用样式表和脚本时,type属性除非不是CSS或JavaScript,否则不要指定type属性。因为在HTML5中,默认指定样式变化的类型为text/css,脚本的类型为text/javascript。linkrel="stylesheet"href="//www.google.com/css/maia.css">HTML格式规范HTML用双引号引用属性值。登录SigninCSS样式规范ID和类命名使用有意义的id和类名。/*不推荐:无意义*/#yee-1901{}/*不推荐:表现形式*/.button-green{}.clear{}/*推荐:具体*/#gallery{}#login{}.video{}/*推荐:generic*/.aux{}.alt{}ID和Class的命名风格id和class尽量简短易懂。/*不推荐*/#navigation{}.atr{}/*推荐*/#nav{}.author{}选择器除非需要,否则不要在id或class前加上元素名称。/*不推荐*/ul#example{}div.error{}/*推荐*/#example{}.error{}属性缩写尽量使用CSS中可以缩写的属性(比如font),可以提高编码效率和代码可读性。/*不推荐*/border-top-style:none;font-family:palatino,georgia,serif;font-size:100%;line-height:1.6;padding-bottom:2em;padding-left:1em;padding-right:1em;padding-top:0;/*Recommended*/border-top:0;font:100%/1.6palatino,georgia,serif;padding:01em2em;0andunitvalueis0withoutaddingunits.边距:0;填充:0;当初始0值在-1和1之间时,不需要加0。font-size:.8em;十六进制表示法/*不推荐*/color:#eebbcc;/*推荐*/color:#ebc;Prefix使用带前缀的命名空间可以防止命名冲突并提高代码的可维护性。.adw-help{}/*AdWords*/#maia-note{}/*Maia*/在ID和类名称分隔符选择器中使用连字符以提高可读性。/*不推荐:不分隔单词“demo”和“image”*/.demoimage{}/*不推荐:使用下划线代替连字符*/.error_status{}/*推荐*/#video-id{}.ads-sample{}CSS格式规范书写顺序按照属性首字母的顺序书写CSS,便于阅读和维护,排序时忽略带有浏览器前缀的属性。背景:紫红色;边框:1px实心;-moz-边框半径:4px;-webkit-边框半径:4px;边框半径:4px;颜色:黑色;文本对齐:居中;文本缩进:2em;块级别内容缩进为了反映层次关系和提高可读性,块级内容应该缩进。@mediascreen,projection{html{背景:#fff;颜色:#444;}}EndofstatementCSS的每一行都应该以分号结束。/*不推荐*/.test{display:block;height:100px}/*推荐*/.test{display:block;height:100px;}属性名和属性名末尾的值之间要有一个空格。/*不推荐*/h3{font-weight:bold;}/*推荐*/h3{font-weight:bold;}声明样式块的分隔符由选择器和{}之间的空格分隔。/*不推荐:缺少空格*/#video{margin-top:1em;}/*不推荐:不必要的换行符*/#video{margin-top:1em;}/*推荐*/#video{margin-top:1em;}选择器将每个选择器分隔在一个新行上。/*不推荐*/a:focus,a:active{position:relative;top:1px;}/*推荐*/h1,h2,h3{font-weight:normal;line-height:1.2;}Ruleseparation规则之间用空行分隔。html{background:#fff;}body{margin:auto;width:50%;}CSS引用属性选择器和属性值使用单引号,URI值不需要引号。/*不推荐*/@importurl("//www.google.com/css/maia.css");html{font-family:"opensans",arial,sans-serif;}/*推荐*/@importurl(//www.google.com/css/maia.css);html{font-family:'opensans',arial,sans-serif;}CSS元规则分段注释使用注释将CSS分隔成多个部分./*Header*/#adw-header{}/*Footer*/#adw-footer{}/*Gallery*/.adw-gallery{}Epilogue坚持遵循代码规范。写代码之前先看看身边同事的代码,再决定代码风格。代码规范的意思是提供一个参考。这里提供了一个全局的规范,但是你也必须参考公司内部的规范,否则看你代码的人会很痛苦。转载自:http://www.codeceo.com