跳至主要內容

HTML列表、表格与表单

cheniy2025/9/17大约 9 分钟前端开发HTMLHTML列表表格设计表单元素实体字符

HTML列表、表格与表单

📚 前置知识

在学习本教程之前，您需要掌握：

  • HTML基础语法和文档结构
  • 基本的HTML标签使用
  • 文本格式化和超链接创建

🎯 学习目标

通过本章学习，您将掌握：

  • 三种类型列表的创建和使用
  • 表格的设计和高级功能
  • 各种表单元素的应用
  • HTML实体字符的正确使用
  • 内嵌框架的实现

📋 HTML列表

无序列表

无序列表使用 <ul> 和 <li> 标签创建：

<!-- 基本无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<!-- 带样式的无序列表 -->
<ul type="disc">
    <li>实心圆点（默认）</li>
</ul>

<ul type="circle">
    <li>空心圆点</li>
</ul>

<ul type="square">
    <li>方形符号</li>
</ul>

有序列表

有序列表使用 <ol> 和 <li> 标签创建：

<!-- 基本有序列表 -->
<ol>
    <li>第一步：准备材料</li>
    <li>第二步：开始制作</li>
    <li>第三步：完成作品</li>
</ol>

<!-- 不同类型的有序列表 -->
<ol type="1">
    <li>数字编号（默认）</li>
</ol>

<ol type="A">
    <li>大写字母编号</li>
</ol>

<ol type="a">
    <li>小写字母编号</li>
</ol>

<ol type="I">
    <li>大写罗马数字</li>
</ol>

<ol type="i">
    <li>小写罗马数字</li>
</ol>

<!-- 指定起始编号 -->
<ol type="1" start="5">
    <li>从第5项开始</li>
    <li>第6项</li>
    <li>第7项</li>
</ol>

定义列表

定义列表用于组织术语和解释：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页样式</dd>
    <dd>可以控制颜色、字体、布局等</dd>
    
    <dt>JavaScript</dt>
    <dd>编程语言，用于实现网页交互功能</dd>
</dl>

嵌套列表

列表可以相互嵌套：

<ul>
    <li>前端技术
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端技术
        <ol>
            <li>Java</li>
            <li>Python</li>
            <li>Node.js</li>
        </ol>
    </li>
</ul>

🔤 HTML实体字符

在HTML中，某些字符具有特殊含义，需要使用实体字符来表示：

常用实体字符

字符实体名称实体编号说明
<&lt;&#60;小于号
>&gt;&#62;大于号
&&amp;&#38;和号
"&quot;&#34;双引号
'&apos;&#39;单引号
&nbsp;&#160;不间断空格
©&copy;&#169;版权符号
®&reg;&#174;注册商标

实体字符使用示例

<p>HTML标签使用 &lt; 和 &gt; 符号</p>
<p>版权所有 &copy; 2024 我的网站</p>
<p>注册商标 &reg;</p>
<p>多个&nbsp;&nbsp;&nbsp;空格</p>
<p>引用内容：&quot;学而时习之，不亦说乎&quot;</p>

📊 HTML表格

基本表格结构

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>程序员</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>设计师</td>
    </tr>
</table>

表格标签说明

标签说明
<table>定义表格
<thead>定义表格头部
<tbody>定义表格主体
<tfoot>定义表格底部
<tr>定义表格行
<th>定义表头单元格
<td>定义数据单元格
<caption>定义表格标题
<colgroup>定义列组
<col>定义列属性

完整表格示例

完整表格结构示例
<table border="1" cellpadding="5" cellspacing="0" width="100%">
    <caption>员工信息表</caption>
    
    <colgroup>
        <col style="background-color: #f0f0f0;">
        <col>
        <col style="background-color: #f9f9f9;">
    </colgroup>
    
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>薪资</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>张三</td>
            <td>技术部</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>设计部</td>
            <td>7500</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>市场部</td>
            <td>6500</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <td colspan="2">总计</td>
            <td>22000</td>
        </tr>
    </tfoot>
</table>

单元格合并

<table border="1">
    <tr>
        <th colspan="2">个人信息</th>
        <th rowspan="2">备注</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>张三</td>
    </tr>
    <tr>
        <td>年龄</td>
        <td>25</td>
        <td>优秀员工</td>
    </tr>
</table>

表格属性

属性说明示例
border边框宽度border="1"
cellpadding单元格内边距cellpadding="5"
cellspacing单元格间距cellspacing="0"
width表格宽度width="100%"
height表格高度height="300"
align对齐方式align="center"
bgcolor背景颜色bgcolor="#f0f0f0"
colspan跨列合并colspan="2"
rowspan跨行合并rowspan="3"

🖼️ 内嵌框架

内嵌框架允许在当前页面中嵌入另一个HTML文档：

<!-- 基本内嵌框架 -->
<iframe src="https://www.example.com" 
        width="600" 
        height="400">
    您的浏览器不支持iframe标签
</iframe>

<!-- 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.4..." 
        width="600" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
</iframe>

<!-- 嵌入视频 -->
<iframe width="560" 
        height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" 
        allowfullscreen>
</iframe>

iframe属性说明

属性说明示例
src嵌入页面的URLsrc="page.html"
width框架宽度width="600"
height框架高度height="400"
frameborder是否显示边框frameborder="0"
scrolling滚动条设置scrolling="no"
name框架名称name="myframe"
allowfullscreen允许全屏allowfullscreen

📝 HTML表单

表单基础结构

<form name="userForm" action="/submit" method="post">
    <!-- 表单元素 -->
    <input type="submit" value="提交">
</form>

表单属性

属性说明示例
name表单名称name="loginForm"
action提交地址action="/login"
method提交方式method="post"
enctype编码类型enctype="multipart/form-data"
target打开方式target="_blank"

文本输入

<!-- 单行文本框 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" 
       placeholder="请输入用户名" 
       maxlength="20" 
       required>

<!-- 密码框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" 
       placeholder="请输入密码" 
       minlength="6" 
       required>

<!-- 多行文本域 -->
<label for="message">留言：</label>
<textarea id="message" name="message" 
          rows="5" cols="50" 
          placeholder="请输入您的留言">
</textarea>

选择控件

<!-- 单选按钮 -->
<fieldset>
    <legend>性别</legend>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
</fieldset>

<!-- 复选框 -->
<fieldset>
    <legend>兴趣爱好</legend>
    <input type="checkbox" id="music" name="hobbies" value="music">
    <label for="music">音乐</label>
    
    <input type="checkbox" id="sports" name="hobbies" value="sports">
    <label for="sports">运动</label>
    
    <input type="checkbox" id="reading" name="hobbies" value="reading">
    <label for="reading">阅读</label>
</fieldset>

<!-- 下拉选择框 -->
<label for="city">城市：</label>
<select id="city" name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen" selected>深圳</option>
</select>

<!-- 分组下拉框 -->
<label for="province">省份：</label>
<select id="province" name="province">
    <optgroup label="华北地区">
        <option value="beijing">北京</option>
        <option value="tianjin">天津</option>
    </optgroup>
    <optgroup label="华南地区">
        <option value="guangdong">广东</option>
        <option value="guangxi">广西</option>
    </optgroup>
</select>

文件上传

<!-- 单文件上传 -->
<label for="avatar">头像：</label>
<input type="file" id="avatar" name="avatar" 
       accept="image/*">

<!-- 多文件上传 -->
<label for="documents">文档：</label>
<input type="file" id="documents" name="documents" 
       multiple 
       accept=".pdf,.doc,.docx">

文件上传注意事项

使用文件上传时，表单必须设置：

  • method="post"
  • enctype="multipart/form-data"

HTML5新增输入类型

<!-- 邮箱 -->
<input type="email" name="email" placeholder="请输入邮箱">

<!-- 网址 -->
<input type="url" name="website" placeholder="请输入网址">

<!-- 电话 -->
<input type="tel" name="phone" placeholder="请输入电话">

<!-- 数字 -->
<input type="number" name="age" min="1" max="120" step="1">

<!-- 范围滑块 -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- 日期 -->
<input type="date" name="birthday">

<!-- 时间 -->
<input type="time" name="appointment">

<!-- 颜色选择器 -->
<input type="color" name="theme-color" value="#ff0000">

<!-- 搜索框 -->
<input type="search" name="query" placeholder="搜索...">

表单按钮

<!-- 提交按钮 -->
<input type="submit" value="提交表单">
<button type="submit">提交表单</button>

<!-- 重置按钮 -->
<input type="reset" value="重置表单">
<button type="reset">重置表单</button>

<!-- 普通按钮 -->
<input type="button" value="普通按钮" onclick="alert('点击了按钮')">
<button type="button" onclick="alert('点击了按钮')">普通按钮</button>

<!-- 图像按钮 -->
<input type="image" src="submit-button.png" alt="提交">

隐藏域和其他元素

<!-- 隐藏域 -->
<input type="hidden" name="user_id" value="12345">

<!-- 数据列表 -->
<label for="browsers">浏览器：</label>
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

<!-- 输出元素 -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="number" id="b" value="50"> =
    <output name="result" for="a b">100</output>
</form>

🎨 完整表单示例

用户注册表单完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        form { max-width: 600px; margin: 0 auto; padding: 20px; }
        fieldset { margin: 20px 0; padding: 15px; }
        label { display: block; margin: 10px 0 5px; }
        input, select, textarea { width: 100%; padding: 8px; margin-bottom: 10px; }
        input[type="radio"], input[type="checkbox"] { width: auto; }
        button { padding: 10px 20px; margin: 10px 5px; }
    </style>
</head>
<body>
    <form action="/register" method="post" enctype="multipart/form-data">
        <h1>用户注册</h1>
        
        <fieldset>
            <legend>基本信息</legend>
            
            <label for="username">用户名 *</label>
            <input type="text" id="username" name="username" required>
            
            <label for="email">邮箱 *</label>
            <input type="email" id="email" name="email" required>
            
            <label for="password">密码 *</label>
            <input type="password" id="password" name="password" 
                   minlength="6" required>
            
            <label for="confirm-password">确认密码 *</label>
            <input type="password" id="confirm-password" name="confirm_password" 
                   minlength="6" required>
        </fieldset>
        
        <fieldset>
            <legend>个人资料</legend>
            
            <label>性别</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
            
            <label for="birthday">生日</label>
            <input type="date" id="birthday" name="birthday">
            
            <label for="city">城市</label>
            <select id="city" name="city">
                <option value="">请选择城市</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select>
            
            <label for="avatar">头像</label>
            <input type="file" id="avatar" name="avatar" accept="image/*">
        </fieldset>
        
        <fieldset>
            <legend>兴趣爱好</legend>
            
            <input type="checkbox" id="music" name="hobbies" value="music">
            <label for="music">音乐</label>
            
            <input type="checkbox" id="sports" name="hobbies" value="sports">
            <label for="sports">运动</label>
            
            <input type="checkbox" id="reading" name="hobbies" value="reading">
            <label for="reading">阅读</label>
            
            <input type="checkbox" id="travel" name="hobbies" value="travel">
            <label for="travel">旅行</label>
        </fieldset>
        
        <fieldset>
            <legend>其他信息</legend>
            
            <label for="bio">个人简介</label>
            <textarea id="bio" name="bio" rows="4" 
                      placeholder="请简单介绍一下自己..."></textarea>
            
            <input type="checkbox" id="newsletter" name="newsletter" value="yes">
            <label for="newsletter">订阅邮件通知</label>
            
            <input type="checkbox" id="terms" name="terms" value="agree" required>
            <label for="terms">我同意用户协议和隐私政策 *</label>
        </fieldset>
        
        <div>
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </div>
    </form>
</body>
</html>

📝 本章小结

通过本章学习，我们掌握了：

  • ✅ 三种类型列表的创建和嵌套使用
  • ✅ HTML实体字符的正确应用
  • ✅ 表格的完整结构和高级功能
  • ✅ 内嵌框架的使用方法
  • ✅ 各种表单元素的应用技巧

🚀 下一步学习

在下一章中，我们将学习：

  • HTML5多媒体元素
  • 块元素与行内元素的区别
  • HTML5新增的语义化标签
  • 现代HTML开发最佳实践

继续加油！💪

最近更新
贡献者: cheniy