原文发表于我自己的服务器www.jjxiaoliu.cn；不过这个服务器我可能不打算续费了，所以搬到cnblogs来。
有些关于HTML和CSS的内容不值得单独列一篇文章，全都放在这里了。
<link rel="stylesheet" type="text/css" href="theme.css"/>
这里的rel表示relationship，就是后面href文档与本文档的关系。
我们可以利用注释来给原本不能断行的HTML代码增加断行：
<!– 下面的代码可能出现在使用<ul>和<li>制作的简单横向菜单中（配合CSS） –>
<li>item1</li><!–
–><li>item2</li>
指定charset的两种写法：
<meta charset=”utf-8″ />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
这两种几乎是一样的。所以一般用短些就可以了。
我们可以使用download属性来设定用户下载到本地的文件名：
<a href=”something_to_be_download” download=”short_name”>Download something</a>
用于标记计算机代码的HTML标签：
- <code>，标记通用计算机代码
- <var>，标记变量名
- <kbd>，标记用户输入
- <samp>，标记计算机输出
<thead> .vs. <th>
<thead>仅描述表格结构；<th>一般而言会使得浏览器以更醒目的方式渲染标签内容（表现形式）。
如果对上一段文字感到拧巴，可以参考这一篇：
HTML与CSS：结构与表现。
另外，在打印长表格时，<thead>和<tfoot>会自动重复出现在每一页的头和尾。从这点来说，它们更像是页头和页尾。
在需要时，<thead>和<th>也是可以混用的。可以参考MDN上关于<thead>标签的例子。
pseudo-classes与pseudo-element
pseudo-classes匹配整个标签，而pseudo-element匹配标签内的特定元素。
例如：p:first-child匹配作为第一个child元素出现的p标签；p::first-letter匹配p标签内的第一个字符。
顺便说一下，pseudo-classes的child是指标签本身作为child，不是指标签的下级child。且child计数从1开始。
CSS的属性名称不区分大小写，但属性值区分大小写。
[name=”jjxiaoliu”]等价于[Name=”jjxiaoliu”]，但不等价于[name=”JJxiaoliu”]。
CSS可以用紧邻的[]匹配多个属性。
[country=”china”][province=”jiangsu”]可以匹配如下标签：
<p country=”china” province=”jiangsu”>Jiangsu Province, China</p>
注意两个[]之间不能有空格。
如果两个[]之间有空格，那么将形成Descendant selector，于是匹配的将是如下形式的HTML结构：
<div country=”china”>
<p province=”jiangsu”>Jiangsu Province, China</p>
</div>
class和id联合使用
p.class_name#id_name
类似的，class也可以和属性联合使用：
p.class_name[attribute]
类自身也能联合使用：
.classa.classb { }
匹配如下标签：
<p class="classa classb"></p>
（上面两条结合起来看：本质上是说的相同的事情。）
css的margin属性
如果相邻元素都是正值，那么取正最大；
如果相邻元素都是负值，那么取负最大；
如果相邻元素正负相反，那么取两者的和。
css的position属性
如果设置为absolute，那么位置值默认是相对于html标签，除非其祖先设置过position为非static值：即absolute的位置值是相对于其祖先元素里除去用static定位以外的最近一个。使用absolute定位的元素不占据空间（或者说不参与其他元素定位计算）。
如果设置为relative，那么位置值是相对于其“原本（没有设置位置的情况下）应该在的”位置，且“原本应该在的位置”还留着参与其他元素定位（即留白）。
如果设置为fixed，那么位置值是相对于浏览器窗口可视区。常用于在滚动页面时需要固定在屏幕某位置的元素。
link, visited, hover, active
根据CSS的优先顺序（最后一条匹配规则优先），这四个伪类需要按照一定的顺序（从一般到特殊）书写。
1. link作为默认“静态”规则（没有点过，鼠标不在），放在第一项；
2. visited和link同样是“静态”规则，区别是已访问过，考虑到满足visited必定满足link，为了让visited生效，要放在第二项；
2.5 这中间可以插一条focus（When you focus it with key TAB）
3. hove是“动态”规则，鼠标还没有点击，满足它的同时，必定同时满足link，可能满足visited，所以放在第三项；
4. active最为特殊，在满足active的同时，必定满足hover和link，可能满足visited，放在最后一项。
使用CSS制作带箭头box的例子：http://www.cssarrowplease.com/