<font></font>标记和CSS替代语法
文本的大小 文本的颜色 文本的字体
size(1-7,默认值为3) color face
font-size color font-family
<font size=3 color="red" face="楷体">font标签的属性用法</font><p style="font-size:20px;color:red;font-family:楷体">文本的CSS用法</p><b>标记
font-weight:bold;<i>标记
font-style:italic;<u>标记
text-decoration:underline;实例：
<font color="red" size="3"><b><i>欢迎光临我的网站</i></b></font><style type="text/css">
.txt1{color:red;background:white;font-style:italic;font-weight:bold;}
</style><font class="txt1">使用CSS</font>
<sup></sup> 文字上标字体标签(super)
<sub></sub> 文字下标字体标签(subscipt).txt_super{
vertical-align: super;
}
.txt_sub{
vertical-align: sub;
}<hr/>标记
水平线的高度 对齐方式 宽度 颜色 边框颜色
size align width color
height text-align width background-color border-color
<hr size=50 align="center" width=100 color="red"/>
<hr style="height:50px;align:center;width:100px";background-color="red"/><ul>标记
type属性值
disc 默认值,实心圆。
circle 空心圆。
square 实心方块。
list-style-type：
disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、
upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。
默认值:disc(实心圆)
<ol>标记
type属性值
1 默认值。数字有序列表。(1、2、3、4)
a 按字母顺序排列的有序列表，小写。(a、b、c、d)
A 按字母顺序排列的有序列表，大写。(A、B、C、D)
i 罗马字母，小写。(i, ii, iii, iv)
I 罗马字母，大写。(I, II, III, IV)
list-style-type:
disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、
upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。
默认值:disc(实心圆)
<table>表格
实例：合并图片
利用HTML4提供cellpadding和cellspacing属性，可以达到合并图片的效果，但是HTML5已经确定不再支持这两个属性
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="ch07_03/1.jpg"/></td>
<td><img src="ch07_03/2.jpg"/></td>
</tr>
<tr>
<td><img src="ch07_03/3.jpg"/></td>
<td><img src="ch07_03/4.jpg"/></td>
</tr>
</table>使用CSS样式实现合并图片
<!DOCTYPE HTML>
<html>
<head>
<title>合并图片</title>
<style type="text/css">
table{border-collapse: collapse;} /* 边框会合并为一个单一的边框 */
td{padding:0;}
img{display: block;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="ch07_03/1.jpg"/></td>
<td><img src="ch07_03/2.jpg"/></td>
</tr>
<tr>
<td><img src="ch07_03/3.jpg"/></td>
<td><img src="ch07_03/4.jpg"/></td>
</tr>
</table>
</body>
</html>使用CSS语法进行定位
<!DOCTYPE HTML>
<html>
<head>
<title>合并图片</title>
<style type="text/css">
div{position:absolute;left: 50px;top: 50px;}
img{position:absolute;}
#img2{left:171px;}
#img3{top:200px;}
#img4{left:171px;top:200px;}
</style>
</head>
<body>
<div>
<img src="ch07_03/1.jpg" id="img1"/>
<img src="ch07_03/2.jpg" id="img2"/>
<img src="ch07_03/3.jpg" id="img3"/>
<img src="ch07_03/4.jpg" id="img4"/>
</div>
</body>
</html>