`
BuN_Ny
  • 浏览: 85206 次
  • 来自: 济南
社区版块
存档分类
最新评论

谷歌HTML/CSS样式指南--通用规则

 
阅读更多

原文地址

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

    根据给定的信息,“GOOGEL HTML_CSS STYLE GUIDE”是一份由Google提供的关于HTML与CSS代码编写的指导手册。虽然给出的部分内容看起来与实际的主题不符,这里我们仍然会围绕标题和描述来阐述相关的知识点。 ### 一、...

    web前端面试宝典

    DOM设置CSS样式 - **内联样式**:直接在HTML标签中设置样式。 - **内部样式表**:放在`&lt;style&gt;`标签内。 - **外部样式表**:链接外部CSS文件。 - **JavaScript**:动态修改样式。 **选择依据**:根据样式的重要性...

    Using Struts 2 - AppFuse 2 - Confluence(1).pdf

    为了提高用户体验,你可以考虑使用预定义的CSS样式,如Wufoo提供的样式,来美化表单布局。 #### 七、配置客户端和服务端验证 为了提升用户的体验并确保数据的完整性,你应该配置客户端和服务端的验证规则。这可以...

    一些HTML代码的编写风格建议小结

    8. **代码风格的选择**:Google的HTML/CSS风格指南提供了一套通用建议,但每个团队可能有自己的偏好,例如缩进使用空格还是制表符。根据实际情况调整并确保团队一致性是关键。 总之,遵循良好的HTML编写风格可以...

    网站coming soon倒计时html模板-上线 倒计时 网站维护.rar

    CSS(层叠样式表)用于控制模板的外观,如颜色、字体和布局。开发者可以利用预处理器如Sass或Less来编写更高效、模块化的CSS代码。 在压缩包中的`README.md`文件通常包含模板的安装和使用指南,例如如何将模板添加...

    非阿里的-前端开发规范手册.rar

    1. **代码风格**:遵循一定的编码风格,如Airbnb或Google风格指南,保持一致性。 2. **模块化**:使用CommonJS、ES6模块或Webpack等工具进行模块化开发。 3. **异步处理**:使用Promise、async/await处理异步操作,...

    day03_am_aaa

    这通常涉及HTML用于结构化内容,CSS用于样式设计,JavaScript用于实现交互功能。后端开发则处理数据存储、业务逻辑和服务器通信,常用的技术有PHP、Python的Django或Flask框架,或是Node.js的Express框架。 此外,...

    PhoneGap简报

    PhoneGap的最大优势在于它能够调用智能手机的各种原生功能,包括但不限于摄像头、地理位置、加速度传感器、文件管理、联系人、指南针、推送服务和存储等。此外,PhoneGap还拥有一个庞大的插件生态系统,使得开发者...

    [主机域名]DomainGen 自助停放系统 1.0.0_domaingen1.0.0_PHP项目源码.zip

    - 资源文件(如图片、CSS、JavaScript 文件):提供页面样式和交互效果。 - 文档和帮助文件(docs/):为开发者和用户提供系统使用和开发指南。 在部署和使用这个系统时,开发者或运维人员需要按照文档指示进行环境...

    encommuns.org:共享平台

    一种通用应用程序目录,例如 Google Play 或 Apple Store,但适用于 Web 应用程序。 旨在成为 Unisson 免费软件套件的登陆页面。 ###获取代码 git 克隆 ### 更新 config.js cp app/scripts/config.js.sample _...

    framework-guides:新框架或现有框架指南的集合

    它与CSS(层叠样式表)和JavaScript一起构成了Web开发的基础。HTML负责页面的结构,提供元素来表示内容,如段落、标题、图像和链接等。了解和熟练掌握HTML是所有Web开发者的基本功。 在这个"framework-guides-...

    Boxedart 房屋出售模板

    - CSS文件:用于定义模板的样式,如colors.css(颜色方案)、styles.css(整体样式)等。 - JavaScript文件:实现动态功能的JS代码,如scripts.js(通用脚本)、search.js(搜索功能)等。 - 图像文件:如jpg、png...

    rental_bicycle-源码.rar

    3. **public** 或 **static** 目录:存放静态资源,如CSS样式表、JavaScript文件、图片等。 4. **database** 目录:可能包含数据库初始化脚本或者数据迁移文件。 5. **tests** 目录:测试用例,用于验证代码的功能...

    photo-autofinder:用于在 Salesforce 集成中自动搜索联系人照片的 PHP 脚本

    5. `css/` - CSS样式文件夹,用于美化界面。 6. `images/` - 存储找到或处理过的联系人照片。 7. `.gitignore` - 忽略文件列表,告诉Git哪些文件不需纳入版本控制。 8. `README.md` - 项目介绍和使用指南。 9. `...

    Jekyll-Blog:Jekyll博客胆量

    在下载的`Jekyll-Blog-master`中,可能包含了预设的主题文件,如CSS样式表、JavaScript脚本和图片资源。通过修改这些文件,可以调整博客的颜色、字体、布局等元素。 ### 6. 部署到GitHub Pages GitHub Pages提供...

    企业建站系统_外贸家居网站模版

    3. **技术架构**:模板基于`div+css`构建,这是网页设计中常见的HTML元素布局方式,利用CSS(层叠样式表)来控制页面的样式和布局,使代码更加结构化,便于维护和优化,同时提高了网页的加载速度。 4. **核心文件**...

    personalDev:站点人员(.dev)

    .dev域名是Google于2018年推出的一类顶级通用域名,旨在为开发者社区提供一个专属的网络空间。选择.dev域名,可以明确表明您的网站内容与开发相关,有助于吸引同行业的访问者,提升专业形象。 二、CSS基础布局设计 ...

    nextjs-模板

    3. `styles` 目录:可能包含全局或组件特定的样式文件,可能使用 CSS-in-JS 或者外部 CSS 文件。 4. `public` 目录:存放静态资源,如图片、字体等,Next.js 会将这个目录的内容复制到构建输出中。 5. `api` 目录...

    表单.zip

    2. **CSS样式**:为了使表单美观且易于使用,开发者通常会使用CSS(层叠样式表)来定制表单的外观。这包括设置字体、颜色、布局、响应式设计等,确保表单在不同设备和屏幕尺寸上都能良好显示。 3. **JavaScript验证...

    UXTOOLTIME-Axure:最好的Axure小部件库

    2. **Styles**:可能包含CSS样式文件,用于定义小部件的颜色、字体和其他视觉属性,以保持设计的一致性。 3. **Examples**:展示如何在Axure中使用这些小部件的示例原型,帮助用户快速上手。 4. **Documentation**:...

Global site tag (gtag.js) - Google Analytics