进一步认识table

2008-05-08 16:18:28

基础的东西在这里,就不重复了~

<caption>

<catpiton>用于定义一个表格的标题,书写时候需紧随<table>标签之后。可通过样式属性:caption-side:left 设置标题在表格中所处的位置。但是目前仅非IE浏览器支持该样式属性,而IE浏览器中可通过标签的align属性完成(IE6,IE7仅支持top,bottom)。同时<caption>标签无法继承其上级table的某些样式属性(如backgroud,border等)。同时FF对caption的出来还表现出一些异常,如当对其上级<table>设置外边距时,<caption>并不会随上级<table>流动~查看演示

<colgroup>,<col>

<colgroup>用于对表格中的列进行分组。如:我们将表格中的第一列设置为红字白底。

查看演示我们可以看到不同浏览器对该标签的支持都不尽相同,safari对该标签的支持相当苛刻,需将该标签紧随<caption>/<table>书写。同时在非IE浏览器中该标签的书写位置不会影响到<thead>中单元格的显示属性,<thead>中的列亦可应用设置。而IE中只有位于<colgroup>之后的表格对象方可应用此标签设置,同时部分浏览器对通过该标签进行的样式设置无效,经测试,目前仅IE支持最好。查看演示

<col>为表格中一个或多个列定义属性值,只能在colgroup中使用此元素。如:将表格中的第一列设置为红字白底,第二,第三列设置为黑底白字。查看演示

<col>的span属性定义其影响的列数~

表格边框

表格的默认边框是很丑陋的,一个最为关键的问题是相邻单元格的重复边框,所以我们不得不动手对其进行美化。

方法一:取消默认的表格,单元格设置,将单元格间距设置为指定宽度,为表格设置背景色进而实现无重复边框。查看演示

方法二:更为简单有效的方法是通过设置border-collapes。查看演示

<a>标签是不能嵌套的

2008-04-17 14:47:47

最初只是想不使用JS来实现这样一个简单的效果

代码是这样的:

<a href=”#” class=”show_box”>
<img src=”test.jpg” />
<p>这是一段测试文本,欢迎访问我的博客</p>
</a>

对于这样一个效果可能我们还不太满足,通常我们还想为扩展信息提供一些链接,所以我们把代码做如下修改:

<a href=”#” class=”show_box”>
<img src=”test.jpg” />
<p>这是一段测试文本,欢迎访问<a href=”http://omiga.org”>我的博客</a></p>
</a>

仅仅是为一段文本添加了一个链接,但是随之而来的问题是十分严重的,为便于更清楚地分析问题,我们将<img>标签去除(演示效果):

<a href=”#” class=”show_box”>
<p>这是一段测试文本,欢迎访问<a href=”http://omiga.org”>我的博客</a></p>
</a>

我们分别在FF,Safari,Opera,IE6,IE7查看页面效果,均出现了虽不一致但却存在某种内在联系的“不良反应”,相同代码在FF和Safari中的表现一致,在Opera,IE7和IE6中的表现各异,具体症状不再描述。在FF中用FireBug查看DOM结构:

<a class=”show_box” href=”#”/>
<p>
<a class=”show_box” href=”#”>这是一段测试文本,欢迎访问</a>
<a href=”http://omiga.org”>我的博客</a>
</p>

FF自动地将我们的原始链接(<a href=”http://omiga.org”>我的博客</a>)前的文本也设置为链接,并为其赋予样式“show_box”。

我们再将代码做如下修改(查看效果):

<a href=”#” class=”show_box”>
<p>欢迎访问<a href=”http://omiga.org”>我的博客</a>,这是一段测试文本</p>
</a>

然后FF仍然对源代码进行了某种修改:

<a class=”show_box” href=”#”/>
<p>
<a class=”show_box” href=”#”>欢迎访问</a>
<a href=”http://omiga.org”>我的博客</a>
,这是一段测试文本
</p>

结果依然是为文本“欢迎访问”设置为链接,并赋予样式。我们似乎看到了某些FF修改代码的规律。

继续对源代码做如下修改(查看效果):

<a href=”#” class=”show_box”>
这是一段测试文本欢迎访问<a href=”http://omiga.org”>我的博客</a>
</a>

再次查看最终生效的代码:

<a class=”show_box” href=”#”> 这是一段测试文本欢迎访问</a>
<a href=”http://omiga.org”>我的博客</a>

同样将原始链接“我的博客”前的文本设置为超链接,但是原始链接“我的博客”却不在包含在最初的结构内,见上述两段代码。原本似乎有规律的代码转换原则似乎又没有了?我们仔细分析以上几段代码不难发现,当<a>标签内部又出现<a>标签时,FF会试图将第一个内嵌<a>标签前的文本写入其父层<a>内,并将其关闭,同时解除其与内嵌标签的层级关系而成为原内嵌<a>的兄弟节点。但当内嵌<a>标签并不是直接地嵌套在<a>中时(其外层还存在<p>标签将其嵌套),FF还是试图将最外层的<a>标签关闭,同时解除层级嵌套关系,并将内嵌<a>标签前的文本转换为链接。但是这里似乎发生了一点意外——<a class=”show_box” href=”#”/>,<a>不是这样关闭滴呃~···

由于各浏览器最终呈现的页面并不尽相同,我们难以分析具体原因,但有一点是肯定的,那就是浏览器都对原代码进行了某种修改(或者说完善?),但是最终效果却不是我们想要的~我想这与<a>标签的特殊性有莫大关系,众所周知,<a>不同于其他标签,当为其赋予href属性,将会创建到另外一个文档的链接;当为其赋予 name或id 属性时,将创建一个文档内部的书签。可能正是基于这些特殊性导致了<a>标签在嵌套结构中的异常,所以最后结论只有一个——<a>标签嵌套不能用!同时应最大可能地减少对HTML/XHTML标签样式的重写!

测试浏览器:FF2,Safari3,Opera9,IE6,IE7

<meta>标签详解

2008-03-26 09:38:06

定义和用法

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

HTML 与 XHTML 之间的差异

在 HTML 中,<meta> 标签没有结束标签。 在 XHTML 中,<meta> 标签必须被正确地关闭。

提示和注释:

注释:<meta> 标签永远位于 head 元素内部。

注释:元数据总是以名称/值的形式被成对传递的。

必需的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性 描述 DTD
content some_text 定义与 http-equiv 或 name 属性相关的元信息 STF

可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性 描述 DTD
http-equiv content-type
expires
refresh
set-cookie
把 content 属性关联到 HTTP头部。 STF
name author description keywords generator revised others 把 content 属性关联到一个名称。 STF
scheme some_text 定义一种用来翻译 content 属性值的格式。 STF

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。 “keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。 类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助:

<meta name="keywords" content="HTML,ASP,PHP,SQL"

如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。 当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。 使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2007

当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

  1. <meta http-equiv=”Content-Type” content=”text/html”;charset=gb_2312″>和<meta http-equiv=”Content-Language” content=”zh-CN”>用以说明主页制作所使用的文字以及语言;
  2. <meta http-equiv=”Refresh” content=”n;url=http://yourlink”>定时让网页在指定的时间n内,跳转到页面http://yourlink;
  3. <meta http-equiv=”Expires” content=”Mon,12 May 2001 00:20:00 GMT”>可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
  4. <meta http-equiv=”set-cookie” content=”Mon,12 May 2001 00:20:00 GMT”>cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。 content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

标准属性 dir, lang, xml:lang

XHTML DTD

2008-02-02 12:58:49

XHTML 定义了三种文件类型声明。

使用最普遍的是 XHTML Transitional。

是强制使用的。

3种文档类型声明

DTD 规定了使用通用标记语言(SGML)的网页的语法。

诸如 HTML 这样的通用标记语言应用使用 DTD 来规定应用于某种特定文档中的标签的规则,这些规则包括一系列的元素和实体的声明。

在通用标记语言(SGML)的文档类型声明或 DTD 中,XHTML 被详细地进行了描述。

XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。

存在三种XHTML文档类型:

  1. STRICT(严格类型)
  2. TRANSITIONAL(过渡类型)
  3. FRAMESET(框架类型)

XHTML 1.0 Strict

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

在此情况下使用:需要干净的标记,避免表现上的混乱。请与层叠样式表配合使用。

XHTML 1.0 Transitional

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

在此情况下使用:当需要利用 HTML 在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

XHTML 1.0 Frameset

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

在此的情况下使用:需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

PS:记不住DTD的这串代码,索性放上来,难得每次都要到处找~···

Page 2 of 212