3.2 HTML的基本标记_Dreamweaver CC网页设计自学经典-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

3.2 HTML的基本标记

在上一节中介绍了HTML文件的基本结构及所涉及的标记，下面将介绍一些基本的HTML标记。网页中常见的标记有文本标记、图像标记、表格标记和超链接标记等。

3.2.1 文本标记

在HTML中，使用<hn>标记来标识文档中的标题和副标题，n代表从1～6的数字，数字越大所标记的标题字越小。

用<hn>标记设置标题的示例代码如下。

  <html>
<head>
<title>网页设计</title>
</head>
<body>
<h1>标题文字h1</h1>
<h2>标题文字h2</h2>
<h3>标题文字h3</h3>
<h4>标题文字h4</h4>
<h5>标题文字h5</h5>
<h6>标题文字h6</h6>
</body>
</html>

在浏览器中的显示效果如图3-3所示。

图3-3 标题文字标记运行效果

3.2.2 段落标记

段落文本使用<p>标记定义，文本内容写在开始标记<p>和结束标记</p>之间。属性align可以用来设置段落文本的对齐方式，其属性值有3个，分别是left（左对齐）、center（居中对齐）、right（右对齐）。当没有设置align属性时，默认为左对齐。

用<p>标记设置段落文本的示例代码如下。

  <html>
<head>
<title>段落文字的对齐方式</title>
</head>
<body>
<p >段落文本</p>
<p align="left">段落文本</p>
<p align="center">段落文本</p>
<p align="right">段落文本</p>
</body>
</html>

在浏览器中的显示效果如图3-4所示。

图3-4 段落文本标记运行效果

可以用来进行段落处理的还有强制换行标记<br/>。<br/>放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行。它和<p>标记的区别是，用<br/>分开的两行之间不会有空行，而<p>却会有空行。

例如输入以下代码：

  <html>
<head>
<title>强制换行标记</title>
</head>
<body>
<p>段落文本</p>
<p>段落文本</p>
强制换行标记<br />强制换行标记
</body>
</html>

在浏览器中的显示效果如图3-5所示。

图3-5 强制换行标记运行效果

3.2.3 文本格式标记

文本显示的格式使用<font>标记来标识。<font>标记常用的属性有3个，size用来设置文本字号大小，取值是0～7；color用来设置文本颜色，取值是十六进制表示的RGB颜色；face用来设置字体，取值可以是宋体、黑体等。

用<font>标记设置文本格式的示例代码如下。

  <html>
<head>
<title>文本格式标记</title>
</head>
<body>
<font size="3">这是size="3"的文本</font><br />
<font size="6">这是size="6"的文本</font><br />
<font color="#000000">这是color="#000000"的文本</font><br />
<font color="red">这是color="red"的文本</font><br />
<font face="黑体">这是face="黑体"的文本</font><br />
<font face="宋体">这是face="宋体"的文本</font><br />
</body>
</html>

在浏览器中的显示效果如图3-6所示。

图3-6 文本格式标记运行效果

为了让文字格式有变化，或者为了强调某部分文字，可以设置其他的文本格式标记，有以下几种。

  <b> </b>            文本以加粗形式显示
<i> </i>            文本以斜体形式显示
<u> </u>            文本加下划线显示
<strong> </strong>  文本加重显示（通常是黑体加粗）

用文本格式标记来设置文本格式的示例代码如下。

  <html>
<head>
<title>文本格式标记</title>
</head>
<body>
<b>加粗字</b><br />
<i>斜体字</i><br />
<u>加下划线</u><br />
<strong>强调文本</strong>
</body>
</html>

在浏览器中的显示效果如图3-7所示。

图3-7 文本格式标记运行效果

3.2.4 图像标记

在页面中插入图像使用<img>标记。<img>是单向标记，不成对出现，如：<img src=“image01.jpg”>。src属性用来设置图像所在的路径和文件名。图像标记常用的属性还有width和height，分别用来设置图像的宽和高。另外，alt也是常用属性，用来设置替代的文字，这样，当浏览器尚未完全读入图像时，或浏览器不支持图像显示时，在图像位置将显示这些文字。

图像标记的使用示例，代码如下。

  <html>
<head>
<title>图像标记</title>
</head>
<body>
<img src="images/1.jpg" alt="image3" width="950" height="336" />
</body>
</html>

在浏览器中的显示效果如图3-8所示。

图3-8 图像标记运行效果

3.2.5 超链接标记

超链接是指从一个页面跳转到另一个页面，或者是从页面的一个位置跳转到另一个位置的链接关系，它是HTML的关键技术。链接的目标除了页面还可以是图片、多媒体、电子邮件等。有了超链接，各个孤立的页面才可以相互联系起来。

1. 页面链接

在HTML中创建超链接需要使用<a>标记，具体格式是：

href属性控制链接到的文件地址，target属性控制目标窗口。target="blank"表示在新窗口打开链接的文件，如果不设置target属性则表示在原窗口打开链接文件。在<a>和</a>之间可以用任何可单击的对象作为超链接的源，如文字或图像。

常见的超链接是指向其他网页的超链接，如果超链接的目标网页位于同一站点，可以使用相对URL；如果超链接的目标网页位于其他位置，则需要使用绝对URL。例如，以下的HTML代码分别显示了创建绝对超链接和相对超链接的方法。

  .
<a href="http://www.baidu.com" >百度搜索</a>
<a href="test2.htm" >网页test2</a>

2. 锚记链接

如果要对同一网页的不同部分进行链接，需要建立锚记链接。

设置锚记链接，首先应为页面中要跳转到的位置命名。命名时使用<a>标记的name属性。此处<a>与</a>之间可以包含内容，也可以不包含内容。

例如，在页面开始处用以下语句进行标记。

  <a name="top" >顶部</a>

对页面进行标记后，可以用<a>标记设置指向这些标记位置的超链接。如果在页面开始处标记了“top”，则可以用以下语句进行链接。

  <a href="#top" >返回顶部</a>

这样设置后，当用户在浏览器中单击文字“返回顶部”时，将显示“顶部”文字所在的页面内容。

要注意的是，应用锚记链接时要将其href的值指定为符号#接锚记名称的形式。如果将href的值指定为一个单独的#，则表示空链接，不做任何跳转。

3. 电子邮件链接

如果将href属性的值指定为“mailto:电子邮件地址”，则可以获得指向电子邮件的超链接。例如，使用以下HTML代码可以设置电子邮件超链接。

  <a href="mailto:it_book@126.com" >it_book的邮箱</a>

当浏览用户单击该超链接后，系统将自动启动邮件客户程序，并将指定的邮件地址填写到“收件人”栏中，此时用户可以编辑并发送邮件。

3.2.6 列表标记

列表分为有序列表、无序列表和定义列表。有序列表是指带有序号标志（如数字）的列表；没有序号标志的列表为无序列表；定义列表则用于对列表项做出解释。

1. 有序列表

有序列表的标记是<ol>，其列表项标记是<li>，具体格式是：

  <ol type="序号类型">
  <li>列表项1 </li>
  <li>列表项1 </li>
  <li>列表项1 </li>
 </ol>

type属性可取的值有以下几种。

1：序号为数字。

A：序号为大写英文字母。

a：序号为小写英文字母。

I：序号为大写罗马字母。

i：序号为小写罗马字母。

使用有序列表的示例代码如下。

  <html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
  <li>文字 </li>
  <li>图像 </li>
  <li>表格 </li>
  <li>表单 </li>
</ol> 
<ol type="A">
  <li>文字 </li>
  <li>图像 </li>
  <li>表格 </li>
  <li>表单 </li>
</ol> 
</body>
</html>

在浏览器中的显示效果如图3-9所示。

图3-9 有序列表

2. 无序列表

无序列表的标记是<ul>，其列表项标记是<li>，具体格式是：

  <ul type="符号类型">
  <li>列表项1 </li>
  <li>列表项1 </li>
  <li>列表项1 </li>
 </ul>

type属性控制的是列表在排序时所使用的字符类型，可取的值有以下几种。

disc：符号为实心圆。

circle：符号为空心圆。

square：符号为实心方点。

使用无序列表的示例代码如下。

  <html>
<head>
<title>无序列表</title>
</head>
<body>
<ul type="circle">
  <li>文字 </li>
  <li>图像 </li>
  <li>表格 </li>
</ul>
<ul type="disc">
  <li>文字 </li>
  <li>图像 </li>
  <li>表格 </li>
</ul>
<ul type="square">
  <li>文字 </li>
  <li>图像 </li>
  <li>表格 </li>
</ul> 
</body>
</html>

在浏览器中的显示效果如图3-10所示。

图3-10 无序列表

3. 定义列表

定义型列表用在对列表项目进行简短说明的情况下，具体格式是：

  <dl>
<dt></dt>
<dd></dd>
</dl>

定义列表在HTML中的标记是<dl>，列表项的标记是<dt>和<dd>。<dt>标记所包含的列表项目标识一个定义术语，<dd>标记包含的列表项目是对定义术语的定义说明。举个例子，在网页代码中插入下面的代码：

  <dl>
    <dt>www</dt>
        <dd>World Wide Web的缩写</dd>
    <dt>cn</dt>
        <dd>域名的后缀</dd>
</dl>

在浏览器中的显示效果如图3-11所示。

图3-11 定义列表

3.2.7 表格标记

表格的主要用途是显示数据，它是进行信息管理的有效手段。表格通常由3部分组成，即行、列和单元格。使用表格会用到3个标记，即<table>、<tr>、<td>。<table>标识表格对象，<tr>标识表格中的行，<td>标识单元格，<td>必须包含在<tr>标记内。具体格式是：

  <table>
  <tr><td>表项目1</td>……<td>表项目n</td></tr>
……
  <tr><td>表项目1</td>……<td>表项目n</td></tr>
</table>

表格的属性设置，如宽度、边框等包含在<table>标记内。如果要在页面中创建一个3行、3列，宽度为400，边框为1的表格，其示例代码如下。

  <table width="400" border="1">
   <tr>
    <td>姓名</td>
    <td>学号</td>
    <td>成绩</td>
  </tr> 
  <tr>
    <td>张三</td>
    <td>2015001</td>
    <td>98</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>2015002</td>
    <td>100</td>
  </tr>
 </table>

将上述代码插入网页文件后，在浏览器中的显示效果如果3-12所示。

图3-12 表格标记的运行效果

<table>、<tr>和<td>三者是组成表格最基本的标记，此外还有以下可用于表格的标记。

1. caption

<caption>标记用于定义表格标题。它可以为表格提供一个简短的说明。说明文本要插入在<caption>标记内。<caption>标记必须包含在<table>标记内。显示的时候表格标题显示在表格的上方中央。

2. th

<th>标记用于设定表格中某一表头的属性。适当标出表格中行或列的头可以让表格更有意义。<th>标记必须包含在<tr>标记内，用来替代<td>标记。

下例将制作一个课程表表格，代码如下。

  <html>
<head>
<title>表格标记</title>
</head>
<body>
<table width="400" border="1">
<caption>课程表</caption>
  <tr>
    <td>&nbsp;</td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
  </tr>
  <tr>
    <th>上午</th>
    <td>语文</td>
    <td>数学</td>
    <td>语文</td>
    <td>数学</td>
    <td>语文</td>
  </tr>
  <tr>
     <th>下午</th>
     <td>英语</td>
     <td>化学</td>
     <td>体育</td>
     <td>物理</td>
     <td>生物</td>
  </tr>
  </table>
</body>
</html>

在浏览器中的显示效果如图3-13所示。

图3-13 表格标记的运行效果

3.2.8 表单标记

表单在网络中的应用范围非常广，可以实现很多功能，如网站登录、账户注册等。表单是网页上的一个特定区域，这个区域由一对<form>标记定义。<form>标记声明表单，定义了采集数据的范围，也就是说，<form>与</form>里面包含的数据将被提交到服务器。组成表单的元素很多，常用的有文本框、单选按钮、复选框和按钮等。多数表单元素都由<input>标记定义，表单的构造方法则由type属性声明。不过下拉菜单和多行文本框这两个表单元素则是例外。常用的表单元素有下面几种。

·文本框

文本框用来接受任何类型的文本的输入。文本框的标记为<input>，其type属性为text。

·复选框

复选框用于选择数据，它允许用户在一组选项中选择多个选项。复选框的标记也是<input>，它的type属性为checkbox。

·单选按钮

单选按钮也用于选择数据，不过在一组选项中只能选择一个选项。单选按钮的标记是<input>，它的type属性为radio。

·提交按钮

在单击提交按钮后，表单内容将被提交到服务器。提交按钮的标记是<input>，它的type属性为submit。

提示：除了提交按钮，预定义的还有重置按钮。此外，制作者还可以通过自定义按钮赋予按钮其他功能。

·多行文本框

多行文本框的标记是<textarea>，它可以创建一个对数据的量没有限制的文本框。通过rows属性和cols属性可定义多行文本框的宽和高，当输入内容超过其范围，该元素会自动出现一个滚动条。

·下拉菜单

下拉菜单在一个滚动列表中显示选项值，用户可以从滚动列表中选择选项。下拉菜单的标记是<select>，它的选项内容用<option>标记定义。

读者学习了上面介绍的这些标记就可以创建表单，使网页能实现一些数据采集功能了。除了普通表单元素标记，还有一些很有用的表单标记，可用来定义表单结构或者添加意义。

1. label

使用<label>标记可将文本与其他任何HTML对象或内部控件关联起来。无论用户单击<label>标识的文本还是HTML对象，引发和接收事件的行为是一致。要使<label>标识的文本和HTML对象相关联，需将<label>的for属性设置为HTML对象的ID属性。<label>标记可以使表单组件增加可访问性。

例如，在页面中创建一个表单域，插入文本框、多行文本框和提交按钮3个表单元素。在每个表单元素的前面插入一个<label>标记，<label>标记内的文本为其后对应的表单元素的文字解释。设置每个<label>标记的for属性为对应表单元素的ID。具体代码如下。

  <html>
<head>
<title>表单标记</title>
</head>
<body>
<form  method="post">
   <label for="name">姓名</label>
        <input name="name" type="text" id="name"  /><br />
   <label for="comment">评论</label>
        <textarea cols="30" rows="5" name="comment" id="comment" >                            
        </textarea><br />
   <label for="submit"></label>
        <input name="submit" type="submit" id="submit" value="提交" />
</form>
</body>
</html>

在浏览器中的显示效果如图3-14所示。此时<label>标识的文本和表单元素相关联，单击文本和单击相应的表单元素引发的事件相同。

图3-14 使表单中的文本与相应的表单元素相关联

2. fieldset

<fieldset>标记元素可以给<form>标记内的表单元素分组。一般情况下，在CSS中创建容器需要一个<div>标记，但使用<fieldset>标记可以在表单域内创建一个完美的容器。默认情况下，<fieldset>标记在内容周围画一个简单的边框，以定义分组的表单内容。

例如，在页面中创建一个表单，插入两对<fieldset>标记，将表单内容分成两组，代码如下。

  <html>
<head>
<title>表单标记</title>
</head>
<body>
<form  method="post">
<fieldset class="fieldset">
       <label for="name">姓名</label>
          <input name="name" type="text"  id="name"  /><br />
       <label for="comment">评论</label>
          <textarea cols="30" rows="5" name="comment" id="comment" >      
                  </textarea><br />
</fieldset>
<fieldset class="fieldset">
       <label for="name">姓名</label>
          <input name="name" type="text" class="text1"  id="name"  />
       <br /><label for="comment">评论</label>
          <textarea cols="30" rows="5" name="comment" id="comment" >          
                  </textarea><br />
 </fieldset>
 <label for="submit"></label>
     <input name="submit" type="submit" id="submit" value="提交" />
</form>
</body>
</html>

查看浏览效果，将如图3-15所示。两对<fieldset>标记将表单元素分成两组，两个组周围分别有一个简单的矩形边框。

图3-15 <fieldset>标记的运行效果

3. legend

<legend>标记的功能和表格中<caption>标记的功能相似，可用来描述它的父元素<fieldset>标记内的内容。一般情况下，浏览器会将<legend>标记内的文本放置在<fieldset>所标识对象边框的上方。

在上面例子的基础上，在两对<fieldset>标记内插入<legend>标记，并将描述文本放置在<legend>标记内。代码如下。

  <html>
<head>
<title>表单标记</title>
</head>
<body>
<form  method="post">
<fieldset class="fieldset">
<legend>评论1</legend>
       <label for="name">姓名</label>
          <input name="name" type="text"  id="name"  /><br />
       <label for="comment">评论</label>
          <textarea cols="30" rows="5" name="comment" id="comment" >
                  </textarea><br />
</fieldset>
<fieldset class="fieldset">
<legend>评论2</legend>
       <label for="name">姓名</label>
          <input name="name" type="text" class="text1"  id="name"  />
       <br /><label for="comment">评论</label>
          <textarea cols="30" rows="5" name="comment" id="comment" >
                  </textarea><br />
 </fieldset>
 <label for="submit"></label>
     <input name="submit" type="submit" id="submit" value="提交" />
</form>
</body>
</html>

查看浏览效果，如图3-16所示。两对<fieldset>标记将表单内容分成两组，<legend>标记内的描述文本放置在<fieldset>标识对象边框的上方。

图3-16 <legend>标记的运行效果