热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Google推荐的HTML5代码规范

Google作为业界的领头羊,为HTML5代码规范作出了详尽实用的规范,一起来学习吧!

Google 作为业界的领头羊,为HTML5代码规范作出了详尽实用的规范,一起来学习吧!

1.协议头:

建议在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http:https:协议部分,除非已知相应文件不能同时兼容2个协议。











/* Not recommended不推荐 */

.example {

background: url(http://www.google.com/images/example);

}

/* Recommended 推荐 */

.example {

background: url(//www.google.com/images/example);

}

注:这个倒是真正平日不注意的,只要是绝对地址,http:总是带着。如果仔细想一想,还真有道理。

2.缩进:每次缩进使用双空格
不要使用tab制表符或制表符加空格的混合方式缩进

?
1
2
3
4
5
6
7

  
  • mxria.com
  •   
  • www.mxria.com

  • .example {
      color:blue;
    }

    3.大小写:只使用小写

    所有的代码都应是小写的,包括元素名称、属性,属性值(除非text或CDATA的内容)、选择器、css属性、属性值(字符串除外)

    ?
    1
    2
    3
    4
    5

    4.尾随空格
    尾随空格是不必要的,容易搞复杂diff文件。这个绝对是经验教训的总结!!!

    ?
    1
    2
    3
    4

    What?_


    Yes please.

    5.编码格式:使用UTF-8

    请确保您的编辑器使用的字符编码??为UTF-8,没有字节顺序标记。在html模板或文档中通过 来

    定义编码格式。关于编码格式参考 Character Sets & Encodings in XHTML, HTML and CSS

    6.注释
    根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!!!

    7.TODO待定项
    尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调。
    在todo项中如果有必要列明联系人,比如负责人
    在TODO后追加一个冒号作为行动内容,例如 TODO:为美瑞网增加html5模板

    8.文档类型:使用HTML5

    使用.HTML(text/html)类型文件相对XHTML(alication/xhtml+xml)文件,在浏览器及框架支持上和优化空间上都要好很多。
    9.HTML 合法性验证

    合法的使用HTML,并利用w3c的工具(W3C HTML validator)进行检查。唯一例外就是因为性能原因需要压缩文件大小。
    原文如下:Use valid HTML code unless that is not possible due to otherwise unattainable performance goals  regarding file size. 但这个确实很难想象,省略标签节省的文件大小能有多少字节?但带来的问题可是风险居高哦!

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9



    This is only a test.




    This is only a test.

    10.语义性
    根据目的来合理使用HTML,这点对于HTML5而言尤为重要。下面例子可以对比,能实现同样的结果,但效率和可读性却有很大差别。

    ?
    1
    2
    3
    4
    5


    All recommendations


    对于HTML5而言,例如header、footer、nav、section等跟div能实现的功能基本类似,但是语义性上有着天壤之别。

    11.多媒体后备:为多媒体提供备选内容

    这个属于老生长谈的内容,典型就是为img添加alt内容。

    12.关注点分离
    这点很重要,严格遵守将组织结构(markup)、表现样式(style)和行为动作(script)分开处理的原则,并且尽量使三者之间的关联度降到最小。这主要是基于维护性的考虑,通常,更新style文件或脚本文件比更改HTML文件的代价要小很多,试想一下,对于一个有超过10万页面的网站进行局部颜色调整,是每个html文件修改容易还是修改一个style文件容易?

    12.可选Tags:省略可选的标签

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15




      
        
      
      
        

    Sic.


      




    Qed.

    13.实体引用
    假定开发团队内,文件和编辑器都是使用同样的编码格式(UTF-8),则没有必要使用实体引用的方式,例如—,

    ”, or &#x263a; 除非一些HTML中具有特定含义的字符,如”<”,或不可见字符如空格

    14.Type属性:省略
    将样式表和脚本中的Type省略,除非你不是用的css或Javascript,在HTML5中,该值默认是text/css和text/Javascript

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11


      type="text/css">





    15.block,list或table元素
    针对每个block,list或table元素另起一行,并在每个子元素前缩进。这样可读性好,例如:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

      

    Space, the final frontier.




      
  • Moe
  •   
  • Larry
  •   
  • Curly


  •   

        

          

        

          
    Income
          
    Taxes
      
    $ 5.00
          
    $ 4.50

    对于使用HTML5的朋友,可以参考。当然,不同团队还会整理出适合自己的代码规范,上述应该来说属于比较基本的规则内容。


    推荐阅读
    • 本文探讨了在Android应用中实现动态滚动文本显示控件的优化方法。通过详细分析焦点管理机制,特别是通过设置返回值为`true`来确保焦点不会被其他控件抢占,从而提升滚动文本的流畅性和用户体验。具体实现中,对`MarqueeText.java`进行了代码层面的优化,增强了控件的稳定性和兼容性。 ... [详细]
    • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
    • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
      SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
    • 在探讨 AS3 中的数据深度复制技术时,本文详细介绍了实现数据深度克隆的有效方法。通过对比多种方案,最终确定了一种高效且可靠的实现方式,所有代码均来源于公开资源,确保了方法的实用性和可操作性。 ... [详细]
    • 深入解析 Spring MVC 的核心原理与应用实践
      本文将详细探讨Spring MVC的核心原理及其实际应用,首先从配置web.xml文件入手,解析其在初始化过程中的关键作用,接着深入分析请求处理流程,包括控制器、视图解析器等组件的工作机制,并结合具体案例,展示如何高效利用Spring MVC进行开发,为读者提供全面的技术指导。 ... [详细]
    • 为了在Fragment中直接调用Activity的方法,可以通过定义一个接口并让Activity实现该接口来实现。具体步骤包括:首先在Fragment中声明一个接口,并在Activity中实现该接口。接着,在Fragment中通过类型转换检查Activity是否实现了该接口,如果实现了则调用相应的方法。这种方法不仅提高了代码的解耦性,还增强了模块间的通信效率。此外,还可以通过ViewModel或LiveData等现代Android架构组件进一步优化这一过程,以实现更加高效和可靠的通信机制。 ... [详细]
    • 通过优化模板消息机制,本研究提出了一种高效的信息化推送方案。该方案利用获取的访问令牌(access token)和指定的模板ID,实现了精准且快速的信息推送,显著提升了用户体验和信息传递效率。具体实现中,通过调用相关API接口,确保了消息的准确性和及时性,为用户提供更加便捷的服务。 ... [详细]
    • 通过自定义 `TextView`,实现了在用户点击或焦点变化时动态调整字体颜色的效果。该方法利用了 `ColorStateList` 和 `Selector` 资源文件,确保了界面交互的流畅性和视觉效果的提升。具体实现中,通过重写 `onTouchEvent` 和 `onFocusChanged` 方法,精确控制了颜色变化的时机和状态。此外,还对性能进行了优化,确保在高频率操作下依然保持高效响应。 ... [详细]
    • 本文深入探讨了 iOS 开发中 `int`、`NSInteger`、`NSUInteger` 和 `NSNumber` 的应用与区别。首先,我们将详细介绍 `NSNumber` 类型,该类用于封装基本数据类型,如整数、浮点数等,使其能够在 Objective-C 的集合类中使用。通过分析这些类型的特性和应用场景,帮助开发者更好地理解和选择合适的数据类型,提高代码的健壮性和可维护性。苹果官方文档提供了更多详细信息,可供进一步参考。 ... [详细]
    • 解决基于XML配置的MyBatis在Spring整合中出现“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”问题的方法
      在将Spring与MyBatis进行整合时,作者遇到了“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”的问题。该问题主要出现在使用XML文件配置DAO层的情况下,而注解方式配置则未出现类似问题。作者详细分析了两个配置文件之间的差异,并最终找到了解决方案。本文将详细介绍问题的原因及解决方法,帮助读者避免类似问题的发生。 ... [详细]
    • 在CSS中处理单行文本长度限制的问题时,可以通过设置文本颜色、定义块级元素等方法来实现。具体而言,通过使用 `color: #000;` 来控制文字颜色,并将元素定义为块级元素(`display: block;`),可以有效管理文本的显示效果。此外,还可以结合其他CSS属性,如 `overflow: hidden;` 和 `text-overflow: ellipsis;`,以确保超出部分的文字被优雅地隐藏或截断,从而提升用户体验。 ... [详细]
    • 本文深入探讨了原型模式在软件设计中的应用与实现。原型模式通过使用已有的实例作为原型来创建新对象,而不是直接通过类实例化。这种方式不仅简化了对象的创建过程,还提高了系统的灵活性和效率。具体来说,原型模式涉及一个支持克隆功能的接口或基类,子类通过实现该接口来提供具体的克隆方法,从而实现对象的快速复制。此外,文章还详细分析了原型模式的优缺点及其在实际项目中的应用场景,为开发者提供了实用的指导和建议。 ... [详细]
    • 新年伊始,正是学习的最佳时机。本文全面解析了CK1957-Zookeeper的核心概念与实践技巧,旨在帮助初学者快速掌握这一深度学习工具。通过详细的理论讲解和实际操作示例,读者可以更好地理解Zookeeper的工作原理及其在分布式系统中的应用。无论是新手还是有一定基础的学习者,都能从中受益匪浅。 ... [详细]
    • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
    • 在椭圆形状设计中,色彩搭配方案对视觉效果和用户体验至关重要。本文分析了不同色彩组合在椭圆形状设计中的应用效果,特别探讨了白色背景与绿色文字的搭配,指出长期观看这种配色可能会导致视觉疲劳。通过引入多种色彩搭配方案,本文旨在为设计师提供更加科学和舒适的色彩选择建议。 ... [详细]
    author-avatar
    央央说去_531
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有