|
³³³学
习 园 地³³³
考试大纲：职高计算机等级考试 |
职高英语等级考试 |
英语考试样题
计算机等级考试8四川
：一级|
二级|
三级
全国
：一级 |一级Ｂ|
二级VFP|
二级VB|
三级|
四级
基础篇：微机基础 |
文件管理 |
因特网操作|
电子邮件
|
BBS论坛
|网页基础1
|网页基础2
|
网页基础3
数据库：VFP6_基础|
VFP6_命令|
报表与菜单|
表单设计
|
查询数据
|
编程初步
|
数据网页
|
上机考试
网页篇：网页表单 |
动态网页 |
JAVA脚本1 |JAVA脚本2
|JAVA脚本3
|JAVA脚本4
|JAVA脚本5
|
JAVA脚本6
职称篇：职称计算机等级考试
网络知识部分
操作题解题辅导
网页制作HTML基础入门(3)
一、网页用超文本标识语言HTML构成
网页文件的结构：
<html> <!--文档开始 -->
<head> <!--文档头开始-->
<title> </title> <!--文档标题 -->
</head> <!--文档头结束-->
<body> <!--文档体开始-->
</body> <!--文档体结束-->
</html> <!--文档结束 -->
注释行: <!-- --> 用作备注，不显示出来。
网页文件可以用“记事本”编写，文件扩展名htm。
例一、最简单的网页 〈演示〉
功能：显示两行文字。
<!-- 例一 最简单的网页 test1.htm -->
<html>
<head>
<title>最简单的网页</title>
</head>
<body>
这是一个最简单的网页。<p>
网页用超文本标识语言HTML构成。
</body>
</html>
二、字体大小、颜色，背景颜色
字体大小：
<h1> </h1>
<font size=8>8号字体大小</font>
字体颜色：
<font color=red>红色字体</font>
背景颜色：
<bgcolor=yellow>
字体加粗：
<strong>字体加粗</strong>
字体居中：
<center>字体居中</center>
例二、字体修饰 〈演示〉
功能：在绿底色的网页中，显示红、蓝两行字。
<!-- 例二 字体修饰 test2.htm -->
<html>
<head>
<title>字体修饰</title>
</head>
<body bgcolor=lightgreen>
<center>
<strong>
<font color=red size=8>
字体修饰的网页
<p>
</font>
</strong>
<font color=blue size=6>
蓝色的字，绿色的背景，字体居中
</font>
</center>
</body>
</html>
三、超链接的实现
超连接格式：
<a href= > </a>
链接网址：
<a href=http://www.fskw.gd.cn></a>
链接文件：
<a href=d:\text1.htm></a>
例三、超链接 〈演示〉
功能：网页中显示两个超链接。
<!-- 例三 超链接 test3.htm -->
<html>
<head>
<title>超链接的网页</title>
</head>
<body bgcolor=yellow>
<center>
<strong>
<font color=red size=6>
这是超链接网页
<br>
<br>
</font>
</strong>
<font color=blue size=5>
<a href=http://www.fskw.gd.cn>单击这链接科委网页</a>
<br>
<br>
<a href=text2.htm>单击这链接例二</a>
</font>
</center>
</body>
</html>
四、显示图片
格式：<img src=" ">
显示: 宽度: width=80
例四、显示图片 〈演示〉
功能：显示一幅图片。
<!-- 例四 显示图片 test4.htm -->
<html>
<head>
<title>显示图片</title>
</head>
<body>
显示图片
<img src=fskw3.jpg width=150 align=middle>
</body>
</html>
五、显示表格
格式：
<table>
<tr> <th></th> <th></th> </tr>
<tr> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
</table>
行: <tr> </tr>
表头: <th> </th>
列: <td> </td>
边框: border=1
宽度: width=100%
背景: bgcolor=pink
例五、显示表格 〈演示〉
功能：显示一个三行两列的表格。
<!-- 例五、显示表格 test5.htm -->
<html>
<head>
<title>显示表格</title>
</head>
<body>
显示表格
<table border=1>
<tr><th>第一列</th><th>第二列</th></tr>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
</table>
</body>
</html>
例六、表格与图片 〈演示〉
功能：在一个三行两列的表格中显示12幅图片，表格起定位作用。
<!-- 例六、表格与图片 test6.htm -->
<html>
<head>
<title>表格与图片</title>
</head>
<body>
表格与图片
<table border=10>
<tr>
<td><img src="tp1.gif"></td>
<td><img src="tp2.gif"></td>
<td><img src="tp3.gif"></td>
<td><img src="tp4.gif"></td>
</tr>
<tr>
<td><img src="tp5.gif"></td>
<td><img src="tp6.gif"></td>
<td><img src="tp7.gif"></td>
<td><img src="tp8.gif"></td>
</tr>
<tr>
<td><img src="fskw2.jpg" width=80></td>
<td><img src="fskw3.jpg" width=80></td>
<td><img src="fskw4.jpg" width=80></td>
<td><img src="fskw5.jpg" width=80></td>
</tr>
</table>
</body>
</html>
例七、表格与链接 〈演示〉
功能：在一个九行三列的表格中，显示八个例子所对应的超链接。
<!-- 例七、表格与链接 test7.htm -->
<html>
<head>
<title>表格与链接</title>
</head>
<body>
表格与链接
<table border=10>
<tr bgcolor=red><th>例子</th>
<th>内容</th>
<th>文件名</th></tr>
<tr bgcolor=yellow><td>例一</td>
<td><a href=text1.htm>简单网页</a></td>
<td>text1.htm</td></tr>
<tr bgcolor=lightblue><td>例二</td>
<td><a href=text2.htm>字体修饰</a></td>
<td>text2.htm</td></tr>
<tr bgcolor=gold><td>例三</td>
<td><a href=text3.htm>超链接</a></td>
<td>text3.htm</td></tr>
<tr bgcolor=lightgreen><td>例四</td>
<td><a href=text4.htm>显示图片</a></td>
<td>text4.htm</td></tr>
<tr bgcolor=pink><td>例五</td>
<td><a href=text5.htm>显示表格</a></td>
<td>text5.htm</td></tr>
<tr bgcolor=wheat><td>例六</td>
<td><a href=text6.htm>表格与图片</a></td>
<td>text6.htm</td></tr>
<tr bgcolor=orange><td>例七</td>
<td><a href=text7.htm>表格与链接</a></td>
<td>text7.htm</td></tr>
<tr bgcolor=lightskyblue><td>例八</td>
<td><a href=text8.htm>列表与链接</a></td>
<td>text8.htm</td></tr>
</table>
</body>
</html>
六、页面布局
在body,table,div等中设置：
未链接的颜色: link=blue
指向链接的颜色: alink=red
已访问链接的颜色: vlink=pink
背景图片： background=fskw3.jpg
左对齐： align=left
居中对齐： align=center
右对齐： align=right
段落符： <p>
换行符： <br>
分区符： <div> </div>
水平标尺： <hr>
七、无序列表：
格式：
<ul>
<lh> </lh>
<li>
<li>
</ul>
例八、无序列表 〈演示〉
功能：在一个八行的列表中，显示八个例子的超链接。
<!-- 例八、无序列表 test8.htm -->
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<lh>列表与链接</lh><p>
<li> <p> <a href=text1.htm>简单网页</a>
<li> <p> <a href=text2.htm>字体修饰</a>
<li> <p> <a href=text3.htm>超链接</a>
<li> <p> <a href=text4.htm>显示图片</a>
<li> <p> <a href=text5.htm>显示表格</a>
<li> <p> <a href=text6.htm>表格与图片</a>
<li> <p> <a href=text7.htm>表格与链接</a>
<li> <p> <a href=text8.htm>列表与链接</a>
</ul>
</body>
</html> |
