一、HTML语言简单介绍
1、一段简单的HTML代码
其实HTML文件并不像我们想像的那样难以读懂，只是比较繁琐罢了。只要认真观察，很容易发现各语句之间的规律。下面我们来观察如下图所示的简单网页的HTML代码：
从HTML视图中得到下列代码：
| <html> <head> <title>我的习作区</title> </head> <body bgcolor="#C0C0C0"> <p align="center" style="margin-top: 0; margin-bottom: 0"> <b><font size="7" face="隶书" color="#0000FF">我的习作区</font></b></p> <hr size="4" color="#FFFF00" width="80%"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="25%"> <p align="center"><a href="bzdh.htm">版主的话</a></td> <td width="25%"> <p align="center">养生保健</td> <td width="25%"> <p align="center">旅游休闲</td> <td width="25%"> <p align="center">与我联系</td> </tr> </table> </body> </html> |
我们仔细对照网页和HTML代码，可以发现下列几点：
1）HTML语言除了网页中显示的字符外，都是由封装在一对尖括号“<…>”之中的标记组成。
2）多数标记都是成对出现的：
HTML代码的最前和最后是一对<html>和</html>；
其它为<head></head>、<title></title>、<body>和</body>、<table>和</table>、<tr>和</tr>、<td>和</td>、<p>和</p>、<b></b>、<font></font>
3）再仔细观察会发现：“我的习作区”这句话相应的HTML语句为：
<b><font size="7" face="隶书" color="#0000FF">我的习作区</font></b>
其中，句首和句尾的<b>与</b>表示粗体，<font size="7" face="隶书" color="#0000FF">表示兰色隶书7号字，而与之相呼应的</font>表示字体和字号设置结束。
【注意】在这里7号字与Word的七号字不是同一概念；而颜色则是用6位十六进制数表示：“000000”表示黑色、“FFFFFF”表示白色。
十六进制数中的“A”代表数字10、“B”代表数字11、……、“F”代表数字15。
4）进一步还会发现：</table>和</table>表示一个表格；<hr size="4" color="#FFFF00" width="80%">表示一条“水平线”；
2、HTML文档的基本结构
HTML网页通常是由三部分内容组成的：版本信息、网页头部(HEAD)和文档主体(BODY)。其中，文档主体是HTML网页的主要部分，它包括文档所有的实际内容。网页头部则包含网页的标题、说明等信息。而多数网页都省略了版本信息。这样HTML网页代码的总体结构就如下面：
<html>
<head>
……
</head>
<body>
……
</body>
</html>
3、常见HTML标记
标记都封装在一对尖括号“<…>”之中。标记只改变网页的显示方式，本身不会显示在窗口中。
标记分为双标记和单标记两类。大多数HTML标记都是双标记，它由始标记和尾标记两部分构成，必须成对使用。前面所举的都是双标记，在始标记和尾标记之间放入要修饰或说明的内容。始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠(/)即成为尾标记。
单标记只需单独使用就能完整地表达意思，最常用的单标记是<BR>，它表示在一个段落未结束时，让显示强制换行。前例中的<hr>（水平线）也是单标记。
有一些显示内容要指定显示属性（如文字的字体、字号等），这些属性可在双标记的始标记或单标记内指定。如前例中的<font size="7" face="隶书" color="#0000FF">我的习作区</font>。
下表中列出一些常见的HTML网页，更详细的大家可找专门介绍HTML的书看。
| 标记名称 | 标记作用 | 举例 | 说明 |
| <html>、</html> | 网页文档 | ||
| <head>、</head> | 网页头部 | ||
| <title>、</title> | 网页标题 | <title>老顽童网站</title> | |
| <body>、</body> | 网页主体 | <body bgcolor="#C0C0C0">……</body> | 设网页的背景色 |
| <p>、</p> | 段落标记 | <p align="center">养生保健</p> (居中) | 尾标记可缺 |
| <b>、</b> | 加粗 | <b>我的习作区</b> | |
| <font>、</font> | 字体格式 | <font size="7" face="隶书">我的习作区</font> | |
| <a>、</a> | 超链接 | <a href="hompage15.htm">回上讲</a> | |
| </script>、</script> | 程序调用 | <script language=JavaScript>……</script> | |
<div>、</div> | 分区标记 | ||
| <table>、</table> | 定义表格 | <table border="1" cellspacing="1" width="100%"> <tr><td width="50%"> </td> <td width="50%"> </td> </tr> <tr><td width="50%"> </td> <td width="50%"> </td> </tr> </table> | 定义一个2×2，宽度为100%，线宽为1的表格 |
| <tr>、</tr> | 定义行 | ||
| <td>、</td> | 定义单元格 | ||
| <br> | 强迫换行 | ||
| <img> | 插入图片 | <img src="images/Logo.jpg"> | |
| <hr> | 水平线 | <hr size="4" color="#FFFF00" width="80%"> | |
| <table>、</table> | 定义表格 | <table border="1" cellspacing="1" width="100%"> <tr><td width="50%"> </td> <td width="50%"> </td> </tr> <tr><td width="50%"> </td> <td width="50%"> </td> </tr> </table> | 定义一个2×2，宽度为100%，线宽为1的表格 |
| <tr>、</tr> | 定义行 | ||
| <td>、</td> | 定义单元格 | ||
| <br> | 强迫换行 | ||
| <img> | 插入图片 | <img src="images/Logo.jpg"> | |
| <hr> | 水平线 | <hr size="4" color="#FFFF00" width="80%"> | |
| <td>、</td> | 定义单元格 | ||
| <br> | 强迫换行 | ||
| <img> | 插入图片 | <img src="images/Logo.jpg"> | |
| <hr> | 水平线 | <hr size="4" color="#FFFF00" width="80%"> | |
| <hr> | 水平线 | <hr size="4" color="#FFFF00" width="80%"> |
程序调用
<script language=JavaScript>……</script><div>、</div>
分区标记
<table>、</table>定义表格
<table border="1" cellspacing="1" width="100%"><tr><td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr><td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table> 定义一个2×2，宽度为100%，线宽为1的表格<tr>、</tr>
定义行
定义单元格
<br>强迫换行
<img>插入图片
<img src="images/Logo.jpg">
水平线
<hr size="4" color="#FFFF00" width="80%">定义表格
<table border="1" cellspacing="1" width="100%"><tr><td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr><td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table> 定义一个2×2，宽度为100%，线宽为1的表格<tr>、</tr>
定义行
定义单元格
<br>强迫换行
<img>插入图片
<img src="images/Logo.jpg">
水平线
<hr size="4" color="#FFFF00" width="80%">定义单元格
<br>强迫换行
<img>插入图片
<img src="images/Logo.jpg">
水平线
<hr size="4" color="#FFFF00" width="80%">水平线
<hr size="4" color="#FFFF00" width="80%"> 4、特殊字符的表示
在HTML网页中绝大多数字符的表示方式都是和正常文本一样的但有个别例外，那就是（段落标记）、空格、“<”、“>”、“&”。
回车符（段落标记）：<p>
空格： 
英文引号“"”："
小于符号“<”：<
大于符号“>”：>
“&”：&
5、FrontPage中HTML文本的定位
HTML文本看起来很麻烦。也很难确定它在网页中的位置，比如，我们想在表格的一个单元格中插入一段代码。只凭阅读HTML语言来确定这个单元格在HTML文本中的位置是很困难的。但在FrontPage中，这个定位则很简单：我们只要在“普通”视图中将光标（不是鼠标）定在这个单元格中，然后转到HTML视图，光标也就在描述这个单元格的语句中。我们只要稍懂HTML知识，就不难确定插入点的位置。
【例】在下面网页左上角单元格中插入一段能显示当前日期和星期的代码。
1）选取下列代码：
<script language=JavaScript>
today=new Date();
function initArray(){
this.length=initArray.arguments.length;
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
tyear =today.getYear()<100?1900+today.getYear():today.getYear();
tmonth=today.getMonth()+1;
tday=today.getDate();
tweek=tyear+"年"+tmonth+"月"+tday+"日 "+d[today.getDay()+1];
document.write(tweek);
</script>
执行“复制”命令（若此代码在Word、FrontPage“普通”视图等带字符格式的编辑工具中，最好将它先复制到记事本中，让它变成纯文本）。
2）在“普通”视图中将光标（不是鼠标）定在这个单元格中，然后转到HTML视图，光标就在插入位置：
3）单击常用工具栏中的“粘贴”按钮，这段代码就插在其中：
4）单击“预览”按钮，转入“预览”状态，在网页的右上角就显示了当前日期和星期：
【注意】在插入代码时一定要注意HTML代码的完整和双标记的对称性。否则代码会显示在“普通”视图中，而在正常情况下在“普通”视图上是看不出代码的，只有在浏览时才有效果。
二、网页优化
制作一个网页，就像写一篇文章，写好后需要修改优化。网页优化包括内容很多，这里只介绍清理网页文件中的垃圾，缩小网页文件尺寸。网页文件缩小不但可使有限的免费空间中能放得下更多的内容，而且可以提高网页访问下载速度。
1、网页优化效果实例
下面我们来看一个从Word文档复制过来的网页文件：
从外表看不出什么问题，但我们转到HTML视图就会发现问题：
在HTML文本中基本上看不到要显示的文字，主要是一大堆格式说明。小小一篇文章有12KB：
我们把它优化后，再来看HTML文本：
要显示的文字已占主要位置，只有少量的HTML标记说明文字格式，文件大小也减到了4KB，只有原来的三分之一：
2、如何使网页精练
1）不要直接将Word文档直接复制到FrontPage中，虽然那样做可以使你省却格式编排时间，但却会使网页文件产生大量垃圾。应该将文字复制到记事本中变为纯文本后再复制到FrontPage中再编排。
2）若有很长的相同格式的文字，应一次性为它们设置格式。最好用“强迫分行”（Shift+回车）代替回车来作形式上的分段。因为在HTML语言中每一段都要对文字格式作设置，若用“强迫分行”（<br>）代替分段（<p>)可省略很多设置格式。
3）尽量用中文的“全角”空格代替英文空格。前面已介绍过，在HTML语言中用“ ”来表示英文空格，占5个字节，而“全角”空格只占2个字节。而且“全角”空格可以空出2个准确的空位，而英文空格只能空出1个空位，还不准确。
4）不要用太多的表格，能把文字和图片布局规划清楚就可以了，太多多余的表格单元格会增加很多HTML语句。
3、对已有网页（或Word文档）的优化方法：
1）单击“编辑”菜单，在下拉菜单中选择“全选”命令，选中网页的全部内容。
2）单击常用工具栏上的“复制”按钮，将选中的网页内容复制到剪贴板上。
3）打开记事本，单击“编辑”菜单（或右击窗口空白处），在下拉（快捷）菜单中选择“粘贴”命令，网页中的文字就以纯文本形式显示在记事本上。
4）鼠标右击，在下拉菜单中选择“全选”命令，选中全部文本。再右击鼠标，选择“复制”命令，将全部文本复制到剪贴板上。
5）在FrontPage的空白网页中单击常用工具栏上的“粘贴”按钮，将全部文字粘贴到空网页上。
6）根据需要设置好文字格式。程序保存网页文件。
4、对已有网页（或Word文档）中表格的处理方法
Word文档中的表格数据转换为纯文本时，一行内的二个单元格的文字内容之间用空格隔开。复制到FrontPage后可用“表格”菜单中的“转换”命令转换成表格：
1）将所有原表格中的文字全部选中（注意：不能选不属于表格的内容），然后单击 “表格”、“转换”、“文本到表格”。
2）在“将文本转换为表格”对话框上选定使用“其他”分隔符：“ ”（空格），然后单击“确定”。文本即转换成FrontPage表格。
若原来是FrontPage中的表格，表格数据转换为纯文本时，每个单元格中的文字均以段落标记为分隔符，而以段落标记为分隔符的“文本”，只能转换成只有一列的表格。若要将转换成多列的表格，则要对文本文本进行适当处理，使一行内的单元格的文字内容以空格为分隔符，再转换成表格。
【例】将下图所示Word文档“网页制作班教学进度表”内容以优化方式复制到FrontPage网页中。
1）在Word窗口通过“全选”、“复制”，在记事本窗口“粘贴”。再在记事本窗口重新“全选”、“复制”，打开一个FrontPage的空白网页“粘贴”，将全部文本粘贴到空网页上。
2）设置好标题文字格式后，将所有原表格中的文字全部选中（注意：不能选不属于表格的内容），然后单击 “表格”、“转换”、“文本到表格”：
3）在“将文本转换为表格”对话框上选定使用“其他”分隔符：在空框中输入一个“空格”符（注意图中的光标位置已后移一格）：
4）然后单击“确定”。文本即转换成FrontPage表格：
5、直接修改HTML代码文本
假如您对HTML语言了解比较多了，你可以直接在HTML视图对它进行修改。例如删除多余的格式说明；复制别人网页中好的特殊效果代码。一开始小心一些，每修改一点就回“普通视图”看看效果，发现改得不对马上用常用工具栏的“撤消”按钮改回来。
我们的讲座就要结束了，大家只要坚持下去，一定会把网站做得越来越好。有兴趣的朋友还可以试用“网络三剑客”中的Dreamweaver来制作修改网页，虽然它的“所见即所得”效果不如FrontPage，但功能要比FrontPage强得多，在处理HTML代码方面比FrontPage方便得多，做出的网页更精练。有了使用FrontPage的基础，Dreamweaver也不难试用。
【练一练】
1、制作一个简单的网页，在HTML视图中仔细观察HTML代码和网页内容的关系。
2、将前面显示当前日期和星期的程序代码插入到你的网页的合适位置。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
