- Dreamweaver CS4网页制作入门、进阶与提高
- 卓越科技编著
- 1998字
- 2020-08-28 09:01:19
1.2 HTML语言基础
HTML（HyperText Markup Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML的普遍应用就是使用超文本的技术，通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，实现与世界各地主机文件的连接。
1.2.1 HTML标签
HTML文档包含文档内容和HTML标签两部分。HTML标签是用尖括号括起来的英文单词或字符串，用于定义文档的结构格式和超链接信息。
HTML标签在HTML语言中大多数是成对出现的，由一个开始标签和一个结束标签组成。但除以上情况外，还有一些例外，那就是单独存在的标签。因此，HTML标签有单标签和双标签两种。
1. 单标签
单标签的语法结构如下：
<标签>
单标签和双标签的开始标签内可以包含一些属性，其语法结构如下：
<标签 属性1=属性值1 属性2=属性值2>
在制作网页时，常用的单标签有<br>和<hr>，其中<br>表示换行，<hr>表示插入一条水平线。
2. 双标签
双标签的语法结构如下：
<标签>内容</标签>
一般情况下，所有的属性都必须写在开始标签的尖括号中，不同的属性间用空格分隔，各属性之间无先后次序，属性值也可省略。属性值通常要加双引号，但如果属性值由字母、数字组成，双引号可省略。例如：<hr size=10 width="60%" align=right>。
1.2.2 HTML文档
HTML文档一般使用3对HTML标签构成。其格式如下：
<html>
<head>头部信息</head>
<body>正文信息</body>
</html>
各个标签的含义如下：
<html></html>标签（不区分大小写）在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标记语言HTML编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有<html>标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。
<head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其他标签，用以说明文件的标题和整个文件的一些公共属性。如果不需要头部信息则可以省略此标签。<title>和</title>是能嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏中。
<body></body>标签一般不省略，标签之间的文本是正文，是在浏览器窗口中要显示的页面内容。
上面的这几对标签在文档中都是唯一的，<head>标签和<body>标签都是嵌套在<html>标签中的。
下面是一个简单的HTML文档，代码内容如下，效果如图1.18所示。
<html>
<head>
<title> 新年新希望 </title>
</head>
<body>
<b> 央视2010春节联欢晚会 </b><br>
</body>
</html>
图1.18 简单HTML文档的效果图
1.2.3 HTML常用标签
使用HTML语言编写HTML文档，就是用HTML标签来定义HTML文档的文本、图像、超链接、表格和显示格式等内容，因此HTML常用标签包括文本标签、图像标签和表格标签。
1. 文本标签
在HTML语言中，与文本信息相关的标签比较多，常用的是以下3个标签。
标题标签
标题标签<hn></hn>用于设置网页中的标题文字，被设置的文字将以黑体或粗体显示在网页中。标题标签的格式是：<hn align=参数>标题内容</hn>。
<hn>标签是成对出现的，共分为六级，在<h1></h1>之间的文字就是第一级标题，是最大最粗的标题。在<h6></h6>之间的文字是最后一级标题，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数值为left（左）、right（右）或center（中间）。<hn>标签本身具有换行的功能，标题总是从新的一行开始。
下面是一个标题标签的例子，HTML文本如下，效果如图1.19所示。
<html>
<head>
<title>标题示例</title>
</head>
<body>
正常文本
<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
图1.19 标题示例
字体控制标签
字体控制标签<font></font>用于控制文字的字体、大小和颜色，控制方式是利用标签的属性进行设置。字体控制标签的格式是：<font face=值1 size=值2 color=值3>文字</font>。
<font>标签的属性如表1.4所示。
表1.4 <font>标签属性
下面是一个字体控制标签的例子，HTML文本如下，效果如图1.20所示。
<html>
<head>
<title>字体控制</title>
</head>
<body>
<font> 默认字体 </font>
<p>
<font size="+2" color="green" face="华文彩云">春天来了，我们要去踏青。</font>
<p><font size="6" color="blue" face="华文行楷">树梢上有了一抹绿色，小草也破土而
出了，春天的脚步近了。</font>
<p><font size="5" face="隶书" color="red"> 我们决定要去游览八达岭长城了，希望出
游那天是一个好天气。</font>
<p><font size="6" face="楷体_GB2312" color="blue">想要出游的朋友快快联系我们吧！
</font>
</body>
</html>
图1.20 字体控制效果
换行标签
换行标签<br>是一个单标签，也称空标签，不包含任何内容。在HTML文件中的任何位置只要使用了<br>标签，当文件显示在浏览器中时，该标签之后的内容将显示在下一行。
下面是一个换行标签的例子，HTML文本如下，效果如图1.21所示。
图1.21 换行标签效果
<html>
<head>
<title>换行标签</title>
</head>
<body>
<font size="+2" color="green" face="隶书">恭贺新春</font>
<font size="6" color="red" face="华文行楷">恭喜发财</font><br>
<font size="6" face="楷体_GB2312" color="blue"> 高高兴兴上班去</font><br>
<font size="6" face="楷体_GB2312" color="blue">平平安安回家来</font>
</body>
</html>
2. 图像标签
在HTML语言中，使用<img>标签可以将图像文件插入到Web网页中。
下面是一个图像标签的例子，HTML文本如下，效果如图1.22所示。
图1.22 图像标签效果
<html>
<head>
<title>图像标签</title>
</head>
<body>
<div align="center">
<img src="images/岳山.jpg" alt="岳山" align="right" border="1" width=218
height=273>
<h1>望岳</h1>
<h3>杜甫</h3>
<p>岱宗夫如何，齐鲁青未了。</p>
<p>造化钟神秀，阴阳割昏晓。</p>
<p>荡胸生层云，决眦入归鸟。</p>
<p>会当凌绝顶，一览众山小。</p>
</div>
</body>
</html>
<img>标签的相关属性如表1.5所示。
表1.5 图像标签的相关属性
3. 表格标签
表格在网页制作的过程中主要用来排版，以便使页面变得更加美观。在HTML文档中，创建表格需要使用表格标签<table></table>、表格标题标签<caption></caption>、表格行标签<tr></tr>，以及表格单元格标签<th></th>和<td></td>。
下面是一个表格标签的例子，HTML文本如下，效果如图1.23所示。
图1.23 表格标签效果
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="2">
<caption>学生信息表</caption>
<tr>
<th>学号</th><th>姓名</th><th>年龄</th><th>学院</th><th>班级</th><th>入学成绩</th>
</tr>
<tr>
<td>031501</td><td>李云</td><td>18</td><td>化学与材料科学</td><td>生物制药
</td><td>520</td>
</tr>
<tr>
<td>031502</td><td>杨静</td><td>20</td><td>化学与材料科学</td><td>有机化学
</td><td>512</td>
</tr>
<tr>
<td>031503</td><td>周一品</td><td>19</td><td>艺术设计</td><td>音乐
</td><td>502</td>
</tr>
<tr>
<td>031504</td><td>韩啸天</td><td>18</td><td>艺术设计</td><td>舞蹈
</td><td>523</td>
</tr>
<tr>
<td>031505</td><td>张涵</td><td>20</td><td>艺术设计</td><td>美术
</td><td>495</td>
</tr>
</table>
</body>
</html>
提示
在书写HTML语言的时候不区分大小写，可以根据自己的习惯统一为大写或小写，例如，<HR>可以写成<hr>，也可以写成<Hr>或<hR>，但是建议养成一个良好的书写习惯。