前端开发 | 在线支持

HTML定义的标记很多，下面对常用标记进行说明，随着学习不断深入，相信会完全掌握HTML所有标记的用法和使用技巧。

文档结构标记

此类标记主要用来标识文档的基本结构，主要包括：

<html>...</html>：标识HTML文档的起始和终止。
<head>...</head>：标识HTML文档的头部区域。
<body>...</body>：标识HTML文档的主体区域。

【示例1】设计最简单的网页文档。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body> 网页正文写在这里……
</body>
</html>

文本格式标记

这些标记主要用来标识文本区块，并附带一定的显示格式，主要标记说明如下：

<title>...</title>：标识网页标题。
<hi>...</hi>：标识标题文本，其中i表示1、2、3、4、5、6，分别表示一级、二级、三级等标题。
<p>...</p>：标识段落文本。
<pre>...</pre>：标识预定义文本。
<blockquote>...</blockquote>：标识引用文本。

【示例2】 分别使用<h1>和<p>标记标识网页标题和段落文本。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<h1>文本格式标记</h1>
<p>&lt;p&gt;标记标识段落文本</p>
</body>
</html>

字符格式标记

字符标记主要用来标识部分文本字符的语义，很多字符标记可以呈现一定的显示效果。例如，加粗显示、斜体显示或者下划线显示等。主要标记说明如下：

<b>...</b>：标识强调文本，以加粗效果显示。
<i>...</i>：标识引用文本，以斜体效果显示。
<blink>...</blink>：标识闪烁文本，以闪烁效果显示。IE浏览器不支持该标记。
<big>...</big>：标识放大文本，以放大效果显示。
<small>...</small>：标识缩小文本，以缩小效果显示。
<sup>...</sup>：标识上标文本，以上标效果显示。
<sub>...</sub>：标识下标文本，以下标效果显示。
<cite>...</cite>：标识引用文本，以引用效果显示。

【示例3】分别使用各种字符格式标记显示一个数学方程式的解法。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<p>例如，针对下面这个一元二次方程：</p>
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
<p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下：</p>
<p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
<p><small>得：</small><br  /><i>x</i><sub>1</sub>=1<br />
     <i>x</i><sub>2</sub>=4</p>
</body>
</html>

列表标记

在HTML文档中，列表结构可以分为两种类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。具体使用标记说明如下：

<ul>...</ul>：标识无序列表。
<ol>...</ol>：标识有序列表。
<li>...</li>：标识列表项目。

【示例4】使用无序列表分别显示了一元二次方程求解有四种方法。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<h1>解一元二次方程</h1>
<p>一元二次方程求解有四种方法：</p>
<ul>
    <li>直接开平方法 </li>
    <li>配方法 </li>
    <li>公式法 </li>
    <li>分解因式法</li>
</ul>
</body>
</html>

另外，还可以定义定义列表。定义列表是一种特殊的结构，它包括词条和解释两块内容。包含的标记说明如下：

<dl>...</dl>：标识定义列表。
<dt>...</dt>：标识词条。
<dd>...</dd>：标识解释。

【示例5】使用定义列表显示两个成语的解释。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<h1>成语词条列表</h1>
<dl>
    <dt>知无不言，言无不尽</dt>
    <dd>知道的就说，要说就毫无保留。</dd>
    <dt>智者千虑，必有一失</dt>
    <dd>不管多聪明的人，在很多次的考虑中，也一定会出现个别错误。</dd>

</dl>
</body>
</html>

链接标记

链接标记可以实现把多个网页联系在一起。主要结构如下：

<a>...</a>：标识超链接。

【示例6】使用<a>标记定义一个超链接，单击该超链接可以跳转到百度首页。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<a href="http://www.baidu.com/">去百度搜索</a>
</body>
</html>
<a>标记还可以定义锚点。锚点是一类特殊的超链接，它可以定位到网页中某个具体的位置。例如，在面示例中单击超链接文本，就可以跳转到网页的底部。
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<a href="#btm">跳转到底部</a>
<div id="box" style="height:2000px; border:solid  1px red;">撑开浏览器滚动条</div>
<span id="btm">底部锚点位置</span>
</body>
</html>

多媒体标记

表媒体标记主要用于引入外部多媒体文件，并进行显示。多媒体标记主要包括：

<img />：插入图像。
<embed>...</embed>：插入多媒体。
<object>...</object>：插入多媒体对象。

表格标记

表格标记用来组织和管理数据，主要包括下面几个标记：

<table>...</table>：定义表格结构。
<caption>...</caption>：定义表格标题。
<th>...</th>：定义表头。
<tr>...</tr>：定义表格行。
<td...</td>：定义表格单元格。

【示例7】使用表格结构显示5行3列的数据集。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<table summary="ASCII是英文American Standard Code for Information Interchange的缩写。ASCII编码是目前计算机最通用的编码标准。因为计算机只能接受数字信息，ASCII编码将字符转换为数字来表示，以便计算机能够接受和处理。">
    <caption>ASCII字符集(节选）</caption>
    <tr>
        <th>十进制</th>
        <th>十六进制</th>
        <th>字符</th>
    </tr>
    <tr>
        <td>9</td>
        <td>9</td>
        <td>TAB(制表符)</td>
    </tr>
    <tr>
         <td>10</td>
        <td>A</td>
        <td>换行</td>
    </tr>
    <tr>
         <td>13</td>
        <td>D</td>
        <td>回车</td>
    </tr>
    <tr>
         <td>32</td>
        <td>20</td>
        <td>空格</td>
    </tr>
</table>
</body>
</html>

表单标记

表单标记主要用来制作交互式表单，主要包括下面标记：

<form>...</form>：定义表单结构。
<input />：定义文本域、按钮和复选。
<textarea>...</textarea>：定义多行文本框。
<select>...</select>：定义下拉列表。
<option>...</option>：定义下拉列表中的选择项目。

【示例8】分别定义单行文本框、多行文本框、复选框、单选按钮、下拉菜单和提交按钮的表单。

<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<form id="form1" name="form1"  method="post" action="">
    <p>单行文本域：<input  type="text" name="textfield" id="textfield"  /></p>
    <p>密码域：<input  type="password" name="passwordfield"  id="passwordfield" /></p>
     <p>多行文本域：<textarea  name="textareafield" id="textareafield">  </textarea></p>
    <p>复选框：复选框1<input  name="checkbox1" type="checkbox" value="" />
                复选框2<input  name="checkbox2" type="checkbox" value="" />
    </p>
    <p>单选按钮：
        <input  name="radio1" type="radio" value="" />按钮1
        <input  name="radio2" type="radio" value="" />按钮2</p>
    <p>下拉菜单：
        <select  name="selectlist">
            <option  value="1">选项1</option>
            <option  value="2">选项2</option>
            <option  value="3">选项3</option>
        </select>
    </p>
    <p><input  type="submit" name="button" id="button"  value="提交"  /></p>
</form>
</body>
</html>