paddingme / learning-html-css Goto Github PK

View Code? Open in Web Editor NEW

77.0 6.0 9.0 254 KB

Don't bother me,I'm rendering........

learning-html-css's Introduction

========>>> issue

learning-html-css's People

Contributors

Stargazers

Watchers

Forkers

visense gabrielzheng31 asrake celinecoding oneredorange zhang-24k jqbmaster m-baneshi

learning-html-css's Issues

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

CSS 框架

如下为草稿。

公司需要根据建立新规范，建立新的公共库，供各产品线使用，以期统一视觉规范，以及更好的维护公共库和框架。

最近看了下 twitter 的 bootstrap 以及支付宝的 Alice, 有很多借鉴学习的地方，记录在这里，供后续参考、实践。

我们的需求

文档可视化

提高文档可读性。代码、DEMO、API 于同一页面可见，说清楚代码库依赖以及如何使用。
CSS 易于维护。

只建立基本的 CSS 基础框架。首先易于公共开发组易于维护，其次易于其他项目组根据自身需求扩展。这一点 Alice 值得借鉴。后面会详细说明。
易于其他团队提出需求和改进。

建立 commet 及时了解各团队需求，以改进 API。(有没有不需要数据库的评论系统，最好还支持 markdown 语法)

Alice 的优缺点

缺点

基于 spmjs 生态圈，不适合我们团队。可以由公共开发组基于 spmjs 单方面维护。

优点

Alice 框架的**值得学习，不会管的太宽，不基于 reset css 基础上各模块就可以使用，也可以All in one。

Embed标签的功能、语法和属性设置

http://blog.csdn.net/teresa502/article/details/5533370

CSS 通配符

会影响 css 属性继承。

例如

<p>xx<span>oo</span></p>

* {
  font-size: 14px;
} 

p { font-size: 16px}

span 不会继承 16，而会默认接受通配符字体大小。

可以使用：

* {
  font-size:inhreit;
}

修改

使用通配符对网页渲染曾在性能问题，因为需要不断继承，改写通配符的样式。

另如上所述不便于维护，debug。

所以 CSS 文件中写通配符的没小 JJ。

CSS 居中到底哪家强？

题目：@我是LowLow君的问题

前几天被阿里的面试官问到如果一个元素是fixed定位，不定宽，不定高，如果只利用css实现页面居中显示。思考良久也没有答案[吃惊]大神们求解释。

@W3cplus：不知道这里能否帮助你找到思路：http://t.cn/zQ85WB2
@zenoven： top: 50%; left: 50%; transform: translate(-50%,-50%);
@Winter：line-height，flexbox，transform，tablecell之类的都可以做到
@仅愚：提供一种简单的思路,without css3：http://t.cn/RzwOsHH

这里大漠整理了各种居中的文章，周刊5# 居中之美

我就暂先不整理了。

在CSS中定义a:link、a:visited、a:hover、a:active顺序

_ http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html

title 属性和 alt 属性

title的正确使用场景主要有以下四种：

链接-描述目标信息
图片-版权/描述
引用-来源信息
交互元素-操作指南

而 alt 属性为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如：<input type="image" src="image.gif" alt="Submit" />。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格）

参考： alt属性和title属性

水平居中、垂直居中

display:inline-block兼容ie6/7的写法

div {
  display:inline-block;
  *display:inline; 
  *zoom:1;
}

CSS Transfrom 3D

CSS 换行的那些事儿

同步更新于博客： CSS 换行的那些事儿

一个导航栏引发的血案

周五做一个二级导航栏，需要的效果如图所示，

写的代码是：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>Navbar</title>
    <style>
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .nav li a:hover {
            background: lightsteelblue;
        }
        .nav li {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            position: relative;
            padding-bottom: 20px;
            border: 1px solid red;
        }
        .nav li a {
            padding: 10px;
            background: aliceblue ;
            margin-right: -8px;
            border-right: 1px solid #fff;

        }
        .nav li:hover .second-column {
            visibility: visible;
            border: 1px solid blue;
        }
        .second-column {
            visibility: hidden;
            position: absolute;
            top: 37px;
            left: 0;
        }
        .nav .second-column a {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">一级栏目</a></li>
        <li>
            <a href="">一级栏目</a>
            <div class="second-column">
                <a href="">二级栏目</a>
                <a href="">二级栏目</a>
                <a href="">二级栏目</a>
                <a href="">二级栏目</a>
            </div>
        </li>
        <li>
            <a href="">一级栏目</a>
            <div class="second-column">
                <a href="">二级栏目二级栏目二级栏目</a>
                <a href="">二级栏目</a>
                <a href="">二级栏目二级栏目二级栏目</a>
                <a href="">二级栏目</a>
            </div>
        </li>
        <li><a href="">一级栏目</a></li>
    </ul>
</body>
</html>

得到的效果是：

在线 DEMO: http://codepen.io/paddingme/pen/QwvLBO

发现二级导航栏所在的区域和一级导航栏 li 区域宽度一样，无法全部水平拜访。

折腾了半天，研究了半天，差点于屏幕前吐血身亡。最后发现加了句 white-space: nowrap; 就轻松搞定了。

在线 DEMO: http://codepen.io/paddingme/pen/RNVbBr

猜测是绝对定位的元素根据其定位的父元素进行定位，默认情况下不限制宽度的情况下，绝对定位元素会自动折行，不超过其定位的父元素的宽度区域。

这里我们使用 white-space: nowrap 强制不换行得到所需要效果。

white-space

实现强制不换行

div {
    white-space：nowrap;
}

语法： white-space：normal | pre | nowrap | pre-wrap | pre-line

查看了 MDN（还翻译了下，感觉翻译得好差，见笑=.=）和 CSS参考手册。
总结下各个取值的用法是：

normal : 浏览器默认情况下 white-space 即为 normal, 表现为连续的空白符会被合并为一个空格，制表符、换行符都是空白符。当遇到盒子边界或者 <br> 就会换行。
pre: 连续的空白符不会被合并。
nowrap: 强制文本不换行，除非遇到<br>。
pre-wrap: 连续的空白符不会被合并, 遇到盒子边界或者 <br> 就会换行。
pre-line: 连续的空白符不会被合并,保持文本的换行,遇到盒子边界或者 <br> 就会换行。

注：IE7及更早浏览器不支持 CSS2.1 新增的 pre-wrap | pre-line。

word-wrap & word-break

CSS 自动换行

div {
    word-wrap: break-word;
    word-break: normal;
}

word-wrap：normal | break-word

normal：允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行。如果需要，单词内部允许断行。

设置或检索当内容超过指定容器的边界时是否断行。
作为 IE 的私有属性之一，IE5.5 率先实现了 word-wrap ，后期被w3c采纳成标准属性；
CSS3 中将 word-wrap 改名为 overflow-wrap；
对应的脚本特性为 wordWrap。

word-break 是用来在单词内断行。

word-break：normal | keep-all | break-all

normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
keep-all：与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all：该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

设置或检索对象内文本的字内换行行为。注意 FireFox 早起版本不识别 word-break,需要 hack。
对于解决防止页面中出现连续无意义的长字符打破布局，应该使用 break-all；
作为 IE 的私有属性之一，IE5.5 率先实现了 word-break ，后期被w3c采纳成标准属性；
对应的脚本特性为 wordBreak。

参考：

css 实现省略号

div {
    width: 27em;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

注意 text-overflow: ellipsis 在 Firefox 下无效，可以用其他方法 hack，例如

/* FF 下的样式 */
p {clear:both;}
p span {
float:left;
    max-width:175px;   /*IE不能解释该属性，而FF可以*/
}
p:after {
    content:"...";
}

参考：

CSS3 动画

osx sublime settings & packages

liverolad

http://stackoverflow.com/questions/24724867/sublime-text-3-and-livereload-google-chrome-extension

Sublime text3 配置 LiveReload

语义化 HTML

本篇主要摘录：顾轶灵的 slide http://justineo.github.io/slideshows/semantic-html/#/

另可参考的文章有：

待进一步整理、总结

HTML 4.01 规范

To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand.

HTML 语义：元素 + 属性 + 属性值 (+ 文档结构)

全局属性：

id 属性：标示符 (用于引用)，不应依赖其语义处理相应元素。
class 属性：authors are encouraged to use values that describe the nature of the content——描述内容本质。
title 属性：
- 链接 - 描述目标信息
- 图片 - 版权 / 描述
- 引用 - 来源信息
- 交互元素 - 操作指南
- ...
  -lang 属性：内容的语言

元数据：

meta 元素：name 属性决定种类，content 属性表示内容。
标准元数据名：(application-name, author, description, generator, keywords)
已注册的扩展元数据名 (WHATWG Wiki MetaExtensions)
最新增加的一条 Proposal 是百度提交的 name="mobile-agent"

链接

链接类型

外部资源链接：指向用来组成当前文档的外部资源，通常由 UA 自动处理
超链接：用来「导航」到其他资源 (可以在 UA 中打开, 下载, ...)

元素：link, a, area

link 元素

元数据，用来描述文档本身与其他资源的关系

必须包含 rel 及 href 属性

<link rel="author license" href="/about">

link + rel + author, link + rel + license 都有预定义的语义

link + rel

rel="stylesheet": 链接到样式表 (外部资源)

rel="alternate": 链接到当前文档的其他形式 (超链接)

<link rel="alternate" type="application/rss+xml" title="Matt Mullenweg » Feed" href="http://ma.tt/feed/" />

rel="prev", rel="next": 链接到文档的前一篇 / 后一篇 / 前一页 / 后一页 (超链接)在生成站点目录、归档视图时很有帮助。
rel="icon": 当前文档的 favicon (外部资源)

a 元素

存在 href 属性时为超链接

缺少 href 属性时为链接占位符

<nav>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/news">News</a></li>
  <li><a>Examples</a></li>
</ul>
</nav>

与 link 元素不同，a 元素代表的超链接都是显式的。

a + rel

rel="prev", rel="next": 链接到文档的前一篇 / 后一篇 / 前一页 / 后一页 (超链接)
rel="nofollow":当前文档的作者并不推荐超链接指向的文档 (超链接标注)由 Google 引入，他们认为适用场景有 (via)：
- 不可信赖的内容
- 付费链接
- 按优先级别进行抓取 (比如通知 Googlebot 不要抓取「注册」或「登陆」页面)
实际情况是，搜索引擎一般会抓取，但此链接一般不作为搜索结果排序的依据。
现已被 microformats 社区标准化。

rel 属性

其他在 HTML 规范中预定义的 rel 属性值及其含义参见 HTML5 草案中 Link types 一节。

区块 (sections)

section 元素

按主题将内容分组，通常会有标题 (heading)
并非「语义化的 div」

何时使用:一个简单的评判标准：当你希望这个元素的内容体现在文档的提纲 (outline) 中时，用 section 是合适的。

nav 元素

a section with navigation links

 <nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a>Examples</a></li>
  </ul>
</nav>

可以帮助 UA 迅速获得导航内容，例如读屏器可以省去很多渲染直接跳到导航位置。
不一定要包含 ul，也可用自然文本进行导航。

article 元素

独立的文档、页面、应用、站点
可以单独发布、重用
可以是...
- 一篇帖子
- 一篇报刊文章
- 一则用户评论
- 一个可交互的 widget
- ...

aside 元素

表示与周围内容关系不太密切的内容 (eg. 广告)
通常表现为侧边栏内容 (eg. 相关背景内容)、引述内容

h1–h6 元素

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
</body>

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h1>Diving in</h1>
  </section>
  <section>
    <h1>Simple shapes</h1>
  </section>
</body>

语义上等价。

hgroup 元素

标题的组合
用于副标题、标语 (tagline) 等

 <hgroup>
  <h1><strong>The Lord of the Rings</strong></h1>
  <h2>The Return of the King</h2>
</hgroup>

<hgroup>
  <h1><strong>The Lord of the Rings</strong></h1>
  <h2>"One ring to rule them all."</h2>
</hgroup>

hgroup 中级别最高的标题才出现在提纲中

header 元素

一组介绍性描述或导航信息 (目录 / 搜索框 / logo / ...)

通常包含 h1–h6, hgroup
-不影响文档提纲的生成

<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>

footer 元素

代表最近的父级区块内容的页脚
作者信息 / 相关文档 / 版权信息
不影响文档提纲的生成

 <footer><!-- site footer -->
  <nav>
    <p>
      <a href="/credits.html">Credits</a> —
      <a href="/tos.html">Terms of Service</a> —
      <a href="/index.html">Blog Index</a>
    </p>
  </nav>
  <p>Copyright © 2009 Gordon Freeman</p>
</footer>

address 元素

代表与最近的父级 article 或 body 关联的联系人信息

<address>
  <a href="../People/Raggett/">Dave Raggett</a>,
  <a href="../People/Arnaud/">Arnaud Le Hors</a>,
  contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

分组内容 (grouping content)

p 元素

「段落」的显式表述：段落是主题接近的若干句子组成的文本块。非优先考虑的选择。例如 address 的内容也是一个段落，但有更准确的语义。

hr 元素

原意为「horizontal rule」(水平分隔线)
HTML5 中重定义为不同主题内容间的分隔符(eg. 故事场景的转换)
区块内容之间不需要用 hr 元素分隔

pre 元素

表示已排版的内容
代码片段 / ASCII art / ...

blockquote 元素

引用的来自其他来源的内容
cite 属性表示该来源的 URL
署名必须放在 blockquote 外

 <p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
  <blockquote cite="http://quotes.example.org/s/sonnet130.html">
    <p>My mistress' eyes are nothing like the sun,<br>
    Coral is far more red, than her lips red,<br>
    <i>[...]</i></p>
  </blockquote>

ol, ul, li 元素

有序 / 无序列表
改变列表项顺序是否影响表达
ol 下 li 元素的 value 属性代表该列表项的序号值

<p>Relegation zone:</p>
<ol>
<li value="18">Bolton Wanderers</li>
<li>Blackburn Rovers</li>
<li>Wolverhampton Wanderers</li>
</ol>

dl, dt, dd 元素

名值对的集合
术语定义表 / 元数据 / FAQ / ...

<dl>
  <dt><dfn>happiness</dfn></dt>
  <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
  <dd>The state of being happy.</dd>
  <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
  <dt><dfn>rejoice</dfn></dt>
  <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
  <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

figure 元素

比较独立的、被主要内容引用的部分
插画 / 图表 / 照片 / 代码 / ...
通常会有一个标题 (figcaption)

figcaption 元素

图表标题 / 图例 / 代码说明 / ...

div 元素

本身无语义
可以和 class, lang, title 等属性结合，为一系列连续的内容增加语义
最后考虑的选择

文本级语义 (text-level semantics)

em 元素

表示侧重点的强调
强调级别由 em 的嵌套个数决定
em 的位置不同，文本本身含义不同
在可视化 UA 上一般渲染为斜体

<p><em>Bats</em> can fly.</p>
<p>Bats <em>can</em> fly.</p>
<p>Bats can <em>fly</em>.</p>

三句含义各不相同

strong 元素

表示内容的重要性
重要程度由 strong 的嵌套个数决定
strong 的位置不同，文本本身含义不变
在可视化 UA 上一般渲染为粗体

 <p><strong>Warning.</strong> A huge wave of zombies is approaching.</p>

i 元素

不再只是「斜体」
表示另一种叙述方式
分类学名词 / 外来语片段 / 舞台指示 / 船名 / ...
建议与 class / lang 属性搭配使用

<p>Sunflower (<i class="taxonomy">Helianthus annuus</i>) is an annual plant native to the Americas.</p>

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

<p><i class="ship-name">Titanic</i> sank in the North Atlantic Ocean on 15 April 1912.</p>

b 元素

不再只是「粗体」
表示某种需要引起注意却又没有其他额外语义的内容
摘要中的关键词 / 评介中的产品名称 / 文章的开篇内容 ...
建议与 class 属性搭配使用

<article>
  <h2>Kittens 'adopted' by pet rabbit</h2>
  <p><b class="lede">Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</b></p>
  <p>Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</p>
<i>[...]</i>

small 元素

不再只是「小字」
fine print
免责声明 / 许可证声明 / 注意事项 / ...

<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>

<small>请以实物为准，图片仅供参考</small>

s 元素

不再只是「带删除线的文字」
表示不再准确或不再相关的内容
与 del 元素含义不同

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

Buy our Iced Tea and Lemonade!

~~Recommended retail price: $3.99 per bottle~~

Now selling for just $2.99 a bottle!

u 元素

不再只是「带下划线的文字」
表示用非文本进行的标注的内容
中文专名 / 拼写检查的错误内容 / ...

<u class="proper-name">屈原</u>放逐，乃賦<cite class="book-name">離騒</cite>。<u class="proper-name">左丘</u>失明，厥有<cite class="book-name">國語</cite>。（司馬遷《報任安書》）

屈原放逐，乃賦離騒。左丘失明，厥有國語。（司馬遷《報任安書》）

专名包括人名、地名、朝代名、国名、机构名等，大陆已较少使用，在英语中通常首字母大写

cite 元素

引述的作品标题
书 / 论文 / 散文 / 电影 / 歌曲 / 电视节目 / 画作 / ...

<p>My favorite movie is <cite>Transformers</cite> by Michael Bay.</p>

q 元素

引用的来自其他来源的段内内容
cite 属性表示该来源的 URL
不用 q 而用引号亦正确

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="http://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>.</p>

abbr 元素

abbreviation or acronym (区别？)
其 title 属性的含义为所写的全称

<p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.</p>

建议在用户不熟悉的缩写词汇第一次出现时用 abbr + title 进行语义标注，帮助其理解

dfn 元素

用来展现一个术语的定义实例
最接近的父级段落、定义列表组或区块内容必须包含 dfn 元素指定术语的定义

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>

很容易抽取出特定术语的含义，从而很容易回答「What is ...?」类的问题

time 元素

为表述的内容增加一个机器可读的时间数据
datetime 属性值必须是预定义的几种时间格式之一
如果不含 datetime 属性，则会解析其文本内容值

<div class="vevent">
  <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
  <span class="summary">Web 2.0 Conference</span>:
  <time class="dtstart" datetime="2005-10-05">October 5</time> -
  <time class="dtend" datetime="2005-10-07">7</time>,
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

time 元素与 Microformats hCalendar 格式的配合使用

code, samp, kbd 元素

code - 代码片段
samp - 计算机程序的输出
kbd - 用户输入的内容 / 按键

Stack Overflow 上 kbd 元素的样式让人一目了然

mark 元素

在引用的文字中使用，表示在当前文档中需要引起注意但原文中并没有强调的含义 (eg. 对一篇文章的分析中对原文的标注)
表示与用户当前的行为相关的内容 (eg. 高亮显示搜索关键词)

<blockquote>
    <p>6月13日下午，<mark>一场大雨</mark>过后，正阳门箭楼被带着水雾的脚手架包裹得严严实实。北京旧城中轴线上的这座标志性建筑，正经历着新**成立后规模最大的一次修缮。</p>
    <i>[...]</i>
    <p>6月13日的<mark>那场大雨</mark>，将故宫端门外西朝房冲洗得干干净净。</p>
</blockquote>
<p>作者为什么两次提到6月13日的大雨？请谈谈你的看法。</p>

ruby, rt, rp 元素

注音标示，「ruby」来自日本印刷业
主要于 CJK 文字

<ruby>和<rp>(</rp><rt>hé</rt><rp>)</rp>谐<rp>(</rp><rt>xié</rt><rp>)</rp>社<rp>(</rp><rt>shè</rt><rp>)</rp>会<rp>(</rp><rt>huì</rt><rp>)</rp></ruby>

目前 IE 5.5+ 以及 Chrome 5+ 支持

span 元素

本身无语义
可以和 class, lang 等属性结合，为文本片段增加语义
有更合适的元素时不应选择 span

<span class="keyword">var</span> greet = <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
    console.log(<span class="string">"Hello world."</span>);
}

适用场景之一是代码高亮

更改记录 (edits)

ins, del 元素

表示对当前文档内容进行的增添与删改
cite 属性指向对某个修改的说明文档的 URL
datetime 属性表示了修改发生的时间 (取值规范)
用来记录文档的编辑历史

嵌入内容 (embedded content)

img 元素

src, alt 属性决定了图片的含义
- 有 src 且 alt 为空字符串，代表装饰用图
- 有 src 且 alt 为非空字符串，图为文档内容的一部分
- 有 src 且无 alt，图为内容一部分但无等价的文本内容可用
用 alt 文本替换图片，文档含义尽可能不变

 <p>
  You are standing in an open field west of a house.
  <img src="house.jpeg" alt="<s>A white house</s><strong>The house is white</strong>, with a boarded front door.">
  There is a small mailbox here.
</p>

iframe, embed, object, param 元素

iframe - 内嵌的浏览上下文
embed - 外部应用或可交互内容的整合入口
object - 通用外部资源
- 根据具体内容可以被处理为图片、内嵌的浏览上下文、供插件调用的资源
param - 为 object 元素传递的参数

<object type="image/png" data="embed.png"></object>
<object type="text/html" data="embed.html"></object>

相当于 img 与 iframe 的效果

<embed src="catgame.swf" type="application/x-shockwave-flash" quality="high">

<object data="catgame.swf" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <p>Plugin needed.</p>
</object>

功能等价但 object 提供更好的回退策略

多媒体元素

video - 视频
audio - 音频

公共属性：src, crossorigin, preload, autoplay, mediagroup, loop, muted, controls

source 元素

表示所在多媒体元素的可替代资源(可能不同格式 / 清晰度，读取失败或无法解码时可以依次尝试)
type 属性中除了 MIME 类型外，可使用 codecs= 来指定编码

 <video controls autoplay>
  <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
</video>

track 元素

用来为多媒体元素指定「文本轨」
kind 属性描述文本轨的类型
可用值包括 subtitles, captions, descriptions, chapters, metadata

<video src="brave.webm">
  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English">
  <track kind="captions" src="brave.en.hoh.vtt" srclang="en" label="English for the Hard of Hearing">
  <track kind="subtitles" src="brave.fr.vtt" srclang="fr" lang="fr" label="Français">
  <track kind="subtitles" src="brave.de.vtt" srclang="de" lang="de" label="Deutsch">
</video>

表格数据 (tabular data)

table 元素

用来表示超过一维的数据

caption 元素

表示所处的 table 的标题

当所处的 table 是外部 figure 元素的唯一子元素，应首选 figcaption

tbody, thead, tfoot 元素

均为一组表格行
thead 表示列头 (通常为列标题，单元格用 th 元素)
tfoot 表示列脚 (通常为列数据汇总)

col, colgroup, tr 元素

列，列组，行

td, th 元素

td - 数据单元格
th - 标题单元格
th 的 scope 属性表示标题对应的数据范围

进一步扩展

微格式 (Microformats)

Microformats 是 HTML 的扩展，用来标注人物 / 组织 / 事件 / 地点 / 简历 / 菜谱 / ...
很多格式已是业界的事实标准
(Microformats Wiki)

Microformats 的基本思路

用 HTML 已有的元素 / 属性，配合对属性值语义的扩展 (主要针对 class 属性) 以及对文档结构的约定来增强 HTML 的语义表达能力。Microformats 的规范本质上就是对一系列常用类型数据 HTML 格式的约定。
Google 通过从 Wikipedia 获取的 hCard 格式数据在搜索结果匹配出人物信息

举例：hCard

用来在 Web 上发布人物 / 公司 / 组织机构信息的格式
和 vCard 格式 (MIME 类型：text/vcard, RFC2426) 定义的属性名值定义一一对应

 <div class="vcard">
  <span class="fn">Sally Ride</span>
  <div class="org">Sally Ride Science</div>
  <img class="photo" src="http://example.com/sk.jpg"/>
  <a class="url" href="http://sally.example.com">w</a>,
  <a class="email" href="mailto:[email protected]">e</a>
  <div class="tel">+1.818.555.1212</div>
  <time class="bday">1951-05-26</time> birthday
  <i>[...]</i>
</div>

人物名片的一部分

其他 Microformats

hCalendar - 发布事件
基于 iCalendar 格式 (MIME 类型：text/calendar, RFC2445)
hReview - 发布书评 / 影评 / 产品评价 / ...
对 HTML rel 属性值的扩展定义
rel="license", rel="tag", rel="enclosure", ... 部分已经进入 HTML5 草案

微数据 (HTML Microdata)

允许在现有的文档中嵌入一组项的名值对集合(W3C 草案)

itemscope 属性

用来标注描述项的位置

<div itemscope>
  <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
  <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

两个项，各有一个名为 name 的属性

itemtype 属性

如果期望服用已定义的项的模式，可用 itemtype 属性给出该类型的 URI
必须与 itemscope 属性置于同一元素上

itemprop 属性

当前项的属性名

itemid 属性

当前项的全局 ID (eg. ISBN)

<dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>

属性取值

情况复杂，根据元素类型不同，取值方式各有不同
- 具体请参考 Microdata 规范草案

统一词汇表

请参考 Schema.org
搜索引擎 (Google, Bing, Yahoo!) 建立，爬虫支持并理解用此词汇表中词汇表达的语义

IE7,IE6 关于position：relative bug的处理

http://blog.sina.com.cn/s/blog_5de5c1c00100m9ov.html

Gulp 工作流

要解决的问题

1. 开发环境/和发布环境分开
2. HTML/CSS/JavaScript 代码压缩
3. CSS/JavaScript 合并
4. 重命名 + MD5 标签
5. 自动添加 -ms、-moz、-webkit
6. CSS Sprite
7. PostCSS/cssgrace/stylus

CSS 倒影

html、body 宽度的问题

html 和 body 的 width 和 height 默认为 100%，为整个视窗的高度和宽度。
html 的 width:100% 占据整个视窗，而 body的width:100%是根据html的 width*100% 计算的。

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

所述百分比的计算相对于所生成的框的包含块的高度。如果没有明确指定的包含块的高度（即，它取决于内容的高度），而这个元素没有绝对定位，价值计算为“自动”。根元素上的百分比高度是相对于初始包含块。

参考： height and width on html and body elements

<body>
    <div id="wrapper">
        <div id="container">
            <p>Lots of pragraphs here</p>
        </div>
    </div>
</body>

#wrapper {width:1200px;}

想要 body 在各分辨率下均包裹 #wrapper 可设置 body {min-width:1200px}

今天发现一篇好文章 html与body的一些研究与理解
又发现一片：DIV 高度100%

模式？标准！

高(菜)端(鸟)front-end程序员的电脑桌面任务栏

最近在工作中经常遇到浏览器兼容性的问题，让我焦头烂额，这里总结下浏览器的严格模式和怪异模式以及IE浏览下的文档模式和浏览器模式等内容。

严格模式和怪异模式

现代浏览器一般具有多种渲染模式：

在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式(quirks mode) 模式”中则尝试模拟更旧的浏览器的行为。一些浏览器（例如，那些基于 Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 strict mode 下）也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards) 模式，实施了一种表单元格尺寸的怪异行为，除此之外符合标准定义。

通常，浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的 DOCTYPE 则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。
例如，一个以如下 DOCTYPE 开始的网页将会触发标准模式：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

如下 DOCTYPE 语法上是无效的，因为它包含公共标识符关键字 PUBLIC 却没有公共标识符（指示所用 HTML 版本的名称），也没有 HTML 文档类型定义的系统标识符 URL。这将会触发怪异模式：

<!DOCTYPE html PUBLIC>

此外，一个不含任何 DOCTYPE 的网页将会以 quirks 模式渲染。
对此一个值得一提的例外是微软的 Internet Explorer 6 浏览器，如果 DOCTYPE 之前有一个 XML 声明，不管是否指定完整的 DOCTYPE，它就会以 quirks 模式渲染一个页面。因此以如下代码开始的 XHTML 页面会被 IE 6 渲染为 quirks 模式：

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在一定程度上，上述代码是有用的，然而它仅仅会对 IE 6 触发怪异模式。如果 DOCTYPE 之前有任何语句，quirks 模式在任何版本的 IE 中（截至 IE 9）同样会被触发。
例如，如果一个超文本文件在 DOCTYPE 前包含一个注释或者任何标签，IE (截至 9) 会使用 quirks 模式：

IE的文档模式和浏览器模式

IE从IE8引入了文档兼容性开始有了浏览器模式和文档模式(按F12可见)

“浏览器模式”:用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，这样就可以向不同的浏览器返回不同的页面内容。

IE8的浏览器模式

“文档模式”用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。

IE9下的文档模式

我的理解就是浏览器模式是指IE浏览器向服务器发送请求时，告诉服务器自己是哪个浏览器哪个版本，这里是指告诉服务器我是IE7还是IE8或者9,然后浏览器根据收到的用户代理字段返回IE7或者IE8或者IE9的页面内容。

而文档模式则是指浏览器将服务器端发送过来的内容按照某种特定的浏览器（IE7，IE8，IE9等）来渲染页面。

这里还涉及到怪异模式（Quirks Mode），IE旧的怪异模式现在被称为IE5怪异模式,一般不予考虑。

DOCTYPE

为什么要研究这些呢，是为了强调按照标准写html语言的重要性，近来在工作中遇到的各种诡异的IEbug，花费了巨大精力调试，最后都是因为没有按照标准来写，没有doctyle头，标签没有闭合，导致各浏览器渲染不同诡异。

DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(document type definition)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

HTML5 (向后兼容，推荐使用):

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

IE兼容模式

IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

### 内核控制Meta标签：让360浏览器默认使用极速模式打开网页

进来调试一个网页在IE、Chrome、Firefox下均表现正常，但是在360浏览器兼容模式下表现诡异。（国产的各种shell，我就呵呵了。）查查了内核控制Meta标签：让360浏览器默认使用极速模式打开网页，方法如下：

网页头部加入

<meta name="renderer" content="webkit">

360浏览器就会在读取到这个标签后，立即切换对应的极速核。

另外为了保险起见再加入

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

这样写可以达到的效果是如果安装了Google chrome frame，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。

总结

作为前端，浏览器各种状况频发，诡异之处无所不在。最重要的是按照标准来规范自己的代码，另一方面了解各浏览器的特性，好规避bug,再者，不断debug，从坑里爬起来。

参考文章

background-position 用法详细介绍

http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html

LESS 资料

CSS 中的float标签

CSS中允许浮动任何元素，浮动是指元素浮动在左边或者右边，而使其他的内容“围绕”这个元素。

float

值：left|right|none|inherit

例如把一个图像浮动到左边，
<img src="b4.gif" style="float:left;" alt="b4">

对于浮动元素有几点要记住：

会以某种方式将浮动元素从文档的正常流中删除，但是一个元素浮动，其他内容会”围绕“该元素。
浮动元素的外边距不会合并！

浮动元素的包含块是其最近的块级祖先元素。此外，浮动元素会生成一个块级框，而不论这个元素本身是什么。

有一系列规则控制着浮动元素的摆放：

浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的低端下面。（不必担心一个浮动元素与另一个浮动元素重叠）。
左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。（防止浮动元素相互重叠）。
一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
左（或右）浮动元素的左边（或右边）有另一个浮动元素，前者的右外边界不能在其包含的右（左）边界的右边（左边）。（如果没有足够的空间，浮动元素会被挤到一个新的”行“上）。
浮动元素必须尽可能高地放置。
左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。位置越高，就会向右或向左浮动得越远。

如上这些浮动规则只处理了浮动元素和其父元素的左、右和上边界，而未涉及下边界。CSS2.1规定，浮动元素会延伸，从而包含其所有后代浮动元素。故通过将父元素设置为浮动元素，就可以把浮动元素包含在其父元素内。

负外边距可能导致浮动元素移到其父元素的外面。还有一种方法，让浮动元素比其父元素更宽。

若一个浮动元素与正常流中的内容发生重叠：

行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素”之上“显示。
块框与一个浮动元素重叠时，其边框和背景在该浮动元素”之下“显示，而内容在浮动元素”之上“显示。

清除浮动

clear

值：left|right|both|none|inherit
应用于块级元素

在google查询float标签相关文章发现下面两篇文章特别有意思：
CSS float浮动的深入研究、详解及拓展(一)，CSS float浮动的深入研究、详解及拓展(二)。

总结下有如下可以学习的知识点。

浮动的出现的意义：文字环绕图片。
浮动的本质：”包裹和破坏“。
- ”包裹“——浮动就是个带有方位的display；inline-block属性。display:inline-block 具有包裹的作用，元素被包裹之后其宽度自适应元素本身大小;float:left或者float:right某种程度上等价于display:inline-block，其唯一区别在于：float具有方向性,display:inline-block仅仅有一个水平方向排列，而float可以从左到右排列，还可以从右到左排列（很少用到，没有多大意义）。
- ”破坏性“，如上所述，浮动的意义是让文字环绕图片，而这时由于float破坏了正常的line boxes。
例如在<q>这只是一个普通的标签，这里有一个<cite>cite</cite>标签</q>中有四种boxes
containing box->line boxes->inline boxes(包括匿名的，不会成块显示，而是排成一行)->content area
如图所示：

CSS中关于高度,文中也给出了很好的介意：

在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin”，另外一个是line box模型，对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。

浮动破坏了图片的inline-box，导致文字和图片无法同行显示，脱离了原来的line-box链，也没有了高度（无inline-box高度->无line-box高度-无高度）而这些结果导致了文字环绕图片显示。
http://image.zhangxinxu.com/flash/blog/201001/css_float_by_zhangxinxu.swf 中有很容易理解的动画显示。

“包裹与破坏”！包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。inline boxes是高度形成的基础，浮动破坏了inline boxes也就没有高度可言了。真是由于浮动元素没有了inline boxes，没有了inline boxes高度，才能让其他inline boxes元素重新整合，环绕浮动元素排列。

浮动定位于绝对定位的区别：绝对定位元素也具有包裹性，绝对定位的元素脱离了文档流而浮动元素仍然在文档流中，这造成的差异是：同处于文档流中的文字不会与浮动元素造成重叠，而会与绝对定位元素重叠

浮动使高度塌陷->清楚浮动！
塌陷原因：元素含有浮动属性->破坏inline-box高度->破坏line-box高度->无高度

清除浮动：

<div style="clear:both;"></div>:浪费一个div标签
.fix{voerflow:hidden;zoom:1}:overflow:hidden;如果里面的元素要是想来个margin负值定位或是负的绝对定位，则会直接被裁掉了，所以此方法有局限性的。
.fix{zoom:1;}.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

以上皆来自张鑫旭-鑫空间-鑫生活http://www.zhangxinxu.com

CSS 实现三级导航栏以及 freemarker 逻辑实现

CSS 实现三级导航栏以及 freemarker 实现

做网站经常需要做三级导航栏，这里记录下三级导航栏的实现。

水平方向的三级导航栏实现效果如下：

HTML 代码结构：

    <ul class="nav">
        <li><a href="#">一级目录1</a>
            <ul>
                <li><a href="#">二级目录11</a></li>
                <li><a href="#">二级目录12</a>
                    <ul>
                        <li><a href="#">三级目录121</a></li>
                        <li><a href="#">三级目录122</a></li>
                        <li><a href="#">三级目录123</a></li>
                    </ul>
                </li>
                <li><a href="#">二级目录13</a></li>
            </ul>
        </li>
        <li><a href="#">一级目录2</a></li>
        <li><a href="#">一级目录3</a>
            <ul>
                <li><a href="#">二级目录31</a></li>
                <li><a href="#">二级目录32</a>
                    <ul>
                      <li><a href="#">三级目录321</a></li>
                    </ul>
                </li>
                <li><a href="#">二级目录33</a></li>
                <li><a href="#">二级目录34</a>
                    <ul>
                      <li><a href="#">三级目录341</a></li>
                      <li><a href="#">三级目录342</a></li>
                    </ul>
                </li>
            </ul>
          </li>
    </ul>

CSS 代码

    .nav {
      float: left;
    }

    .nav a {
        display: block;
        text-decoration: none;
        color: #333;
        padding: 5px 10px;
        border: 1px solid #ccc;
        background-color: #9A9797;
    }

    .nav a:hover {
      background: #444;
      color: white;
    }
    .nav li {
        list-style: none;
    }

    .nav > li {
      float: left;
      position: relative;
    }

    .nav ul {
      white-space: nowrap;
      padding: 0;
      visibility: hidden;
    }

    .nav ul li {
    position: relative;
    }

    .nav ul ul {
      position: absolute;
      top: 0;
      float: left;
      margin-left: 100%;
      visibility: hidden;
    }

    .nav li:hover > ul {
      visibility: visible;
    }

demo 地址：CodePen

浏览器兼容性待测试(todo)。

Freemarker 流程图：

Freemarker 代码：

    <ul class="nav">
       [@cms_channel_list]
          [#list tag_list as a]
              <!-- 是否有二级栏目 start -->
              [#if a.child?? && a.child?size>0]
                <!-- 是否有三级栏目 start -->
                [#if a.child[0].child?? && a.child[0].child?size>0]
                <li>
                  <a href="${a.child[0].child[0].url}">${a.name}</a>
                [#else]
                <li>
                  <a href="${a.child[0].url}">${a.name}</a>
                [/#if]
                <!-- 是否有三级栏目 end -->

                <!-- 遍历所有二级栏目 start -->
                <ul>
                  [#list a.child as b]
                    <!-- 是否有三级栏目 start-->
                    [#if b.child?? && b.child?size>0]

                      <li><a href="${b.child[0].url}" >${b.name}</a>
                        <ul>
                        [#list b.child as c]
                          <li><a href="${c.url}">${c.name}</a></li>
                        [/#list]
                        </ul>
                      </li>
                    [#else]
                      <li><a href="${b.url}" class="scd-a">${b.name}</a></li>
                    [/#if]
                    <!-- 是否有三级栏目 end-->
                  [/#list]
                </ul>
                 <!-- 遍历所有二级栏目 end -->
              [#else]
              <li><a href="${a.url}">${a.name}</a>
              [/#if]
              <!-- 是否有二级栏目 end -->
              </li>
          [/#list]
        [/@cms_channel_list]
      </ul>

margin

清除浮动和闭合浮动的区别

原来是一丝提出的“闭合浮动”。为了避免混淆，还是说全吧，“使float元素可以撑高父元素”。

（国内页面重构已经足够乱了还需要特地造个新名词混淆新人吗）

“清除浮动”源于clear float即W3C CSS2.1 9.5.2章定义的内容，意即使用clear阻止这个元素盒子的边和前面的浮动元素相邻的行为；

The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).

如果“闭合浮动”指的是避免“float无法撑高父容器的默认行为”的话，那么有这些方案：

在float同级最后方加入带有clear:both属性的元素或伪元素（W3C CSS2.1 9.5.2 clearance高度计算部分）
给父级加上一些overflow/float/display table等触发BFC的属性以使父容器成为block formatting context roots（W3C CSS2.1 10.6.7）

10.6.7 'Auto' heights for block formatting context roots
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

参考:http://segmentfault.com/q/1010000000732608

ie7下z-index失效问题解决方法(详细分析)

http://www.jb51.net/css/70459.html

HTML head 头标签

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

最新 HTML5 推出更加简洁的书写，它向前向后兼容，推荐使用。
```
<!doctype html>
```

在 HTML中 doctype 有两个主要目的。

对文档进行有效性验证。

它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。
决定浏览器的呈现模式

对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。
- 非怪异（标准）模式
- 怪异模式
- 部分怪异（近乎标准）模式
  关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式？标准！的内容。

charset

声明文档使用的字符编码，

<meta charset="utf-8">

html5 之前网页中会这样写：

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

这两个是等效的，具体可移步阅读：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，所以建议使用较短的，易于记忆。

lang属性

简体中文

<html lang="zh-cmn-Hans">

繁体中文

<html lang="zh-cmn-Hant">

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"。

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360 使用Google Chrome Frame

<meta name="renderer" content="webkit">

360 浏览器就会在读取到这个标签后，立即切换对应的极速核。
另外为了保险起见再加入

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

这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。

相关链接：浏览器内核控制 Meta 标签说明文档

百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分

页面标题<title>标签(head 头部必须)
```
<title>your title</title>
```

页面关键词 keywords

<meta name="keywords" content="your keywords">

页面描述内容 description

<meta name="description" content="your description">

定义网页作者 author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
```
<meta name="robots" content="index,follow">
```

相关链接：WEB1038 - 标记包含无效的值

viewport

viewport 可以让布局在移动浏览器上显示的更好。
通常会写

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
```
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
```

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

<meta name="viewport" content="width=device-width,user-scalable=yes">

相关链接：非响应式设计的viewport

适配 iPhone 6 和 iPhone 6plus 则需要写：

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

ios 设备

添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->

是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->

设置状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数：

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->

iOS 图标

rel 参数：
apple-touch-icon 图片自动处理成圆角和高光等效果。
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
iPhone 和 iTouch，默认 57x57 像素，必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

iPad，72x72 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

Retina iPad，144x144 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。
适配iPhone 6 plus，则需要在中加上这段

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

iOS 启动画面

官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

iPad 竖屏 1536x2008（Retina）

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->

iPad 横屏 1024x748（标准分辨率）

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->

iPad 横屏 2048x1496（Retina）

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

iPhone/iPod Touch 竖屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">

<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

Windows 8

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

rss订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->

favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet

移动端的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

这是来自 toobug 的分享总结。

更多的 meta 标签参考

参考文章：

《写给大家看的设计书》读书笔记

第一部分设计原则

约书亚树

一旦你能够说出什么东西的名字，就会很容易注意到它。你就会掌握它，拥有它，使它在你的控制中。

优秀的设计就这么简单：

学习 4 大基本原则。
认识到自己没有运用这些原则。
应用基本原则。

4 大基本原则:

对比（Contrast）
对比的基本**是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。
重复（Repetition）
让设计中的视觉要去在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。增加条理性，加强统一性。
对其 (Alignment)
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。建立一种清晰、精巧而且清爽的外观。
亲密性 (Proximity)
彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

亲密性 (Proximity)

亲密性原则是指： 将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看做凝聚为一体的一个组，将不再是彼此无关的片段。物理位置的接近就意味存在着关联。亲密性的根本目的是实现组织性。

要有意识地注意你是怎样阅读的，你的视线怎样移动：从哪里开始；沿着怎样的路径；到哪里结束；读完之后，接下来看哪里？整个过程应当是一个合理的过程，有确定的开始，而且要有确定的结束。

如何实现

微微眯起眼睛，统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过 3~5 个（当然这取决于具体情况），就要看看哪些孤立的元素可以归在一组建立更近的亲密性，使之成为一个视觉单元。
要避免的问题
- 不要仅仅因为有空白就把元素放在角落或者**；
- 避免一个页面上有太多鼓励的元素；
- 不要在元素之间留出同样大小的空白，除非各组同属于一个子集。
- 标题、子标题、图标标题、图片能否归入其相关材料？在这个问题上一定要非常清楚（哪怕有一点含糊都要尽量避免）。在有很近亲密性的元素之间建立关系。
- 不同属一组的元素之间不要建立关系！如果元素彼此无关，要把它们分开。

对齐（Contrast）

对齐原则是指：任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。

居中对其会创建一种更正式、更稳重的外观。这种外观显得更为中规中矩，但通常也很乏味。大多数看起来精巧的设计都没有采用居中对齐。

页面上只使用一种文本对齐，所有文本都左对齐，或右对齐，或者全部居中。

有时，你可能喜欢在同一个页面上同时使用右对齐或者左对齐文本，不过一定要确保让这些文本以某种方式对齐！

*找到一条明确的对齐线，并坚持以它为基准。 *

如果设计中的对齐很明确，那么可以有意识地打破对齐，而且一定要表现出这是有意的，技巧就在于，打破常规对齐时不要怯弱，一定要干脆一些。要么全部采用一种方式，要么全部不采用这种方式。千万不要保守。在打破规则之前必须清楚规则是什么。

对齐的根本目的设计使页面统一且有条理。

重复 (Repetition)

重复原则：设计的某些方面需要在整个作品中重复。读者能看到的任何方面都可以作为重复元素。

新手要把重复的概念更进一步，把无意的重复变为有意，利用重复将一系列出版物从视觉上系为一体。

重复不知识自然的一致，这是一种统一设计各个部分的有意识的行为。

设计中视觉原速度额重复可以将作品中的各部分连在一起，从而统一并增强整个作品,否则这些部分知识彼此孤立的单元。重复不仅对只有一页的作品很有用，对于多页文档的设计更显重要（一致性）。

重复的目的就是统一，并增强视觉效果。

如何做呢，需要把现有的一致性更向前推进一步。

要避免太多地重复一个元素，重复太多会让人讨厌。要注意对比的价值。

对比 (Alignment)

要想实现有效的对比，对比就必须强烈，千万不要畏畏缩缩。

如果两个项不完全相同，就应当使之不同，而且应当是截然不同。

对比的根本目的一是增强页面的效果，另一个有助于信息的组织。不要犹豫，如果你想形成对比，就加大力度。不要将一种粗线与一种更粗的线进行对比。不要讲棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。如果各个项不完全一样，干脆让它截然相反！

复习

有关设计（同时也是有关生活）的一个更一般的指导原则是不要畏畏缩缩。

不要害怕在设计（或生活）留有空白，这能让你的眼睛（以及心灵）稍作休息。
不要害怕设计是不对称的，使用非居中的格式，不居中往往能使效果更强烈。尽管不建议使用居中，不过有意这么做也无不可。
不要害怕把单词设置得非常大或者非常小，不用担心说话声太大或者太小，在合适的场合这些都是可以的。
只要最后的结果能支持或者强调你的设计或观点，不要害怕让图片太大或者太小。

提高视觉敏感度

颜色运用

第二部分字体设计

字体

字体类别

字体对比

其他

IE 滚动条问题

http://stackoverflow.com/questions/477834/div-with-scroll-and-content-with-absolute-positions

I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the

that has scrollable contents.

去除链接元素的虚线框兼容IE7、IE6、FF

http://www.jb51.net/article/14556.htm

使用HTML、CSS写好一个输入框

如何做到输入框无无文字时和输入文字时一致对齐？
chrome 浏览器的输入框光标、输入文字、占位符有以下规则：

无文字输入时，以行高为准；
有文字输入时，以文字大小为准；
占位符以行高为准。

那么如何写好一个输入框：
在书写输入框的时候，如果要增加光标高度，那么最可行的做法是增加文字的大小;
输入框的剩余空白使用内边距填充；
不要为输入框设置行高，因为浏览器默认会设置行高就会使占位符和输入光标、文字都居中；
不要为输入框设置高度，因为已经使用了内边距撑开了，并且现在大多数 css 库都直接使用边框盒模型。
```
<!DOCTYPE html>
<style>
    body{
        line-height: 20px;
    }

    #input1{
        font-size: 40px;
        padding: 10px;
        line-height: normal;
    }
</style>
<body>
    <input type="text" id="input1" placeholder="input">
</body>
```
demo: http://codepen.io/paddingme/pen/cJGhl

相关链接：http://qianduanblog.com/post/css-learning-21-using-html-css-write-an-input-box.html

CSS中的值和单位、字体以及文本属性

这几天在学习CSS权威指南,学习了CSS中的值和单位、字体以及文本属性，这里做一个相关总结，主要总结我认为重要的知识点。

1. 值和单位

CSS里的值和单位，主要分为绝对长度单位：in(英寸)、cm(厘米)mm(毫米)、pt(点，标准印刷度量单位)、pc(派卡，印刷术语),以及相对长度单位：em,ex,px。

我们主要使用em和px，ex指所用字体中小写x的高度,我们无情得忽视它。“相对”相对“绝对”的好处我们已然了解，例如url链接，我们不用关注外部url地址如何变化，相对路径没问题，我们便可以各种超链接。这里的相对长度单位也是同样的道理。em相对于给定字体的font-size值。现代浏览器字体默认大小为16个像素。如果一个元素的font-size为14px,那么对于该元素，1em=14px。这个值可能会随元素的不同而不同，另在设置字体的大小的时，em的值会相对于父元素的字体大小改变。总得来说，就是em依赖于最近的字体大小(不要惯性的以为依赖于原先body设定的或者浏览器默认的值。)

而px就是像素，对于显示器屏幕分辨率而言。当然%同em。（注意理解:%这个值可以是任意的：可能是同一个元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。）

至于要用px还是em，老版本的IE浏览器不支持像素的缩放，所以用px取代em，另使用em可以省去很多冗余的工作，例如设置了body里的字体大小，后面的元素内的字体大小全部设置为em大小，这样改动的话只需要改动body里的字体大小，而不用每个元素改动px大小，再次提醒em依赖于最近的字体大小。将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。px常使用在图片大小上。

这篇文章也有一定参考意义，可以一看。

2. 颜色

CSS中颜色取值主要由以下几种方法：

CSS命名颜色。在CSS2.1中，CSS规范定义了17个颜色名。
用RGB指定颜色。可以使用0~255取值或者0%~100%。

h1 {color:rgb(100%,50%,50%);}
h2 {color:rgb(255,132,123);}

十六进制的RGB颜色。将三个介于00-FF的十六进制数连起来，就可以设置一种颜色。

h1 {
    color:#FF0000;
}

可以简写为

h1{
    color:#F00;
}

浏览器会取每一位，并将其复制成两位。

RGBA颜色表示。在RGB的基础上加了一个Alpha通道.它规定了对象的不透明度。lpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。浏览器支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

p {
 background-color:rgba(255,0,0,0.5);
}

HSL颜色和HSLA不做赘述。

3. 字体

CSS通常使用font-family定义使用什么字体，font-size定义字体大小，font-style定义斜体字，
font-variant定义小型的大写字体，font-weight定义字体的粗细，font统一定义字体的所有属性。

font-family

font-family取值: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit

family-name:指一系列字体名称
而generic-family是指一般性字体名称即以下五种通用字体系列。
CSS定义了五种通用字体系列（font-family）：

Serif字体——这些字体成比例，而且有上下短线,Sefit字体包括Times、Georigia和New Century Schoolbook等。
Sans-serif字体——字体成比例，但是没有上下短线。Sans-sefit字体包括Geneva,Verdana,Arial和Univers等。
Monospace字体——不成比例（模拟打印设备打出的文本），每个字符的宽度完全相同,上下短线可能有可能无。monospace字体包括Courier、Courier New、Andale Mono 等。
Cusrive字体——模仿人的手写体。包括Zapf Chancery、Anthou、Comic Sana等。
Fantasy字体——在上述四种字体之外的，不能用任何特征来定义的字体包括：Wesrern、Woodblock和Kinggong等。

说明：

想要显示的字体一定要是你计算机中有的,否则不会按照你期望的显示.上面的第三个示例说明如果有宋体就显示宋体否则显示Arial字体
[字体名1 , 字体名2 , ],其中的星号,表示可以继续增加字体名.如果用户计算机没有安装,你定义的字体名1,系统会自动使用字体名2,如果没有字体名2,系统就再查找字体名3,如果都没有,将使用系统的默认字体
family-name代表系列性字体的名称,比如可以使用逗号分开,的方式取一系列的值("Times","Arial","Courier"等)
generic-family代表一般性字体名称,每个名称都可以代表一系列的字体,比如"serif", "sans-serif", "cursive", "fantasy", "monospace"
用逗号来分隔每一个值,最好在最后有一个基本字体(generic-family)
使用中文字体或者英文名称超过一个单词的字体时要使用"(冒号)扩起来,比如"Times News Roman","宋体"
现代浏览器字体默认的设置为“宋体/simsun字体 16像素”

(留坑：paddingme博客字体默认设置为small,而http://www.zaibc.com/的字体设置为
body { font: 13px Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; }) 很奇怪在我电脑上(windows7,chrome33.0.1750.146 )显示正常，而在同学的电脑上(mac，chrome版本未知）我博客的字体竟然比zaibc的字体小)理论上，small为13px，为什么不一样大呢？难道是浏览器渲染的问题？等我入手大MAC再做详细对比研究。当然HTML的big,small标签已经被w3c抛弃)

另关于默认字体可以查阅女施主的博文中详细解析了淘宝的字体，可以围观，做深入了解。还有这位男施主的博文和这一篇博文,玉伯的文章找不到了很遗憾。张鑫旭的这篇博客也相当有趣，建议观看，提供一个新的视角关于字体设置。还强烈推荐这篇博客，博主对中文字体确有研究，所以他的网站阅乎阅读体验非常好。字体真是一门大学问!

4. 文本属性

参考文章：

Emmet 语法速查表

Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，如果还不了解，请戳Emmet — the essential toolkit for web-developers,再根据你使用的编辑器（sublime 或 vim 等）下载对应的 Emmet 插件，让你的代码快步如飞吧。下面我记录下常用的 Emmet 语法和快捷键。代码区里的均指在编辑器里输入的字符，然后按 “Tab” 键便会生成代码。
例如输入! 然后按 “tab” 会得到如下所示的HTML文档初始机构，再也不用一个字母一个字母敲了，是不是很简单呢？

## HTML 编写 1. 生成HTML文档初始机构 2. `html:5` 或者 `!` 生成 HTML5 结构

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>

  </body>
  </html>

html:xt 生成 HTML4 过渡型

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Document</title>
  </head>
  <body>

  </body>
  </html>

html:4s 生成 HTML4 严格型

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="zh-cmn-Hans">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Document</title>
  </head>
  <body>

  </body>
  </html>

任意一个 html 标签输入都会生成完整的闭合标签。
例如输入 p 按 tab 则生成：<p></p>
生成带有 id 、class 的 HTML 标签: #为 id，. 为 class。
例如输入 div#header.section 则生成 <div id="header" class="section"></div>
生成后代：>
例如输入p>span 则生成 <p><span></span></p>
生成兄弟标签：+
例如输入p+div 则生成 <p></p><div></div>
生成上级标签： ^
例如输入ul>li>a^div 则生成
```
<ul>
  <li><a href=""></a></li>
  <div></div>
</ul>
```
也可以使用多个 ^,
例如输入ul>li>a^^div 则生成
```
<ul>
    <li><a href=""></a></li>
</ul>
<div></div>
```

重复生成多个标签 *
例如输入ul>li*5 则生成

  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>

生成分组的标签: ()
例如输入ul>(li>a)*5 则生成

  <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
  </ul>

注意和ul>li>a*5 生成是不一样的

  <ul>
      <li>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
      </li>
  </ul>

生成自定义属性：[]
例如输入img[https://octodex.github.com/images/codercat.jpg][alt=octcat] 则生成
```
  <img src="https://octodex.github.com/images/codercat.jpg" alt="octcat" />
```

生成递增的属性标签等: $
例如输入ul>li.item$*5 则生成

  <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
  </ul>

生成多位递增的呢：$$$
例如输入ul>li.item$$$*5 则生成

  <ul>
      <li class="item001"></li>
      <li class="item002"></li>
      <li class="item003"></li>
      <li class="item004"></li>
      <li class="item005"></li>
  </ul>

想生成几位输入几个$

要生成递减的呢：@-
例如输入ul>li.item$@-*5 则生成

  <ul>
      <li class="item5"></li>
      <li class="item4"></li>
      <li class="item3"></li>
      <li class="item2"></li>
      <li class="item1"></li>
  </ul>

想要从某个特定的顺序开始呢：@N
例如输入ul>li.item$@10*5 则生成

<ul>
   <li class="item10"></li>
   <li class="item11"></li>
   <li class="item12"></li>
   <li class="item13"></li>
   <li class="item14"></li>
</ul>

逆序生成到某个数：@-
例如输入ul>li.item$@-10*5 则生成

  <ul>
      <li class="item14"></li>
      <li class="item13"></li>
      <li class="item12"></li>
      <li class="item11"></li>
      <li class="item10"></li>
  </ul>

生成文本内容：{}
例如输入p{我是paddingme} 则生成
```
  <p>我是paddingme</p>
```
缺省元素:
- 声明一个带class的div 可以不用输入div；
  .header+.footer 则生成:
```
<div class="header"></div>
<div class="footer"></div>
```
- Emmet 还会根据父标签进行判定
  例如输入ul>.item*3 则生成：
```
<ul>
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
</ul>
```
下面是所有的隐式标签名称：
- li：用于 ul 和 ol 中
- tr：用于 table、tbody、thead 和 tfoot 中
- td：用于 tr 中
- option：用于 select 和 optgroup 中

CSS 编写

首先，Sublime Text3 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性，我们只需要输入 posa 这四个字母即可。可以在平时书写过程中，留意一下 ST3 提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能，请往下看。

简写属性和属性值
比如要定义元素的宽度，只需输入w100，即可生成：
```
width: 100px;
```
Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo 会生成：
```
width:100foo;
```
同样也可以简写属性单位，如果你紧跟属性值后面的字符是p，那么将会生成：
```
width:100%;
```
下面是单位别名列表：
- p 表示%
- e 表示 em
- x 表示 ex
像 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 可以生成：
```
margin: 10px 20px;
```
如果你想生成负值，多加一条横杠即可。例如：m10--20 可以生成：
```
margin: 10px -20px;
```
需要注意的是，如果你对每个属性都指定了单位，那么不需要使用横杠分割。例如使用 m10e20e 可以生成：
```
margin: 10em 20em;
```
如果使用了横杠分割，那么属性值就变成负值了。例如使用 m10e-20e 就生成：
```
margin: 10em -20em;
```
如果你想一次生成多条语句，可以使用 “+” 连接两条语句，例如使用 h10p+m5e 可以生成：
```
height: 10%;
margin: 5em;
```
颜色值也是可以快速生成的，例如 c#3 生成color: #333;，更复杂一点的，使用 bd5#0s 可以生成 border: 5px #000 solid;。
下面是颜色值生成规则：
- ‘# 1’ → #111111
- ‘#e0’ → #e0e0e0
- ‘#fc0’ → #ffcc00
  生成 !important 这条语句也当然很简单，只需要一个 “!” 就可以了。
附加属性
使用 @f 即可生成 CSS3 中的 font-face 的代码结构：
```
@font-face {
   font-family:;
   src:url();
}
```
但是这个结构太简单，不包含一些其他的 font-face 的属性，诸如 background-image、border-radius、font、@font-face、 text-outline、 text-shadow 等属性，我们可以在生成的时候输入 “+” 生成增强的结构，例如我们可以输入 @f+ 命令，即可输出选项增强版的 font-face 结构：
```
@font-face {
   font-family: 'FontName';
   src: url('FileName.eot');
   src: url('FileName.eot?#iefix') format('embedded-opentype'),
        url('FileName.woff') format('woff'),
        url('FileName.ttf') format('truetype'),
        url('FileName.svg#FontName') format('svg');
   font-style: normal;
   font-weight: normal;
}
```
模糊匹配
如果有些缩写你拿不准，Emmet 会根据你的输入内容匹配最接近的语法，比如输入 ov:h、ov-h、ovh 和 oh，生成的代码是相同的：
```
overflow: hidden;
```
供应商前缀
CSS3 等现在还没有出正式的 W3C 规范，但是很多浏览器已经实现了对应的功能，仅作为测试只用，所以在属性前面加上自己独特的供应商前缀，不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性，我们不得不编写大量的冗余代码，而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。
在任意字符前面加上一条横杠（-），即可生成该属性的带前缀代码，例如输入 -foo-css，会生成：
```
-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;
```
虽然 foo-css 并不是什么属性，但是照样可以生成。此外，你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序，使用 -wm-trf 即可生成：
```
-webkit-transform: ;
-moz-transform: ;
transform: ;
```
可想而知，w 就是 webkit 前缀的缩写，m 是 moz 前缀缩写，s 是 ms 前缀缩写，o 就是 opera 浏览器前缀的缩写。如果使用 -osmw-abc 即可生成：
```
-o-abc: ;
-ms-abc: ;
-moz-abc: ;
-webkit-abc: ;
abc: ;
```
渐变背景
CSS3 中新增加了一条属性 linear-gradient 使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂，而且需要添加实验性前缀，无疑需要生成大量代码。而在 Emmet 中使用 lg()指令即可快速生成，例如：使用 lg(left,#fff,50%,#000)可以直接生成：
```
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff),  to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
```
附加功能
生成Lorem ipsum文本
Lorem ipsum 指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过 Emmet，你只需输入 lorem 或 lipsum 即可生成这些文字。还可以指定文字的个数，比如 lorem10，将生成：
```
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, esse,  provident, nihil laudantium vitae quam natus a earum assumenda ex vel  consectetur fugiat eveniet minima veritatis blanditiis molestiae harum est!
```

定制

你还可以定制Emmet插件：

添加新缩写或更新现有缩写，可修改 snippets.json 文件
更改Emmet过滤器和操作的行为，可修改 preferences.json 文件
定义如何生成HTML或XML代码，可修改 syntaxProfiles.json 文件
如何自定义 Emmet 语法可参考：http://qianduanblog.com/post/sublime-text-3-custom-emmet-output-bootstrap-widget.html;github 上一丝的 Emment-plus 也推荐

快捷键

Ctrl+,: 展开缩写
Ctrl+M: 匹配对
Ctrl+H: 使用缩写包括
Shift+Ctrl+M: 合并行
Ctrl+Shift+?: 上一个编辑点
Ctrl+Shift+?: 下一个编辑点
Ctrl+Shift+?: 定位匹配对

Emmet 的官方 API 列表在这里，有一个图片版本可以点此下载

CSS 部分转自HTML/CSS 速写神器：Emmet,因为写着写着发现 bubkoo 差不多给我要写的写完了。所以就摘抄下（不要打我），

其余参考：Emmet官方文档。

form 表单的正确使用

form 表单的正确使用

form提交的几种方法

方法一：利用form的onsubmit()函数

<script>
    function validateForm(){
        if(document.reply.title.value == ""){ //通过form名来获取form
        alert("please input the title!");
        document.reply.title.focus();
        return false;
    }

    if(document.forms[0].cont.value == ""){ //通过forms数组获取form
        alert("please input the content!");
        document.reply.cont.focus();
        return false;
    }
    return true;
  }
</script>

<form name="reply"  method="post" onsubmit="return validateForm( );">
        <input type="text" name="title"  size="80" /><br />
        <textarea name="cont" cols="80" rows="12"></textarea><br />
        <input type="submit" value="提交" >
</form>

注意：
1.onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回
2.validateForm一定要返回一个boolean类型的返回值
3.提交按钮要写成submit类型的

方法二：利用input类型为submit组件的onclick()函数

将上面form标签中的onsubmit="return validateForm()"属性，去掉。
为“提交”按钮添加onclick事件，如下：

方法三：利用button组件的onclick()函数，手动提交

<script>
    function modifyItem() {
        if (trim(document.getElementById("itemName").value) == "") {
            alert("物料名称不能为空！");
            document.getElementById("itemName").focus();
            return;
        }
        with (document.getElementById("itemForm")) {
            method = "post";
            action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
            submit();
        }
    }
    //返回
    function goBack() {
        window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
    }
</script>
<form name="itemForm" id="itemForm">
      <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >
      <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >
     <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">
</form>

注意：
1.提交时，设置form的action和methods属性，然后利用form.submit()函数提交。

总结：

对form中的组件验证时，前两个使用的是name属性，包括form自身的。
如果提交表单时没有反应，同时确定提交表单部分代码没有问题，请查看提交表单前面的js代码，有时前面js的错误会引发莫名其妙的问题。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @charset "utf-8";
/* -------------------------------------------------
 * form
 * -------------------------------------------------
*/
form{
    margin-bottom:18px;
    font-size:13px;
}
textarea {
    resize:none;
    vertical-align:top;
    overflow:auto;
    font:12px/1.5 Helvetica,Arial,sans-serif;
    width:500px;
    height:80px;
}
.form-text{
    margin:0;
    font:12px/1.5 Helvetica,Arial,sans-serif;
    height:18px;
    width:200px;
}
.form-text, textarea, select{
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    padding:4px;
}
.form-text, textarea {
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-text:focus, textarea:focus,select{
    outline: 0 none;
}
.form-text:focus, textarea:focus {
  border-color: rgba(82, 168, 236, 0.8);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
.form-radio,.form-checkbox{
    margin:0;
    padding:0;
    width:13px;
    height:13px;
    font-size:13px;
}
:-moz-placeholder,
::-webkit-input-placeholder{
  color: #bfbfbf;
}
/* form-item */
.form-item{
    margin-bottom:9px;
}
/* horizontal form label */
.form-horizontal label{
    float: left;
    text-align: right;
    font-weight:500;
    width:100px;
    font-size:12px;
    line-height:19px;
}
.form-horizontal .form-field{
    float:left;
}
.form-horizontal .form-action,
.form-horizontal .item-no-label{
    padding-left:100px;/*label width*/
}
/* vertical form label */
.form-vertical label{
    display:block;
    float:none;
    width:auto;
    text-align:left;
    margin-bottom:5px;
}
.form-vertical .form-field{
    float:none;
}
.form-vertical .form-action,
.form-vertical .item-no-label{
    padding-left:0;
}
/* field-list */
.form-radio-checkbox-wrap .form-field label{
    text-align: left;
    width: auto;
    font-weight:normal;
    margin:0 10px 0 0;
    float:left;
    display:inline;
}
.form-radio-checkbox-wrap .form-field .field-list-block{
    display:block;
    float: none;
    margin-right:0;
    overflow:auto;*zoom:1;
}
.form-radio-checkbox-wrap .form-radio,
.form-radio-checkbox-wrap .form-checkbox,
.form-radio-checkbox-wrap span{
    float:left;
    display:inline;
}
.form-radio-checkbox-wrap .form-radio,
.form-radio-checkbox-wrap .form-checkbox{
    margin-right:5px;
    margin-top:3px;
}
/* form-action */
.form-action{
    clear:both;
}
.submit-wrap{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;*display:inline;*zoom:1;
}
.submit-btn{
    border: 0 none;
    height:26px;
    margin:0;
    background:none;
    overflow:visible;
    padding:0 10px;
    cursor:pointer;
}
@-moz-document url-prefix(){
    .submit-btn{
        padding-bottom:3px;
    }
}
/* description */
.form-des{
    color: #bfbfbf;
    font-size:12px;
    margin-left:5px;
}
p.form-des{
    margin:0;
}
/* codePic */
.code-pic{
    display:inline-block;*display:inline;*zoom:1;
}
.code-pic img{
    height:28px;
    vertical-align:middle;
    margin:0 5px;
}
/* tips messages */
.form-error, .form-alert, .form-notice, .form-success, .form-info {
    border: 2px solid #DDDDDD;
    margin-bottom: 9px;
    padding:8px;
    font-size:12px;
}
/* span inline tips */
span.form-error, span.form-alert, span.form-notice, span.form-success, span.form-info {
    border-width:1px;
    display:inline-block;*display:inline;*zoom:1;
    line-height:26px;
    vertical-align:middle;
    padding:0 5px;
    font-size:12px;
    margin:0 0 0 5px;
}
.form-error, .form-alert {
    background: none repeat scroll 0 0 #FBE3E4;
    border-color: #FBC2C4;
    color: #8A1F11;
}
.form-notice {
    background: none repeat scroll 0 0 #FFF6BF;
    border-color: #FFD324;
    color: #514721;
}
.form-info {
    background: none repeat scroll 0 0 #D5EDF8;
    border-color: #92CAE4;
    color: #205791;
}
.form-success {
    background: none repeat scroll 0 0 #E6EFC2;
    border-color: #C6D880;
    color: #264409;
}
.form-error a, .form-alert a,.form-notice a,.form-info a,.form-success a{
    text-decoration:underline;
}
.form-error a, .form-alert a {
    color: #8A1F11; 
}
.form-notice a {
    color: #514721;
}
.form-info a {
    color: #205791;
}
.form-success a {
    color: #264409;
}
/* clear form-item float */
.form-item:before, .form-item:after {
    content:"";
    display:table;
}
.form-item:after{
    clear:both;
    overflow:hidden;
}
.form-item{
    zoom:1;
    clear:both;
    margin-bottom:9px;
}
    </style>
</head>

<body>
    <h3>label同行表单demo</h3>
    <section class="demozone">
        <form class="demo form-horizontal" id="demo2" action="#" method="post">
            <div class="form-item">
                <label for="username">昵称：</label>

                <div class="form-field">
                    <input type="text" name="username" id="username" class="form-text" placeholder="6-32个字符" />
                </div>
            </div>
            <div class="form-item">
                <label for="name">邮箱：</label>

                <div class="form-field">
                    <input type="email" name="email" id="email" class="form-text" />
                </div>
            </div>
            <div class="form-item">
                <label for="pwd">密码：</label>

                <div class="form-field">
                    <input type="password" class="form-text" id="pwd" name="pwd">
                </div>
            </div>
            <div class="form-item form-radio-checkbox-wrap">
                <label>性别：</label>

                <div class="form-field">
                    <label>
                        <input type="radio" name="sex" class="form-radio" value="man" checked="checked">
                        <span>男</span>
                    </label>
                    <label>
                        <input type="radio" name="sex" class="form-radio" value="woman">
                        <span>女</span>
                    </label>
                </div>
            </div>
            <div class="form-item form-radio-checkbox-wrap">
                <label>Options：</label>

                <div class="form-field">
                    <label class="field-list-block">
                        <input type="checkbox" checked="checked" value="1" class="form-checkbox" name="">
                        <span>Option one is this and that—be sure to include why it’s great</span>
                    </label>
                    <label class="field-list-block">
                        <input type="checkbox" value="2" class="form-checkbox" name="">
                        <span>Option two can also be checked and included in form results</span>
                    </label>
                    <label class="field-list-block">
                        <input type="checkbox" value="3" class="form-checkbox" name="">
                        <span>Option three can—yes, you guessed it—also be checked and included in form results</span>
                    </label>
                </div>
            </div>
            <div class="form-item">
                <label for="realname">姓名：</label>

                <div class="form-field">
                    <input type="text" name="realname" id="realname" class="form-text" placeholder="请填入真实姓名" />
                </div>
            </div>
            <div class="form-item">
                <label>证件号码：</label>

                <div class="form-field form-id-num-wrap">
                    <select id="id_type" size="1" name="id_type">
                        <option value="1" selected="selected">身份证</option>
                        <option value="2">学生证</option>
                        <option value="3">军官证</option>
                    </select>
                    <input type="text" name="id_text" id="id_text" class="form-text" />
                </div>
            </div>
            <div class="form-item">
                <label>个人简介：</label>

                <div class="form-field">
                    <textarea name="intro" id="intro"></textarea>

                    <p class="form-des">说明注释文字可以放在这里啊</p>
                </div>
            </div>
            <div class="form-item">
                <label for="codetext">验证码：</label>

                <div class="form-field form-code-text-wrap">
                    <input type="text" id="codetext" name="codetext" class="form-text code-text">

                    <div class="code-pic">
                        <img id="codePic" alt="" src="http://www.w3cplus.com/solution/form/images/code.jpg"><a id="change_code" href="#">换一个</a>
                    </div>
                </div>
            </div>
            <div class="form-item item-no-label form-radio-checkbox-wrap">
                <div class="form-field">
                    <label>
                        <input type="checkbox" name="" class="form-checkbox" value="1" checked="checked">
                        <span>我同意所有条款……</span>
                    </label>
                </div>
            </div>
            <div class="form-action">
                <span class="submit-wrap greybtn">
                    <input type="submit" value="提交" class="submit-btn">
                </span>
            </div>
        </form>
    </section>
    <h3>label换行表单</h3>
    <section class="demozone">
        <form method="post" action="#" id="demo3" class="demo form-vertical">
            <div class="form-item">
                <label for="username">昵称：</label>

                <div class="form-field">
                    <input type="text" placeholder="6-32个字符" class="form-text" id="username" name="username">
                </div>
            </div>
            <div class="form-item">
                <label for="name">邮箱：</label>

                <div class="form-field">
                    <input type="email" class="form-text" id="email" name="email">
                </div>
            </div>
            <div class="form-item">
                <label for="pwd">密码：</label>

                <div class="form-field">
                    <input type="password" name="pwd" id="pwd" class="form-text">
                </div>
            </div>
            <div class="form-item form-radio-checkbox-wrap">
                <label>性别：</label>

                <div class="form-field">
                    <label>
                        <input type="radio" checked="checked" value="man" class="form-radio" name="sex">
                        <span>男</span>
                    </label>
                    <label>
                        <input type="radio" value="woman" class="form-radio" name="sex">
                        <span>女</span>
                    </label>
                </div>
            </div>
            <div class="form-item form-radio-checkbox-wrap">
                <label>Options：</label>

                <div class="form-field">
                    <label class="field-list-block">
                        <input type="checkbox" checked="checked" value="1" class="form-checkbox" name="">
                        <span>Option one is this and that—be sure to include why it’s great</span>
                    </label>
                    <label class="field-list-block">
                        <input type="checkbox" value="2" class="form-checkbox" name="">
                        <span>Option two can also be checked and included in form results</span>
                    </label>
                    <label class="field-list-block">
                        <input type="checkbox" value="3" class="form-checkbox" name="">
                        <span>Option three can—yes, you guessed it—also be checked and included in form results</span>
                    </label>
                </div>
            </div>
            <div class="form-item">
                <label for="realname">姓名：</label>

                <div class="form-field">
                    <input type="text" placeholder="请填入真实姓名" class="form-text" id="realname" name="realname">
                </div>
            </div>
            <div class="form-item">
                <label>证件号码：</label>

                <div class="form-field form-id-num-wrap">
                    <select name="id_type" size="1" id="id_type">
                        <option selected="selected" value="1">身份证</option>
                        <option value="2">学生证</option>
                        <option value="3">军官证</option>
                    </select>
                    <input type="text" class="form-text" id="id_text" name="id_text">
                </div>
            </div>
            <div class="form-item">
                <label>个人简介：</label>

                <div class="form-field">
                    <textarea id="intro" name="intro"></textarea>

                    <p class="form-des">说明注释文字可以放在这里啊</p>
                </div>
            </div>
            <div class="form-item">
                <label for="codetext">验证码：</label>

                <div class="form-field form-code-text-wrap">
                    <input type="text" class="form-text code-text" name="codetext" id="codetext">

                    <div class="code-pic">
                        <img src="http://www.w3cplus.com/solution/form/images/code.jpg" alt="" id="codePic"><a href="#" id="change_code">换一个</a>
                    </div>
                </div>
            </div>
            <div class="form-item item-no-label form-radio-checkbox-wrap">
                <div class="form-field">
                    <label>
                        <input type="checkbox" checked="checked" value="1" class="form-checkbox" name="">
                        <span>我同意所有条款……</span>
                    </label>
                </div>
            </div>
            <div class="form-action">
                <span class="submit-wrap greybtn">
                    <input type="submit" value="提交" class="submit-btn">
                </span>
            </div>
        </form>
    </section>
    <h2>附加：状态提示信息的class</h2>

    <div class="demozone">
        <div class="form-error">This is a &lt;div&gt; with the class
            <strong>.form-error</strong>. <a href="#">Link</a>.
        </div>
        <div class="form-notice">This is a &lt;div&gt; with the class
            <strong>.form-notice</strong>. <a href="#">Link</a>.
        </div>
        <div class="form-info">This is a &lt;div&gt; with the class
            <strong>.form-info</strong>. <a href="#">Link</a>.</div>
        <div class="form-success">This is a &lt;div&gt; with the class
            <strong>.form-success</strong>. <a href="#">Link</a>.
        </div>
    </div>
    </article>
</body>

</html>

关于字体，排版等资料

Web 中文字体应用指南
中文排版的最佳实践
Entry.css

Customizable and readable less library for Chinese text. 一个可配置的、更适合阅读的中文文章样式库
typo.css

中文网页重设与排版：一致化浏览器排版效果，构建最适合中文阅读的网页排版
yue.css

A typography stylesheet for readable content
chinese-copywriting-guidelines

Chinese Copywriting Guidelines：中文文案排版指北
Han.css

「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.
簡單做好中文排版
中文排版的最佳实践

上篇文字是繁体版，这篇文字是简体版。

豌豆荚文案要求

google doc 不知道是否能打开了。

中文字体新手指南

IE下报错：SCRIPT257: 由于出现错误 80020101 而导致此项操作无法完成

常见的有：
1.上面的html注释""，这种情况一般只在Extjs的autoLoad中出现
2.json对象最后一个属性值末尾多了逗号
如：错误：{a:'1', b:'2',}
正确：{a:'1', b:'2'}

http://www.cnblogs.com/jenqz/p/3691535.html

z-index

你需要了解的z-index世界

chrome developt tools

[1] https://leeon.gitbooks.io/devtools/
[2] http://www.kazaff.me/2014/01/14/chrome-developer-tools%E4%B9%8B%E8%B0%83%E8%AF%95%E4%BB%A3%E7%A0%81/

CSS box-shadow 產生陰影效果或光暈效果的特性

浮动

浮动和浮动元素

对于浮动来说，最常见的，也是CSS产生浮动的初衷就是文字环绕图像的效果。对于浮动元素，有几点要记住：

会以某种方式将浮动元素从文档的正常流中删除，它可能会影响到布局；
浮动元素周围的外边距不会合并：如果浮动一个元素有20px外边距的图像，则在这个图像周围至少有20px的空间。若其他元素与图像相邻，而且这些元素也有外边距，则这些外边距不会与浮动图像的外边距合并；
如果确实要浮动一个非替换元素，则必须为该元素声明一个width,否则CSS规范，元素的宽度趋于0。

浮动的内幕

浮动元素的包含块(Containning block)是其最近的块级祖先元素。浮动元素会生成一个块级框，而不论这个元素本身是什么。故没有对浮动元素设置display:block。

浮动规则

浮动元素的左（或右）外边界不能超出其包含块的左（或者右）内边界。
浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。(不用担心浮动元素会相互覆盖)
左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。右浮动元素的左外边界不会在其左边左浮动元素的右外边界的左边（汗=。=）。这条规则防止浮动元素相互重叠。假设body,宽为500px,有两个width=300px的image，一个左浮动，另一个右浮动。它会要求第二个图像向下浮动，直到其顶端在左浮动图像的低端之下。
一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素就好像在两个元素之间有一个块级父元素（防止浮动到三个元素共同的父元素的顶端了。。）。
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。亦即浮动元素不能呢个超出其包含元素的边界，除非它太宽，本身就无法放下。如果多个元素浮动，浮动元素会被挤到一个新的“行”上。
浮动元素必须尽可能得放置。满足其他约束条件的前提下，浮动得尽可能高。
左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。位置越高，就会向右，或想做浮动得越远。

实用行为

前面的浮动原则只讨论了浮动元素和其父元素的左右和上边界，而没有涉及下边界。这里是故意遗漏的，浮动元素会延伸，从而包含其所有后代浮动元素。所以通过将父元素置为浮动元素，就可以把浮动元素包含在其氟元素内。

负外边距可能导致浮动元素移到其父元素的外面。如前所述，还有另一种方法可以让浮动元素超出其父元素的左右内边界，即浮动元素比其父元素更宽。

浮动元素、内容和重叠

行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示；
块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，内容在浮动元素“之上”显示

清除

在CSS1 和 CSS2 中，clear 会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上会忽略为清除元素（设置了clear 的元素）顶端设置的外边距宽度。亦即清楚元素的上外边距可能会调整。

CSS2.1 中引入了一个清除区域（clearance）。清楚区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内，这意味着元素设置clear 属性时，它的外边距不会改变，之所以会向下移是这个清除区域造成的。

参考
《CSS权威指南》第10章浮动和定位

Sublime Text 3 插件备忘

记录下我的 Sublime Text 3 使用的插件以及安装，以备后用。

我安装的 Sublime Text 版本是 Sublime Text Build 3083 x64,插件的安装与版本无关，
请自行选择自己使用的版本。

安装 Package Control

https://packagecontrol.io/installation

安装好 sublime 之后打开按 ctrl+点 调出 Sublime Text 控制台(或者View >Show Console)。将以下代码粘贴到控制台里，然后敲击回车：

  import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

安装各种插件

按 ctrl + shift + p 出现的文本框中输入 Install Package(或直接输入ip) 选中 Install Package 并回车

Emmet

输入 emmet 安装。 Emmet 语法速查表。
emmet-plus

emmet-plus
JsFormat

即可在JS文件中通过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化

SideBarEnhancements

[
  { "keys": ["ctrl+shift+c"], "command": "copy_path" },
  //firefox
  { "keys": ["f3"], "command": "side_bar_files_open_with",
           "args": {
              "paths": [],
              "application": "D:\\x64\\firefox.exe",
              "extensions":".*" //匹配任何文件类型
          }
  },
  //chrome
  { "keys": ["f1"], "command": "side_bar_files_open_with",
          "args": {
              "paths": [],
              "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
              "extensions":".*"
          }
   },
  //ie
  { "keys": ["f3"], "command": "side_bar_files_open_with",
           "args": {
              "paths": [],
              "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
              "extensions":".*"
          }
  }
]

CssComb 是为CSS属性进行排序和格式化插件

使用Package Control安装CssComb插件后，你可能发现它并不能运行,
使用方法：菜单Tools->Run CSScomb或在CSS文件中按快捷键Ctrl+Alt+C (已经修改)
Autoprefixer 插件

这是一款CSS3私有前缀自动补全插件，该插件使用CanIUse资料库，能精准判断哪些属性需要什么前缀。
与CssComb插件一样，该插件也需要系统已安装Node.js环境。
使用方法：在输入CSS3属性后（冒号前）按Tab键。
TrailingSpaces插件

有时候，在代码结尾打多了几个空格或 Tab，并没有任何显示效果，TrailingSpaces 这款插件能高亮显示多余的空格和 Tab。
SublimeCodeIntel插件

主要是用来自动完成 JavaScript 代码。

Jump to definition = Alt+Click
Jump to definition = Control+Windows+Alt+Up
Go back = Control+Windows+Alt+Left
Manual Code Intelligence = Control+Shift+space
中文版本不跟随：IMESupport
一些设置

``` js
// 设置Sans-serif（无衬线）等宽字体，以便阅读
"font_face": "YaHei Consolas Hybrid",
"font_size": 12,
// 使光标闪动更加柔和
"caret_style": "phase",
// 高亮当前行
"highlight_line": true,
// 高亮有修改的标签
"highlight_modified_tabs": true,
```

主题：

``` js
"theme": "Nexus.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
```

编码风格设置：

``` js
  // 设置tab的大小为2
  "tab_size": 2,
  // 使用空格代替tab
  "translate_tabs_to_spaces": true,
  // 添加行宽标尺
  "rulers": [80, 100],
  // 显示空白字符
  "draw_white_space": "all",
  // 保存时自动去除行末空白
  "trim_trailing_white_space_on_save": true,
  // 保存时自动增加文件末尾换行
  "ensure_newline_at_eof_on_save": true,
```

BracketHighlighter高亮显示配对括号以及当前光标所在区域
Alignment 等号对齐

按Ctrl+Alt+A，可以将凌乱的代码以等号为准左右对其，适合有代码洁癖的朋友。C
better completion 主要自动完成jquery 代码的

https://github.com/Pleasurazy/Sublime-Better-Completion
https://github.com/angular-ui/AngularJS-sublime-package
https://github.com/jonschlinkert/sublime-markdown-extended#markdown-enhancements
https://github.com/SublimeText-Markdown/MarkdownEditing
HTML+CSS+JAVASCRIPT+JSON快速格式化
ctrl+shift+h

参考：

所有安装插件和设置见：

百度云： http://pan.baidu.com/s/1eQ8QpJc

学习CSS布局

这是偶尔看到的一篇学习CSS布局的文章，对于我这个菜鸟来说真是受益匪浅，对CSS布局一下子拨云见雾的感觉。你可以到这里仔细研究阅读，相信你会和我一样兴奋和豁然开朗。而下面是我在此基础上总结的内容，以便后来查阅使用。

"display"属性

每个元素都有默认的display属性，一般是block或者inline,block表示块级元素，而inline表示行内元素。block元素（如div、table、p、form等）会新开始一行并尽可能撑满容器。而inline元素（如span、a等）即行内元素不会打破包裹它的容器的布局。另一个常用的display值为none，display:none通常是被JavaScript用来在不删除元素的情况下隐藏或显示该元素。
其他的display值还有list-item和table等，详情可以参见这里,你可以随时随地人工改变一个元素的display值。常见的是：把li改为display:inline制作水平菜单。
marigin:auto

如何使一个元素居中，并且不用担心小屏幕会显示出滚动条：(max-width 支持IE7+)
```
main{
max-width:600px;

margin:0 auto;

}
```
盒模型

盒模型的宽度高度我们知道要通过计算（真正的宽度=width+2_padding+2_border）我们使用box-sizing来改进它，当设置一个元素为box-sizing:border-box时，此元素的内边距和边框不会增加该元素的宽度。支持IE8+，如果要在所有浏览器中使用该属性，则可以利用下面的代码：
```
*{

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}
```
position

position主要由static、absolute、relative、fixed等值。
1. static 是默认值，表示没有被定位。
2. relative 相对定位，相对于它在正常文档流中，通过top、right、bottom、left作用值产生偏移。而其他元素不会调整位置来弥补它偏离后剩下的间隙。
3. fixed 固定定位，相对于浏览器窗口，意味着即使页面滚动，它还是会停留在相同的位置。（移动浏览器对fixed支持很差，解决方案参考[这里]（http://bradfrostweb.com/blog/mobile/fixed-position/）。
4. absolute 是相对于最近的被定位的祖先元素产生的偏移，如果没有，它是相对文档的body元素，并且它会随着页面滚动而移动。
float

如前篇所述，最开始产生float的作用就是使文字环绕图片，其本质就是包裹和破坏，它脱离了正常的文档流，可能会导致溢出，所以要clearfix hack（清除浮动），清除浮动的方法有很多种，可以参考上篇文章张鑫旭写的，这里有更多的讨论

媒体查询

针对响应式设计，，让网站针对不同浏览器和设备相应。



@media screen and (min-width:600px) {

nav {

float: left;

width: 25%;

}

section {

margin-left: 25%;

}

}

@media screen and (max-width:599px) {

nav li {

display: inline;

}

}

在MDN文档中有更多关于媒体查询的知识。使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。

inline-block

使用行内联。IE6和IE7支持看这里
使用inline-box要注意以下：
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top
- 需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
column
```
.three-column {

padding: 1em;

-moz-column-count: 3;

-moz-column-gap: 1em;

-webkit-column-count: 3;

-webkit-column-gap: 1em;

column-count: 3;

column-gap: 1em;

}
```
CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 cloumn 相关的属性，点击这里了解更多
flexbox

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。具体例子可以参考这里

其他框架

例如bootstrap的12格流式布局等等。

label 标签的应用

 <input id="J_MyChk" type="checkbox" value="">
 <label for="J_MyChk">点击我也可以让左边选中</label>

 <label><input type="checkbox" value="">点击我也可以让左边选中</label>

indent 的问题

subliem settings-user 中的 "tab_size": 2 和 .editorconfig indent_size = 2 问题

===》统一改为一个 tab 为 4个空格

button 标签的正确使用

<button type="button">我是一个按钮</button>

基本视觉格式化

基本框

在CSS中每个元素都被认为可生成一个或多个矩形框，这成为元素框。各元素框中心有一个内容区域（content area），内容区周围有可选的内边距（padding）、外边距(margin)、和边框(border),这里可选的是指可设置为0即从元素框内去除了这些为0的项，例如说行内元素没有 margin,没有 padding。外边距通常是透明的，可以看到父元素的背景。内边距不能是负值。边框若未设置颜色，则取元素内容的前景色。亦即边框和内容以内边距有相同的背景色。边框的宽度不可以为负。

包含块

每个元素都相对于其包含块摆放，亦即包含块就是一个元素的“布局上下文”。而行内元素的摆放方式并不直接依赖于包含块。

常见的术语

正常流

这是指西方语言文本从左向右、从上向下显示，即传统的HTML 文档的文本布局。若想要让某元素脱离正常的文档流，让其浮动或改变其定位方式（float:left,float:right,position:fixed,position:absolute）。
非替换元素

若元素的内容包含在文档中，则称之为非替换元素。如某段落的文本内容在该元素本身之内，这个段落就是非替换元素。
替换元素

指用作为其他内容占位符的一个元素。如img 元素，input元素等<input type="radio">
块级元素

指段落、标题或div之类的元素。这些元素在正常的文档流中，会在其框之前和之后形成换行，故处于正常文档流中的块级元素会垂直摆放。通过声明display:block可使元素变身块级框。
行内元素

指strong或span之类的元素。这些元素不会在之前或之后生成“行分隔符”。
根元素

位于文档树顶端的元素，在HTML文档中，即为html

块级元素

一般地，一个元素的width 被定义为从左内边界到右内边界的距离，height 则是从上内边界到下内边界的距离。

正常流中的块级元素框的水平部分综合就等于父元素的width。

margin-left,border-left,padding-left,width,padding-right,border-right,margin-right 这些属性与块级框的水平布局有关，这7个值加起来必须是元素包含块的宽度。这往往是块级框的width 值。这7个属性中，只有width,margin-left,margin-right 可设置为auto，其余都必须设置为特定的值或者默认为0。

使用 auto

如果在margin-left、margin-right、width中设置某一个为auto，另外两个设置为特定的元素，则设置为auto 的属性会确定所需要的长度，从而使元素框的宽度等于父元素的width。

如果三个属性都设定特定的值，无法撑满父元素的width，则根据从左向右的文档流会自动将margin-right 设置为auto，来填补所有的距离。
如果只设置了margin-left:auto和width:auto 或margin-right:auto和width:auto 则设置为auto 的外边距变为0。
如果只设置margin-left:auto和margin-right:auto，width　为一确定值，则元素在其父元素中居中，比较常用，另text-align:center 只应用于块级元素的内联内容。
如果三个属性都设置为auto，则两个外边距都设置为0，而width会尽可能宽。与默认情况相同，即没有设置margin，width 没有显式设置，则外边距默认为0，width 为auto。

负外边距

要记住7个水平方向的属性的和一定等于父容器的width。

替换元素

如果width 为auto 则元素的宽度则是内容的固有宽度。

垂直格式化

如果正常流中一个块元素的margin-top 或margin-bottom 设置为auto，它会自动计算为0。

如果没有显示声明包含块的height，百分数高度会重置为auto。

auto 高度

如果块级正常流元素设置为height:auto，显示时其高度将恰好足以包含其内联内容（包含文本）的行盒。

如果块级正常硫元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级元素的外边框边界到最低块级子元素外边框边界之间的距离。故子元素的外边距会超出包含这些子元素的元素。

若块级元素有上内边距或下内边距，或者有上边框或者下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。