原文地址
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml?showone=Displaying_Hidden_Details_in_this_Guide#General_Style_Rules
个人整理翻译,禁止转载
协议
从URL所指向的图片或其他媒体文件、样式、脚本文件中省略协议部分(http:
、
https:
),除非相应的文件不属于这两种协议。
相对而言,省略协议可以解决URL混合内容的问题并能略微减小文件。
/* 不推荐 */
.example {
background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
background: url(//www.google.com/images/example);
}
缩进
一次缩进两个空格,不要使用Tab或混合使用Tab和空格。
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
大写问题
只使用小写。
所有代码必须用小写:包括元素名称,属性attributes,属性值(除非text/CDATA类型),选择器,属性properties和属性值(字符串除外)。
ps: 两个属性实在不会翻译,一个是xml规范定义的,应该指类如HTML里<input name=""/>的name属性;另一个是CSS里的类如 .class-selector{width: 100px;}的width属性。
<!--
不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">
尾随空白
删除尾随空格。
尾随空格是不必要的,只会使文件复杂。
<!-- 不推荐 -->
<p>What?_
<!--
推荐 -->
<p>Yes please.
编码
使用UTF-8(无BOM)。
请确保你的编辑器使用的字符编码为UTF-8,并且没有字节顺序标记。在HTML中通过<meta charset="utf-8">指定文件的编码。不要指定样式表的编码。(更多关于编码以及如何指定它们的问题参见 Character Sets & Encodings in XHTML, HTML and CSS。)
注释
在需要的地方注释代码。
用注释说明你的代码:代码包含了什么?目的是什么?为什么用多种解决方案,哪个又是首选?
(此条要求可选,不被强制要求。依据项目的复杂程度不同,HTML和CSS的里程碑控制非常麻烦。)
任务列表
用TODO标记待做任务列表。
用关键字TODO来高亮待做列表,而不用其他常见格式,如@@
用“TODO(联系人)”的方式,在括号中增加联系人或邮件地址,在冒号后面增加任务说明。
{# TODO(john.doe): revisit centering #}
<center>Test</center>
<!-- TODO: remove optional tags -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
To be continue....
分享到:
相关推荐
根据给定的信息,“GOOGEL HTML_CSS STYLE GUIDE”是一份由Google提供的关于HTML与CSS代码编写的指导手册。虽然给出的部分内容看起来与实际的主题不符,这里我们仍然会围绕标题和描述来阐述相关的知识点。 ### 一、...
DOM设置CSS样式 - **内联样式**:直接在HTML标签中设置样式。 - **内部样式表**:放在`<style>`标签内。 - **外部样式表**:链接外部CSS文件。 - **JavaScript**:动态修改样式。 **选择依据**:根据样式的重要性...
为了提高用户体验,你可以考虑使用预定义的CSS样式,如Wufoo提供的样式,来美化表单布局。 #### 七、配置客户端和服务端验证 为了提升用户的体验并确保数据的完整性,你应该配置客户端和服务端的验证规则。这可以...
8. **代码风格的选择**:Google的HTML/CSS风格指南提供了一套通用建议,但每个团队可能有自己的偏好,例如缩进使用空格还是制表符。根据实际情况调整并确保团队一致性是关键。 总之,遵循良好的HTML编写风格可以...
CSS(层叠样式表)用于控制模板的外观,如颜色、字体和布局。开发者可以利用预处理器如Sass或Less来编写更高效、模块化的CSS代码。 在压缩包中的`README.md`文件通常包含模板的安装和使用指南,例如如何将模板添加...
1. **代码风格**:遵循一定的编码风格,如Airbnb或Google风格指南,保持一致性。 2. **模块化**:使用CommonJS、ES6模块或Webpack等工具进行模块化开发。 3. **异步处理**:使用Promise、async/await处理异步操作,...
这通常涉及HTML用于结构化内容,CSS用于样式设计,JavaScript用于实现交互功能。后端开发则处理数据存储、业务逻辑和服务器通信,常用的技术有PHP、Python的Django或Flask框架,或是Node.js的Express框架。 此外,...
PhoneGap的最大优势在于它能够调用智能手机的各种原生功能,包括但不限于摄像头、地理位置、加速度传感器、文件管理、联系人、指南针、推送服务和存储等。此外,PhoneGap还拥有一个庞大的插件生态系统,使得开发者...
- 资源文件(如图片、CSS、JavaScript 文件):提供页面样式和交互效果。 - 文档和帮助文件(docs/):为开发者和用户提供系统使用和开发指南。 在部署和使用这个系统时,开发者或运维人员需要按照文档指示进行环境...
一种通用应用程序目录,例如 Google Play 或 Apple Store,但适用于 Web 应用程序。 旨在成为 Unisson 免费软件套件的登陆页面。 ###获取代码 git 克隆 ### 更新 config.js cp app/scripts/config.js.sample _...
它与CSS(层叠样式表)和JavaScript一起构成了Web开发的基础。HTML负责页面的结构,提供元素来表示内容,如段落、标题、图像和链接等。了解和熟练掌握HTML是所有Web开发者的基本功。 在这个"framework-guides-...
- CSS文件:用于定义模板的样式,如colors.css(颜色方案)、styles.css(整体样式)等。 - JavaScript文件:实现动态功能的JS代码,如scripts.js(通用脚本)、search.js(搜索功能)等。 - 图像文件:如jpg、png...
3. **public** 或 **static** 目录:存放静态资源,如CSS样式表、JavaScript文件、图片等。 4. **database** 目录:可能包含数据库初始化脚本或者数据迁移文件。 5. **tests** 目录:测试用例,用于验证代码的功能...
5. `css/` - CSS样式文件夹,用于美化界面。 6. `images/` - 存储找到或处理过的联系人照片。 7. `.gitignore` - 忽略文件列表,告诉Git哪些文件不需纳入版本控制。 8. `README.md` - 项目介绍和使用指南。 9. `...
在下载的`Jekyll-Blog-master`中,可能包含了预设的主题文件,如CSS样式表、JavaScript脚本和图片资源。通过修改这些文件,可以调整博客的颜色、字体、布局等元素。 ### 6. 部署到GitHub Pages GitHub Pages提供...
3. **技术架构**:模板基于`div+css`构建,这是网页设计中常见的HTML元素布局方式,利用CSS(层叠样式表)来控制页面的样式和布局,使代码更加结构化,便于维护和优化,同时提高了网页的加载速度。 4. **核心文件**...
.dev域名是Google于2018年推出的一类顶级通用域名,旨在为开发者社区提供一个专属的网络空间。选择.dev域名,可以明确表明您的网站内容与开发相关,有助于吸引同行业的访问者,提升专业形象。 二、CSS基础布局设计 ...
3. `styles` 目录:可能包含全局或组件特定的样式文件,可能使用 CSS-in-JS 或者外部 CSS 文件。 4. `public` 目录:存放静态资源,如图片、字体等,Next.js 会将这个目录的内容复制到构建输出中。 5. `api` 目录...
2. **CSS样式**:为了使表单美观且易于使用,开发者通常会使用CSS(层叠样式表)来定制表单的外观。这包括设置字体、颜色、布局、响应式设计等,确保表单在不同设备和屏幕尺寸上都能良好显示。 3. **JavaScript验证...
2. **Styles**:可能包含CSS样式文件,用于定义小部件的颜色、字体和其他视觉属性,以保持设计的一致性。 3. **Examples**:展示如何在Axure中使用这些小部件的示例原型,帮助用户快速上手。 4. **Documentation**:...