[Title]Html代码实例(下)[EndTitle]
[Content]
<h4>用colpsan属性，设置包含多列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>用rowspan这个属性，设置包含多行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">联系方式</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html> 一个表格单元格里的内容
<html>
<body>
<table border="1">
<tr>
<td>
<p>这是一段</p>
<p>这是另外一段。</p>
</td>
<td>这个单元格里包含了一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格里包含了一个图片：
<img src = "../images/html_tutorials/mail.gif">
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
表格的单元格内容和单元格边界之间的距离(CellPadding)
<html>
<body>
<h4>没有cellpadding的表格：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<p>设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。</p>
<h4>以下是设置了cellpadding属性的表格：</h4>
<table border="1" cellpadding="10">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>cellpadding属性值设置为30的表格：</h4>
<table border="1" cellpadding="30">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
表格中单元格之间的距离(Cellspacing)
<html>
<body>
<p>Cellspacing属性表示单元格之间的距离。</p>
<h4>如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为0的表格：</h4>
<table border="1" cellspacing="0">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为20的表格：</h4>
<table border="1" cellspacing="20">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
给表格加背景颜色或者背景图片
<html>
<body>
<p>Cellspacing属性表示单元格之间的距离。</p>
<h4>如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为0的表格：</h4>
<table border="1" cellspacing="0">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为20的表格：</h4>
<table border="1" cellspacing="20">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
表格单元格对齐方式(align)
<html>
<body>
<table width="350" border="1">
<tr>
<th align="center">分数</th>
<th align="center">期中考试</th>
<th align="center">期末考试</th>
</tr>
<tr>
<td align="left">芙蓉姐姐</td>
<td align="right">250.10</td>
<td align="right">50000.20</td>
</tr>
<tr>
<td align="left">程菊花</td>
<td align="right">1000.00</td>
<td align="right">5000.45</td>
</tr>
<tr>
<td align="left">周笔畅</td>
<td align="right">2000.40</td>
<td align="right">500.00</td>
</tr>
<tr>
<td align="left">黄新</td>
<td align="right">300.50</td>
<td align="right">800.65</td>
</tr>
</table>
</body>
</html>
表格的单元格背景颜色和背景图片
<html>
<body>
<h4>单元格背景色：</h4>
<table border="1">
<tr>
<td bgcolor="red">第一</td>
<td>行</td>
</tr>
<tr>
<td background="../images/html_tutorials/background.gif">第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
HTML框架(Frame)示例
列分的框架(Frame, cols)
<html>
<frameset cols="25%,50%,25%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</html> 行分的框架(Frame, rows)
<html>
<frameset rows="25%,50%,25%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</html> 既有行分又有列分的框架(Frame, rows, cols)
<html>
<frameset rows="50%,50%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frameset cols="25%,75%">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</frameset>
</html> 用框架(Frame)导航
<html>
<frameset cols="120,*">
<frame src="../asdocs/html_tutorials/framelist.html">
<frame src="../asdocs/html_tutorials/Frame_a.html" name="showframe">
</frameset>
</html>
使用内嵌框架(IFrame)
<html>
<body>
<p>用 IFRAME 可以在HTML文件里显示另一个网页。</p>
<p>这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。</p>
<iframe src="../asdocs/html_tutorials/Frame_a.html"></iframe>
</body>
</html>
如何固定框架(Frame)大小
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_a.html">
<frameset cols="25%,75%">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_b.html">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</frameset>
</html>
HTML列表(List)示例
不排序列表(Unordered List)
<html>
<body>
<h4>不排序列表(Unordered List)：</h4>
<ul>
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
</body>
</html> 排序列表(ordered list)
<html>
<body>
<h4>一个排序列表(Ordered List)：</h4>
<ol>
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ol>
</body>
</html> 不排序列表的类型(Type)设置
<html>
<body>
<h4>Type设为disc的列表，列表项前面的符号是圆黑点：</h4>
<ul type="disc">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为circle的列表，列表项前面的符号是空心圆：</h4>
<ul type="circle">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为square的列表，列表项前面的符号是黑方块：</h4>
<ul type="square">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
</body>
</html>
嵌套的列表(nested list)
<html>
<body>
<h4>Type设为disc的列表，列表项前面的符号是圆黑点：</h4>
<ul type="disc">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为circle的列表，列表项前面的符号是空心圆：</h4>
<ul type="circle">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为square的列表，列表项前面的符号是黑方块：</h4>
<ul type="square">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
</body>
</html>
定义列表(definition list)
<html>
<body>
<h4>Type设为disc的列表，列表项前面的符号是圆黑点：</h4>
<ul type="disc">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为circle的列表，列表项前面的符号是空心圆：</h4>
<ul type="circle">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为square的列表，列表项前面的符号是黑方块：</h4>
<ul type="square">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
</body>
</html>
HTML不同类型(Type)的排序列表
<html>
<body>
<h4>Type设为disc的列表，列表项前面的符号是圆黑点：</h4>
<ul type="disc">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为circle的列表，列表项前面的符号是空心圆：</h4>
<ul type="circle">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
<h4>Type设为square的列表，列表项前面的符号是黑方块：</h4>
<ul type="square">
<li>站长网 站长学院之网页课程</li>
<li>站长网 站长学院之网页代码</li>
<li>站长网 站长学院之魔兽世界</li>
</ul>
</body>
</html>
HTML表单(Form)示例
HTML表单控件-单行文本输入框
<html>
<head><title>输入用户姓名</title></head>
<body>
<form action="
http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
</body>
</html> HTML表单控件-密码输入框
<html>
<head><title>输入用户姓名和密码 </title></head>
<body>
<form action="
http://www.admin5.com/html/asdocs/html_tutorials/userpw.asp" method="post">
请输入你的姓名：
<input type="text" name="yourname"><br>
请输入你的密码：
<input type="password" name="yourpw"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-复选框(checkbox)
<html>
<head><title>选择</title></head>
<body>
请选择你喜欢的水果：<br>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" >苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-复选框(checkbox)缺省已选(checked)
<html>
<head><title>选择</title></head>
<body>
请选择你喜欢的水果：<br>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" >苹果<br>
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-单选框(radio)
<html>
<head><title>选择</title></head>
<body>
请选择你最喜欢的水果：<br>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-单选框(radio)缺省已选(checked)
<html>
<head><title>选择</title></head>
<body>
请选择你最喜欢的水果：<br>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件(Form Control)-下拉框(select)单选
<html>
<body>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
你最喜欢的水果是：
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-下拉框(select)多选(multiple)
<html>
<head><title>选择</title></head>
<body>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
你最喜欢的水果是：<br>
<select name="fruit" multiple>
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-下拉框多选-下拉框设置(size)
<html>
<head><title>选择</title></head>
<body>
<form action = "
http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
你最喜欢的水果是：<br>
<select name="fruit" size = "1" multiple>
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-多行输入框(textarea)
<html>
<head><title>请提宝贵意见</title></head>
<body>
<form action="
http://www.admin5.com/html/asdocs/html_tutorials/suggest.asp" method="get">
请提宝贵意见：<br>
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单控件-图片提交(input type=image)
<html>
<head><title>输入用户姓名</title></head>
<body>
<form action="
http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname"><br>
<input type="image" src ="images/icons/go.gif"
alt = "提交" NAME="imagesubmit">
</form>
</body>
</html>
HTML图片(Image)示例
在HTML里插入图片
<html>
<body>
<p>
站长网 站长学院Logo图片：<img src="../images/html_tutorials/blabla_logo.gif">
</p>
</body>
</html>
HTML里图片的对齐方式(Align)
<html>
<body>
<p>图片的上下对齐方式：</p>
<p><img src="../images/logo/blabla_logo.gif" align="top">对齐方式:top</p>
<p><img src="../images/logo/blabla_logo.gif" align="middle">对齐方式:middle</p>
<p><img src="../images/logo/blabla_logo.gif" align="bottom">对齐方式:bottom</p>
<p>图片的左右对齐方式：</p>
<p><img src="../images/logo/blabla_logo.gif" align="Left">对齐方式:left</p>
<p><img src="../images/logo/blabla_logo.gif" align="center">对齐方式:center</p>
<p><img src="../images/logo/blabla_logo.gif" align="right">对齐方式:right</p>
</body>
</html> HTML的图片大小(Height,Width)
<html>
<body>
<p>你可以使用Height和Width属性来改变图片的大小。</p>
<p><img src="../images/html_tutorials/smile.jpg"></p>
<p><img src="../images/html_tutorials/smile.jpg" width="30" height="30"></p>
<p><img src="../images/html_tutorials/smile.jpg" width="100" height="80"></p>
<p><img src="../images/html_tutorials/smile.jpg" width="300" height="300"></p>
</body>
</html> HTML图片的说明(Alt属性)
<html>
<body>
<p>将鼠标停留在图片上，你可以看到Alt属性里写的内容。</p>
<img src="../images/logo/blabla_logo.gif" alt="站长网 站长学院的Logo标志" ><br>
<img src="../images/html_tutorials/frjj01.jpg" alt="芙蓉姐姐照片：红配绿一台戏" >
</body>
</html>
HTML字体(font)示例
HTML字体大小(font size)
<html>
<head><title>字体大小 font size</title></head>
<body>
<p><font size="1">这段文字的字体大小值为1。</font></p>
<p><font size="2">这段文字的字体大小值为2。</font></p>
<p><font size="3">这段文字的字体大小值为3。</font></p>
<p><font size="4">这段文字的字体大小值为4。</font></p>
<p><font size="5">这段文字的字体大小值为5。</font></p>
<p><font size="6">这段文字的字体大小值为6。</font></p>
<p><font size="7">这段文字的字体大小值为7。</font></p>
</body>
</html>
HTML字体颜色(font color)
<html>
<head><title>字体颜色 font color</title></head>
<body>
<p>这段文字用的是缺省的字体颜色。</p>
<p><font color="#FF0000">这段文字的字体颜色为红色。</font></p>
<p><font color="gray">这段文字的字体颜色为灰色。</font></p>
<p><font color="#33CC00">这段文字的字体颜色为绿色。</font></p>
</body>
</html> HTML字体风格(font face)
<html>
<head><title>字体风格 font face</title></head>
<body>
<p>以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。</p>
<p><font face="arial">arial courier verdana</font></p>
<p><font face = "courier">arial courier verdana</font></p>
<p><font face="verdana">arial courier verdana</font></p>
</body>
</html>
HTML网页背景颜色和背景图片示例
HTML背景颜色
<html>
<body bgcolor="yellow">
<h2>看，这个页面是黄色的。</h2>
</body>
</html>
HTML里加背景图片
<html>
<body background="../images/html_tutorials/background.jpg">
<h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。</p>
</body>
</html>
HTML头部信息(Head)示例
利用Meta的Refresh自动跳转到指定页面
[EndContent]