元素必须嵌套，尽管SGML规定层叠非法，但现有的浏览器普遍允许层叠。

　　正确：嵌套元素。
　　<p>here is an emphasized <em>paragraph</em>.</p>

　　不正确：层叠元素。
　　<p>here is an emphasized <em>paragraph.</p></em>

　　元素和属性名必须小写
　　对所有HTML元素和属性名，XHTML 文档必须使用小写。 因为XML是大小写敏感的，所以这个差别是必须的。如 <li> 和 <LI> 是不同的标签。

　　对非空元素，必须使用结束标签
　　在基于 SGML的 HTML 4 中，一些隐含结束意义的元素允许忽略结束标签。而在基于XML的XHTML中，这种忽略不被允许。除了在DTD中被声明为空的元素，所有元素必须有结束标签。

　　正确：结束了的元素。
　　<p>here is a paragraph.</p><p>here is another paragraph.</p>

　　不正确：未结束元素。
　　<p>here is a paragraph.<p>here is another paragraph.

　　属性值必须在引号中
　　所有的属性必须用引号，即使是数字。

　　正确：在引号中的属性值
　　<table rows=”3″>

　　不正确：不在引号中的属性值。
　　<table rows=3>

　　属性最小化
　　XML 不支持属性最小化. 属性值对必须写全。象compact，checked这样的属性名不能不指定属性值而在元素中出现。

　　正确：没有最小化的属性
　　<dl compact=”compact”>

　　不正确：最小化属性
　　<dl compact>

　　空元素
　　空元素要么必须有结束标签，要么起始标签以/>结束. 例如，<br/>或<hr></hr>. 请参看HTML兼容性指导 HTML Compatibility Guidelines 中的信息，以保证向后兼容HTML 4用户代理程序

　　正确：结束的空元素
　　<br/><hr/>
　　错误：未结束的空标签
　　<br><hr>

　　属性值中的空白字符处理
　　对属性值，用户代理程序将删去引导和后序空白符，将一个或多个空白符(包括换行)转换成单个字符间空间(在西方书写体中是一个ASCII空格) See Section 3.3.3 of [XML]。

　　Script and Style 元素
　　　　在XHTML中，script和style元素声明为#PCDATA内容形式，因此，< 和 & 被看作是标识的开始，<和& 这样的实体被XML处理程序看作为实体引用而分别被认为是< 和 & . 将script和style元素的内容包裹在CDATA记号部分中避免了这些实体的扩张。

　　CDATA 部分被 XML 处理程序识别，是文档对象模型中一个结点。请参看1.3节Section 1.3的DOM LEVEL 1推荐标准[DOM]。

　　替代的方式是使用外部script和style文档。

　　SGML 禁止

　　SGML 给作者的DTD可以指定在一个元素内部禁止出现的元素。这样的禁止在XML中是不可能的。

　　例如，严格的 HTML 4 DTD 禁止任何深度的’a’元素对另一’a’元素的嵌套。在XML中无法写出这样的禁止。尽管这些禁止不能在DTD中定义，一些元素不应该被嵌套。在标准化的附录B Appendix　B中是这些元素的汇总。

　　具有 ’id’ 和 ’name’ 属性的元素

　　HTML 4 定义了name属性的元素有 a，applet，form，frame，iframe，img，and map. HTML 4还引入了 id 属性. 这两个属性都是被设计作为片段标识符。

　　在XML中，片段标识符是ID类型，每个元素只能有一个ID类型的属性。因此，在XHTML1.0中，id属性被定义为ID类型。为保证XHTML1.0文档是结构良好的XML文档，在定义一个片段标识符时，XHTML文档必须使用id属性，即使是对那些以前用name属性的元素。请参看 HTML Compatibility Guidelines 的信息，确保XHTML文档以text/html媒体类型使用时，这些”锚”能向后兼容。 

　　注意，在XHTML 1.0中，name 属性不被正式支持，在以后的XHTML版本中将被删除。

(请注意，本文发表时尚未测试这些属性在IE8中的表现。我稍后会做一个测试页面，用来测试这些属性在所以IE浏览器中的表现。)
1. Outline在调试CSS问题的时候，我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的，因为它可以在布局上给我更加具体的可视性。但是如果是块级元素，这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局，它会让这个元素的宽度额外增加2px。
outline 属性是完美的替代者，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性，所以，它不能在这两个浏览器中用于调试。
2. Inherit (值)在CSS开发中有很多这样的例子：通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性，这样你就可以避免相当多的键盘输入。
这可以通过设置 inherit 来很容易的实现。这可能很有用。比如，当重写 background 属性的时候，常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以，与其重新写这些值，你可能仅仅想要考虑中的元素和其父级元素有相同的背景属性，一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。
不幸的是， inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 属性）。
某人说，代码就像女人的裙子——越短越好，看来IE会阻碍我们这个愿望的实现。

3. Empty-Cells该属性只用于table或者”display”属性被设置为”table-cell”的元素。如果你动态的为一个table添加内容，就可能会遇到某个单元格的内容为空的情况，然后你又不希望这个空的单元格的边框、背景色、背景图片等隐藏掉。
使用”empty-cells: hide”就能解决这个问题，它会将可能出现这种情况的单元格完全隐藏掉。
Internet Explorer 不支持empty-cells属性。
4. Caption-Side说到table 的属性，这个属性用于声明显示在表格的侧栏的表格标题。它接受 top 、 bottom 、 left 和 right 四个值。Internet Exporer 不支持这个属性，table的标题在IE6和IE7中将总是出现在表格的顶部。
5. Counter-Increment / Counter-Reset有序列表(

)非常方便，因为它可以省去你手工添加递增数字的麻烦，而且它允许你不用更改数字就能改变列表的序列。
CSS 拥有 counter-increment 和 counter-reset 属性，它允许你用来自动生成递增数字到几乎所有的HTML元素上，就像有序列表的效果一样。
这里有个示例：
1
2
h2 {counter-increment: headers;}
h2:before {content: counter(headers) “. “;}
上面的样式将在所有的


标签前面自动添加递增的数字，而且允许你在h2标签上实现和li标签同样的的效果。
但是IE6, IE7 甚至Safari(直到3.x版本)还不支持这些属性。当然，IE6也不支持:before 伪元素。
6. Min-Height有时，一个网站的设计或布局结构需要一个有固定高度的内容区域，否则特定的视觉效果就会丢掉。这可能会因为一个渐变背景、一个独特的下拉列表、 或者可能是因为PS出来的很酷的发光效果。但是有的时候，页面中的内容会比较多，而页面却不能像预期那样展开。
这个时候就需要用到 min-height 属性了，因为它可以告诉浏览器在一个特定的块级元素上渲染最小的高度，不管内容的实际高度是否达到了这个最小高度。然后呢，如果内容超出了最小高度，该元素就会适度的扩展开。
使用min-height 唯一需要注意到的是它在IE6中不被支持。我们都知道IE6在（缓慢的）退出历史舞台，但是有的客户可能仍然要求他们的网站支持这个该死的浏览器。
不过令人高兴的是，IE6 渲染 height 的值的方法正好和其它浏览器渲染“min-height”的方式一样，所以你只需要一个针对IE6的hack或独立的样式表来为该元素添加特定的 height ，这个问题就解决了。
IE6 同样无视 min-width 、 max-height 和 max-width ， 但是上述方法在这些属性上也是可行的。
7. :hover从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用JavaScript。
但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。
8. DisplayDisplay 通常被设置为这三个值中的一个： block、inline和 none。“得益于”IE，Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。
所以，尽管IE 确实支持Display的这三个基本属性，但是它基本上不支持其它属性。
其实，IE8对display的属性支持已经相当完整了。不过，对于inline-block属性，IE6/7只支持本身为inline的元素。
想了解更多关于Display在各个浏览器中的支持情况，请查阅这里——神飞注
9. Clip这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说，这个属性允许你在一个特定的元素上指定隐藏区域——也可以理解为，在一个绝对定位的元素中，按照一定的设置来裁剪该元素的显示区域，超出该区域的内容会被隐藏掉。语法看起来像这样的：
1
2
3
4
5
6
7
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px, 300px, 200px, 100px);
position: absolute;
}
修剪只能用于一个绝对定位的元素，而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域，该区域以外的内容不可见或者被剪切掉。
技术上来讲， clip 属性被IE支持，但是只支持无逗号的语法，比如
1
2
3
4
5
6
7
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px 300px 200px 100px);
position: absolute;
}
上面的样式（rect后面括号里的属性没有用逗号隔开）在大多数浏览器下都可运行，但是可能不会通过CSS验证，因为语句没有用逗号隔开。
10. :focus这是另外一个伪类需要在这里被提及的，因为所有的非IE浏览器，都支持这个属性。:focus伪类允许你声明一个特别的样式，当一个页面元素成为键盘(鼠标)焦点的时候，将该样式动态的应用到该元素上。这在表单元素上非常有用，因为你可以在一个输入框被选中的时候给它添加一个边框。
下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框：
1
2
3
input:focus {
border: 1px solid #f00;
}
/*以下内容为前端观察自己添加，与英文原文无关。@05-25-2009*/
11. opacityopacity也是一个非常有用的属性，目前该属性在各个非IE浏览器都得到了良好的支持，包括FF也将在3.5版本中增强对opacity的支持，替换掉-moz-opacity（目前FF的opacity会自动继承到子元素）。但是在IE下，你不得不使用IE私有的滤镜来实现。
12. RGBaRGBa色彩可以很方便的实现透明色彩，包括字体颜色、背景颜色和边框颜色等，都可以使用RGBa来实现色彩的透明效果。该属性在所有(A级)非IE浏览器下都已经被支持了，唯有IE不行。查看RGBa色彩的浏览器支持 。
这就是本文的全部了，翻译完成之后，神飞也受益匪浅，这10个属性中，有我们常用的，更有我们不常用却非常有用的——CSS学无止境。
译自：impressivewebs
原文：10个很有用但是IE浏览器不支持的CSS属性
版权所有，转载请注明出处，多谢！

加上 vertical-align:middle;
＜style type=”text/css”>
＜!–
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
–>
＜/style>

12.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id=”aa” 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题
ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

13. LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器

＜style type=”text/css”>
＜!–
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

–>
＜/style>

14.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html
＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
＜meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
＜style type=”text/css”>
＜!–
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
–>
＜/style>

15.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden 　 zoom:0.08 　 line-height:1px

16.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明
＜param name=”wmode” value=”transparent” />

17.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
＜style type=”text/css”>
＜!–
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
–>
＜/style>

18. Div居中问题

div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

19.链接(a标签)的边框与背景

a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

20.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
Code:
＜style type=”text/css”>
＜!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
＜/style>

序言在本篇文章中，我将向你们介绍一些更隐晦、罕为人知且极少用到的 HTML 语义元素。我将介绍有关标记程序代码、与计算机的交互、引用与缩略语，以及对文档所做的改动等内容。在本文的结尾部分，我还将介绍 HTML 5 草案中对新定义的额外语义元素的一些提议。

附注：在每个代码示例后面，都有一个“查看源文件”的链接，通过点击链接你将看到源代码在浏览器中的实际渲染效果，这些效果包含在一个不同的文件中——这样你就可以一边看着源代码，一边看着它们在浏览器中是如何被渲染的实际例子。

强调显示联系信息

address 元素也许是 HTML 中命名最不当、最被人误解的元素。乍看之下，由于其名称为“地址”，似乎就是用来封装地址、电子邮件地址、邮政地址等内容的元素，但这并不完全对。

address 元素的实际含义是提供其所在网页或该网页主要部分的作者或作者们的联系信息。可采用的形式包括姓名、电子邮件地址、邮政地址，或指向另一个包含更多联系信息的页面的链接。例如：

XML/HTML代码

查看源文件

在下面这个示例中，地址包含在页脚段落中，并链接到网站的另一个网页上。这个链接所指向的网页可包含更为详细的联系信息，如此一来就可以避免在整个网站的每个页面上都重复显示联系信息。

XML/HTML代码

© Copyright 2008

查看源文件

当然，如果网站的作者不止一人，也可采用同样的方式来显示联系信息，只要把不同的作者链接到不同的联系信息页面就可以了。
使用 address 元素来标示其它任何类型的地址都是*不正确*的，以下就是一个不正确的例子：

XML/HTML代码

Our company address:

查看源文件

（当然，如果 Opera 公司要为本文承担集体责任的话，那么即使只有我而不是 Opera 公司的全体员工，是这个特别的网页的作者，以上这种做法就是正确的）。
对于一般的地址，你可以使用一种叫做“微格式”的东西来表示某一段落中包含一个地址。在 dev.opera.com 上的其它文章中有更多关于“微格式”的信息。

编程语言和代码

code 元素用于指明计算机代码或编程语言，如 PHP、JavaScript、CSS、XML 等。对于某个句子中简短的代码示例来说，你可以把代码片段包裹在 code 元素中，就像这样：

XML/HTML代码

It is bad form to use event handlers like

onclick directly in the HTML.

查看源文件

对于占据多行的较大代码示例，你可以使用预格式化的代码块，就如标记 HTML 中的文本内容一文中所描述的那样。

尽管没有定义过的方法来指明 code 元素中包含的是何种编程语言或代码，你也可以使用 class 属性来指明。通常的习惯（见 HTML 5 草案）是使用前缀 language-，后边再跟上编程语言的名称。如此以上那段代码就将变为：

XML/HTML代码

It is bad form to use event handlers like

onclick

directly in the HTML.

查看源文件

某些编程语言的名称难以用 class 来表示，如 C#（C-Sharp）。书写 C# 的正确方式可以是“class='language-c\#'”，但这容易引起混淆或打错。我建议在 class 中仅包含字母和连字符，并将编程语言的全称拼写出来，因此在本例中可用“class='language-csharp'”来代替。

显示计算机交互
samp 和 kbd 这两个元素可用于指明与某个计算机程序进行输入和输出的交互，例如：

XML/HTML代码

One common method of determining if a computer is connected

to the internet is to use the computer program ping

to see if a computer likely to be running is reachable.

kittaghy% ping -o google.com

  PING google.com (64.233.187.99): 56 data bytes

  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

  --- google.com ping statistics ---

  1 packets transmitted, 1 packets received, 0% packet loss

  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms

  

查看源文件

samp 元素指明了某个计算机程序的输出示例。如以上代码所示，不同类型的输出可使用 class 属性来标示，不过现在还没有什么广泛采用的约定来规定哪些 class 属性应该被使用。

kbd 元素指明的是用户在与计算机进行交互时的输入。尽管交互传统上是指键盘输入（kbd 是 keyboard 的缩写），但是其它类型的输入，如语音输入，也应用 kbd 元素指明。

变量
var 元素用于标示文本内容中的变量，包括代数数学表达式或程序代码中的变量。例如：

XML/HTML代码

The value of x in

3x+2=14 is 4.

XML/HTML代码

my $welcome = "Hello world!";

查看源文件

引用
cite 元素用于标示其邻近页面内容的来源——当需要引用某个人、某本书或其它出版物，或笼统地向人们提及另一个来源，该来源应该被包裹在 cite 元素中。例如:

XML/HTML代码

The saying Everything should be made as simple as possible,

but not simpler is often attributed to Albert

Einstein, but it is actually a paraphrasing of a quote which

is much less easy to understand.

查看源文件

缩略语
abbr 和 acronym 元素用于指明哪些词语是缩略语，并提供了一种不需要地打断该文档流而对它们进行展开的方法。
作为缩略语的文字应被包裹在 abbr 元素中，而缩略语的全称则放在 title 属性中，就像这样：

XML/HTML代码

Styling is added to

HTML documents

using CSS.

查看源文件

首字母缩写词是缩略语的一种，与一般缩略语的区别在于它被公认如同一般的单词一样，它的发音也是如此。比如说 scuba 就是一个首字母缩写词，它是由“self-contained underwater breathing apparatus”（自给式水中呼吸器）缩写而成。尽管 HTML 4.01 规范允许既使用 abbr 元素，又使用 acronym，但在实际使用中还是会遇到一些问题……

Internet Explorer 浏览器（ IE7 及其更早的版本并未像其它浏览器一样为缩略语提供点状下划线）不认 abbr 元素，而只认 acronym 元素。不幸的是，acronym（首字母缩写词）只是 abbreviation（缩略语）的一个子集，因此使用 acronym 元素来标记“HTML”这样的缩略语是不正确的做法。

此外，由于任何首字母缩写词都是一个有效的缩略语，在 HTML 5 规范草案中，为了支持标准化，acronym 元素被舍弃了，而用 abbr 元素来同时表示缩略语和首字母缩写词。
因此，最好的做法是避免使用 acronym 元素，而在你的代码中自始至终只使用 abbr 元素。如果你需要为 abbr 元素添加一些视觉上的样式，可以在其中放入一个 span 元素，并代替 abbr 在其上添加样式，这样所有的浏览器都将应用该视觉样式。随后的“样式化文本”一文将详细介绍这方面的内容。

定义实例
关于如何恰当地使用 dfn 元素，存在一些易于混淆之处，dfn 元素在 HTML 规范中被描述为“所附上的术语的定义实例”，这与定义列表中使用的 dt 元素（定义术语）的概念非常相似。

两者之间的差别仅在于 dfn 元素中所使用的术语并非需要是某个术语和说明列表的一部分，而可以用作常规文本流的一部分，甚至可以用在会话体文章中。以下是一个使用 dfn 元素的示例：

XML/HTML代码

HTML: HTML stands for "HyperText Markup Language". This is

the language used to describe the contents of web documents.

在 HTML 这个术语出现后，紧接着就是这个术语的定义，这就很适合使用 dfn 元素。你应当在一个页面中只使用一次 dfn 元素，即在术语第一次被定义时使用，由于术语本来就不需要重复定义，因此这倒也不会太麻烦。

这样使用 dfn 元素好倒是好，但仅举一个孤立的例子并不全面——当某个缩略语在一个网页中多次出现时也建议使用 dfn 元素。例如，在前面的 HTML 基础知识 一文中，HTML 这个术语就出现了 40 多次。如果每次都重复使用 “HTML” 这段代码，将会造成带宽的浪费，在视觉上导致注意力的分散，而且使用屏幕阅读器的用户将不得不重复地听到 HTML 的全称，这会使他们感到厌倦。在这种情况下，本来是可以在第一次为用户定义 HTML 时加入如下代码的：

XML/HTML代码

HTML ("HyperText Markup Language") is

a language to describe the contents of web documents.

查看源文件

之后当 HTML 这个术语再次出现时，就可以简单地将其标记为 “HTML”而后用户代理就可以让用户用某种方式去检索这个缩略语的定义实例。但不幸的是，目前还没有一种用户代理可以做到这一点，包括屏幕阅读器。因此更好的做法是同时也使用 title 属性来提供定义信息，如以下所示：

XML/HTML代码

HTML ("HyperText Markup Language") is a language to describe the contents of web documents.

查看源文件

遗憾的是，这样做又让 HTML 的全称出现了重复，这对使用屏幕阅读器的用户可能成为问题。不过如果省略掉全称的话，对视力正常的用户而言，会使文档的可用性降低，毕竟网站的用户群中视力正常的用户还是占大多数。

我建议某个页面中如果只有一两个术语需要定义的话，那么这种权衡是值得接受的。（如果网页中有大量术语需要定义，最好在页面中创建一个词汇表章节或另建一个页面，在这个页面中就可以使用更为严谨的定义列表标记）。如果你非常重视这个问题，可以使用以下代码：

XML/HTML代码

HTML

(HyperText Markup Language) is a language to

describe the contents of web documents.

查看源文件.

尽管如此，用户代理还是得提供一些方法，来将定义实例与页面内出现的被定义的术语联系在一起。虽然对于 CSS 来说，它仍然是一个可以用来进行样式化的不错的钩子，但目前还没有一种浏览器能有效地支持 dfn 元素。以上我提出的已经是目前最好的解决办法了。

现有的 HTML 规范对 dfn 元素应该如何使用并没有明确的规定，已有的规定可能也不是基于该元素在实际运用中的做法——不然的话应该会有将术语和其完整描述或定义结合在一起的方法。HTML 5 规范中对如何使用 dfn 元素有详细的描述，但该规范尚在草拟之中，目前还不适于将该规范用在网络上。

上标和下标
要将某些文本的一部分标记为上标文本或下标文本（即相对于该文本的其它部分略微升高或下降），你可以使用 sup 和 sub 元素。
为了正确使用缩略语，一些语言需要用到这些元素，此外，在标记一小段数学内容时，也可以使用这两种元素，而不必使用 MathML 元素(该元素是一种专门的，重量级的数学标记语言，用于标记重量级的数学公式)。
以下是这两种元素的代码示例：

XML/HTML代码

The chemical formula for water is H₂O, and it

is also known as hydrogen hydroxide.

The famous formula for mass-energy equivalence as derived

by Albert Einstein is E=mc² — energy

is equal to the mass multiplied by the speed of light

squared.

查看源文件

换行符
由于 HTML 对空格的定义方式，在写入文本时如果仅按回车键，是无法控制文本的换行的（例如将一个邮政地址标记为一个段落，但在实际显示时地址的各个部分都显示在单独的一行上）。
可以使用 br 元素在文档中插入换行符。不过该元素应只在需要时作强制换行之用，绝不应被用于为段落之间设置更多的垂直间距——这里应该使用 CSS 更合适。
有时候使用预格式化的文本块可能比插入 br 元素更为方便。或者，如果某些文本的某个特殊部分需要自成一行，而这又只是样式问题，那可以将它们放在 span 元素中，并设置为按块级元素显示。
举个例子，你们可以将在前面讨论 address 元素的部分中看到过的 Opera 公司的联系地址以如下代码表示：

XML/HTML代码

Our company address:

查看源文件

如果你是在编写 XHTML 文档而不是 HTML 文档，那么 br 元素就必须是自闭合的，像这样：
.

水平线
在 HTML 中可使用 hr 元素来创建水平线。该元素会在文档中插入一根水平线，用以表示文档不同部分的分界线。

尽管有人认为 hr元素是一个不能被继承的非语义元素，而只是一个创造视觉和表象效果的元素，但在文献中使用这个元素是有一些先例的。在书籍的某一章（也可以说成是书籍的一部分）中，发生在不同时间和/或地点的场景间就常常出现水平线。此外，诗歌中也可以使用装饰性的断行将不同的小节分隔开来。

hr 元素是公认的在文档各部分之间制造分界线的标记，而不是一个新的头部元素。

hr 元素没有特别的属性，如果你对其默认样式感到不满意的话，应该使用 CSS 来对其进行样式化。

同样的，就如同换行符一样，如果你是在编写 XHTML 文档而不是 HTML 文档，就必须采用自闭合的形式——

文档的改动（插入与删除）
如果某个文档在首次上线之后有所改动，你可以标注出这些改动，这样那些网站回头客或自动化程序就可以知道文档在何时做了哪些改动。

新文本（插入部分）应当被包裹在 ins 元素中，而已被移除的文本（删除部分）应当被包裹在 del 元素中。如果在文档中同一个地方既有删除又有插入，正确的做法是将被删除的文本放在前面，然后才是新插入的文本。

ins 元素和 del 元素都可以带有两个属性，这些属性可以给文档编辑赋以更多的意义。
如果文档改动的原因在该页面上或网上其它地方已有指明，你就应该在 cite 属性中链接到那个文档或片段。这实际上就等于宣示：“因为这个原因才做出了这个改动。”

你还可以使用 datetime 属性指明改动发生的时间。该属性的值必须是一个符合 ISO 标准的时间戳，格式一般为 “YYYY-MM-DD HH:MM:SS ±HH:MM”（更多信息可查阅维基百科）。

下面是一个用到了这两个属性的代码示例：

XML/HTML代码

We should only solve problems that actually arise. As

cite="/changes.html#revision-4">Donald Knuth

cite="/changes.html#revision-4">C. A. R. Hoare

said: premature optimization is the root of all

evil.

查看源文件

一些将在未来引入的 HTML 元素
我们在本文和其它一些文章中都已提到 HTML 5 规范 目前正在起草中。HTML 5 将是自 HTML 推出以来修正最大的一个新版本。通过实际研究目前网上对 HTML 的使用方式，而不是空想什么对人们可能有帮助，HTML 5 有望将目前只能算是约定的语义元素直接写入规范之中。

一些可以改善我们编写文档代码和使用文档方式的示例元素将被引入 HTML ，其中包括：

header——包含页面的顶部区域（页头），通常由logo和网页标题组成，还可以包含一个简短的“about”（简介）和全站导航，以及登录/退出/公司简介文档链接等。
footer——包含页面的底部区域（页脚），通常由站内链接、版权声明和其它法律信息组成。
nav——包含网页的主要导航链接。
article——包含页面内主内容区域的部分，但不包括其它所有页面元素，如导航、页头、页脚等。
aside——包含页面特定区域上的侧边栏信息，还可用于标记主要内容之中的重要引述或注释。

你们可以通过查阅 HTML 5 规范了解更多新引入的元素。

总结
在本篇文章中，我讲述了 HTML 中罕为人知、鲜为人用的一些语义元素。在下一篇文章中，我们将进一步讨论如何使用 HTML 中两个语义中性的元素，div 和 span 元素。

IE Bug修正
1- Bug修正：IE双倍Margin bug
- 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：

#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px; }改为如下代码 :

#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display:inline;
}

2- 克服盒模型hack
- 如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以，不要这样做：

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}这样做:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

3-IE无视min-height属性
- min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。

/* 对主流浏览器 */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* 对IE浏览器 */
/*\*/
* html .container {
height: 8em;
}
/**/

4- Min-Width for IE
-一个IE的min-width缺陷的修正。

块级元素居中
5-块级元素居中
- 有很多种方法可以使块级元素居中；选择哪种方法取决于你的百分比大小设置或使用更绝对的数值。

整个页面内容居中：

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

6-使用CSS垂直对齐
- 如果你想知道怎么才能正确的实现垂直对齐，只需要简单的为你的文本指定和容器等高的line-height。

#wrapper {
width:530px;
height:25px;
background:url(container.gif) no-repeat left top;
padding:0px 10px;
}
#wrapper p {
line-height:25px;
}

CSS 定位
7- 理解CSS定位Part 1
-一系列很有趣的文章，这些文章不仅包括定位，还包括包括定义布局的属性，比如display和float ，和对CSS3 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 将会带给你对定位的更深的理解.

8- relative和absolute有什么不同?
- 对于刚开始使用CSS的人来说，无论相对行为还是绝对定位都是非常令人沮丧的。这个问题的答案将会让你的迷惑变的清晰些。

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

9-HangTab(固定标签)
- 在浏览器边缘创建一个固定的标签(即使内容居中)。查看Panic’s website for their software Coda.

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

CSS 浮动概念
10- CSS 浮动原理：你应该知道的事情
- SmashingMagazine 浏览几十个相关文章，并选择了在用float开发基于CSS的布局时你应该牢记的最重要的东西。

11- 清除浮动- 正确的方法
- 清除浮动可以说是CSS开发中的一个最令人沮丧的方面，最佳方法之一是在您的网站上使用EasyClearing .

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

更简单的圆角实现
12- 迈克询问CSS圆角建议
- “最简单的方法是使用一个大的gif图片，然后我将给我的盒子编码”

“并给它添加背景”

.roundBox {
background:transparent url(roundBox.gif) no-repeat top left;
width:340px;
padding:20px;
}
.roundBox .boxBottom {
background:white url(roundBox.gif) no-repeat bottom left;
font-size:1px;
line-height:1px;
height:14px;
margin:0 -20px -20px -20px;
}

同样 Askthecssguy 介绍了 Google Analytics中使用的技术, 他是通过在每个角留下1px的边框来实现圆角的效果，这是一种不用静态图片实现圆角的新方法。你可以在这里查看一个示例.

CSS表单问题
13-创建伟大的网页表单的技巧
- Cris Coyer和我们分享了浮动标签，:focus伪类，使用建议等技巧。他同样建立了又好又简单的联系表单, 他首先将它发布在这里.

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}

14-用javascript自动填充文本输入框
- 有时候，我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示，一个通用的解决方案是，把一些占位符文本放在文本框中，并让它当标签来用。本教程介绍了一种很好的解决办法，并启用JavaScript ，label 元素是隐藏的，而且input 元素的title 属性值被复制到value 属性. 如果已禁用JavaScript ，标签显示在被留空的文字输入框的上面。

15- 跨浏览器的用背景图的水平线
- 你或许想使用一个定制的图片来创建一个跨浏览器的水平线作为内容的分隔。

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}

你的代码可以像这样:

本文翻译自：http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

到了XHTML中，就应该在“>”前增加一个“/”来关闭这个标签，为了防止某些老式浏览器不认识这种写法，因此要在“/”前加上一个空格（HTML兼容性标准）：

这似乎是说在开始标记中加上一个“/”就可以关闭掉这个标签。特别是对于空内的标签来说，似乎使用这种写法更简洁了。比如说，

这是在清除浮动（闭合浮动元素）中经常用到的一段代码。那么它似乎可以样写：