博文
HTML页面中标签的语义与使用位置(2009-01-19 16:27:00)
摘要：在刚接触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标签中的内容（并非绝对）。
有些网站为了即让搜索引擎可以抓取更多的内容，又使用户具有浏览体验，在分段的时候使用<br />标签。这也不是说不可以，有些时候根本达不到预期的效果。对于严格类型（Strict）的文档来说，<br />是属于表现形式的标签，是不允许被使用的。
虽然大......
CSS实战经验：浮动元素旁边的元素(2009-01-19 09:49:00)
摘要：当一个块级元素紧跟在一个左浮动元素之后时，它应该——作为一个块级元素——忽略这个浮动元素，而它的内容则应该因这个浮动元素而移位：一个紧跟在左浮动元素后的块级元素内的文字内容，应该沿着浮动元素的右边顺序排列并会（如果它的长度超过浮动元素）继续排列到浮动元素下方。但是如果这个块级元素有layout，比如由于某种原因被设置了宽度，那么这整个元素则会因浮动元素而移位，就好像它自己也是一个浮动元素一样，因此其中的文字就不再环绕这个左浮动元素了（而会形成一个矩形区域，保持在它的右边。）
在 IE5 中一个块级元素的百分比宽度是基于浮动元素旁边的剩余空间计算的，而在 IE6 中则是依照整个父块级元素的可用空间计算的。所以在 IE6 中设置 width: 100% 会导致某种浮动元素旁边的溢出现象，于是各种布局问题也会因此而来。
一些关于浮动块旁边的 hasLayout 块的测试案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实战经验：浮动元素旁边的元素 - www.52CSS.com </title>
<style type="text/css">
<!--
.testgrid {padding:10px;}
.float {width:100px; height:100px; border:2px solid #000;float:left; background:url(bg.gif) repeat 10px 10px}
.testgrid p {back......
Div CSS网页布局中全局字体控制的最佳实践(2009-01-19 09:46:00)
摘要：Div CSS网页布局中对字体的控制是非常重要的，对于需要精确效果的页面而言。这类设置会非常有用。对于一般用户与开发者而论，使用浏览器默认字体即可，52CSS.com鲜有这方面的知识的介绍。此文分享了作者很独特的CSS实践经验。从此文可以看出。对页面字体的控制与设置的思考，将CSS的工作进行的更加深入了。
body {font-family: Arial, sans-serif; }
这是我迄今发现的最好的全局字体解决方案。当然，所谓“最好”，也只是基于我个人的评判标准。所以我还是得分析一下其他的写法有什么缺点，最后再总结这个写法的特点。
Example Source Code [www.52css.com]
body {font-family: "宋体", sans-serif; }
这个写法可能的缺点在于：
1. 宋体在Safari和Vista的IE 7下，看起来很难看。（我稍后把截图补上）
2. 宋体的英文字很难看。
3. 如果在CSS里写中文，你得小心你HTML和CSS的编码是否一致。
Example Source Code [www.52css.com]
body {font-family: SimSun,sans-serif; }
这样写，可以避免上面的第三个问题。但是宋体本身确实很难看。我们希望在不同平台下，都用各自默认的字体。XP是宋体，Vista是微软雅黑，Mac是黑体。这样的话，只能将字体的第一个设置为英文字体，这样遇到中文的时候，浏览器会自动调用默认字体（Vista IE 7的一些版本里貌似默认还是宋体，这个我就无能为力了，交给用户设置的自主权吧）
Example Source Code [www.52css.com]
body {font-family: Tahoma, sans-serif; }
这是一个不错的解决办法。Tahoma其实是一个挺漂......
Semantics语义是Html Xhtml是否真正符合标准的重要部分(2009-01-18 22:02:00)
摘要：Semantics可翻译为语义的(学)，它是Html/Xhtml是否真正符合标准的重要一环。Jorux在这和大家讨论一些自己的观点，如有不妥之处，还请各位网友指正。在西方，为什么这么多人如此重视网页的Semantics，也许你会说，西方比较守规矩，重视标准，但我想说的是，在这些表象的背后有着“一只无形的手”控制着。
在此，举个导航条的例子来说明我的观点。大家应该看见过很多诸如下类的导航结构：
首页 | 关于 | 博客 | 留言 | 相册
它们有着共同的特点，都有分割条“|”将各个条目分开。要实现以上效果的导航栏，其Html/Xhtml有很多种写法，在此仅具几个比较典型的例子：
例1：
Example Source Code [www.52css.com]
<p><a href=”home.html”>首页</a> | <a href=”about.html”>关于</a> | <a href=”blog.html”>博客</a> | <a href=”message.html”>留言</a> | <a href=”album.html”>相册</a></p>
例2：
Example Source Code [www.52css.com]
<ul>
<li><a href=”home.html”>首页</a></li>
<li>|</li>
<li><a href=”about.html”>关于</a></li>
<li>|</li>
<li><a href=”blog.ht......
CSS布局基础：DOCTYPE 声明 常被遗忘的角落(2009-01-18 21:54:00)
摘要：网页开头部分的声明 我们可能很少关注，下面我就结合网上的资料，把自己的理解写下来，不对的地方，还请多多指正。
查看 http://www.114study.com/?ybtg=wuhuaitang的源文件
开头部分是
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
查看http://www.52css.com 的源文件
开头部分是
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
两个网页源代码的开头部分基本一样 52css比 HTML XHTML网页编码这个页面多了一句 lang="UTF-8"
1、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
表示那网页是服从W3C//标准.语言是EN ,&......
4个不常用HTML标签optgroup、sub、sup和bdo(2009-01-18 17:38:00)
摘要：optgroup 用在select 标记中 可以使下拉列表内容更加有条理
sub 上标
sup 下标 可与<em>一起用于注释
dbo dir 标记一起使用，可以改变文字的输出方向，右->左
eg：
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>4个不常用HTML标签optgroup、sub、sup和bdo。 - www.52CSS.com</title>
<style type="text/css">
fieldset{width:300px;padding:5px 5px; margin:30px auto; display:block; line-height:125%; font-size:15px;}
legend{margin-left:15px; font-size:18px; color:red; }
bdo{color:red;}
</style>
</head>
<body>
<fieldset><legend>optgroup</legend>
<select>
<optgroup label="HTML标记">
<option>table</option>
<option>......
说说XHTML中的alt属性和title属性(2009-01-18 17:36:00)
摘要：XHTML是CSS布局的基础，我们一直强调XHTML知识的学习，重视语义和文档的结构。title 和alt 属性，给我最直观的感受就是，可以提高文档的适应性，并合理提高关键词密度。在XHTML标准里，图片的alt 属性是必须的。
alt属性
为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。
比如：使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
在写替换文字前仔细想想，保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕阅读器会直接阅读图像文件的文件名，那些文字浏览器，比如Lynx会显示图像文件的文件名，而那对于你的浏览者就没什么用了。
包含文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。
title属性
title属性为设置该属性的元素提供建议性的信息。
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。
使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip），然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。......
Web Developer插件教程 CSS网页布局辅助设计利器！ 详细图文讲解(2009-01-18 17:30:00)
摘要：建立符合WEB标准的网站，应用XHTML与CSS来构建网站，我们往往处在开发与调试两个重要的环节，对于DIV+CSS的XHTML开发环境，页面的调试更加的重要。我们完全手写代码，需要不断的预览所形成的页面效果。而DIV+CSS这一形式是刚刚兴起的一种新技术，目前还不是非常的普及，我们需要不断的学习，浏览他人的成功作品从中汲取制作经验显得非常重要，也是我们学习的一种捷径。
现在我们介绍一种网页调试的辅助工具：Web Developer！ 它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。
Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：
对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。
Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。
Web Developer作为FF的插件存在，这一点我们在上面已经提及，在安装好FF时，我们必须单独的下载安装Web Developer插件。如果你还没有Web Developer插件，我们在页面最顶部给出了Web Developer插件的下载链接。关于FF安装我们就不多费口舌了，一路确定即可，我们下面详细的说明Web Developer插件的安装步骤。
首先我们运行FF点击菜单栏的：工具>>扩展，如下图：
扩展工具面板列出了FF所有安装过的插件，例如GG工具栏等。如下图：
我们从本页最顶部提供的链接下载Web Developer插件，我们将此文件拖到FF的扩展工具面板上（在文件上按左键不要松动 移动鼠标拖动到面板上释放左键），如下图：
此时会出现一个新的对话框，要求我们确认是否安装Web Developer插件，点击“确认安装”，如下图：
界面回到了扩展工具面板，提示我们在重启FF后即安装Web Developer插件，如下图： ......
CSS 背景(2009-01-18 13:19:00)
摘要：
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：p {background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：p {background-color: gray; padding: 20px;}
可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：a.radio {background-image: url(/i/eg_bg_07.gif);}
理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平......
如何创建 CSS(2009-01-18 13:15:00)
摘要：
如何插入样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距......