XHTML 1.0 Tags 参考

[不指定 2008/12/23 10:57 | by 李茵 ]
 

XHTML 1.0 参考

译自:http://www.w3schools.com/xhtml/xhtml_ref_byfunc.asp
译者:拖鞋飞扬(catest)
按功能排列

  • NN: 表明哪个早期Netscape版本支持这个标签
  • IE: 表明哪个早期Internet Explorer版本支持这个标签
  • DTD: 表明符合XHTML 1.0 DTD 何级别的定义。 S=Strict(严格), T=Transitional(过渡), and F=Frameset(框架)
开始标签 用途(Purpose) NN IE DTD
         
基本标签        
<!DOCTYPE> 文档类型(Defines the document type)     STF
<html> html文档(Defines a html document) 3.0 3.0 STF
<body> body元素(Defines the body element) 3.0 3.0 STF
<h1> to <h6> 标题1 -- 标题6(Defines header 1 to header 6) 3.0 3.0 STF
<p> 段落(Defines a paragraph) 3.0 3.0 STF
<br /> 换行(Inserts a single line break) 3.0 3.0 STF
<hr /> 水平线(Defines a horizontal rule) 3.0 3.0 STF
<!--...--> 注释(Defines a comment) 3.0 3.0 STF
Char Format        
<b> 粗体文本(Defines bold text) 3.0 3.0 STF
<font> 文字的外观,大小和颜色(Defines the font face, size, and color of text) 3.0 3.0 TF
<i> 文本为斜体(Defines italic text) 3.0 3.0 STF
<em> 文本为重要(Defines emphasized text) 3.0 3.0 STF
<big> 文本增大(Defines big text) 3.0 3.0 STF
<strong> 文本为非常重要(Defines strong text) 3.0 3.0 STF
<small> 文本缩小(Defines small text) 3.0 3.0 STF
<sup> 文本上标(Defines superscripted text) 3.0 3.0 STF
<sub> 文本下标(Defines subscripted text) 3.0 3.0 STF
<bdo> 文本输出顺序(Defines the direction of text display) 6.2 5.0 STF
<u> 文本下划线(Defines underlined text) 3.0 3.0 TF
输出        
<pre> 预先格式(保留文件中空格的大小)(Defines preformatted text) 3.0 3.0 STF
<code> 码(显示源码用)(Defines computer code text) 3.0 3.0 STF
<tt> 打印机字体(Defines teletype text) 3.0 3.0 STF
<kbd> 键盘(Defines keyboard text) 3.0 3.0 STF
<dfn> 定义(Defines a definition term)   3.0 STF
<var> 变数(Defines a variable) 3.0 3.0 STF
<samp> 样本(Defines sample computer code) 3.0 3.0 STF
<xmp> 不赞成使用,使用<pre>代替(Deprecated. Defines preformatted text. Use <pre> instead) 3.0 3.0  
结构性定义        
<acronym> 只取首字母的缩写词(Defines an acronym) 6.2 4.0 STF
<abbr> 缩写(Defines an abbreviation) 6.2 ? STF
<address> 地址(Defines an address element) 4.0 4.0 STF
<blockquote> 引文区块(Defines an long quotation) 3.0 3.0 STF
<center> 句中对齐(Defines centered text) 3.0 3.0 TF
<q> 引用短语(Defines a short quotation) 6.2 4.0 STF
<cite> 引文(Defines a citation) 3.0 3.0 STF
<ins> 插入(Defines inserted text) 6.2 4.0 STF
<del> 删除(Defines deleted text) 6.2 4.0 STF
<s> 删除线(Defines strikethrough text) 3.0 3.0 TF
<strike> 删除线(Defines strikethrough text) 3.0 3.0 TF
链接        
<a> 链接(Defines an anchor) 3.0 3.0 STF
<link> 资源参考(Defines a resource reference) 4.0 3.0 STF
框架        
<frame> 定义个别视框(Defines a sub window (a frame)) 3.0 3.0 F
<frameset> 视框格式总定义(Defines a set of frames) 3.0 3.0 F
<noframes> 无视框时的内容(Defines a noframe section) 3.0 3.0 TF
<iframe> 定义嵌入视图(Defines an inline sub window (frame)) 6.0 4.0 TF
输入        
<form> 定义表单(Defines a form) 3.0 3.0 STF
<input /> 定义输入域(Defines an input field) 3.0 3.0 STF
<textarea> 输入区换行方式(Defines a text area) 3.0 3.0 STF
<button> 按钮(Defines a push button) 6.2 4.0 STF
<select> 下拉式选单(Defines a selectable list) 3.0 3.0 STF
<optgroup> 选项组(Defines an option group) 6.0 6.0 STF
<option> 列表选项(Defines an item in a list box) 3.0 3.0 STF
<label>

标签(用于表单控制?)(Defines a label for a form control)

6.2 4.0 STF
<fieldset> 域(Defines a fieldset) 6.2 4.0 STF
<legend> 域标题(Defines a title in a fieldset) 6.2 4.0 STF
<isindex> 不建议使用(可搜寻,使用input代替)(Deprecated. Defines a single-line input field. Use <input> instead) 3.0 3.0 TF
列举        
<ul> 无次序式列举(Defines an unordered list) 3.0 3.0 STF
<ol> 有次序式列举(Defines an ordered list) 3.0 3.0 STF
<li> 每条项目列表(Defines a list item) 3.0 3.0 STF
<dir> 目录式列举(Defines a directory list) 3.0 3.0 TF
<dl> 定义式列举(Defines a definition list) 3.0 3.0 STF
<dt> 定义项目(Defines a definition term) 3.0 3.0 STF
<dd> 定义说明(Defines a definition description) 3.0 3.0 STF
<menu> 菜单列表(Defines a menu list) 3.0 3.0 TF
图片        
<img /> 图片(Defines an image) 3.0 3.0 STF
<map> 图片地图(Defines an image map) 3.0 3.0 STF
<area /> 图片热点(Defines an area inside an image map) 3.0 3.0 STF
表格        
<table> 表格(Defines a table) 3.0 3.0 STF
<caption> 表格抬头(Defines a table caption) 3.0 3.0 STF
<th> 表格标题(Defines a table header) 3.0 3.0 STF
<tr> 行(Defines a table row) 3.0 3.0 STF
<td> 单元格(列)(Defines a table cell) 3.0 3.0 STF
<thead> 定义表格头(Defines a table header)   4.0 STF
<tbody> 定义表格主体(Defines a table body)   4.0 STF
<tfoot> 定义表格脚(Defines a table footer)   4.0 STF
<col> 定义特有特征(Defines attributes for table columns)   3.0 STF
<colgroup> 定义特征集合(Defines groups of table columns)   3.0 STF
样式        
<style> 样式定义(Defines a style definition) 4.0 3.0 STF
<div> 在文档中定义一个区域(Defines a section in a document) 3.0 3.0 STF
<span> 在文档中定义一个区域(Defines a section in a document) 4.0 3.0 STF
头信息        
<head> 定语关于文档的信息(Defines information about the document) 3.0 3.0 STF
<title> 定义文档标题(Defines the document title) 3.0 3.0 STF
<meta> 定义背景资讯(Defines meta information) 3.0 3.0 STF
<base /> 基本文档中所有链接的基准(Defines a base URL for all the links in a page) 3.0 3.0 STF
<basefont /> 定义基本字体(Defines a base font) 3.0 3.0 TF
脚本、引用外部对象相关        
<script> 定义脚本(Defines a script) 3.0 3.0 STF
<noscript> 定义无脚本的显示区域(Defines a noscript section) 3.0 3.0 STF
<applet> 定义java程序(Defines an applet) 2.0 3.0 TF
<object> 定义内嵌对象(Defines an embedded object) ? 3.0 STF
<param> 定义对象的参数(Defines a parameter for an object)

一直也搞不清楚px与em之间的关系和特点,看过95%的中国网站需要重写CSS以后后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为

1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

文章引用自:95%的中国网站需要重写CSS

43个你应当避免的Web设计错误
时间: 2007-5-18 16:37:36 浏览:4023 
这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。

1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向,他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。因特网不是书,因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作,我不得不迅速读完所有内容。 项目符号、标题、副标题、列表,这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。当然,某些字体可以让网站精彩纷呈。 不过它们容易阅读吗?如果你的主要目的是传递信息并让读者阅读, 你应该让阅读过程舒服些。

4. 不要用小字体。如上一条所述,你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能,但如果必须放大才能看清一个网站的话, 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单,在新窗口中打开外部链接,用户就不必离开我的网站。 错!让用户决定如何打开链接,否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站,在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小,你会在他们面前失去信用。

7. 不必要时不要让用户注册。直白地讲,我上网是为了获取信息,不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息,除非特别必要(比如你 能提供的消息非常有价值)。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。Flash不仅会增加网站的读取时间, 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐,结果他们失败了。 记住,永远不要使用音乐。

11. 当你必须使用声音时,让用户启动它。有时你必须使用声音文件, 比如你要给用户发送一份演讲,或者你的教程包含声音。这没问题,但要让用户来控制, 让用户点击“播放”按钮,别在打开网页的瞬间播放声音。

12. 不要让标志弄乱你的网站。社交网络和社区的标志会让你的网站看起来十分不专业。 就算是奖章和荣誉等标志也应当放到“关于我们”页面上。

13. 不要使用“点击进入”页面。用户访问到内容的步骤越少越好。

14. 注意要留下联系方式。最差的莫过于网站没有留下联系方式的了。 不仅对访问者不友好,而且对你也没好处,你会错过珍贵的反馈信息。

15. 不要影响“后退”按钮的动作。这是网站可用性的最基本的理念。 在任何情况下都不能影响“后退”按钮的动作。比如,打开新窗口会破坏它, 某些Javascript链接也会破坏它。

16. 不要用闪烁的文字。除非你的访问者来自1996年,否则别用闪烁文字。

17. 避免复杂的URL结构。一个简单的基于关键字的URL结构不仅能提高你的搜索引擎排名, 还能让访问者在访问之前了解网页内容。

18. 用CSS布局,不要使用表格。HTML表格曾经被用于页面布局, 但没有必要拘泥于此,尤其是在CSS诞生之后。CSS更快、更稳定, 并能提供更多的特性。

19. 保证用户可以搜索整个网站。搜索引擎带来因特网革命的原因,就是 它使得信息查找变得十分容易。别在你的网站上唱反调。

20. 避免使用下拉菜单。用户应当直观地看到所有导航选项。 下拉菜单会造成混乱,并且会隐藏访问者真正要找的信息。

21. 使用文字做导航栏。文字导航不仅速度快,而且更稳定。 例如,有些用户上网时会关闭图片。

22. 如果需要链接到PDF文档,一定要注明。你一定有过点击链接之后, 浏览器就像死掉一样等待Acrobat Reader启动,只为了打开一个(你不想看的)PDF? 这是个不小的麻烦,因此一定要在指向PDF的链接旁特别说明,使用户可以采取相应措施。

23. 不要用多种版本让访问者迷惑。你想用哪种带宽?56Kbps?128Kbps?Flash版还是HTML版? 嗨,我只想快点看到内容!

24. 不要在内容中混合广告。在内容中混合广告(如Adsense)也许会增加短期内的广告点击率, 但从长远角度来看,这会减少网站的人气。愤怒的用户会离开的。

25. 使用简单的导航结构。过犹不及。这个规则通常适用于人和选择上。 确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧?

26. 避免内容介绍。别强迫用户在访问到真正内容之前看某些东西。 这很令人愤怒,除非你提供的信息是用户必须的,否则他不会等下去。

27. 不要使用FrontPage。这一点也适用于其他廉价的HTML编辑器。 它们让页面设计变得更方便,但其输出结果将会非常低级,不兼容不同的浏览器, 并且会包含错误。

28. 保证你的网站兼容大部分浏览器。浏览器并不完全相同,在解释CSS和其他 语言的方法也相差甚远。不管你是否愿意,你应当让网站兼容市面上的常用浏览器, 否则你会永远地失去部分读者。

29. 保证在链接上添加有意义的文字。以前我经常犯这个错误。告诉人们“点击这里”很容易, 但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么, 也能为链接指向的外部站点带来SEO效果。

30. 不要在状态栏中隐藏链接。用户还必须能在状态栏中看到链接指向哪里。 如果你隐藏了链接(即使是由于其他原因),那么你也会丧失信誉。

31. 使链接可见。访问者应能轻易识别出哪些能点击,哪些不能。 确保链接的颜色有强烈的对比(标准的蓝色通常是最好的)。可能的话, 最好加上下划线。

32. 不要在普通文本上添加下划线或者颜色。除非特别需要,否则不要为普通文字添加下划线。 就像用户需要识别哪些能点击一样,他们不应当将本不能点击的文字误认为能够点击。

33. 改变访问过的链接的颜色。这一点对于提高网站可用性非常重要。 改变访问过的链接颜色有助于用户在网站中定位,确保他们不会不经意地 访问同一页面两次。

34. 不要使用动态GIF。除非你有需要动画的广告条,否则避免使用动态GIF。 它会使网站看上去很业余,并且会分散访问者的注意力。

35. 给图像添加ALT和TITLE属性。ALT和TITLE不仅会带来SEO效果,而且 对盲人有很大帮助。

36. 不要用令人不快的颜色。如果用户连续阅读10分钟后觉得头疼, 那么你最好选择别的配色方案。根据你的目的决定设计(例如,创造一种氛围 使得用户将注意力放在网站内容上,等等)。

37. 不要弹出窗口。这一点涉及任何种类的弹出窗口。即使用户要求使用, 弹出窗口也不宜使用,因为它会被弹出窗口拦截功能阻拦。

38. 不要使用Javascript做链接。远离那些点击之后执行一小段Javascript的链接, 它们经常给用户带来麻烦。

39. 在页面底部放置有意义的链接。访问者在找不到所需信息时通常会滚动到页面最底端。 作为最后的手段,你应当在页面底部放一个“联系我们”页面的链接。

40. 避免网页过长。如果用户老是需要滚动才能看到内容,他通常会采取的做法是 跳过它们。如果你的网站正好如此,那么应当缩短内容并优化导航结构。

41. 禁止使用水平滚动条。虽然垂直滚动条可以接受,但水平滚动条却远非如此。 现在的流行分辨率是1024×768,要确保网站能容纳在其中。

42. 禁止出现拼写或语法错误。这不是网站设计的错,但却是影响网站整体质量的重要因素。 确保链接和文字中没有拼写或语法错误。

43. 如果你使用图片认证,要保证能看清其字符。有些网站将图片认证作为对抗垃圾评论的方法, 或是在注册表单上使用。其中有个问题就是,用户经常需要叫上全家人来讨论图片上到底是什么字母。

a href=# onclick的一个小技巧

[不指定 2008/12/22 17:20 | by 李茵 ]

使用javascript的时候,通常我们会通过类似:

<a href="#" onclick="javascript:方法">提交</a>

的方式,通过一个伪链接来调用javascript方法.这种方法有一个问题是:虽然点击该链接的时候不会跳转页面.但是滚动条会往上滚,解决的办法是返回一个false.

如下所示:

<a href="#" onclick="javascript:方法;return false;">提交</a>

a href=#与 a href=javascript:void(0) 的区别打开新窗口链接的几种办法

#包含了一个位置信息

默认的锚点是#top 也就是网页的上端而javascript:void(0)  仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首

而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)或者<input onclick><div onclick>等

打开新窗口链接的几种办法

1.window.open('url')

2.用自定义函数

        <script>

        function openWin(tag,obj)

        {

            obj.target="_blank";

            obj.href = "Web/Substation/Substation.aspx?stationno="+tag;

            obj.click();

        }

        </script>

<a  href="javascript:void(0)" onclick="openWin(3,this)">杭州</a>

(注:该方法可以解决超级链接的onclick事件经过判断再设置href达到分类重定向的效果)

掌握ul ol dl使DIV布局更轻松

[不指定 2008/12/22 17:19 | by 李茵 ]
在css中列表元素应用得法,不仅使网页布局事半攻倍,而且也可以减少服务器负担。下面是其基本用法:
 
ol 有序列表:
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:
1……
2……
3……

ul 无序列表,表现为li前面是大圆点而不是123:
<ul>
<li>……</li>
<li>……</li>
</ul>
ol ul的用法相对常见些,dl dt dd则容易被忽略。

dl 内容块
dt 内容块的标题
dd 内容
可以这么写:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

dt 和dd中可以结合ol ul li和p应用,使用这些方法使div布局变得更加方便。
分页: 2/9 第一页 上页 [1] [2] [3] [4] [5] [6] [7] [8] [9] 下页 最后页 [ 显示模式: 摘要 | 列表 ]