CSS Reset Test


推荐使用的元素

1. 结构元素:blockquote, body, br, div, h1 - h6, head, hr, html, p
2. 头部元素:base, link, meta, script, style, title
3. 列表元素:ul, ol, li, dl, dt, dd
4. 文本格式元素:a, abbr, acronym, address, bdo, cite, code, del, dfn, em, ins, kbd, noscript, pre, q, samp, small, span, strong, sub, sup, var
5. 表单元素:button, fieldset, legend, form, input, label, optgroup, option, select, textarea
6. 多媒体元素:area, img, map, object, param
7. 表格元素:caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
8. 窗体元素:iframe


不推荐使用的元素

1. 结构元素:无
2. 头部元素:无
3. 列表元素:dir, menu
4. 文本格式元素:b, basefont, big, blink, center, comment, font, i, marquee, nobr, plaintext, ruby, s, strike, u, wbr, xmp
5. 表单元素:isindex
6. 多媒体元素:applet, bgsound, embed, noembed
7. 表格元素:无
8. 窗体元素:frame, frameset, noframes


转世重生的元素

1. s - 表示 sprite, 可以用 <s></s> 来做 icon 的占位元素
2. b - 表示 border, 可以用来作为圆角的占位元素
3. i - 预留,尚未想到合理的复活理由



Structural Elements 结构元素:


h1: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h2: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h3: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h4: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h5: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗
h6: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

p: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


div: 原先大家以为这段拉丁文只是没有意义的组合,目的是让阅读者不要被文章内容所影响,而只专注于观察字型或版型,并借此填满空间。但根据美国拉丁学者 Richard McClintock 的研究,Lorem ipsum 原来起源于西赛罗的《善恶之尽》。中译:无人爱苦,亦无人寻之欲之,乃因其苦。为了减少 Lorem ipsum 的可读性,并且让字母出现的频率与现代英语接近,所以有些版本中部分字母被 K, W, Z 等拉丁文中没有的字母替换,或是加入 zzril, takimata 等字。除了原始的 Lorem ipsum 版本外,目前还有几套新的 Lorem ipsum.

blockquote: The quick brown fox jumps over the lazy dog. 那只敏捷的棕毛狐狸跃过那只懒狗。


List Elements 列表元素:



  1. 有序列表项 ordered list item 1
  2. 有序列表项 ordered list item 2
  3. 有序列表项 ordered list item 3

定义项 definition term
定义描述 definition description


Text Formatting Elements 文本格式元素:


a: anchor or link


abbr: HTML 缩写

acronym: WWW 首字母缩写


address: This element is used to mark up contact details for the author or owner of the document, in order that the reader may use these details to contact the document’s owner. Such as:

页面维护:yubo(at)tiantang.com & zhengchun(at)tiantang.com

bdo: A palindrome is a word, like 'kayak,' that appears exactly the same when all the letters are reversed. Canoe, it seems, is not apalindrome.


cite: More information can be found in [ISO-0000].


code: var o = { name : "John", salary : 2000000 };


del / ins: Bernie enjoyed nothing more than a night out on the town at his favorite drag queen show quiet night in with a warm cup of cocoa.


dfn: The concept of progressive enhancement has been about for a few years. You could say that it describes an approach to web development from the point of view that 'the glass is half full' rather than 'the glass is half empty.' Progressive enhancement came to the public's attention when ...


em: Do you really need to buy those expensive jeans? I mean, is it really that important to you to look like some kind of circus freak?


kbd: Hold down CTRL, ALT, and DELETE, then select Task Manager


nobr: Our telephone number is 0800 123 123 123.


pre:

code, kbd, pre, samp, tt {
	font-family: courier new, courier, monospace;
}

q: Heck, even Bill Gates is quoted as saying We need Microformats, which can only be a good thing for the cause.


samp: If the browser spits out an error message such as HTTP 404 - File not found, you may simply have typed the address incorrectly.


small:那只敏捷的棕毛狐狸跃过那只懒狗。The quick brown fox jumps over the lazy dog.


span:那只敏捷的棕毛狐狸跃过那只懒狗。The quick brown fox jumps over the lazy dog.


strong: Look for the sign that says turn left, then turn left!


sub / sup: H2O E = mc2 能量 = 质量 * 光速2 y = x系数指数z原子原子数


tt: The scores rolled in underneath the moustached face of Dickie Davies, hot off the teletype machines that someone was operating deep in the dungeons of ITV: "Heart of Midlothian: 4, Queen of the South: 2, Plymouth Argyle 3 …"


var: To get access to the system you first need to enter your username, e.g. monkeyboy123, followed by your unique 6-digit customer ID beginning with C, e.g. C13345.



Form Elements 表单元素:


button:


fieldset / legend:

Friendship

input:
type=button:
type=checkbox:
type=file:
type=hidden:
type=image:
type=password:
type=radio:
type=reset:
type=submit:


label: see above


optgroup / select / option:


textarea:



Images and Media Elements 多媒体元素:


map / area:

Australia's Big Things (on Wikipedia) The Giant Prawn at Ballina


image:
The Big Banana

object / param:



Table Elements 表格元素:


Interest Rates
Account Type Interest Rate
Recommended for you: 'Young Saver' Interest from: 1.6%
Smart From 2%
Young Saver From 1.6%


Frame and Window Elements 窗体元素:


iframe:



HTML5 Elements:


article
details
figcaption
figure
header
hgroup
menu
section
summary mark

主要参考资料: