|
爱上你的第一天：
假如现在要制作一个儿童网站，需要为文章加注拼音。那么我们可以利用Ruby标签来做这件事。
<p>1.Ruby:</p>
<Ruby>
清风是世界上最纯洁的人
<RT>Qing Feng Shi Shi Jie Shang Zui Chun Jie De Ren
</Ruby>
|
<RT>后面的就是拼音内容，无需封闭标签
缺点：可惜Mozilla不支持此标签
爱上你的第二天：
一篇文章的目录，我们要按照序号进行编排，手动编排序号既容易出错也不易修改，如何解决呢？今天就要用到<OL>标签：）
<OL>
<LI>这是列表的第一个项目
<LI>这是列表的第二个项目
</OL>
<OL START=3>
<LI>这是以编号3起始的项目
</OL>
<OL TYPE=A>
<LI>这是项目A
<LI>这是项目B
</OL>
|
此标签同时支持IE和Mozilla，OK。
在我爱上你的第三天：
昨天的例子是用来自动生成序号的，那么也许你会说：“好难看，能不能用图片当前面的标志，还不用我一个一个的加？”答案是肯定的。
只需要配合CSS，那么非常的简单
<style>
ul.blogroll{
list-style:url(dot.jpg) disc;
}
</style>
<ul class="blogroll">
<li><a href="1.htm">平面设计</a></li>
<li><a href="2.htm">网页设计</a></li>
<li><a href="3.htm">动画设计</a></li>
</ul>
|
此代码同时支持Mozilla和IE，希望效果你还满意。
效果见下：
素材图为：
第四天
现在有两个人提出需求：
“我是一技术类网站，希望用户在此交流一些代码，希望这些代码可以直接显示在网页上”
“我是一个论坛，我希望可以屏蔽掉用户发贴中的恶意代码。使他不执行。”
当然一种方法是，我们将用户输入的内容进行替换，将<>括号替换成html的写法（例如：& l t ;）。但是，
我们今天用<XMP></XMP>标签来做这件事情。
<xmp>
<OL>
<LI>这是列表的第一个项目。
<LI>这是列表的第二个项目。
</OL>
<OL START=3>
<LI>这是以编号 3 起始的项目。
</OL>
<OL TYPE=A>
<LI>这是项目 A。
<LI>这是项目 B。
</OL>
</xmp>
|
在<XMP>内的标签会直接渲染出来。
第五天：
XML,MSN,XHTML,CSS,W3C,BMW,IBM,ICQ,HTML.........
这些都是什么？都是缩写。如何向不懂的用户解释这个缩写的含义呢？当然可以在后面跟上说明，例如：W3C(World Wide Web Consortium)，但那么做就不是旁门左道了：）
OK，今天我们来用<acronym>标签，这个标签的作用就是用来标识这种缩写。
例如：
<acronym title="Cascading Style Sheets">CSS</acronym>
|
title就是这个缩写的说明。效果如下：
是的，只要鼠标放到文字上就会出现对应的说明，而且文字标有虚线下划线提示用户这是一个头文字缩写。
但是但是但是，这种下划线在IE中是不会出现的，那么要让IE出现虚线下划线我们就要借助CSS了。
<style>
acronym{
border-bottom:1px dotted black;
}
</style>
|
爱上你的第六天：
表格线的制作技法，我们现在要制作一个数据表格，希望每一个单元格均用黑线包围，那么如何制作呢？如下图所示：
首先我们使用经典的“21法则”：也就是cellpadding为2，cellspacing为1，表格背景有颜色，td再设背景色，利用表格间的缝隙来加上交叉线
<table width="500" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
|
由于不想文章太长，请手动多加一些<tr>使效果更明显，当然最后我会给出一个Example下载。
这是N年一直在使用的方法，简单易用，但是，现在都在强调样式分离，OK，为了追赶潮流，让我们用CSS来做这件事。
CSS方法1：模仿“21法则”
表格仍然是那个表格，为了方便我们给表格起名为
<table id="table1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
|
OK，这是一个干净的表格，我们用CSS来定义他
#table1{
background-color:#000000;//表格整体背景黑色，也就是缝隙间的颜色
width:500px;
padding:0px;
border-spacing:1px;//表格缝隙1个px
}
#table1 td{
background-color:#FFFFFF;
}
|
但是，你会发现在IE下显示表格线会显得很粗。。。由于IE对CSS2标准支持不够，所以显示不是像预想的一样（广告时间：在这里推荐一下Mozilla浏览器：））
那么如何使用CSS，才能在所有浏览器均显示正常呢？并且不利用这种缝隙法的歪门邪道，而就是利用border来做呢：），OK答案就在下面。
重新建立一个表格id="table2"
#table2{
border:1px solid #000000;//为表格外面画线
width:500px;
padding:0px;
border-collapse:collapse;//由于td四周画线，所以某些线会绘制两次，会变粗，使用这个属性可以自动合并同类项
border-spacing:0px;//表格间无需空隙
}
#table2 td{
border:1px solid #000000;//为td四周画线
}
|
OK，以上CSS和“21法则”的效果是完全相同的，IE和Mozill均显示正常，而且是样式与表格进行了脱藕：） | 