HTMl规范

1DOCTYPE 声明

一个DOCTYPE必须包含以下部分，并严格按照顺序出现：

一个ASCII字符串 “<!DOCTYPE” ，大小写不敏感
一个或多个空白字符
一个ASCII字符串”html”，大小写不敏感
一个可选的历史遗留的DOCTYPE字符串（DOCTYPE legacy string），或者一个可选的已过时但被允许的DOCTYPE字符串（obsolete permitted DOCTYPE string）字符串
一个或多个空白字符
一个编码为 U+003E 的字符 “>”
团队约定
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>

一般情况下统一使用 “UTF-8” 编码

请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。

元素及标签闭合

HTML元素共有以下5种：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
原始文本元素：script、style
RCDATA元素：textarea、title
外来元素：来自MathML命名空间和SVG命名空间的元素。
常规元素：其他HTML允许的元素都称为常规元素。

元素标签的闭合应遵循以下原则：

原始文本元素、RCDATA元素以及常规元素都有一个开始标签来表示开始，一个结束标签来表示结束。
某些元素的开始和结束标签是可以省略的，如果规定标签不能被省略，那么就绝对不能省略它。
空元素只有一个开始标签，且不能为空元素设置结束标签。
外来元素可以有一个开始标签和配对的结束标签，或者只有一个自闭合的开始标签，且后者情况下该元素不能有结束标签。
4 书写风格
4.1 HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：

不推荐：

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

I AM WHAT I AM

4.2 类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：

不推荐：

4.3 元素属性

元素属性值使用双引号语法
元素属性值可以写上的都写上

推荐：

不推荐：

更多关于元素属性：#Attributes

4.4 特殊字符引用

文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
推荐：

more>>

不推荐：

more>>

更多关于符号引用：#Character references

4.5 代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

4.6 纯数字输入框

使用 type="tel" 而不是 type="number"

4.7 代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：

不推荐：

段落元素与标题元素只能嵌套内联元素
推荐：

不推荐：

图片格式

常见的图片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根据图片格式的特性和场景需要选取适合的图片格式。

GIF

GIF图象是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持8位（256色）。GIF文件内部分成许多存储块，用来存储多幅图象或者是决定图象表现行为的控制块，用以实现动画和交互式应用。GIF文件还通过LZW压缩算法压缩图象数据来减少图象尺寸

特性

优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
可插入多帧，从而实现动画效果。
可设置透明色以产生对象浮现于背景之上的效果。
由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩色图片。
PNG

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。

特性

支持256色调色板技术，文件体积小。
无损压缩
最高支持48位真彩色图像以及16位灰度图像。
支持Alpha通道的透明/半透明特性。
支持图像亮度的Gamma校准信息。
支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
使用CRC防止文件出错。
最新的PNG标准允许在一个文件内存储多幅图像。
JPEG

JPEG是一种针对照片视频而广泛使用的一种有损压缩标准方法。这个名称代表Joint Photographic Experts Group（联合图像专家小组）。此团队创立于公元1986年，1992年发布了JPEG的标准而在1994年获得了ISO 10918-1的认定

特性

适用于储存24位元全采影像
采取的压缩方式通常为有损压缩
不支持透明或动画
压缩比越高影像耗损越大，失真越严重
压缩比在10左右肉眼无法辨出压缩图与原图的差别
WEBP

WebP，是一种同时提供了有损压缩与无损压缩的图片文件格式，派生自视频编码格式 VP8，是由Google在购买On2 Technologies后发展出来。WebP最初在2010年发布，2011年11月8日，Google开始让WebP支持无损压缩和透明色的功能，而在2012年8月16日的参考实做libwebp 0.2.0中正式支持

特性

同时提供有损压缩和无损压缩两种图片文件格式
文件体积小，无损压缩后，比 PNG 文件少了 45％的文件大小；有损压缩后，比 JPEG 文件少了 25% - 34% 文件大小
浏览器兼容差，目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器(Andriod 4.0+)，WebP兼容性

内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

图片大小

全国网速现状

固定网络
中国固定宽带互联网网络平均网络下载速率达到7.90 Mbit/s，用户进行网页浏览的平均首屏呈现时间为2.18s，平均视频下载速率为6.41Mbit/s

移动网络
3G网络传输速率理论峰值在3.5Mbps，4G网络传输速率理论上可达到20Mbps，最高可以达到100Mbps。根据 128KB/s=128×8(Kb/s)=1024Kb/s=1Mb/s 的转换来算，3G网络的理论传输速率可达到450KB/s，4G网络的理论传输速率可达到 2.5MB/s ~ 12.5MB/s
受用户计算机性能、网络设备质量、资源使用情况、网络高峰期、网站服务能力、线路衰耗、信号衰减等多因素影响，3G和4G的实际平均传输速率约为：
3G：最高值100KB/s，平均值40～50KB/s
4G：最高值2.75MB/s，平均500～1000KB/s
3G/4G用户占比
2015年8月移动宽带（3G/4G）用户占比各省分布情况：
据文章《工信部：2015年7月底中国4G用户累计超过2.5亿》介绍：

截至2015年7月底，中国4G用户累计超过2.5亿（全球LTE用户超过7.9亿，全球TD-LTE用户超过2.78亿），已建设4G基站超过153万个，其中完成TD-LTE基站建设超过100万个，多载波聚合等TD-LTE演进技术逐步商用，4G智能手机已经占到国内智能手机市场的82.7%。

团队约定

中国普通家庭的宽带基本能达到8Mbps，实际速率大约为500—900KB/s，全国3G/4G用户占有比超过了50%，为了保证图片能更好地加载展示给用户看，团队约定：
PC平台单张的图片的大小不应大于 200KB。
移动平台单张的图片的大小不应大于 100KB。

图片质量

上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域
60质量的JPEG格式图片与质量大于60的相比，肉眼已看不出明显的区别，因此保存 JPEG 图的时候，质量一般控制在60，若保真度要求高的图片可适量提高到 80，图片大小控制在 200KB 以内

CSS规范

1.1 css命名规范

采用BEM规范: http://getbem.com

1.2 css注释

/ Comment Text /

1.3 css文件夹归类

common.css 通用CSS
mixins.css mixins文件
variables.css 存储常量

重置样式

移动端

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }img { border: 0 none; vertical-align: top; }i, em { font-style: normal; }ol, ul { list-style: none; }input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }table { border-collapse: collapse; border-spacing: 0; }a { text-decoration: none; color: #666; }body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }input[type=”text”], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

pc端

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }ul, ol { list-style: none; }img { border: 0 none; vertical-align: top; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: none; }table { border-collapse: collapse; border-spacing: 0; }strong, em, i { font-style: normal; font-weight: normal; }ins { text-decoration: underline; }del { text-decoration: line-through; }mark { background: none; }input::-ms-clear { display: none !important; }body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, “Hiragino Sans GB”, STHeiti, “WenQuanYi Micro Hei”, “Droid Sans Fallback”, SimSun, sans-serif; background: #fff; }a { text-decoration: none; color: #333; }a:hover { text-decoration: underline; }

常用查询语句

判断设备横竖屏

/ 横屏 /@media all and (orientation :landscape) {} / 竖屏 /@media all and (orientation :portrait) {}

判断设备宽高

/ 设备宽度大于 320px 小于 640px /@media all and (min-width:320px) and (max-width:640px) { }

判断设备像素比

/ 设备像素比为 1 /@media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) { }/ 设备像素比为 1.5 /@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { }/ 设备像素比为 2 /@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { }

常用设备设置

iPhones

/ —————- iPhone 4 and 4S —————- // Portrait and Landscape /@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {}/ Portrait /@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}/ Landscape /@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}/ —————- iPhone 5 and 5S —————- // Portrait and Landscape /@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {}/ Portrait /@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}/ Landscape /@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}/ —————- iPhone 6 —————- // Portrait and Landscape /@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { }/ Portrait /@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { }/ Landscape /@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { }/ —————- iPhone 6+ —————- // Portrait and Landscape /@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { }/ Portrait /@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { }/ Landscape /@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }

Galaxy Phones

/ —————- Galaxy S3 —————- // Portrait and Landscape /@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {}/ Portrait /@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {}/ Landscape /@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {}/ —————- Galaxy S4 —————- // Portrait and Landscape /@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}/ Portrait /@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}/ Landscape /@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}/ —————- Galaxy S5 —————- // Portrait and Landscape /@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}/ Portrait /@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}/ Landscape /@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}

HTC Phones

/ —————- HTC One —————- // Portrait and Landscape /@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}/ Portrait /@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}/ Landscape /@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}

iPads

/ —————- iPad mini —————- // Portrait and Landscape /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}/ Portrait /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}/ Landscape /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}/ —————- iPad 1 and 2 —————- // Portrait and Landscape /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}/ Portrait /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}/ Landscape /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}/ —————- iPad 3 and 4 —————- // Portrait and Landscape /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}/ Portrait /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}/ Landscape /@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}

移动端常用私有属性

目前两大主流移动平台为 iOS 和 Android，有不少带 -webkit- 前辍的 CSS 私有属性以及一些 iOS only 属性，当中好些属性在日常需求中经常应用到。
WebKit CSS 属性中的一部分已经被包含在 CSS 规范草案中，并且可能成为最后的推荐标准，但目前仍然是试验性的属性，还有一些属性是不规范的属性，它们没有出现在跟踪规范中。

-webkit-scrollbar

-webkit-scrollbar 是-webkit-私有的伪元素，用于对拥有overflow属性的区域 自定义滚动条的样式。
譬如，为了隐藏滚动条，你可以这么做：

.scroll::-webkit-scrollbar { width: 0; height: 0;}

除了对整个滚动条的控制外，Webkit还提供了控制对滚动条各组成部分的表现渲染的伪元素，甚至具体到滚动条的各种状态行为的伪类。

滚动条各块组成表现渲染的伪元素

一般而言，滚动条的主要组成部分包括：

滚动按钮 — 滚动按钮的夹角则被称为滚动角(corner)。
轨道 — 轨道(track)可以进一步分为轨枕(track pieces) 和滑块(thumb)。

Webkit则根据滚动条各组成部分，提供了不同的伪元素来自定义样式。

::-webkit-scrollbar { / 1 / }::-webkit-scrollbar-button { / 2 / }::-webkit-scrollbar-track { / 3 / }::-webkit-scrollbar-track-piece { / 4 / }::-webkit-scrollbar-thumb { / 5 / }::-webkit-scrollbar-corner { / 6 / }::-webkit-resizer { / 7 / }

::-webkit-scrollbar：滚动条整体部分。可设置width、height、background、border等。
::-webkit-scrollbar-button：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track：轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece：轨枕，也就是除去滚动滑块的部分。
::-webkit-scrollbar-thumb：滚动滑块，也就是滚动条里面可以拖动的那部分。
::-webkit-scrollbar-corner：滚动按钮的夹角则被称为滚动角。
::-webkit-resizer：用于定义右下角拖动块的样式。
需要注意的是：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。

滚动条各块组成的伪元素

下面的伪类可以应用到上面的伪元素中。
:horizontal：选择水平方向的滚动条。
:vertical：选择垂直方向的滚动条。
:decrement：适用于滚动按钮和轨枕。选择能够使得视窗位置递减状态(例如，垂直滚动条向上滚动，水平滚动条向左滚动。)的滚动按钮或轨枕。
:increment：适用于滚动按钮和轨枕。选择能够使得视窗位置递增状态(例如，垂直滚动条向下滚动，水平滚动条向右滚动。)的滚动按钮或轨枕。
:start：适用于滚动按钮和轨枕。选择位于滚动滑块前边的滚动按钮和轨枕。
:end：适用于滚动按钮和轨枕。选择位于滚动滑块后边的滚动按钮和轨枕。
:double-button：适用于滚动按钮和轨枕。选中紧挨着一对按钮的轨枕以及位于滚动条某一端的一对按钮中的其中一个滚动按钮。
:single-button：适用于滚动按钮和轨枕。选中紧挨着仅一个按钮的轨枕以及位于滚动条某一端的仅它本身一个的滚动按钮。
:no-button：适用于轨枕。选中轨道结束位置没有按钮的轨枕。
:corner-present：适用于选中滚动角不存在的滚动条。
:window-inactive：适用于所有滚动条，选中焦点不在该视窗的滚动区域。
另外，:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适用。
为了更好地理解，以下是几个伪元素组合伪类的应用例子：

::-webkit-scrollbar-track-piece:start { /\滚动条上半边或左半边\/}::-webkit-scrollbar-thumb:window-inactive { /\当焦点不在当前区域滑块的状态\/::-webkit-scrollbar-button:horizontal:decrement:hover { /\当鼠标在水平滚动条下面的按钮上的状态\/

-webkit-touch-callout
-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单，这个属性可以让你禁用系统默认菜单。

属性值

none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用

兼容性
iOS 2.0及更高版本的 Safari 浏览器可用
Android 尚不明确

-webkit-tap-highlight-color
-webkit-tap-highlight-color 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
在 iOS Safari 上，当用户点击链接或具有 JavaScript 可点击脚本的元素，系统会为这些被点击元素加上一个默认的透明色值，该属性可以覆盖该透明值。

属性值
：颜色值

兼容性
iOS 1.1.1及更高版本的Safari浏览器可用
大部分安卓手机

-webkit-overflow-scrolling
定义在具 overflow:scroll 属性的元素内是否采用原生样式滚动行为

属性值
auto：默认值，单手滚动，滚动没有惯性效果
touch：原生样式滚动，应用此属性值会产生层叠上下文（会影响定位参照物的属性，类似 opacity、masks、transforms属性，影响到 position 的效果，甚至影响到 position:fixed的定位参照物，）

兼容性
iOS 5.0 及更高版本
大部分安卓机

-webkit-line-clamp
-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。
常见结合属性：
display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

属性值
：块元素显示的文本的行数

兼容性
iOS
Andriod

-webkit-appearance
-webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
改变按钮和其他控件的外观，使其类似于原生控件。

属性值
none：去除系统默认 appearance 的样式，常用于 iOS 下移除原生样式
button：渲染成 button 的风格
checkbox：渲染成 input checkbox 样式的复选框按钮
radio：渲染成 radio 的风格
…

更多属性值参考 mozilla：-webkit-appearance 属性

兼容性

iOS 2.0及更高版本的Safari浏览器可用
Android 尚不明确
-webkit-font-smoothing
字体平滑，该属性定义文本的平滑属性，但要注意以下说明：

非标准属性，不建议用于网页上，这个属性不能保证所有用户都能看到相同效果，这会使网站的字体渲染造成不一致，而此属性的渲染行为日后也有可能会改变

属性值

none：去掉字体平滑效果，使字体带锯齿
antialiased：使字体在像素级别更平滑更轻细
subpixel-antialiased：在多数非 Retina 显示设备中字体将会更锐利。

注意：以上属性在 Retina 设备上会有明显的效果，在非 Retina 设备上看不出差异

兼容性

部分高清设备，如 Retina Mac

-webkit-backface-visibility
backface-visibility 在 W3文档有定义描述
定义转换元素的背面是否显示

属性值
visible：显示（默认值）
hidden：隐藏

兼容性
iOS 2.0 及更高版本的 Safari 浏览器可用
大部分 Android
-webkit-mask
定义多样的蒙板效果属性（缩写属性，类似 margin）
使用语法
| [ || || || || || ]*where = [ | | left | center | right ] [ | | top | center | bottom ]? | | :—- |

默认值：

-webkit-mask: none repeat scroll 0% 0% padding border add;

属性值

：为元素设置蒙板图片，蒙板图片会根据图片的透明区域对元素可视部分进行裁剪
- ：图片链接作为蒙板图片
- ：渐变函数 -webkit-gradient 作为蒙板图片
- none：去掉蒙板图片
：定义蒙板图片是否平铺或平铺的方式
- repeat：默认值，水平和垂直方向平铺
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺
- no-repeat：不平铺
：如果-webkit-mask-image属性有设置，attachment决定该图片是否相对视窗固定或随着其容器滚动
- scroll：默认值，随容器滚动
- fixed：相地视窗固定
：定义蒙板图片的初始位置，书写格式类似background-position—-<mask-position>[， <mask-position>]*
- left
- right
- center
：定义蒙板图片定位相对起点，与webkit-mask-position属性相关。当-webkit-mask-attachment:fixed的时候，该属性不生效。
- padding：默认值，蒙板定位相对边距
- border：蒙板定位相对边框
- content：蒙板定位相对元素盒子内容
：如果-webkit-mask-image属性有设置，-webkit-mask-clip将定义蒙板图片的裁剪区域
- border：默认值，蒙板图片延伸到容器的边框
- padding：蒙板图片延伸到容器的边距
- content：蒙板图片裁剪到元素盒子内容范围
- text：蒙板图片裁剪到元素文本范围
：定义蒙板图片重合的裁剪显示方式
- add：默认值，图片重合不裁剪
- subtract：去掉层级低的图形以及图片重合部分图形，只留层级高非重合部分图形
- intersect：只留重合部分图形
- exclude：只去掉重合部分图形

兼容性

Safari 4.0 及更高版本
iOS 4.0 及更高版本
Android 2.1 及更高版本

-webkit-user-select
定义用户是否能选中元素内容

属性值
auto：可选中元素内容
none：不能选中任何内容
text：可选中元素内的文本

兼容性
iOS 3.0 及更高版本的 Safari
大部分安卓手机

-webkit-user-modify
定义用户是否可编辑元素内容

属性值
read-only：只读
read-write：可读可写，粘贴内容会保留富文本格式（ Android 机不保留富文本格式）
read-write-plaintext-only：可读可写，粘贴内容所有富文本格式都会丢失

注意：使用这个属性的时候，请不要出现 -webkit-user-select: none，文本无法选中的情况下，在 Safari 该属性不生效，不过在 Chrome 依然生效

兼容性

iOS 5.0 及更高版本
Safari 3.0 及更高版本
大部分安卓手机

-webkit-text-stroke
定义文本描边，可以设计描边的宽和颜色，一般与文本填充属性 -webkit-text-fill-color 共用。

属性值
：长度单位
：颜色值

兼容性
iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明确

-webkit-text-fill-color
定义文本填充，一般与文本描边属性 -webkit-text-stroke 共用。

属性值
：颜色值
currentcolor：元素 color 属性值
-webkit-activelink：链接被点击时系统的默认颜色

兼容性
iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明确

-webkit-text-size-adjust
定义 iOS Safari 网页文本大小调整属性

属性值
：百分比值，字体显示调整值
auto：字体自动调整
none：字体不能自动调整

兼容性
iOS 1.0 及更高版本
Safari on iOS only
安卓尚不明确

-webkit-marquee
定义滚动文本内容属性（缩写属性，类似margin）。

使用语法
-webkit-marquee: direction increment repetition style speed

属性值
：滚动方向
- ahead：从下到上滚动
- auto：默认滚动方向
- backwards：从右到左滚动
- down：从上到下滚动
- forwards：从左到右滚动
- left：从右到左滚动
- reverse：从上到下滚动
- right：从左到右滚动
- up：从下到上滚动
：每次移动的距离
- [ | ]
- large：距离常量
- medium：距离常量
- small：距离常量
：文字滚动的重复次数
- 非负整数
- infinite：无限次

前端规范

HTMl规范

1DOCTYPE 声明

团队约定

元素及标签闭合

4 书写风格

4.1 HTML代码大小写

I AM WHAT I AM

4.2 类型属性

4.3 元素属性

4.4 特殊字符引用

4.5 代码缩进

4.6 纯数字输入框

4.7 代码嵌套

图片格式

GIF

特性

PNG

特性

JPEG

特性

WEBP

特性

内容图

背景图

图片大小

全国网速现状

固定网络

移动网络

3G/4G用户占比

团队约定

图片质量

CSS规范

1.1 css命名规范

1.2 css注释

1.3 css文件夹归类

重置样式

常用查询语句

常用设备设置

iPhones

Galaxy Phones

HTC Phones

iPads

移动端常用私有属性

-webkit-scrollbar

滚动条各块组成表现渲染的伪元素

滚动条各块组成的伪元素

属性值

兼容性

-webkit-tap-highlight-color

属性值

兼容性

-webkit-overflow-scrolling

属性值

兼容性

-webkit-line-clamp

属性值

兼容性

-webkit-appearance

属性值

兼容性

-webkit-font-smoothing

属性值

兼容性

-webkit-backface-visibility

属性值

兼容性

-webkit-mask

使用语法

属性值

-webkit-user-select

属性值

兼容性

-webkit-user-modify

属性值

兼容性

-webkit-text-stroke

属性值

兼容性

-webkit-text-fill-color