作者： jz

【前端技术文档】CSS3 Transition 过渡属性

整    理：晋哲、徐秀

时    间：2015-11-05

说    明：Transition属性的介绍和简单的用法


一、定义

允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标指针浮动到元素上时、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

二、语法

transition: property duration timing-function delay;
需要注意的一点：transition-duration与transition-delay的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。
transition-pic1
1、属性名称：transition-property
2、过渡时间：transition-duration
3、变换速率：transition-timing-function
4、开始时间：transition-delay

三、属性

1、属性名称：transition-property
描述：规定设置过渡效果的 CSS 属性的名称。

其属性值:
none：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。（默认值）
[property]：定义应用过渡效果的元素属性名称，多个属性以逗号分隔
注：[property]是可以指定元素的某个属性值。其对应的类型可以是：color、值为数字的属性、transform属性等等。

2、过渡时间：transition-duration
描述：规定完成过渡效果需要花费的时间，以秒或毫秒计。默认值是 0，意味着不会有效果。

3、变换速率：transition-timing-function
描述：规定速度效果的速度曲线。

其属性值:
linear：匀速
ease：逐渐变快，再逐渐变慢（默认）
ease-in：加速
ease-out：减速
ease-in-out：加速然后减速
cubic-bezier(x1,y1,x2,y2)：贝塞尔曲线，自定义一个时间曲线

transition-pic2

4、开始时间：transition-delay
描述：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认值是 0，意味着立即执行，没有延迟。

四、浏览器的兼容性

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

为兼容各大现代浏览器，在应用transition时需要加上各自的前缀，如：
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;

五、DEMO示例

实现效果：鼠标移上去时，宽度逐渐增加、改变背景色、方形变圆形，降低透明度。
<!-- HTML -->
<div class="box"></div>

<!-- CSS -->
.box{
    width: 100px;
    height: 100px;
    background: #000;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.box:hover{
    width: 300px;
    height: 300px;
    background: #f00;
    border-radius: 50%;
    opacity: .5;
}

前端培训流程及实例练习

编	写：晋	哲
时	间：2015-10-29
说	明：文章底部附实例练习文件的下载地址


> 前端培训步骤

一、前端规范文档的了解
请查看geek上的规范文档
《HTML编码规范》http://blog.geekman.vip/archives/353
《CSS编码规范》http://blog.geekman.vip/archives/352

二、基础HTML结构编写
了解常用标签，结构布局。
请查看geek上的《DIV+CSS布局》http://blog.geekman.vip/archives/426

三、手机页面常用CSS样式属性
了解常用样式属性，请查看文章底部的《页面常用样式属性》
可以对应w3school上的解说快速了解

四、PS切图工具的基本使用
请查看geek上的操作文档
《Photoshop基本切图操作文档》http://blog.geekman.vip/archives/476
《CSS Sprites》http://blog.geekman.vip/archives/497

五、手机页面实例练习
按顺序练习Demo1-4，从简到繁。

六、审核页面、疑问解答
   1、审查元素，调试页面
   2、与后端配合须知

到此步基本可以实现简单页面的编写。先示范讲解，再自己练习。
之后是丰富知识和熟练程度，需自己学习了解、实例练习。

七、手机端常用的简单Js或jQuery网页动态交互效果
结合Demo5中的交互效果，熟悉jQuery的常用交互效果

八、手机端常用的CSS3新属性
结合Demo6了解CSS3的过渡、动画属性用法，再对应w3school上的解说进行详细了解

九、强化实例练习，理解、解决遇到的实际问题

十、阅读《公司前端项目规范文档》
geek地址：http://blog.geekman.vip/archives/495


-----------------------分割线-----------------------


> 文件说明（具体内容见底部附件）

一、手机页面固定HMTL框架、PS切图练习源文件
简单了解HTML页面的组成，编写环境；通过对“每日新衣首页”页面的解析，了解页面整体框架。

二、Demo1_HTML简单局部
通过编写简单的登录页面，练习HTML代码架构，以及简单标签的使用。

三、Demo2_CSS基础样式运用
该练习初步涉及到CSS样式设置定位布局和浮动布局，以及间距、颜色等基础样式的运用。

四、Demo3_深入定位布局、背景图片
定位布局的灵活嵌套运用，强化浮动布局和盒模型设置，以及图片的运用，区别<img>标签图片和背景图片的设置

五、Demo4_切图操作、强化布局
稍复杂布局结构，开始PS切图练习，以及Sprite图合并与使用

六、Demo5_交互效果、完整练习（分两步）
1、弹窗页面的编写
通过练习了解页面固定定位、弹窗蒙层设置、预留Class设置交互效果，了解Js基础交互效果实现。

2、详情页整体页面练习
全局架构，简单的Js交互效果编写，如切换效果、显示隐藏效果、滑动效果等。

七、Demo6-CSS3动画效果介绍
了解常用的CSS3属性，以及实现效果练习。


-----------------------分割线-----------------------


> 页面常用样式属性

通过www.w3school.com.cn了解以下属性，即可应对日常样式调整。

一、布局
1、定位：position
2、位置：top / right / bottom / left
3、浮动：float
4、框类型：display
5、溢出：overflow
6、层叠顺序：z-index

二、盒模型
1、边框：border
2、外边距：margin
3、内边距：padding
4、宽度：width
5、高度：height

三、文本排版
1、文本系列：
    a、字号：font-size
    b、字体：font-family
    c、字体粗细：font-weight
2、排版系列：
    a、行高：line-height
    b、水平对齐：text-align
    c、垂直对齐：vertical-align
    d、缩进：text-indent

四、视觉效果
1、背景系列：background
    a、背景色：background-color
    b、背景图片：background-image
    c、背景平铺方式：background-repeat
    d、背景图片定位：background-position
    e、背景图片尺寸：background-size
2、颜色：color
    a、十六进制值（如：#fff）
    b、rgba形式值（如：rgb(255,255,255,.9)）
3、圆角边框：border-radius
4、边框阴影：box-shadow

附件：前端实例练习文件下载地址
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端培训流程

【前端技术文档】Photoshop基本切图操作文档

整    理：晋哲、徐秀

时    间：2015-10-23

说    明：切图思路步骤、批量切图软件推荐、PS工具手工切图操作


一、总览设计图，判断哪些需要保存成图片，哪些可以用样式编写实现。

1、需保存成图片的一般为颜色、形状多样的图像，如以下几种：
    a、轮播的banner图片
    b、商品图片
    c、形状复杂的icon图标

2、可用样式编写一般为纯色块的形状区块，如常用的“确认”按钮。

二、提取图片图层，进行裁切
有两种方式：A：批量化工具，B：手工操作

A：批量化工具（推荐）

方法一：PxCook像素大厨（软件工具）

步骤：
1、命名输出
将想输出的图层或图层组以.png或.jpg为后缀的名称命名之后，该图层或图层组就可以被PxCook软件识别了。

2、转换图层
推荐将有特效的图层或多个图层转化为智能对象，以便更好地识别PSD文档。

3、在PxCook中打开PSD文件
打开【切图工具】界面 -> 选择“保存按钮”中的【导出切图】即可

注意事项：
1、不能重命名，否则会覆盖；
2、PSD文件不能太大，可以事先转化为智能对象，以及把不需要的图层删除掉；
3、适合手机端页面切图，不适合PC端页面。

官网链接：http://www.fancynode.com.cn/pxcook/home
有具体的步骤说明，及软件下载

方法二：PS快速提取图层的方式
【文件】->【脚本】->【将图层导出到文件】

注意事项：
1、PSD文件一定不能大，图层不能太多，不适合PC端页面；
2、会将文件中的所有图层全部分别导出，所有不需要的图层得事先删掉；
3、需事先将图层组合并，否则会将元素组件分别导出。


B：手工操作

方法一：元素自身复制粘贴

操作步骤：

1、借助图层左侧的“可见”按钮，取消图片底部的背景图层的显示，直至背景区域透明；
pic1
2、“移动工具”点击选中要切的图片（最外围），再从“标尺”处拖出四条“参考线”分别至图片四周边缘（注：在图层选中的情况下，参考线会自动贴边）；
pic2
3、使用“选取工具”将四条“参考线”所围成的区域选中；
pic3
4、【Shift+Ctrl+C】合并拷贝，再【Ctrl+N】新建画布，最后“粘贴”即可。
pic4
注：再切下一个图片时，需先将上一个“选区”去除，再拖动参考线。

方法二：去除元素周围透明区域

操作步骤：
1、在众多图层中选中一个图片所组成的所有图层。
pic5
在选中所属图层的过程中，有两种方法可以借助：
a、借助“移动工具”点击快速选中图层，前提是勾选上“自动选择”；
pic6
b、借助图层左侧的“可见”按钮去查看该图层是否属于图片上的元素；
pic7
2、选中图层 -> 右击选择“复制图层” -> 选择文档“新建”，确定。
pic8
3、选择菜单栏的“图像” -> “裁切”工具，确定后可将透明区域裁切掉。
pic9

三、保存图片

保存图片需考虑实际需求
1、“存储为” -> PNG格式
当背景需要透明显示时使用，页面常用格式，如元素图标

2、“存储为Web所用格式” -> JPG格式
当背景为实体的图片时使用，如banner图片，商品图片

3、“存储为Web所用格式” -> PNG-8 格式
PC端需要考虑PNG格式图片的兼容性问题时使用，所以，PC页面一般保存为两张图，一为PNG透明背景的图片，一为PNG-8兼容图片

四、整合成Sprite图
当设计稿中所有图片元素存储下来之后，需考虑哪些图片需要整合成Sprite图，哪些是保存为单独的个体。
一般如图标元素则需要整合到一张图片上；<img>单独呈现的为一个个独立的图片。按需抉择。

五、颜色值的提取

1、纯色块的颜色值
单击“前景色及背景色”工具即可打开“拾色器”，这时鼠标就变为“吸管工具”功能，在色块上点击一下，即可在“拾色器”上读取到其颜色值
pic10
2、文字的颜色值以及其他属性
首先选中文字图层，再点击“文字工具”，即可在顶部的工具栏展现它的文字属性：字体、是否为粗体、字号、颜色值。
单击“颜色区域”即可获得它的颜色值
pic11
六、其他注意事项
1、当遇到平铺循环展示的图片，只需截取其中一部分，在用样式里的repeat平铺。
比如：渐变条、循环背景图片等

2、当同一版块中的每个图标的宽高各异时，在切图时需要为这些图标设置一个统一的宽高，方便样式统一编写。
方法：PxCook工具有关于“修改切图尺寸”的操作。
pic12

常用快捷键：

【V】：移动工具
【M】：选框工具
【T】：文字工具
【I】：取色工具
【Ctrl+Shift+C】：合并拷贝
【Ctrl+N】：新建图层
【Ctrl+Shift+Alt+S】：存储为web所用格式。同菜单栏【文件】->【存储为web所用格式…】
【Ctrl+Shift+S】：另存为，快速存储
【Ctrl+“+”】：放大图片
【Ctrl+“-”】：缩小图片
【Ctrl+R】：标尺的显示/隐藏切换
【Ctrl+T】：变换工具，选中图层变形
【Ctrl+Alt+C】：改变画布大小
【Ctrl+Alt+I】：改变图像大小

【前端技术文档】DIV+CSS布局

整    理：晋哲、徐秀

时    间：2015-10-16

说    明：DIV+CSS布局


> 简述

常见的网页布局方式，它取代了使用表格定义布局的老式方法。

DIV+CSS布局方式采用DIV盒模型结构将页面各部分内容划分到不同的区块，然后使用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等样式。具备全局设计观念，进行网页的统一设计管理，通过一个样式表，牵一发而动全身，只要修改样式表，就可以统一全站的风格。

简单地说，DIV用于搭建网页结构（框架）、CSS用于创建网页表现（样式/美化），页面内容和样式表现相分离，对网页进行标准化重构。


> 实例步骤

一、浏览设计效果图
综览设计图，可将页面结构区块划分，先构思全局架构，再细分局部结构。
div_pic1

二、HTML整体布局

在编写html代码时，一般结合两种方式：

1、从外到内
从整体到局部，先编写外围框架代码，再嵌套内部元素代码

如常见的页面结构：
body {}
  └Wrapper {}               /*页面层容器*/
      ├Header {}            /*页面头部*/
      ├PartMain {}          /*页面主体*/
      │   ├Sidebar {}      /*侧边栏*/
      │   └PartContent {}  /*主体内容*/
      └Footer {}            /*页面底部*/

2、从上到下
按页面结构、元素等顺序，有条不紊的搭建HTML框架

如下图简单的局部HTML代码结构：
div_pic2

总结：这两种方式没有先后之分，可以从外到内，先把整个页面的框架搭好，再一步步写每个区块里面的内容；也可以从上到下，按顺序先完成一块区域里面的全部内容，再去搭建下一个区块。


三、CSS样式美化

CSS通过选择器来关联定义盒模型的位置、大小、边框、内外边距、排列方式等样式属性。

下图为盒模型简图：
div_pic3

在编写样式进行页面表现时，有以下三种方式来插入样式表：

1、外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

例：
<head>
<link rel="stylesheet" href="style.css">
</head>

2、嵌入式样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

例：
<head>
……
<style>
    body{background-color: #fff;}
</style>
</head>

3、内联样式
当特殊的样式需要应用到个别元素时，可以使用内联样式。

例：
<span style="color: #000; margin-left: 20px">Hello World</span>

总结：三种样式表优先使用外部样式表、嵌入式样式表用来调试用的，一般不使用内联样式表。


> 定义说明

一、DIV+CSS的实质

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（Table）布局定位的方式不同，它可以实现网页页面内容（HTML）与表现（CSS）相分离。

DIV+CSS是WEB标准中常用的术语之一，而标准的叫法应是XHTML+CSS。通常是为了区别HTML网页设计语言中的表格（Table）定位方式，因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。所谓DIV+CSS布局的叫法容易让人误解为通篇只使用DIV标签，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。

当然不是所有的网页都需要用DIV+CSS布局，不要让DIV成为Table的替代品，例如数据页面、报表之类的页面的时候还是会用Table，WEB标准里并没有说要摒弃Table。

二、DIV+CSS的优势

1、使页面载入得更快
由于将大部分页面样式代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

2、降低流量费用
页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。

3、修改设计时更有效率
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。

4、保持视觉的一致性
DIV+CSS最重要的优势之一，以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

5、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。

6、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

三、存在的问题

1、对于CSS的高度依赖使得网页设计变得比较复杂。
相对于表格布局（Table），DIV+CSS布局要比表格定位复杂的多，在网站架构时容易出现页面错位等情况，所以需要编写HTML代码和样式文件时结构严谨，样式兼容。

2、CSS文件异常将影响整个网站的正常浏览。
CSS网站制作的设计元素通常放在几个外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

3、对于网页的浏览器兼容性问题比较突出。
DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如CSS3样式属性IE兼容问题。因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。

【前端技术文档】HTML编码规范

整    理：晋哲、徐秀

时    间：2015-10-15

说    明：HTML编码规范


----- 目录 -----

1 前言

2 代码风格

    2.1 缩进与换行

    2.2 命名

    2.3 标签

    2.4 属性

3 通用

    3.1 DOCTYPE

    3.2 编码

    3.3 CSS和JavaScript引入

4 head

    4.1 title

    4.2 favicon（网页icon图标）

    4.3 viewport

5 图片

6 表单

    6.1 控件标题

    6.2 按钮

    6.3 可访问性 (A11Y)

7 多媒体


----- 正文 -----

1 前言

HTML作为描述网页结构的超文本标记语言，本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。


2 代码风格


2.1 缩进与换行


[强制] 设置 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符与空格的混合。


[建议] 使用编辑器换行自动缩进，避免手动输入空格，不得不手动缩进时按Tab键。

示例：

<ul>

    <li>first</li>

    <li>second</li>

</ul>


[建议] 每行不得超过 120 个字符。

解释：
过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。


2.2 命名


[强制] class 必须单词全字母小写，单词间以 - 分隔。


[强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

示例：

<!-- good -->

<div class="sidebar"></div>

<!-- bad -->

<div class="left"></div>


[强制] 元素 id 必须保证页面唯一。

解释：
同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。


[建议] id 必须单词全字母小写，多个单词使用“下划线”连接。同项目必须保持风格一致，方便后端人员阅读。


[建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。

示例：

<!-- good -->

<div id="nav"></div>

<!-- bad -->

<div id="navigation"></div>


<!-- good -->

<p class="comment"></p>

<!-- bad -->

<p class="com"></p>


<!-- good -->

<span class="author"></span>

<!-- bad -->

<span class="red"></span>


[强制] 禁止为了 hook 脚本，创建无样式信息的 class。

解释：
不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。

使用 id、属性选择作为 hook 是更好的方式。


[强制] 同一页面，应避免使用相同的 name 与 id。

解释：
IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

一个比较好的实践是，为 id 和 name 使用不同的命名法。

示例：

<input name="foo">

<div id="foo"></div>

<script>

// IE6 将显示 INPUT

alert(document.getElementById('foo').tagName);

</script>


2.3 标签


[强制] 标签名必须使用小写字母。
示例：

<!-- good -->

<p>Hello StyleGuide!</p>

<!-- bad -->

<P>Hello StyleGuide!</P>


[强制] 所有标签必须闭合。

每个标签都要有开始和结束，非成对标记必须以“/>”结尾，且“/”前必须有一个空格，如<img />、<input />、<br />等

解释：
常见自闭合标签有input、img、br、hr等。
虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间


[强制] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

解释：
对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。

示例：

<!-- good -->

<ul>

    <li>first</li>

    <li>second</li>

</ul>


<!-- bad -->

<ul>

    <li>first

    <li>second

</ul>


[强制] 标签使用必须符合标签嵌套规则。

解释：

内联元素不能嵌套块元素。比如 div 不得置于 p 中，tbody 必须置于 table 中。

详细的标签嵌套规则参见HTML DTD中的 Elements 定义部分。


[建议] HTML 标签的使用应该遵循标签的语义。

解释：

下面是常见标签语义

p - 段落

h1,h2,h3,h4,h5,h6 - 层级标题

strong,em - 强调

ins - 插入

del - 删除

abbr - 缩写

code - 代码标识

cite - 引述来源作品的标题

q - 引用

blockquote - 一段或长篇引用

ul - 无序列表

ol - 有序列表

dl,dt,dd - 定义列表

示例：

<!-- good -->

<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>


<!-- bad -->

<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>


[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。

解释：
在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。


[建议] 标签的使用应尽量简洁，减少不必要的标签。

示例：

<!-- good -->

<img class="avatar" src="image.png">

<!-- bad -->

<span class="avatar">

    <img src="image.png">

</span>


2.4 属性


[强制] 属性名必须使用小写字母。

示例：

<!-- good -->

<table cellspacing="0">...</table>


<!-- bad -->

<table cellSpacing="0">...</table>


[强制] 属性值必须用双引号包围。

解释：
不允许使用单引号，不允许不使用引号。

示例：

<!-- good -->

<script src="esl.js"></script>


<!-- bad -->

<script src='esl.js'></script>

<script src=esl.js></script>


[建议] 布尔类型的属性，建议不添加属性值。

示例：

<input type="text" disabled>

<input type="checkbox" value="1" checked>


[建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data-。

解释：
使用前缀有助于区分自定义属性和标准定义的属性。

示例：

<ol data-ui-type="Select"></ol>


3 通用


3.1 DOCTYPE


[强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

示例：

<!DOCTYPE html>


[建议] 启用 IE Edge 模式。

示例：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">


[建议] 在 html 标签上设置正确的 lang 属性。

解释：
有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。

示例：

<html lang="zh-CN">


3.2 编码


[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。

解释：
见《HTML5 Charset能用吗》一文。

示例：

<html>

<head>

    <meta charset="UTF-8">

    ......

</head>

<body>

    ......

</body>

</html>


[建议] HTML 文件使用无 BOM 的 UTF-8 编码。

解释：
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。


3.3 CSS和JavaScript引入


[强制] 引入 CSS 时必须指明 rel="stylesheet"。

示例：

<link rel="stylesheet" src="page.css">


[建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。

解释：
text/css 和 text/javascript 是 type 的默认值。


[建议] 展现定义放置于外部 CSS 中，行为定义放置于外部 JavaScript 中。

解释：
结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。

[建议] 在 head 中引入页面需要的所有 CSS 资源。

解释：
在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。


[建议] JavaScript 应当放在页面末尾（</body>标签之前），或采用异步加载。

解释：
将 script 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。

示例：

<body>

<!-- a lot of elements -->

<script src="init-behavior.js"></script>

</body>


[建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。

解释：
使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境。

示例：

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>


4 head


4.1 title


[强制] 页面必须包含 title 标签声明标题。


[强制] title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

解释：
title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。

示例：

<head>

    <meta charset="UTF-8">

    <title>页面标题</title>

</head>


4.2 favicon（网页icon图标）


[强制] 保证 favicon 可访问。

解释：
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件。

使用 link 指定 favicon。

示例：

<link rel="shortcut icon" href="path/to/favicon.ico">


4.3 viewport


[建议] 若页面欲对移动设备友好，需指定页面的 viewport。

解释：
viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。

比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用 device-width 和 device-height 变量。

另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。关于 viewport 的更多介绍，可以参见 Safari Web Content Guide的介绍


5 图片


[强制] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

解释：
src 取值为空，会导致部分浏览器重新加载一次当前页面，参考：https://developer.yahoo.com/performance/rules.html#emptysrc

[建议] 避免为 img 添加不必要的 title 属性。

解释：
多余的 title 影响看图体验，并且增加了页面尺寸。


[建议] 为重要图片添加 alt 属性。

解释：
可以提高图片加载失败时的用户体验。


[建议] 添加 width 和 height 属性，以避免页面抖动。


[建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

解释：
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。

无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。


6 表单


6.1 控件标题


[强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。

解释：

有两种方式：

1、将控件置于 label 内。

2、label 的 for 属性指向控件的 id。

推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

示例：

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

<label for="username">用户名：</label> <input type="textbox" name="username" id="username">


6.2 按钮


[强制] 使用 button 元素时必须指明 type 属性值。

解释：
button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。

示例：

<button type="submit">提交</button>

<button type="button">取消</button>


[建议] 尽量不要使用按钮类元素的 name 属性。

解释：
由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。具体情况可参考此文。


6.3 可访问性 (A11Y)


[建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。

解释：
负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 float: right 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。

示例：

<!-- good -->

<style>

.buttons .button-group {

    float: right;

}

</style>


<div class="buttons">

    <div class="button-group">

        <button type="submit">提交</button>

        <button type="button">取消</button>

    </div>

</div>


<!-- bad -->

<style>

.buttons button {

    float: right;

}

</style>


<div class="buttons">

    <button type="button">取消</button>

    <button type="submit">提交</button>

</div>


[建议] 当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。

解释：
当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。

示例：

<form action="/login" method="post">

    <p><input name="username" type="text" placeholder="用户名"></p>

    <p><input name="password" type="password" placeholder="密码"></p>

</form>


[建议] 在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。

解释：
根据内容类型指定输入框类型，能获得能友好的输入体验。

示例：

<input type="date">


7 多媒体


[建议] 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。

解释：

音频应尽可能覆盖到如下格式：

MP3

WAV

Ogg


视频应尽可能覆盖到如下格式：

MP4

WebM

Ogg


[建议] 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。


[建议] 使用退化到插件的方式来对多浏览器进行支持。

示例：

<audio controls>

    <source src="audio.mp3" type="audio/mpeg">

    <source src="audio.ogg" type="audio/ogg">

    <object width="100" height="50" data="audio.mp3">

        <embed width="100" height="50" src="audio.swf">

    </object>

</audio>


<video width="100" height="50" controls>

    <source src="video.mp4" type="video/mp4">

    <source src="video.ogg" type="video/ogg">

    <object width="100" height="50" data="video.mp4">

        <embed width="100" height="50" src="video.swf">

    </object>

</video>

[建议] 只在必要的时候开启音视频的自动播放。


[建议] 在 object 标签内部提供指示浏览器不支持该标签的说明。

示例：

<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>


参考出处：

《HTML编码规范》
https://github.com/ecomfe/spec/blob/master/html-style-guide.md#user-content-1-%E5%89%8D%E8%A8%80

《HTML/CSS开发规范指南》
https://github.com/doyoe/html-css-guide


注：该文档在参考文档基础上有部分修改、删除，已本文档为主。若遇文档中外链处可在参考文档中找到链接。

首页添加背景广告

操作步骤：
一、图片添加
尺寸：【1280、1360、1366、1440、1600、1920】（命名时在后面加后缀）
路径：/opt/ci123/www/html/cms/index/styles/images
注：为兼容浏览器，设计处理图片时需将中间白色区域向右延伸1px，实际宽度为961px。
广告栏高度：60px
导航栏高度：40px
顶部60px高度之后需要预留40px高度的空间给导航栏

二、JS修改
路径：/opt/ci123/www/html/cms/index/styles/js
目前最新js文件：add_new_201511021107.js
原始js文件：add_new.js

1、拷贝一份最新的文件，在其基础上修改；
2、修改时一般只需修改时间的if判断条件（如果是间隔天数请参考add_new_201509089.js，如果是连续区间天数请参考add_new.js）
3、需要编辑提供新的背景图片的链接地址

三、HTML修改
路径：/opt/ci123/www/html/cms/index/templates
需最终修改的线上文件：index_v15.html

1、将文件拷贝到index_v15_gff.html上，在测试页面上修改，预览
cp index_v15.html index_v15_gff.html

预览地址：http://www.ci123.com/index/index_v15_gff.php

2、在页面中搜索"add_new"，修改js命名
<script type="text/javascript" src="/index/styles/js/add_new.js"></script>

3、测试页面确认无误后，再在index_v15.html上重复上一步操作（为保险可将index_v15.html另外复制一份）

四、最后在ci123管理后台更新首页
地址：http://nimda.ci123.com/index.php

前端三个月水平

一、移动端
1、自适应布局（响应式）
2、HTML5+CSS3
3、iPhone/android

二、HTML5运用
1、新标签的使用
2、HTML5表单的运用
3、Canvas和Svg的运用

三、CSS3运用
1、新属性的了解
2、transition、animation动画效果实现

四、CSS预处理器
1、Sass
2、Less
3、Stylus
选其一，推荐Sass

五、编程语言
1、Javascript
2、php基础语法（w3school php 基础教程）

六、JS基础类库
1、jQuery
2、Prototype
3、Zepto
4、MooTool
5、Underscore

七、了解前端框架
1、Bootstrap
2、Foundation
3、Semantic UI
4、jQuery UI

八、网页性能优化
1、Page Speed
2、Yslow
3、FeHelper
4、WebPageTest
5、ShowSlow
6、DynaTrace Ajax Edition
7、HttpWatch

九、其他工具使用
1、putty使用设置
2、简单linux命令
3、svn使用，参考《svn常用命令及练习.txt》
4、vim使用
5、winscp使用

十、根据域名查找程序位置
1、dig ssh命令等的配合
2、查看文档
3、新建项目文件，Checkout到本地
4、nginx清除缓存

前端三个月水平

前端两周水平

一、基本语法
1、html表格布局
2、div+css布局

二、切图工具使用
1、photoshop基本切图
2、CSS Sprite图的生成

三、前端标准规范
1、最新的HTML、CSS、JS的编码规范
2、公司后台分享的“前端开发注意事项”和“Web前端书写规范”

四、编辑器的选用
1、Sublime Text
2、Brackets
3、Dreamweaver

五、JS基础
1、JS HTML DOM
2、常用的js或jquery网页交互动态效果实现（参考公司网站用到的各种效果）

六、浏览器知识
1、常用浏览器 firefox、chrome、360、ie各版本
2、ctrl+f5 强刷，清除浏览器缓存
3、F12 调试页面显示
4、查看源代码
5、Chrome浏览器【审查元素】，调试样式
6、了解常遇到的浏览器兼容问题（考虑IE兼容性）

七、网页性能分析优化
1、Page Speed
2、Chrome开发者工具
3、Firebug

八、学习途径
1、w3school教程：www.w3school.com.cn
2、慕课网：www.imooc.com
3、前端论坛、博客

九、其他
1、周报按要求抒写，查看文档《周报要求.txt》
2、每周分享会要求，查看文档《分享资料格式要求.txt》
3、abc项目管理后台，解决问题反馈
4、文档：提问的艺术
5、文档：做事优先级
6、翻墙能力
·基本原理
·GoAgent
·自由门
·无界等等前端两周水平