刘元涛

前端代码规范及最佳实践

概述

本文档包含了Isobar公司的创意技术部（前端工程）开发web应用的规范。现在我们把它开放给任何希望了解我们迭代过程最佳实践的人。

编写本文档的主要驱动力是两方面： 1) 代码一致性以及 2) 最佳实践。通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。

总体指导原则◊返回顶部

前端开发核心思想◊

表现、内容和行为的分离
标记应该是结构良好、语义正确以及普遍合法。
Javascript应该起到渐进式增强用户体验的作用。

总体原则◊

缩进◊

对于所有编程语言，我们要求缩进必须是软tab（用空格字符）。在你的文本编辑器里敲 Tab 应该等于 4个空格 。

可读性 vs 压缩◊

对于维护现有文件，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。

我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件，例如CSS和JS。

标记◊返回顶部

任何网页的首要组件就是基于标签的HTML标记语言。超文本标记语言 (HTML) 曾有一段不堪回首的历史，但最近几年已经是 皇上回宫 了。经过对它基于XML的XHTML变种的漫长试验之后，整个行业终于接受了HTML代表web的未来这一事实。

标记定义了文档的结构和纲要，并提供结构化的内容。除了最基本的概念（例如标题、段落和列表）之外，标记并不是用来定义页面上内容的外观和体验的。HTML的表现属性都已经被废弃了，有关样式的定义应该被包含在样式表中。

HTML5◊

HTML5 是HTML 和 XHTML 的新版本。在 HTML5 草案的规范中定义了可以用 HTML 和 XML编写的单一的语言，意在解决在之前HTML的迭代中发现的一些问题并满足web应用的需求，这是以前HTML没有充分覆盖到的领域（来源）。

在合适的时候，我们会使用HTML5 Doctype 和 HTML5 特性。

我们会对照 W3C 校验器测试我们的标记，以确保标记是结构良好的。我们的目标并不是100%的合法代码，但是校验肯定对于编写可维护的站点以及调试代码都大有帮助。 Isobar公司不保证代码都是100%合法，而是确信跨浏览器体验会相当一致 。

模板◊

对HTML5文件，我们使用 H5BP 针对我们自己项目需求修改的一个分支。你也可以从这里Fork H5BP。

Doctype◊

标记中必须总是使用合适的Doctype来指示浏览器触发标准模式. 永远要避免Quirks模式。

HTML5特别好的一个方面就是它简化了Doctype需要的代码。无意义的属性被弃用了，DOCTYPE 声明也被显著地简化了。另外，也无需再用 CDATA 对内联JavaScript代码进行转义，而这在此之前为了让XHTML符合XML的严密性是必需的。

HTML5 Doctype

1.

字符编码◊

所有标记必须通过UTF-8编码传递，因为这种编码方式是对国际化最友好的。必须在HTTP的header和HTML文档的head部分都指定这种编码。

设定字符编码是通过标签进行。

1. < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />

如果是HTML5，则只需要写：

1. < meta charset = "utf-8" >

标记的总体原则◊

下面是编写HTML标记的总体原则。提醒大家一点，在创建的HTML文档里总是要使用能够代表内容语义的标记。

段落分隔符要使用实际对应的
元素，而不是用多个标签。
在合适的条件下，充分利用
（定义列表）和
标签。
列表中的条目必须总是放置于
属性加引号◊ 在HTML5规范里并没有严格要求属性值两边加引号。但考虑到一些属性可以接受空白值，为了保持一致性，我们要求所有属性值必须加上引号。 1. < p class = "line note" data-attribute = "106" >This is my paragraph of special text. p > CSS◊返回顶部网页的第二个组件就是在层叠样式表（CSS）中包含的表现信息。Web浏览器成功实现CSS后，整整一代web开发者对他们网站的外观和体验拥有了全部的控制权。正如网页信息在语义方面由 HTML 标记描述， CSS 从表现方面则是通过对视觉属性的定义来描述网页。 CSS 的强大之处在于，这些属性可以混合并通过各种标示符匹配，它可以通过样式规则的分层（”层叠“）来控制页面的布局和视觉特征。

 
   
   编码总体原则◊ 
    
    从外部文件加载CSS，尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。 
    用 LINK 标签加载，永远不要用@import。加载样式表 
      
      1. 
      < 
      link 
        
      rel 
      = 
      "stylesheet" 
        
      type 
      = 
      "text/css" 
        
      href 
      = 
      "myStylesheet.css" 
        
      /> 
      不要用内联式样式 
      
      1. 
      < 
      p 
        
      style 
      = 
      "font-size: 12px; color: #FFFFFF" 
      >This is poor form, I say 
      p 
      > 
     
 
 
    不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则。 
    使用 normalize.css 让渲染效果在不同浏览器中更一致。 
    使用类似 YUI fonts.css 的字体规格化文件。 
    定义样式的时候，对样式在页面只出现一次的元素用id，其他的用class。 
    理解 层叠和选择器的明确度 ，这样你就可以写出非常简洁且高效的代码。 
    编写性能优化的选择器。尽可能避免使用开销大的CSS选择器。例如，避免 * 通配符选择器，也不要叠加限定条件到 ID 选择器（例如 div#myid）或 class 选择器（例如 table.results）上。这对于速度至上并包含了成千上万个DOM元素的web应用来说尤为重要。更多相关内容请参阅 MDN 上的这篇 《编写高效CSS》。 
   
 
   CSS盒子模型◊ 
   深入学习和理解CSS及基于浏览器的盒子模型，对于掌握CSS布局的基础是非常必要的。 
    
   
 
   3D CSS 盒子模型示意图， 
    由 
     Jon Hicks 
    绘制。 
   CSS 校验◊ 
   我们一般不用 W3C 校验器。 
   CSS 格式◊ 
   最低要求：选择器单独占一行，每个属性占一行。属性声明要有缩进。 
   作为提高的要求，关联或孩子样式要增加2-4个空格的缩进。这样有利于分层查看和组织，产生（对某些人来说）可读性更好的样式表。 
   另外，在给一个样式指定多个选择器的时候，把每个选择器单独放一行是个好主意。这样可以避免一行变得太长，也能提高可读性及版本控制流程。 
    
    01. 
    .post-list li a{ 
    
    
    02. 
    color 
    : 
    #A8A8A8 
    ; 
    
    
    03. 
    } 
    
    
    04. 
    .post-list li a:hover{ 
    
    
    05. 
    color 
    : 
    #000 
    ; 
    
    
    06. 
    text-decoration 
    : 
    none 
    ; 
    
    
    07. 
    } 
    
    
    08. 
    .post-list li .author a, 
    
    
    09. 
    .post-list li .author a:hover{ 
    
    
    10. 
    color 
    : 
    #F30 
    ; 
    
    
    11. 
    text-transform 
    : 
    uppercase 
    ; 
    
    
    12. 
    } 
    
   在多个开发者协作环境下，避免用单行CSS格式，因为这样会给版本控制带来问题。 
   字母排序◊ 
   如果你对性能情有独钟， 对CSS属性进行字母排序有利于在GZIP压缩中识别大量可重复的特征。 
   Classes vs. IDs◊ 
   对于所用的样式只出现一次的元素，给它设一个id属性。这个属性只会应用于该元素，不会用到其他地方。Class属性则可以用到多个具有相同样式属性的元素上。具有相同外观和表现的元素可以具有相同的class名。 
    
    1. 
    < 
    ul 
      
    id 
    = 
    "categories" 
    > 
    
    
    2. 
    < 
    li 
      
    class 
    = 
    "item" 
    >Category 1 
    li 
    > 
   
 
    
    3. 
    < 
    li 
      
    class 
    = 
    "item" 
    >Category 2 
    li 
    > 
   
 
    
    4. 
    < 
    li 
      
    class 
    = 
    "item" 
    >Category 3 
    li 
    > 
   
 
    
    5. 
     
    ul 
    > 
   
 
   选择器命名的惯例◊ 
   无论是 ID 还是 class，对任何东西最好总是根据 它是什么 而不是 它看上去是什么样子 来命名。 比如一个页面上的特别提示的 class 名是 bigBlueText （大蓝字），可它的样式早就被改成红色小字体，这个名字就没意义了。使用更聪明的惯例如 noteText （提示文字）就好多了，因为即使视觉样式改变了，它也还是管用的。 
   选择器◊ 
   CSS3 选择器 规格引入了一整套对于更好地选择元素极其有用的 CSS 选择器。 
   伪类◊ 
   伪类 使你能动态地修饰网页内容的样式。有些伪类从CSS1 （:visited, :hover等） 和 CSS2 （:first-child, :lang）那时候开始就有了。CSS3又往列表里加入了16个新的伪类，这些伪类对于动态地修饰网页内容的样式特别有用。 学习如何深度使用伪类。 
   组合及属性选择器◊ 
   组合选择器 提供了为特定元素选择其后代元素、孩子元素或兄弟元素的快捷方式。 
   属性选择器 适用于具有特定属性 和/或 特定值的元素。正则表达式的知识对属性选择大有帮助。 
   明确度◊ 
   浏览器会通过 计算选择器的明确度 来决定应用哪个CSS规则。如果两个选择器都适用于同样的元素，具有更高明确度的那个会胜出。 
   ID 选择器比属性选择器明确度高，class 选择器比任何数量的元素选择器明确度高。尽量使用 ID 选择器来提高明确度。有时候我们可能会想方设法给一个元素应用一条CSS规则，但用尽方法也不能如愿。这种情况有可能是因为我们使用的选择器比另外一个的 明确度低，所以明确度高的另一个选择器里的属性就比我们想应用的选择器优先了。这种情况在更大或更复杂的样式表里更为常见。在小一些的项目里，通常这不是 大问题。 
   计算明确度◊ 
   当你在一个很大很复杂的样式表上干活的时候，知道如何计算选择器的明确度会有很大帮助，会节约你的时间，并让你的选择器更有效率。 
   明确度的计算方式是对你的CSS的各种组件计数，并用 (a,b,c,d) 格式表达出来。 
    
    元素，伪元素: d = 1 – (0,0,0,1) 
    类，伪类，属性: c = 1 – (0,0,1,0) 
    Id: b = 1 – (0,1,0,0) 
    内联样式: a = 1 – (1,0,0,0) 
    
   不过，也许使用现成的明确度计算器更好一些。 
    
    明确度计算器 
    你应该了解的关于明确度的一些事 
    IE 明确度 bugs 
    
   使用 !important 会覆盖掉所有的明确度，不管它有多高。因此我们倾向于避免使用它。大部分时候是没必要用它的。即使你需要覆盖某个你访问不到的样式表里的选择器，往往也会有其他的办法去覆盖。尽可能避免使用它。 
   像素 vs. Em◊ 
   我们使用 px 作为定义 font size 的度量单位，因为它能提供对文本的绝对控制。我们知道为字体大小使用 em 单位一度很流行，这样可以解决 IE6 无法改变基于像素的文本大小的问题。不过，现在所有的主流浏览器（包括 IE7 和 IE8）都支持基于像素单位的文本大小 和/或 整页缩放。既然 IE6 被广泛认为已废弃，用像素定义文本尺寸更好。另外，无单位的 line-height 也应该优先考虑，因为它不会从父元素继承一个百分比值，而是基于 font-size 的一个乘数。 正确 
    
    1. 
    #selector { 
    
    
    2. 
    font-size 
    :  
    13px 
    ; 
    
    
    3. 
    line-height 
    :  
    1.5 
    ;   
    /*  13 * 1.5 = 19.5 ~ Rounds to 20px. */ 
    
    
    4. 
    } 
    不正确 
    
    1. 
    /*  Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */ 
    
    
    2. 
    #selector { 
    
    
    3. 
    font-size 
    :  
    0.813em 
    ; 
    
    
    4. 
    line-height 
    :  
    1.25em 
    ; 
    
    
    5. 
    } 
    
   IE Bugs◊ 
   不可避免地，当所有其他浏览器看起来都正常工作的时候，各种版本的IE浏览器就会冒出一些莫名其妙的bug，让部署一拖再拖。虽然我们鼓励排除问题，产出无需打补丁就能在所有浏览器上运行的代码，有时候为了在样式表中使用CSS钩子，还是有必要用到CSS if IE 条件注释。从 paulirish.com 了解更多信息。 修复 IE 
    
    1. 
     
    
    
    2. 
     
    
    
    3. 
     
    
    
    4. 
     
    
    
    5. 
     
      
    < 
    body 
    >  
     
    
    
    1. 
    .box {  
    float 
    :  
    left 
    ;  
    margin-left 
    :  
    20px 
    ; } 
    
    
    2. 
    .ie 
    6 
      
    .box {  
    margin-left 
    :  
    10px 
    ; } 
    
   如果你在用HTML5（以及 HTML5 Boilerplate）， 我们推荐使用 Modernizer JavaScript库和下列模式： 
    
    1. 
     
    
    
    2. 
     
    
    
    3. 
     
    
    
    4. 
     
    
    
    5. 
     
    < 
    html 
      
    class 
    = 
    "no-js" 
      
    lang 
    = 
    "en" 
    > 
     
    
   速记格式◊ 
   一般情况下要优先使用CSS速记格式，一是因为它的简洁，二是用它也可以扩充已有的值，例如margin和padding的情况。 开发者必须注意TRBL 缩写，它表示元素的各边按顺时针方向定义的顺序：上、右、下、左。如果bottom没有定义，它就会从top继承值。同理，如果left未定义，它从right继承值。如果只有top的值有定义，所有的边都会继承那一个值。 
   下面是关于减少样式表代码冗余和使用CSS速记格式的更多内容： 
    
    http://qrayg.com/journal/news/css-background-shorthand 
    http://sonspring.com/journal/css-redundancy 
    http://dustindiaz.com/css-shorthand 
    
   图片◊ 
    
    对于（用于背景的）重复图片，要使用 比 1x1 像素大的图片 
    永远不要用空白图片。 
    多使用 CSS精灵（sprites）。它会使悬停状态更简单，改善页面加载速度，并减少二氧化碳的排放。 
    一般情况下，所有的图片都应该切成带透明背景（PNG8），并裁减成紧密贴合图片外边框。 
      
      不过，logo必须总是带有背景遮片，并在裁减内容之外留出内边框。 
     
  
    
   颜色管理◊ 
    
    确认团队所有成员都有一致的颜色管理设置。 
      
      任意两台显示器显示的颜色很可能会有所不同，但必须使用sRGB颜色作为缺省配置。 
      当你在Photoshop打开文件时，要注意颜色配置警告，当Photoshop建议把图片转换到另一个配置时，要通知其他团队成员。 
     
  
    永远不要把颜色配置嵌入到图片里。 
      
      当你从Photoshop保存图片时，务必去掉"Embed Color Profile"选项的勾选。 
     
  
    
    
   通用的文本和字体样式◊ 
   标题◊ 
    
    要给 h1-h6 标题 -- 包括作为链接的标题 -- 定义缺省样式。在你的CSS文档顶部定义它们，在必要时修改它们以保持整个站点的一致性。 
    标题必须有层次，能表明从大到小不同级别的重要性，h1具有最大的字体大小。 
    SEO：要大致地了解页面的层次组织和阅读效果，在开发者工具里关闭CSS效果，你会看到一个基于文字的视图，包括所有的 h1-h6 ， strong， em 等标签。 
    
   链接◊ 
    
    必须定义链接的缺省样式，样式要和主要的文字样式不同，载悬停状态下也要有不同的样式。 
    当给链接加下划线样式时，使用 border-bottom 并用 text-decoration: none; 加点内边框。这样看起来更好一些。 
    
   Web字体◊ 
   近些年来越来越流行使用web上的定制字体和字型。随着本地浏览器对其支持度的攀升，以及一些支持它的服务和API的出现，这个领域发展的势头很猛。这些方法都各有利弊。项目启动前最好是在技术和版权限制方面先做一些研究，以便为特定项目选择合适的方法。 
   所有这些方法都有代码开销、开发时间和性能（时间计算和用户感受）的不足。你需要熟悉这些问题，并和团队成员及用户沟通，这样会减少项目后期的大量问题。 
   下面列出一些内嵌定制字体的流行手段，按我们实施时的优先级排序。 
   @font-face◊ 
   @font-face 规则 允许你自定义字体。它最早是在CSS2 规范里定义的，但从CSS2.1被删除了。现在，它是CSS3草案中的推荐稿。 
   对于web定制字体，我们的首选和最偏爱的选择都是 @font-face ，就是因为它被列入了CSS字体模块工作草案的一部分，这意味着它会随着浏览器支持的提升变得越来越流行，并且随着它不断改善变得更稳定，使用起来也更简单。 
   就现在而言，使用 @font-face 的时候，建议为每种字体格式定义它的source。这很重要 -- 如果你想让它在大多数浏览器中有效 -- 虽然这不是使用它的必要条件。 
   在规范中包括的字体格式有： 
    
    woff: WOFF (Web Open Font 格式) 
    ttf: TrueType 
    ttf, otf: OpenType 
    eot: 嵌入式 OpenType 
    svg, svgz: SVG 字体 
    
   防弹 @font-face◊ 
   为了实现完全的浏览器兼容性，可以使用 Fontsprings 的新版 防弹 @font-face 语法 （2011年2月21日的最新版本）。 
    
    01. 
    @font-face { 
    
    
    02. 
    font-family 
    :  
    'MyFontFamily' 
    ; 
    
    
    03. 
    src 
    :  
    url 
    ( 
    'myfont-webfont.eot' 
    );                      
    /* IE9 Compat Modes */ 
    
    
    04. 
    src 
    :  
    url 
    ( 
    'myfont-webfont.eot?iefix' 
    )  
    format 
    ( 
    'eot' 
    ),  
    /* IE6-IE8 */ 
    
    
    05. 
    url 
    ( 
    'myfont-webfont.woff' 
    )  
    format 
    ( 
    'woff' 
    ),      
    /* Modern Browsers */ 
    
    
    06. 
    url 
    ( 
    'myfont-webfont.ttf' 
    )  
    format 
    ( 
    'truetype' 
    ),       
    /* Safari, Android, iOS */ 
    
    
    07. 
    url 
    ( 
    'myfont-webfont.svg#svgFontName' 
    )  
    format 
    ( 
    'svg' 
    );  
    /* Legacy iOS */ 
    
    
    08. 
    font-weight 
    : ; 
    
    
    09. 
    font-style 
    : ; 
    
    
    10. 
    // etc. 
    
    
    11. 
    } 
    
   这里有一个使用上述技术实现的 演示 。 
   跨浏览器兼容◊ 
   Safari, IE 6-9, IE 9 兼容模式, Firefox, Chrome, iOS, Android, Opera 
   阻止兼容模式◊ 
   有时候 IE 会在用户不知道的情况下自作主张切换到兼容模式。要阻止你的站点缺省进入兼容模式，可以在站点的 部分加入下列代码： 
    
    1. 
    < 
    meta 
      
    http-equiv 
    = 
    "X-UA-Compatible" 
      
    content 
    = 
    "IE=edge" 
    > 
    
    
   有关 @font-face 的提示◊ 
    
    IE 6–8 只会接受打包成 EOT 的 TrueType 字体。 
    font-weight 和 font-style 在 @font-face 里有不同的含义。带有 font-weight:bold; 的声明意味着它是这种字型的粗体版本，而不是直接给文本加粗。 
    @font-face 的一些坑 
    
   优点 
    
    易于实施 
    多种多样APIs 
    可定制 
    易于加入元素中 
    除了 CSS 之外无需其他库或接口 
    被列入了CSS字体模块3工作草案的一部分 
    
   不足 
    
    使用不当的时候，支持它的浏览器有限 
    某些现代浏览器（Chrome, Opera）的老版本并不总是能正常渲染。文本可能会出现毛刺。**我本人没有亲自证实过，不确定现在这个问题是否还存在。 
    
    
   Google WebFonts API 和 Font 加载器◊ 
   使用 Google Webfonts 有两套可选方案。这两套方案当然也各有其弊端，但它们也可以用得和 @font-face 一样好，这全取决于项目的需要。 
   Webfonts API◊ 
   Google的 Webfonts API 本质上和 @font-face 做的是同样的事情，只是它把所有困难的工作都帮你做好了，提供了更广泛的浏览器支持。这个方案主要的缺点是它使用的字体库非常小。使用它的时候你只需要引入下面这套样式表并指定字体名。 
    
    1. 
    < 
    link 
      
    rel 
    = 
    "stylesheet" 
      
    type 
    = 
    "text/css" 
      
    href 
    = 
    "http://fonts.googleapis.com/css?family=Font+Name" 
    > 
    
   然后给你想应用的选择器定义一个样式即可： 
    
    1. 
    CSS selector { 
    
    
    2. 
    font-family 
    :  
    'Font Name' 
    ,  
    serif 
    ; 
    
    
    3. 
    } 
    
   Webfont 加载器◊ 
   Google 提供的另一个备选方案是 Webfont 加载器 ，它是一个 JavaScript 库，提供比字体 API 更多的控制。你也可以像Typekit那样使用多套web字体。 使用这套方案需要把下面的script引入你的页面： 
    
    01. 
     
    
   用这种方式引入 webfont.js 文件速度更快，如果没有用到前面的Ajax接口的话。否则你应该用下面的方法： 
    
    1. 
     
    
    
    2. 
     
    
   通过使用这套 Webfont 加载器，你具备更多的定制能力，包括使用更多的字体，而不局限于不大的Google Webfont字库。不过，这种方案需要加载Javascript，这就是为了便利付出一些其他的牺牲了。 
   优点 
    
    非常易于实施 
    广泛的浏览器支持 
    可与 Typekit 组合 
    如果使用 font 加载器，可以定制 
    API 和 @font-face 功能相同 
    
   不足 
    
    API只提供很小的字体库 
    Webfont 加载器需要 JavaScript 才能工作 
    大部分浏览器会先加载页面的其他部分，在这些字体所在部分留下空白，或在有回退选项存在的时候显示回退样式，直到页面加载完成为止。 
    webfont 库里的一些字体在 Windows 下渲染效果不佳 
    
    
   Cufon◊ 
   如果你选择使用 Cufon，我们强烈推荐你使用 Cufon 压缩版。你会需要用 生成器 来转换你的字体。 
    
    1. 
     
    
    
    2. 
     
    
    
    3. 
     
    
   我们推荐慎重使用 Cufon ，因为如果应用到大量的文本上，它会产生很多开销。访问 Cufon Wiki 可以获取更多相关信息。 
   优点 
    
    广泛的浏览器支持 
    在支持它的浏览器中渲染效果好 
    可定制 
    易于实施 
    
   不足 
    
    需要 JavaScript 才能工作 
    使用该方法的文本不能被选中 
    并不是适用于所有文字 
    定制可能会很复杂 
    并不总是容易应用到多个元素，特别是在增加类似悬停的效果的时候 
    
    
   Typekit◊ 
   当选择给网站添加定制字体的时候，使用 Typekit 有它不容忽视的优势。它具备很强的平台集成，并且是可扩展和流行的服务。 它可以和 Google Webfonts 一起使用，并且易于加入到以 WordPress, Posterous, Typepad, 和其他类似的 CMS 实现的网站上。 
   但是，要完整地应用 Typekit 也不是无本生意。如果你需要把它用到超过2个站点，或用在一个浏览量很高的站点上，你需要每年付49.99美元费用，对于百万以上浏览量的站点费用会加倍。不过，如果你的网站有这么大浏览量，对这点成本你应该是不差钱的。如果不是这样，你可能需要重新考虑你的商业模式了。 
   优点 
    
    庞大的字体库，包括 Adobe 字体 
    易于实施 
    和Google Webfont API 以及 博客平台 集成 
    免费计划有限制但不会过期 
    
   不足 
    
    需要 JavaScript 才能工作 
    免费计划能用到的字体库是有限制的 
    免费和最便宜的计划只允许用到1-2个网站，每个网站只能用2-5种字体。 
    用到超过一个网站就需要付费了 
    
    
   可扩展 Inman Flash 替换 (sIFR)◊ 
   我们不推荐使用这种方法，但是因为它的广泛使用，我们觉得还是有必要介绍它，以便你在选择定制web字体方法时做出胸有成竹的决定。 
   即使它在web设计师中广为流行，而且它在大多数浏览器中也有很好的支持，使用它的缺点还是大过它的便利性。 弃用 sIFR 的最大也是最明显的原因是它需要使用Flash这一事实。而且，即便是为了让Flash正常工作就需要 JavaScript，而且在你使用此方法渲染的文本能在页面上可见之前，相关的脚本必须都先被加载。更不用说，它会增加页面加载时间，并会让一个慢网站 变得更慢。 
   我们会让你对这些问题算算细账。 
   优点 
    
    文本可以被选中 
    大多数浏览器都支持 
    在支持它的浏览器上渲染得还不错 
    
   不足 
    
    它用到了 Flash 
    需要 JavaScript 来让 Flash 正常工作 
    它是 Flash! 
    脚本加载完之前，文字不会出现 
    ...还有，它是 Flash... 
    
    
   字体版权◊ 
   即使你可以把任何字体转换为web字体文件，你还是应该确认这样做是否合法。很多厂商更新了他们关于字体在web上使用的条款。查看 字体版权和保护的细则 获取更多信息。 
    
   字体描述及字体文件格式◊ 
    
    CSS 2 字体 – 1998年5月 (已废弃) 
    CSS 3 字体 – 2009 工作草案 
    CSS 字体模块 – W3C 工作草案 2011年5月 
    WOFF Font Format – 工作草案 2010 
    SVG 字体格式 
    嵌入式 OpenType (EOT) 文件格式 
    微软 OpenType 规范 
    OpenType 特性文件规范 
    苹果 TrueType 手册 
    
   使用 CSS3◊ 
   利用CSS3规范中增加的特性，你可以做很多新奇的事情，不过里边很多新特性还没有得到所有主流浏览器的完全支持。不过这也不是说它们现在就不能用。对于这些支持不好的特性，有一些回退的库可用，或者有一些其他补丁，用来填补在浏览器对新特性缺乏支持时出现的空白。 
   还有一些浏览器特定的属性或前缀也可以用来修饰样式。为跨浏览器支持起见，我们推荐使用 Prefixr.com 来确保你加入了所有针对不同浏览器的前缀属性。 
  
 
   
    
    
 
    JavaScript◊返回顶部 
    JavaScript 是网页的第三个主要部件。在网页上适当地应用JavaScript 代码，通过绑定事件和控制整体行为层，能够增强整体的用户和基于浏览器的体验。 
    随着功能强劲的新浏览器撑起基于浏览器的完整web应用，JavaScript 在近年的流行度爆棚。另外，对Javascript的细致运用为全面操控另外两个部件 -- HTML 标记 和 CSS -- 提供了手段。现在，在无需刷新整个页面的情况下，页面结构和页面视觉样式都可以被实时操控。 
    
   JavaScript库◊ 
   我们开发新应用主要会用到 jQuery，不过我们对原生 JavaScript 和所有现代 javascript 库也具有专业经验。 
   编码总体原则◊ 
    
    99%的代码必须封装在外部Javascript文件中。这些文件必须在 BODY 标签的尾部引入，让页面的性能最大化。 
    不要依赖于 user-agent 字符串。进行适当的特性检测. （更多信息参见 深入 HTML5： 检测 和 jQuery 支持文档） 
    不要使用 document.write()。 
    所有布尔变量的命名必须用 "is" 开头对正条件的测试 
      
      1. 
      isValid = (test.value >= 4 && test.success); 
     
  
    给变量和函数的命名要有逻辑意义：例如： popUpWindowForAd 就比 myWindow 好多了。 
    不要人为缩短命名到最小。除了传统的 for 循环中的计数器 i 等简化的情况，变量命名必须长到有明确意义。 
    文档必须遵循 NaturalDocs 结构。 
    常量或配置变量（例如动画持续时间等）必须放在文件的顶部。 
    尽力编写可通用化的函数，让它接受参数并返回值。这样有利于充分的代码重用，而且一旦与引入及外部脚本配合起来，能在脚本需要修改时减少开销。例如，相比硬编码一个带有窗口大小、选项和url的弹出式窗口，不如编写一个接受大小、url和选项作为变量的函数。 
    给代码添加注释！这会有利于减少在调试Javascript函数上花费的时间。 
    不要把时间浪费在用  给你的内联Javascript加注释上，除非你还在关注 Netscape 4。 :) 
    把你的代码组织成一套 对象常量/单例，按照 模块化模式，或做成 带构造器的对象。 
    最小化全局变量 - 你创建的全局变量越少越好。一般来说，用于你的应用命名空间，1会是个好的数字。在描述任何全局变量的时候要明确指认。 
      
      1. 
      window.globalVar = { ... } 
     
  
    
   留空◊ 
   总的来说，使用留空应该遵循源远流长的英语阅读惯例。 例如，每个逗号和冒号（以及适用的分号）后面要空一格，但在括号内部的左侧和右侧都不要加空格。另外，大括号应该总是和他们前面的参数出现在同一行。 
   来看看下面的 JavaScript for循环的例子... 正确 
    
    1. 
    for 
      
    ( 
    var 
      
    i = 0, j = arr.length; i < j; i++) { 
    
    
    2. 
    // Do something. 
    
    
    3. 
    } 
    不正确 
    
    1. 
    for 
      
    (  
    var 
      
    i = 0, j = arr.length; i < j; i++ ) 
    
    
    2. 
    { 
    
    
    3. 
    // Do something. 
    
    
    4. 
    } 
    也不正确 
    
    1. 
    for 
    ( 
    var 
      
    i=0,j=arr.length;i 
   
 
    
    2. 
    // Do something. 
    
    
    3. 
    } 
    
   plugins.js 和 script.js◊ 
   从 H5BP 开始我们看到了两个文件， plugins.js 和 script.js。本节概述这两个文件的基本用法。 
   plugins.js◊ 
   Plugins.js 的用处是存放网站的所有插件代码。相比链接到很多不同的文件，我们可以把插件代码统一放到这个文件里，从而改善性能。这种用法会有也应该有例外。例如，一 个超级大的插件，又只是用在一个很少被访问到的页面上，放在单独的一个下载链接里就会更好，这样只会在目标页面被打开的时候才会被访问。不过，大部分情况 下，直接把所有插件的最小化版本粘贴到这里以便访问是靠谱的。 
   下面就是一个样例文件，包括一个小目录。它可以作为所用到插件的随身指南，包括文档URL，使用它们的思路，诸如此类。 
    
    01. 
    /* PLUGIN DIRECTORY 
    
    
    02. 
    本文件中出现的插件 [按出场顺序排序] 
    
    
    03.  
    
    
    04. 
    1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect 
    
    
    05. 
    2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/ 
    
    
    06. 
    3.) jQuery Ajax Form plugin - http://jquery.malsup.com/form/#download            
    
    
    07. 
    4.) jQuery validation plugin (form validation) - http://docs.jquery.com/Plugins/Validation 
    
    
    08. 
    -password strength 
    
    
    09. 
    5.) Styled Selects (lightweight) - http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview 
    
    
    10. 
    */ 
    
    
    11.  
    
    
    12. 
    /** 
    
    
    13. 
    * 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect 
    
    
    14. 
    * @author Alexander Farkas 
    
    
    15. 
    * v. 1.21 
    
    
    16. 
    */ 
    
    
    17. 
    ( 
    function 
    ($) { 
    
    
    18. 
    if 
    (!document.defaultView || !document.defaultView.getComputedStyle){  
    // IE6-IE8 
    
    
    19. 
    //SNIPPED 
    
    
    20. 
    }; 
    
    
    21. 
    })(jQuery); 
    
    
    22.  
    
    
    23.  
    
    
    24. 
    /** 
    
    
    25. 
    * 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) - http://gsgd.co.uk/sandbox/jquery/easing/ 
    
    
    26. 
    */ 
    
    
    27.  
    
    
    28. 
    // t: current time, b: begInnIng value, c: change In value, d: duration 
    
    
    29. 
    jQuery.easing[ 
    'jswing' 
    ] = jQuery.easing[ 
    'swing' 
    ]; 
    
    
    30.  
    
    
    31. 
    jQuery.extend( jQuery.easing, 
    
    
    32. 
    { 
    
    
    33. 
    //SNIPPED 
    
    
    34.  
    
    
    35. 
    }); 
    
    
    36. 
    ;( 
    function 
    ($) { 
    
    
    37. 
    $.fn.ajaxSubmit =  
    function 
    (options) { 
    
    
    38. 
    //SNIPPED 
    
    
    39. 
    } 
    
    
    40. 
    })(jQuery); 
    
    
    41.  
    
    
    42. 
    /* 
    
    
    43. 
    * jQuery Styled Select Boxes 
    
    
    44. 
    * version: 1.1 (2009/03/24) 
    
    
    45. 
    * @requires jQuery v1.2.6 or later 
    
    
    46. 
    * 
    
    
    47. 
    * Examples and documentation at: http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview 
    
    
    48. 
    * 
    
    
    49. 
    * Copyright (c) 2008 Lasar Liepins, liepins.org, [email protected] 
    
    
    50. 
    * 
    
    
    51. 
    * Permission is hereby granted, free of charge, to any person obtaining a copy 
    
    
    52. 
    * of this software and associated documentation files (the "Software"), to deal 
    
    
    53. 
    * in the Software without restriction, including without limitation the rights 
    
    
    54. 
    * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
    
    
    55. 
    * copies of the Software, and to permit persons to whom the Software is 
    
    
    56. 
    * furnished to do so, subject to the following conditions: 
    
    
    57. 
    * 
    
    
    58. 
    * The above copyright notice and this permission notice shall be included in 
    
    
    59. 
    * all copies or substantial portions of the Software. 
    
    
    60. 
    * 
    
    
    61. 
    * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
    
    
    62. 
    * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
    
    
    63. 
    * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
    
    
    64. 
    * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
    
    
    65. 
    * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
    
    
    66. 
    * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
    
    
    67. 
    * THE SOFTWARE. 
    
    
    68. 
    * 
    
    
    69. 
    */ 
    
    
    70.  
    
    
    71. 
    jQuery.fn.styledSelect =  
    function 
    (settings) { 
    
    
    72. 
    //SNIPPED 
    
    
    73. 
    return 
      
    this 
    ; 
    
    
    74. 
    }; 
    
   Script.js◊ 
   Script.js 的用处是存放网站或应用的代码代码。再次说明，这种方式并不总是最佳解决方案，因为更大的团队 和/或 规模更大、功能更多的项目可以得益于将应用代码分解为模块或功能特性相关的文件。不过，对于较小较简单的应用，以及最初的原型开发，把所有工作集中到 scripts.js 还是靠谱的。 
   下面是一个简化了的例子，用到了 基于标记的低调全面的DOM-ready执行 模式（【译者注】这里的‘低调’原文是Unobtrusive ，是一种将Javascript从HTML结构抽离的设计概念，避免在HTML标签中夹杂一堆onchange、onclick……等属性去挂载 Javascript事件，让HTML与Javascript分离，依MVC的原则将功能权责清楚区分，使HTML也变得结构化容易阅读。），看起来会类 似于这样： 
    
    01. 
    /* Name: Demo 
    
    
    02. 
    Author: Demo King */ 
    
    
    03. 
    /*demo namespace*/ 
    
    
    04. 
    demo = { 
    
    
    05. 
    common : { 
    
    
    06. 
    init     :  
    function 
    (){ 
    
    
    07. 
    //initialize 
    
    
    08. 
    }, 
    
    
    09. 
    finalize :  
    function 
    (){ 
    
    
    10. 
    //finalize 
    
    
    11. 
    }, 
    
    
    12. 
    config : { 
    
    
    13. 
    prop :  
    "my value" 
    , 
    
    
    14. 
    constant :  
    "42" 
    
    
    15. 
    } 
    
    
    16. 
    }, 
    
    
    17. 
    mapping : { 
    
    
    18. 
    init     :  
    function 
    (){ 
    
    
    19. 
    //create a map 
    
    
    20. 
    }, 
    
    
    21. 
    geolocate    :  
    function 
    (){ 
    
    
    22. 
    //geolocation is cool 
    
    
    23. 
    }, 
    
    
    24. 
    geocode :  
    function 
    (){ 
    
    
    25. 
    //look up an address or landmark 
    
    
    26. 
    }, 
    
    
    27. 
    drawPolylines :  
    function 
    (){ 
    
    
    28. 
    //draw some lines on a map 
    
    
    29. 
    }, 
    
    
    30. 
    placeMarker :  
    function 
    (){ 
    
    
    31. 
    //place markers on the map 
    
    
    32. 
    } 
    
    
    33. 
    } 
    
    
    34. 
    } 
    
   变量，ID 及 class◊ 
   所有的 JavaScript 变量必须写成全小写或驼峰法。一个例外是构造器函数，按惯例是首字母大写。所有CSS里的 id 和 class 声明都必须只用小写。不允许用连接符或下划线。 
   事件代理◊ 
   在分配低调（unobtrusive）的事件监听器时，通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过，偶尔也会有多个元素同时符合触发条件，给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下，你就应该改用事件代理了。 
   从性能角度考虑，jQuery的 delegate() 优于 live()。 
   调试◊ 
   即使采用了最好的校验器，浏览器的怪异性也会不可避免地产生一些问题。有几个堪称无价之宝的工具可以帮助优化代码的健全性和加载速度。很重要的一 点是，你手头准备好了这些工具，不管你主要用来开发的浏览器是哪个。我们推荐先在Firefox和Safari上做开发，然后用Google Chrome和Opera，最后针对IE用条件判断做一些额外的微调。下面列出的是一些有帮助的调试器和速度分析器： 
    
    Firefox: Firebug, Page Speed, YSlow 
    Safari: Web Inspector 
    Google Chrome: Developer Tools 
    Opera: Dragonfly 
    Internet Explorer 6-7: Developer Toolbar 
    Internet Explorer 8-10: Developer Tools 
    
   优化 JavaScript 的特征◊ 
    
    编写可维护的代码 
    单变量模式 
    Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题） 
    不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性） 
    不要用隐含的类型转换 
    不要用 eval() 
    用 parseInt() 进行数字转换 
    （规范）左大括号的位置 
    构造器首字母大写 
    写注释 
    不要用 void 
    不要用 with 语句 
    不要用 continue 语句 
    尽量不要用位运算 
    
   Stoyan Stefanov 的博文包含了以上原则 并有详细说明（【译者注】这篇博文值得一看）。 
  
 
   
    
    
 
    易用性◊返回顶部 
    
   美国政府相关法规508节： 局域网和互联网信息及应用标准。 
   — 本公司开发的接口必须符合相关法规508节的要求。 
   W3C 的易用性检查点清单。 
   — 本公司开发的接口必须符合第一优先级指南。 
   — WCAG 1.0 指南。 
   
   
    
     
    性能◊返回顶部 
    当我们持续把web的能力发挥到极致的时候，让网页在最小开销或等待时间下可用依然是同样重要的问题。下面的章节说明如何优化网页使用户满意。 
    
   优化CSS 和 Javascript传输◊ 
   在生产环境传输CSS和Javascript，必须采用很多优化措施： 
    
    遵循 Yahoo 性能指南 
    使用 smush.it 对图片进行无损压缩优化。 还有，用 YSlow 可以把你所有的图片自动压缩（【译者注】YSlow不仅仅提供性能优化工具，还详细说明了性能优化的34条规则，例如不要用CSS表达式、不要用空白的src或href、使用CDN、缓存AJAX响应、不要用过滤器、减少DOM元素数量等等）。 
    不要在HTML中写内联脚本


    
        你可能感兴趣的:(HTML5,Javascript,CSS,Web前端)
        
            
                
                    Long类型前后端数据不一致
                        igotyback
前端
                        响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
                    
                    DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
                    
                    HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
                    
                    webpack图片等资源的处理
                        dmengmeng

                        需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
                    
                    node.js学习
                        小猿L
node.jsnode.js学习vim
                        node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
                    
                    JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
                    
                    JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
                    
                    切换淘宝最新npm镜像源是
                        hai40587
npm前端node.js
                        切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
                    
                    《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
                    
                    高性能javascript--算法和流程控制
                        海淀萌狗

                        -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
                    
                    html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
                    
                    css设置当字数超过限制后以省略号（...）显示
                        周bro
css前端vuecss3html经验分享
                        1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
                    
                    360前端星计划-动画可以这么玩
                        马小蜗

                        动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
                    
                    h5小游戏定制开发
                        红匣子实力推荐

                        随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
                    
                    css2中的透明
                        琪33

                        .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
                    
                    JavaScript中秋快乐！
                        Q_w7742
javascript开发语言ecmascript
                        我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
                    
                    Nginx从入门到实践(三)
                        听你讲故事啊

                        动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
                    
                    Nginx的使用场景：构建高效、可扩展的Web架构
                        张某布响丸辣
nginx前端架构
                        Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
                    
                    前端知识点
                        ZhangTao_zata
前端javascriptcss
                        下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
                    
                    Python精选200Tips：121-125
                        AnFany
Python200+Tipspython开发语言
                        Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
                    
                    前端CSS面试常见题
                        剑亦未配妥
前端面试前端css面试
                        边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
                    
                    爬虫技术抓取网站数据
                        Bearjumpingcandy
爬虫
                        爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
                    
                    【JS】前端文件读取FileReader操作总结
                        程序员-张师傅
前端前端javascript开发语言
                        前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
                    
                    webstorm报错TypeError: this.cliEngine is not a constructor
                        Blue_Color

                        点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
                    
                    创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几
                        uthRaman
前端ui服务器
                        前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
                    
                    了解 UNPKG：前端开发者的包管理利器
                        小于负无穷
前端javascripttypescriptcsshtml5node.js
                        在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
                    
                    HTML中"bgcolor"与"background-color"的区别
                        Sardar_
html
                        bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
                    
                    2019-05-29 vue-router的两种模式的区别
                        Kason晨

                        1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
                    
                    清除 Conda 缓存
                        Dmatteratall
conda缓存
                        清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
                    
                                java线程的无限循环和退出
                                    3213213333332132
java
                                    最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。 
突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。 
希望帮助刚学java线程的童鞋 
 

package thread;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date
                                
                                tomcat 容器
                                    BlueSkator
tomcatWebservlet
                                    Tomcat的组成部分 1、server 
A Server element represents the entire Catalina servlet container. (Singleton) 2、service 
service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。 
  3、connector 
一个connector
                                
                                php递归,静态变量,匿名函数使用
                                    dcj3sjt126com
PHP递归函数匿名函数静态变量引用传参
                                      
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Current To-Do List</title>
</head>
<body>
                                
                                属性颜色字体变化
                                    周华华
JavaScript
                                    function changSize(className){ 
 
 var diva=byId("fot") 
 diva.className=className; 
 } 
</script> 
<style type="text/css"> 
 .max{ 
 background: #900; 
 color:#039; 
 
                                
                                将properties内容放置到map中
                                    g21121
properties
                                    代码比较简单： 
private static Map<Object, Object> map;
private static Properties p;

static {
	//读取properties文件
	InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
                                
                                [简单]拼接字符串
                                    53873039oycg
字符串
                                             工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下： 
          
import java.util.HashMap;
import java.uti
                                
                                Struts2学习
                                    云端月影

                                    最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。 
配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。 
使用Convention插件，你需要将其JAR文件放
                                
                                Java新手入门的30个基本概念二
                                    aijuans
java新手java 入门
                                    基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
                                
                                jedis 简单使用
                                    antlove
javarediscachecommandjedis
                                    jedis.RedisOperationCollection.java 
package jedis;

import org.apache.log4j.Logger;
import redis.clients.jedis.Jedis;

import java.util.List;
import java.util.Map;
import java.util.Set;

pub
                                
                                PL/SQL的函数和包体的基础
                                    百合不是茶
PL/SQL编程函数包体显示包的具体数据包
                                    由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,, 
  
函数; 
函数:PL/SQL中的函数相当于java中的方法;函数有返回值
定义函数的
--输入姓名找到该姓名的年薪
create or re
                                
                                Mockito(二)--实例篇
                                    bijian1013
持续集成mockito单元测试
                                            学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。 
        比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
                                
                                精通Oracle10编程SQL(7)编写控制结构
                                    bijian1013
oracle数据库plsql
                                    /*
 *编写控制结构
 */
 
--条件分支语句
--简单条件判断
DECLARE
  v_sal NUMBER(6,2);
BEGIN
  select sal into v_sal from emp
  where lower(ename)=lower('&name');
  if v_sal<2000 then
     update emp set
                                
                                【Log4j二】Log4j属性文件配置详解
                                    bit1129
log4j
                                    如下是一个log4j.properties的配置 
  
log4j.rootCategory=INFO, stdout , R

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appe
                                
                                java集合排序笔记
                                    白糖_
java
                                    public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{
	
	private static final long serialVersionUID = -2958090810811192128L;
	
	private int id;
	private String nam
                                
                                java导致linux负载过高的定位方法
                                    ronin47

                                    定位java进程ID 
可以使用top或ps -ef |grep java
![图片描述][1]
 根据进程ID找到最消耗资源的java pid 
比如第一步找到的进程ID为5431
执行
top -p 5431 -H
![图片描述][2]
 打印java栈信息 
$ jstack -l 5431 > 5431.log
 在栈信息中定位具体问题 
将消耗资源的Java PID转
                                
                                给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数
                                    bylijinnan
函数
                                    
import java.util.ArrayList;
import java.util.List;
import java.util.Random;


public class RandNFromRand5 {

	/**
	 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。
	 
	 解法1：
		 f(k) = (x0-1)*5^0+(x1-
                                
                                PL/SQL Developer保存布局
                                    Kai_Ge

                                          近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段： 
  
&n
                                
                                [未来战士计划]超能查派[剧透,慎入]
                                    comsci
计划
                                           非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........ 
 
 
       虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活.... 
 
   &nbs
                                
                                Google Map API V2
                                    dai_lm
google map
                                    以后如果要开发包含google map的程序就更麻烦咯 
 
http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 
 
找到篇不错的文章，大家可以参考一下 
 
http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 
 
1. 创建Android工程 
由于v2的key需要G
                                
                                java数据计算层的几种解决方法2
                                    datamachine
javasql集算器
                                    2、SQL 
    SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。 
 
    成熟度：5星。最成熟的。 
  
                                
                                Linux下Telnet的安装与运行
                                    dcj3sjt126com
linuxtelnet
                                     
Linux下Telnet的安装与运行       linux默认是使用SSH服务的 而不安装telnet服务    如果要使用telnet 就必须先安装相应的软件包    即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置   如果是redhat9，则在第三张光盘中找到   telnet-server-0.17-25.i386.rpm  
                                
                                PHP中钩子函数的实现与认识
                                    dcj3sjt126com
PHP
                                    假如有这么一段程序： 
 
 function fun(){ 
  fun1(); 
  fun2(); 
 } 
 
  首先程序执行完fun1()之后执行fun2()然后fun()结束。 
  但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。 
  我们可以在fu
                                
                                EOS中的WorkSpace密码修改
                                    蕃薯耀
修改WorkSpace密码
                                    EOS中BPS的WorkSpace密码修改 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 201
                                
                                SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】
                                    hanqunfeng
SpringSecurity
                                     SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下： 
  
applicationContex
                                
                                ie 9 kendo ui中ajax跨域的问题
                                    jackyrong
AJAX跨域
                                    这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序， 
浏览起来是没问题的，但把应用放到公网上的一台服务器， 
却发现如下情况： 
 
 
1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题 
 
                                
                                不要让别人笑你不能成为程序员
                                    lampcy
编程程序员
                                    在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。 
说实话，我感觉我的脑细胞像被轰炸过一样。 
手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？ 
难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？ 
我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
                                
                                马皇后的贤德
                                    nannan408

                                       马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。 
 
　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
                                
                                选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以）
                                    Rainbow702
sqlgroup by最大值max最大的那条记录
                                    好久好久不写SQL了，技能退化严重啊！！！ 
  
直入主题： 
比如我有一张表，file_info， 
它有两个属性（但实际不只，我这里只是作说明用）： 
file_code, file_version 
同一个code可能对应多个version 
现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录， 
SQL如下： 
select 
    *

                                
                                VBScript脚本语言
                                    tntxia
VBScript
                                      
VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。 
  VB家族语言简介 
  
 
 Visual Basic 6.0 
 
          源于BASIC语言。 
          由微软公司开发的包含协助开发环境的事
                                
                                java中枚举类型的使用
                                    xiao1zhao2
javaenum枚举1.5新特性
                                    枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量. 
  1.定义一个简单的枚举类型 
public enum Sex {
	MAN,
	WOMAN
} 
  
枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型. 
  2.常用方法 
静态的values()方
                                
                
            
        
    


    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

前端代码规范 及 最佳实践

概述

总体指导原则◊返回顶部

前端开发核心思想◊

总体原则◊

缩进◊

可读性 vs 压缩◊

标记◊返回顶部

HTML5◊

模板◊

Doctype◊

字符编码◊

标记的总体原则◊

属性加引号◊

CSS◊返回顶部

编码总体原则◊

CSS盒子模型◊

CSS 校验◊

CSS 格式◊

字母排序◊

Classes vs. IDs◊

选择器命名的惯例◊

选择器◊

伪类◊

组合及属性选择器◊

明确度◊

计算明确度◊

像素 vs. Em◊

IE Bugs◊

速记格式◊

图片◊

颜色管理◊

通用的文本和字体样式◊

标题◊

链接◊

Web字体◊

@font-face◊

防弹 @font-face◊

跨浏览器兼容◊

阻止兼容模式◊

有关 @font-face 的提示◊

Google WebFonts API 和 Font 加载器◊

Webfonts API◊

Webfont 加载器◊

Cufon◊

Typekit◊

可扩展 Inman Flash 替换 (sIFR)◊

字体版权◊

字体描述及字体文件格式◊

使用 CSS3◊

JavaScript◊返回顶部

JavaScript库◊

编码总体原则◊

留空◊

plugins.js 和 script.js◊

plugins.js◊

Script.js◊

变量，ID 及 class◊

事件代理◊

调试◊

优化 JavaScript 的特征◊

易用性◊返回顶部

性能◊返回顶部

优化CSS 和 Javascript传输◊

你可能感兴趣的:(HTML5,Javascript,CSS,Web前端)

前端代码规范及最佳实践