HTML标签图文详解（二）

本文主要内容

• 列表标签：<ul>、<ol>、<dl>
• 表格标签：<table>
• 框架标签及内嵌框架 <iframe>
• 表单标签：<form>
• 多媒体标签
• 滚动字幕标签：<marquee>

列表标签

列表标签分为三种。

1、无序列表 <ul> ，无序列表中的每一项是 <li>

英文单词解释如下：

• ul: unordered list, "无序列表"的意思。
• li: list item, "列表项"的意思。

例如：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

效果：

• 列表项1
• 列表项2
• 列表项3

注意事项：

• <ul> 标签中只能嵌套 <li> 标签，不能直接在 <ul> 标签中输入其他内容
• <li> 标签中可以嵌套任何元素，包括段落、图片、链接，甚至可以嵌套其他列表
• 无序列表会自动添加项目符号，默认是实心圆点，可以通过 CSS 的 list-style-type 属性修改

2、有序列表 <ol> ，有序列表中的每一项是 <li>

英文单词解释如下：

• ol: ordered list, "有序列表"的意思。
• li: list item, "列表项"的意思。

例如：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

效果：

1. 列表项1
2. 列表项2
3. 列表项3

有序列表的属性：

• type：设置编号的类型
  • 1：数字（默认）
  • a：小写字母
  • A：大写字母
  • i：小写罗马数字
  • I：大写罗马数字
• start：设置起始值，必须是数字，即使编号是字母或罗马数字

3、定义列表 <dl> ，定义列表中的每一项是 <dt> 和 <dd>

英文单词解释如下：

• dl: definition list, "定义列表"的意思。
• dt: definition term, "定义术语"的意思。
• dd: definition description, "定义描述"的意思。

例如：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

效果： HTML : 超文本标记语言 CSS : 层叠样式表

定义列表通常用于术语解释、名词解释等场景。

表格标签

表格标签用于展示数据。

基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

英文单词解释如下：

• table: 表格
• tr: table row, 表格行
• td: table data, 表格数据（单元格）
• th: table header, 表格标题（表头单元格）

表格的属性

• border：表格边框的宽度，单位是像素
• width：表格的宽度，单位是像素或百分比
• height：表格的高度，单位是像素或百分比
• cellspacing：单元格之间的间距，单位是像素
• cellpadding：单元格内容与单元格边框之间的间距，单位是像素
• align：表格在页面中的水平对齐方式，取值：left、center、right

表格的结构

为了使表格更加规范，可以将表格分为三个部分：表头、表身和表尾。

<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾1</td>
            <td>表尾2</td>
        </tr>
    </tfoot>
</table>

单元格的合并

• colspan：跨列合并，用于 <td> 或 <th> 标签中
• rowspan：跨行合并，用于 <td> 或 <th> 标签中

例如：

<table border="1">
    <tr>
        <td colspan="2">跨两列的单元格</td>
    </tr>
    <tr>
        <td>普通单元格</td>
        <td>普通单元格</td>
    </tr>
</table>

框架标签及内嵌框架

内嵌框架 <iframe>

内嵌框架用于在当前页面中嵌入另一个页面。

<iframe src="https://example.com" width="500" height="300"></iframe>

属性：

• src：嵌入的页面的 URL
• width：框架的宽度
• height：框架的高度
• frameborder：是否显示边框，1（显示）或 0（不显示）
• scrolling：是否显示滚动条，yes、no 或 auto

表单标签

表单用于收集用户输入的数据。

表单的基本结构

<form action="提交地址" method="提交方式">
    表单元素
</form>

属性：

• action：表单提交的地址
• method：表单提交的方式，常用的有 get 和 post
• name：表单的名称
• target：表单提交后的打开方式，与 <a> 标签的 target 属性相同

常用的表单元素

1. 文本框：<input type="text">
2. 密码框：<input type="password">
3. 单选按钮：<input type="radio">
4. 复选框：<input type="checkbox">
5. 下拉列表：<select> 和 <option>
6. 文本域：<textarea>
7. 提交按钮：<input type="submit">
8. 重置按钮：<input type="reset">

多媒体标签

音频标签 <audio>

<audio src="音频文件.mp3" controls></audio>

属性：

• src：音频文件的 URL
• controls：显示播放控件
• autoplay：自动播放
• loop：循环播放
• muted：静音

视频标签 <video>

<video src="视频文件.mp4" controls></video>

属性：

• src：视频文件的 URL
• controls：显示播放控件
• autoplay：自动播放
• loop：循环播放
• muted：静音
• width：视频的宽度
• height：视频的高度
• poster：视频封面的 URL

滚动字幕标签 <marquee>

<marquee> 标签用于创建滚动字幕效果。

<marquee>这是一个滚动字幕</marquee>

属性：

• direction：滚动方向，left、right、up、down
• behavior：滚动行为，scroll（默认）、slide（滚动到边缘后停止）、alternate（来回滚动）
• loop：循环次数，默认为无限循环
• scrollamount：滚动速度，值越大速度越快
• scrolldelay：滚动延迟，单位是毫秒

注意：<marquee> 标签在 HTML5 中已被废弃，建议使用 CSS 动画代替。

总结

本文详细介绍了 HTML 中的列表标签、表格标签、框架标签、表单标签、多媒体标签和滚动字幕标签。这些标签是构建网页的重要元素，掌握它们的使用方法对于网页开发至关重要。

在实际开发中，我们通常会结合 CSS 来控制这些标签的样式，使网页更加美观和专业。同时，随着 HTML5 的发展，一些旧的标签（如 <marquee>）已被废弃，我们应该使用更现代的技术来实现相同的效果。