HTML进阶元素

在掌握了HTML基础之后，我们现在来学习一些更复杂的HTML元素，这些元素能够帮助我们创建更丰富、更结构化的网页内容。

表格

表格是展示结构化数据的有效方式，HTML提供了丰富的标签来创建和格式化表格。

表格基本结构

一个基本的HTML表格由以下几个元素组成：

html

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

标签说明：

<table>：定义表格
<tr>：定义表格行
<th>：定义表格表头单元格
<td>：定义表格数据单元格

表格属性

虽然现在推荐使用CSS来控制表格样式，但了解一些基本的HTML表格属性仍然有用：

html

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
</table>

属性说明：

border：设置表格边框宽度
cellpadding：设置单元格内边距
cellspacing：设置单元格间距

表格语义化标签

为了提高表格的语义性和可访问性，HTML5引入了专门的标签：

html

<table>
    <thead>
        <tr>
            <th>产品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>笔记本电脑</td>
            <td>¥5999</td>
            <td>15</td>
        </tr>
        <tr>
            <td>智能手机</td>
            <td>¥3999</td>
            <td>32</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td>¥9998</td>
            <td>47</td>
        </tr>
    </tfoot>
</table>

标签说明：

<thead>：定义表格头部
<tbody>：定义表格主体
<tfoot>：定义表格底部

合并单元格

在某些情况下，我们需要合并单元格来创建更复杂的表格布局。

水平合并（跨列）

使用colspan属性来合并水平方向的单元格：

html

<table border="1">
    <tr>
        <th>姓名</th>
        <th>数学</th>
        <th>英语</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>90</td>
        <td>85</td>
        <td colspan="1">175</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>88</td>
        <td>92</td>
        <td colspan="1">180</td>
    </tr>
</table>

垂直合并（跨行）

使用rowspan属性来合并垂直方向的单元格：

html

<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>职位</th>
    </tr>
    <tr>
        <td rowspan="3">技术部</td>
        <td>张三</td>
        <td>前端工程师</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>后端工程师</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>全栈工程师</td>
    </tr>
</table>

复杂表格示例

html

<!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>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>公司员工信息表</h1>
    <table>
        <caption>2023年员工信息统计</caption>
        <thead>
            <tr>
                <th rowspan="2">部门</th>
                <th colspan="3">员工统计</th>
                <th rowspan="2">平均薪资</th>
            </tr>
            <tr>
                <th>总人数</th>
                <th>男</th>
                <th>女</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>技术部</td>
                <td>25</td>
                <td>18</td>
                <td>7</td>
                <td>¥15,000</td>
            </tr>
            <tr>
                <td>市场部</td>
                <td>15</td>
                <td>6</td>
                <td>9</td>
                <td>¥12,000</td>
            </tr>
            <tr>
                <td>人事部</td>
                <td>8</td>
                <td>2</td>
                <td>6</td>
                <td>¥10,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>48</td>
                <td>26</td>
                <td>22</td>
                <td>¥13,200</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单

表单是用户与网页交互的重要方式，用于收集用户输入的数据。

表单基本结构

html

<form action="/submit" method="post">
    <!-- 表单元素 -->
</form>

属性说明：

action：指定表单提交的URL
method：指定表单提交的HTTP方法（GET或POST）

输入控件

文本输入框

html

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

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

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

选择控件

html

<!-- 单选按钮 -->
<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="reading" name="hobbies" value="reading">
    <label for="reading">阅读</label>
    <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>
</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">深圳</option>
</select>

按钮控件

html

<!-- 提交按钮 -->
<input type="submit" value="提交">

<!-- 重置按钮 -->
<input type="reset" value="重置">

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

<!-- HTML5按钮 -->
<button type="submit">提交表单</button>
<button type="reset">重置表单</button>
<button type="button" onclick="alert('按钮被点击了！')">普通按钮</button>

表单验证基础

HTML5为表单提供了内置的验证功能：

html

<form>
    <!-- 必填字段 -->
    <label for="name">姓名（必填）：</label>
    <input type="text" id="name" name="name" required>
    
    <!-- 邮箱验证 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    
    <!-- 数字范围验证 -->
    <label for="age">年龄（18-65）：</label>
    <input type="number" id="age" name="age" min="18" max="65" required>
    
    <!-- 正则表达式验证 -->
    <label for="phone">手机号：</label>
    <input type="tel" id="phone" name="phone" pattern="1[3-9]\d{9}" placeholder="请输入11位手机号" required>
    
    <!-- 长度限制 -->
    <label for="username">用户名（3-20个字符）：</label>
    <input type="text" id="username" name="username" minlength="3" maxlength="20" required>
    
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

表单分组

使用<fieldset>和<legend>对表单元素进行分组：

html

<form>
    <fieldset>
        <legend>个人信息</legend>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </fieldset>
    
    <fieldset>
        <legend>地址信息</legend>
        <label for="address">详细地址：</label>
        <textarea id="address" name="address"></textarea>
        
        <label for="city">城市：</label>
        <select id="city" name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
    </fieldset>
</form>

语义化标签

语义化标签能够更好地描述网页内容的含义，有助于SEO和可访问性。

理解语义化的重要性

语义化标签的主要优势：

SEO友好：搜索引擎能更好地理解页面内容结构
可访问性：辅助技术（如屏幕阅读器）能更好地解读页面
代码可读性：提高代码的可读性和维护性
样式和脚本：更容易通过CSS和JavaScript操作

常用语义标签

页面结构标签

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于</a></li>
                <li><a href="/contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>文章标题</h2>
                <p>发布于 <time datetime="2023-01-01">2023年1月1日</time></p>
            </header>
            <p>文章内容...</p>
            <footer>
                <p>标签：<span>HTML</span>, <span>语义化</span></p>
            </footer>
        </article>

        <aside>
            <h3>相关文章</h3>
            <ul>
                <li><a href="#">相关文章1</a></li>
                <li><a href="#">相关文章2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 版权所有</p>
    </footer>
</body>
</html>

内容分组标签

html

<!-- 章节 -->
<section>
    <h2>第一章节</h2>
    <p>章节内容...</p>
</section>

<!-- 独立内容 -->
<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>

<!-- 侧边栏 -->
<aside>
    <h3>侧边栏内容</h3>
    <p>相关链接或补充信息...</p>
</aside>

区分`<div>`与语义标签

虽然<div>标签可以实现任何布局效果，但应优先使用语义化标签：

html

<!-- 不推荐：仅使用div -->
<div class="header">
    <div class="logo">网站Logo</div>
    <div class="navigation">
        <div class="nav-item">首页</div>
        <div class="nav-item">关于</div>
        <div class="nav-item">联系</div>
    </div>
</div>

<!-- 推荐：使用语义化标签 -->
<header>
    <div class="logo">网站Logo</div>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
        <a href="/contact">联系</a>
    </nav>
</header>

多媒体元素

HTML5引入了原生的多媒体支持，无需依赖第三方插件。

音频标签

html

<!-- 基本用法 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素。
</audio>

<!-- 自动播放（需要静音） -->
<audio controls autoplay muted>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- 循环播放 -->
<audio controls loop>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- 预加载 -->
<audio controls preload="metadata">
    <source src="audio.mp3" type="audio/mpeg">
</audio>

常用属性：

controls：显示播放控件
autoplay：自动播放（需要静音）
loop：循环播放
muted：静音
preload：预加载（none、metadata、auto）

视频标签

html

<!-- 基本用法 -->
<video width="640" height="480" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频元素。
</video>

<!-- 带海报和字幕 -->
<video width="640" height="480" controls poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
    您的浏览器不支持视频元素。
</video>

<!-- 自动播放（需要静音） -->
<video width="640" height="480" controls autoplay muted>
    <source src="video.mp4" type="video/mp4">
</video>

常用属性：

width和height：设置视频尺寸
controls：显示播放控件
autoplay：自动播放（需要静音）
loop：循环播放
muted：静音
poster：视频封面图片
preload：预加载

嵌入内容

使用<iframe>标签可以嵌入其他网页内容：

html

<!-- 嵌入网页 -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>

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

<!-- 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?pb=..." 
        width="600" height="450" frameborder="0" 
        style="border:0;" allowfullscreen></iframe>

字符实体与特殊符号

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

常用字符实体

html

<!-- 空格 -->
<p>普通空格：&nbsp; 不换行空格</p>

<!-- 小于号和大于号 -->
<p>5 &lt; 10 且 10 &gt; 5</p>

<!-- 版权符号 -->
<p>&copy; 2023 版权所有</p>

<!-- 注册商标 -->
<p>商标&reg;</p>

<!-- 度数符号 -->
<p>今天温度25&deg;C</p>

<!-- 引号 -->
<p>他说：&quot;你好&quot;</p>
<p>他说：&lsquo;你好&rsquo;</p>

特殊符号

html

<!-- 货币符号 -->
<p>价格：&yen;100 或 $15 或 &euro;12</p>

<!-- 数学符号 -->
<p>求和：&sum; 公式：&forall;x&isin;R</p>

<!-- 箭头符号 -->
<p>向左：&larr; 向右：&rarr; 向上：&uarr; 向下：&darr;</p>

<!-- 其他符号 -->
<p>心形：&hearts; 星形：&star; 电话：&phone;</p>

实践项目

通过实际项目来巩固所学知识。

制作一个包含表单的注册页面

html

<!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>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        fieldset {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
        .checkbox-group {
            display: flex;
            gap: 15px;
        }
        .checkbox-group label {
            font-weight: normal;
        }
        .submit-btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>
    <form action="/register" method="post">
        <fieldset>
            <legend>基本信息</legend>
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" required minlength="3" maxlength="20">
            </div>
            
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" required minlength="6">
            </div>
            
            <div class="form-group">
                <label for="confirm-password">确认密码：</label>
                <input type="password" id="confirm-password" name="confirm-password" required>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>详细信息</legend>
            <div class="form-group">
                <label for="real-name">真实姓名：</label>
                <input type="text" id="real-name" name="real-name">
            </div>
            
            <div class="form-group">
                <label for="birth-date">出生日期：</label>
                <input type="date" id="birth-date" name="birth-date">
            </div>
            
            <div class="form-group">
                <label>性别：</label>
                <div class="checkbox-group">
                    <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>
                </div>
            </div>
            
            <div class="form-group">
                <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>
            </div>
            
            <div class="form-group">
                <label for="bio">个人简介：</label>
                <textarea id="bio" name="bio" rows="4" placeholder="请简单介绍一下自己"></textarea>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>兴趣爱好</legend>
            <div class="checkbox-group">
                <input type="checkbox" id="reading" name="hobbies" value="reading">
                <label for="reading">阅读</label>
                
                <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="travel" name="hobbies" value="travel">
                <label for="travel">旅行</label>
            </div>
        </fieldset>
        
        <div class="form-group">
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">我同意用户协议和隐私政策</label>
        </div>
        
        <button type="submit" class="submit-btn">注册</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>

设计一个带有表格和多媒体的信息展示页面

html

<!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>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .product-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .product-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }
        .product-card img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .video-section {
            margin: 30px 0;
        }
        .video-section video {
            width: 100%;
            max-width: 800px;
            height: auto;
        }
    </style>
</head>
<body>
    <header>
        <h1>科技产品展示</h1>
        <nav>
            <ul>
                <li><a href="#products">产品展示</a></li>
                <li><a href="#specs">技术规格</a></li>
                <li><a href="#video">产品视频</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="products">
            <h2>热门产品</h2>
            <div class="product-gallery">
                <article class="product-card">
                    <img src="https://via.placeholder.com/300x200?text=产品1" alt="智能手机">
                    <h3>智能手机</h3>
                    <p>最新款智能手机，配备高性能处理器和高清摄像头。</p>
                    <p>价格：¥3999</p>
                </article>
                
                <article class="product-card">
                    <img src="https://via.placeholder.com/300x200?text=产品2" alt="笔记本电脑">
                    <h3>笔记本电脑</h3>
                    <p>轻薄便携笔记本，适合办公和娱乐使用。</p>
                    <p>价格：¥5999</p>
                </article>
                
                <article class="product-card">
                    <img src="https://via.placeholder.com/300x200?text=产品3" alt="智能手表">
                    <h3>智能手表</h3>
                    <p>健康监测智能手表，支持心率检测和运动追踪。</p>
                    <p>价格：¥1999</p>
                </article>
            </div>
        </section>

        <section id="specs">
            <h2>技术规格对比</h2>
            <table>
                <thead>
                    <tr>
                        <th>产品</th>
                        <th>处理器</th>
                        <th>内存</th>
                        <th>存储</th>
                        <th>屏幕</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>智能手机A</td>
                        <td>八核 2.8GHz</td>
                        <td>8GB</td>
                        <td>128GB</td>
                        <td>6.1英寸 OLED</td>
                        <td>¥3999</td>
                    </tr>
                    <tr>
                        <td>智能手机B</td>
                        <td>八核 3.0GHz</td>
                        <td>12GB</td>
                        <td>256GB</td>
                        <td>6.7英寸 AMOLED</td>
                        <td>¥4999</td>
                    </tr>
                    <tr>
                        <td>智能手机C</td>
                        <td>八核 2.5GHz</td>
                        <td>6GB</td>
                        <td>64GB</td>
                        <td>6.0英寸 LCD</td>
                        <td>¥2999</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section id="video" class="video-section">
            <h2>产品介绍视频</h2>
            <video controls poster="https://via.placeholder.com/800x450?text=视频封面">
                <source src="product-demo.mp4" type="video/mp4">
                <source src="product-demo.webm" type="video/webm">
                您的浏览器不支持视频播放。
                <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
            </video>
            <p>观看我们的产品介绍视频，了解更多功能和特性。</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 科技产品公司. 保留所有权利.</p>
    </footer>
</body>
</html>

通过这些进阶元素的学习和实践，您已经掌握了创建复杂网页所需的重要HTML技能。在下一阶段，我们将学习HTML5的新特性和现代Web开发技术。

HTML进阶元素 ​

表格 ​

表格基本结构 ​

表格属性 ​

表格语义化标签 ​

合并单元格 ​

水平合并（跨列） ​

垂直合并（跨行） ​

复杂表格示例 ​

表单 ​

表单基本结构 ​

输入控件 ​

文本输入框 ​

选择控件 ​

按钮控件 ​

表单验证基础 ​

表单分组 ​

语义化标签 ​

理解语义化的重要性 ​

常用语义标签 ​

页面结构标签 ​

内容分组标签 ​

区分<div>与语义标签 ​

多媒体元素 ​

音频标签 ​

视频标签 ​

嵌入内容 ​

字符实体与特殊符号 ​

常用字符实体 ​

特殊符号 ​

实践项目 ​

制作一个包含表单的注册页面 ​

设计一个带有表格和多媒体的信息展示页面 ​

HTML进阶元素

表格

表格基本结构

表格属性

表格语义化标签

合并单元格

水平合并（跨列）

垂直合并（跨行）

复杂表格示例

表单

表单基本结构

输入控件

文本输入框

选择控件

按钮控件

表单验证基础

表单分组

语义化标签

理解语义化的重要性

常用语义标签

页面结构标签

内容分组标签

区分`<div>`与语义标签

多媒体元素

音频标签

视频标签

嵌入内容

字符实体与特殊符号

常用字符实体

特殊符号

实践项目

制作一个包含表单的注册页面

设计一个带有表格和多媒体的信息展示页面