CSS Web Design 我爱CSS - XHTML教程

CSS网页布局中 tbody标签与thead和tfoot标签使用

MrJin@52css.com(52css) — Sat,14 Nov 2009 10:12:23 +0800

　　CSS网页布局中，tbody标签与thead和tfoot标签如何使用呢？
　　thead 标签用于HTML表格的表头
　　表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头.
　　tfoot 标签表示HTML表脚
　　表格的表脚tfoot,可以使用单独的样式定义表脚,并且在打印时可以在分页的下部打印表脚.
　　tbody 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
　　tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
　　thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

　　thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
　　请注意，在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

浏览器加载html和显示的问题

MrJin@52css.com(52css) — Sat,07 Nov 2009 16:03:54 +0800

有朋友在W3Cbbs.com提出了，浏览器加载html和显示的问题。它的基本工作原理如下：
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

HTML标签tbody的用法

MrJin@52css.com(52css) — Mon,02 Nov 2009 00:30:17 +0800

　　tbody 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
　　tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

　　表格的分组显示(Structured Table) （IExplore Only）

一、按行分组

...  - 表的题头(Header)
...  - 表的正文(Body)
...  - 表的脚注(Footer)

例：

FoodDrinkSweet

ABC
DEF

二、按列分组

#=left, right, center

例：

FoodDrinkSweet

ABC
DEF

三、列的属性控制

#=从左数起，具有指定属性的列的列数
#=left, right, center

例：

FoodDrinkSweet

ABC
DEF

学好DivCSS网页布局必须掌握HTML标签并熟练运用！

MrJin@52css.com(52css) — Wed,16 Sep 2009 21:55:32 +0800

　　要想学好DivCSS网页布局，当然要精通Html。不然我们如何熟练运用这些html元素那。如何体验网页设计之美那！

　　新手必读之HTML初级教程
　　http://www.52css.com/article.asp?id=321
　　新手必读之HTML中级教程
　　http://www.52css.com/article.asp?id=329
　　新手必读之HTML高级教程（xhtml）
　　http://www.52css.com/article.asp?id=336

　　div+css网页布局如何合理的运用html标签？
　　http://www.52css.com/article.asp?id=264

　　如何制作div+css保持xhtml语义结构的表单？
　　http://www.52css.com/article.asp?id=239

　　HTML4.0与XHTML1.0真正的区别在哪里？
　　http://www.52css.com/article.asp?id=159

　　符合Web Standards的结构清晰的xhtml文档
　　http://www.52css.com/article.asp?id=129

　　你必须了解的一些xhtml结构标签
　　http://www.52css.com/article.asp?id=118

　　如何合理的使用XHTML标签进行CSS布局？
　　http://www.52css.com/article.asp?id=84

　　DIV CSS网页布局：HTML结构化 DIV CSS网页布局入门指南
　　http://www.52css.com/article.asp?id=6

　　符合XHTML标准DIV+CSS布局的网站，对SEO的影响！
　　http://www.52css.com/article.asp?id=74

　　HTML标签和属性的语义化
　　http://www.52css.com/article.asp?id=70
　　

XHTML1.0规范：您是否为img图片标签赋予alt属性

MrJin@52css.com(52css) — Thu,10 Sep 2009 00:16:06 +0800

　　您是否为img图片标签赋予alt属性

　　人们很容易忽视图像img标签的alt属性。然而，它的重要性也无法体现出来，它是有利于网页的accessibility and validation reasons。我们以前没有重视，现在该补上这些alt属性了。
　　1、获取或设置在图像不可用或当前正在下载且尚未完成的情况下浏览器显示的替换标题
　　2、能帮助视觉障碍的用户和使用屏幕阅读器的用户正常浏览网页。

　　当我们的编码遇到问题的时候，我们可以：

　　一、我们需要挑灯夜战
　　我们遇到问题，并不可怕，最重要的是有解决问题的决心。这样我们会印象深刻。高手就是这样炼就的。

　　二、查看源码
　　有什么更好的方法学习HTML的方法吗，而不是复制的英雄？起初，我们都是复制和模仿人家好的网站！然后慢慢地，你开始发展自己的风格/方法。

CSS网页布局应该避免滥用div元素

MrJin@52css.com(52css) — Sun,16 Aug 2009 23:07:39 +0800

　　CSS网页布局应该避免滥用div元素一直是52CSS.com倡导的，以合适的HTML标签组织文档是CSS网页布局的基础。
　　页面中div与span元素的使用是一个新问题，我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。
　　如果你审视你的HTML文档，发现有着很多的div与span，那你就得换一个眼光来看问题了，是不是存在滥用的情况？
　　是不是还有更好的标记来替代它们？若h1可以更好的表示所标记的内容，那你就得放弃p或span来定义。
　　或许这是一对矛盾，我们本身也较难把握该如何正确的使用它们，也或许我们根本就得不到一个明确的答案。
　　但有一点需要阐明，我们应该使文档在逻辑上具有清晰的结构，而且更加容易应用样式。
　　我们可以将div仅看着是一个容器，或者叫做文档的组成“部分”。
　　我们使用太多的容器，并不是一个明智的模式。
　　而恰到好处居于合理位置的容器，可以让整个文档显的很有条理。
　　
　　更多的相关文章可以参考：
　　http://www.52css.com/search.asp?SearchContent=%E8%AF%AD%E4%B9%89&searchType=title
　　

用XHTML标签H1来标记您的文章主题

MrJin@52css.com(52css) — Sun,26 Jul 2009 18:41:07 +0800

　　在国外的好的网站上，都使用H1或h2作为文章标题，这是为什么呢？
　　确定以什么样的标签来定义您所有组织的内容呢，在52css.com中有很多文章与您讨论。如果建立一个博客，一个新闻列表，一段产品描述，我会建议您保存您的H1基因标签为您的文章标题。

在52CSS.com以前的文章中，也有过介绍：
XHTML具有语义的标签：有关H1位置的讨论
http://www.52css.com/article.asp?id=707
对于搜索引擎优化的目的，对于文档的语义，在我看来，这是一个更好的做法！

应把所有CSS样式都放在Head Tag

MrJin@52css.com(52css) — Sun,19 Jul 2009 21:43:42 +0800

　　从技术上讲，你可以将样式您想要的位置。
　　不过， HTML规范的建议，将他们放在文件头标记。
　　主要的好处是，您的网页加载速度似乎更快一些。

Example Source Code [www.52css.com]

    应把所有CSS样式都放在Head Tag - www.52CSS.com

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
- ySlow Team

浅析HTML与javascript中常用编码

MrJin@52css.com(52css) — Fri,13 Mar 2009 21:15:47 +0800

　　在日常的前端开发工作中，我们会经常的与HTML、javascript、css等语言打交道，和一门真正的语言一样，计算机语言也有它的字母表、语法、词法、编码方式等，在这里我简单的谈一下前端HTML与javascript日常工作中常碰到的编码问题。

　　在计算机中，我们储存的信息都是用二进制码表示的。我们认识的、屏幕上显示的英文、汉字等符号和储存用的二进制代码的互相转换，就是编码。

　　有两个基本概念需要说明，charset 和 character encoding：

　　charset ，字符集，也就是某个符号和某个数字映射关系的一个表，也就是它决定了107 是koubei 的 ‘a’，21475 是口碑的“口”，不同的表有不同的映射关系，如 ascii，gb2312，Unicode. 通过这个数字和字符的映射表，我们可以把一个二进制表示的数字转换成某个字符。

　　chracter encoding ，编码方式。例如，同是对于应“口”的 21475 这个数，我们是用 \u5k3e3 表示呢，还是用 %E5%8F%A3 来表示呢?这就是由 character encoding 来决定的。

　　对于 ‘52CSS.com’ 这样的字符串来说，是美国人的常用字符，他们就制定了一个叫做ASCII 的字符集，全称是 american standard code of information interchange 美国标准信息交换码，用0–127这128个数字，(2的7次方，0×00-0×7f) 代表了123abc这样的常用的128个字符。一共是 7 bits，再加上第一个是符号位，要用来去补码反码表示负数什么的，一共8 bits 构成一个 byte。当年美国人就是小气了点，要是一开始就设计成一个 byte 是16 bits、32 bits，世界上会少很多问题，不过当时，估计他们觉得 8 bits 就够了，可以表示128个不同的字符呢!

　　介于计算机这玩意儿是美国人搞出来的，所以他们自己省事，把自家用的符号都编码好了，用的挺爽的。但当计算机开始国际化的时候，问题出来了，拿中国举例吧，汉字就好几万，怎么办?

　　现有的 8 bits 一个 byte 的系统是基础，不能破坏，不能去改到 16 bits之类的，否则改动太大了，只能走另一条路：用多个 ascii 的字符去表示一个其他字符，也就是 MBCS ( Multi-Byte Character System，多字节字符系统)。

　　有了这个 MBCS 的概念，我们可以表示更多个字符了，比如我们用 2 个 ascii 字符，就有 16 bits, 理论上有 2 的 16 次方 65536 个字符。但这些编码怎么分配到字符上呢?比如口碑的”口”的 Unicode 编码就是 21475，谁决定的呢?字符集，也就是刚刚介绍的charset。ascii就是最基础的一个字符集，在此之上，我们有类似于 gb2312， big5这样针对简体中文和繁体中文的MBCS的字符集等等。终于有个叫 Unicode Consortium 的机构，决定做一个囊括所有字符在内的字符集(UCS, Universal Character Set)和对应编码方式的标准，即 Unicode。从1991年开始，它发布了第一版 Unicode 国际标准，ISBN 0-321-18578-1 ，国际标准化组织 ISO 也参与了这个的定制，ISO/IEC 10646 : the Universal Character Set。总之，Unicode 是个基本覆盖了所有已经存在的地球上的符号的字符标准了，现在正在被越来越广泛的使用，ECMA 标准也规定，javascript语言的内部字符使用 Unicode 标准(这意味着，javascript的变量名、函数名等是允许中文的!)。

　　对于身在中国的开发者来说，可能碰到比较多的问题就是 gbk, gb2312, utf-8 之间转换之类的问题了。严格的说这个说法不是很准确，gbk，gb2312是字符集 (charset)，而 utf-8 是一种编码方式 (character encoding) ，是 Unicode 标准中 UCS 字符集的一种编码方式，因为使用 Unicode 字符集的网页主要用UTF-8编码，所以大家常常就把它们并列了，其实是不准确的。

　　有了 Unicode 后，至少人类文明没有碰到外星人之前，这是一把万能钥匙了，都用它吧。而现在使用最广泛 Unicode 的编码方式就是 UTF-8 (8-bit UCS/Unicode Transformation Format) 了，它有几个特别好的地方：

　　编码 UCS 字符集，全世界通用

　　是一种变长编码方式(variable-length character encoding)，兼容 ascii

　　第二点是个很大的优点，它使得以前使用纯 ascii 编码的系统兼容，而且不会增加额外的存储量(假设定长的编码方式，规定每个字符由2个 bytes 组成，那么这时候 ascii 字符占用的存储空间将增大一倍)。
　　

CSS网页布局中必须要了解的几个XHTML标签

MrJin@52css.com(52css) — Thu,29 Jan 2009 22:35:54 +0800

　　我们在我爱CSS——52css.com的文章中一直在强调语义，那么对于HTML标签该如何使用呢？他们一般的使用位置在哪里呢？
　　在刚接触XHTML+CSS设计网页时，对于标签的使用没什么经验，也很随意，经常是想起什么就用什么，认为只要能实现效果就可以。但随着学习的深入和对搜索引擎优化知识的了解，发现其实标签的使用也是一门学问。
　　在这里不对各标签在CSS中对应的属性及用法做详细的介绍，重点介绍在网页中的应用，希望能对大家有些帮助。

一、DIV
　　DIV对于XHTML建站的朋友应该并不陌生，很多的网站和资料也称Web标准网站建设为DIV+CSS网站建设。这样叫也不是没有道理，因为W3C不推荐Table标签应用于网页的布局上，而作为布局标签的DIV自然也就承担起布局的重任。
　　DIV也可以说是一个大的容器。除了网页整体结构布局外，推荐应用于划分在网页中看起来相对独立的区域。就好像一张报纸一样，DIV的作用就是划分不同内容的一个大的容器。而不同区域中在根据具体情况来选择相应合适的标签。

二、H标签
　　H标签是一个标题标签，常用在段落之前，用于表明段落要表达的意思。根据显示和要表达意思的级别可以分为H1~H6。
　　H1的重要性最高，常用于表达对整个网站的作用和性质的描述，或表示网站面向的受众群体。其他标签根据级别的不同分别用于显示某个专区的名称，或某段介绍文字的大概描述。
　　因它表示对网站或某段文字的大体描述，所以相对于搜索引擎来说H标签具有很高的价值。但这并不意味着可以随意的使用。比如，有些网站为了刻意追求特定关键字的排名，而在一段文字中使用H标签来展示关键字。或干脆把H标签当做一个容器来对网页进行布局。这样完全混淆了H标签的作用，也是不推荐的。

三、P
　　P是一个段落标签，用于区分一组文字的不同段落。对于搜索引擎来说，按照其抓取顺序，第一个P标签中的文字也是具有很高的价值。如Baidu，它就是忽略Meta标签description（描述）中的文字，而抓取第一个P标签中的内容（并非绝对）。
　　有些网站为了即让搜索引擎可以抓取更多的内容，又使用户具有浏览体验，在分段的时候使用标签。这也不是说不可以，有些时候根本达不到预期的效果。对于严格类型（Strict）的文档来说，是属于表现形式的标签，是不允许被使用的。
　　虽然大部分的网站使用的都是过渡型的文档类型，但本人不推荐使用在文字分段上。

四、UL和LI标签
　　这是无序列表，UL标签是对列表的声明，LI是列表项。由于其项目的相对独立性，常常在导航、新闻或文章列表等地方使用。UL也可以做为一个容器来区分各不同的列表。
　　有些网站可以追求“Web标准”，将Table转为用UL和LI来表现，这使得网页难以阅读和维护，错误的理解恰恰违背了Web标准向我们传达的理念。

五、Table
　　这里就不过多介绍Table的用法了，只是想说的是，Web标准不是说以后就不能用Table了，而是不推荐使用Table来布局，只在显示数据的时候用。所以符合Web的网页和Table标签的使用并不矛盾。

六、为搜索引擎准备的标签
　　（1）Title：网页的标题，对网站的说明。次标签对于搜索引擎来说也是很有价值的，常把目标关键字包含其中。
　　（2）Meta的keywords：网页中的主要关键字。最初是为了方便搜索引擎对网站的分类而准备，但后期由于很多的网站为了使关键字排名更有利，经常利用此标签作弊，所以现在此标签对于搜索引擎来说，几乎没有任何意义了。
　　（3）Meta的Description：对网页的描述。同Keywords一样，最初也是为了方便搜索引擎分类，同样是由于很多网站利用这个标签作弊，所以对于搜索引擎来说也已经不那么重要了。目前，在主流搜索引擎中只有Google还在抓取其中的内容，不过也已经几乎不按照其中的内容来确定关键字了。
　　其实，对于搜索引擎来说，最注重的还是内容的质量。同样我们做网站为的也是向浏览者宣传我们自己。请不要因一时之快而忘了根本。毕竟用户关心的是资料是否是自己需要的，而不是您网站的排名。

　　以上把常用的，对于初学者来说，比较容易混淆使用位置的标签先向大家介绍这么多，欢迎关注52css.com更新的文章，以后遇到什么新的问题，也会不断扩充近来。也欢迎到W3CBBS.com中讨论。
　　
　　