课四：HTML基本标签（二） - 网页设计与制作实操手册

一、HTML属性

HTML属性是标签的附加信息，用于修改标签的行为或提供额外信息，通常在开始标签中定义，格式为：属性名="属性值"。

1.1 属性基本规则

属性必须写在开始标签中，位于标签名之后
属性名不区分大小写，推荐使用小写
属性值必须用引号包裹（单引号或双引号均可）
一个标签可以有多个属性，属性之间用空格分隔
部分属性是通用属性（如class、id、style），适用于大多数标签

1.2 常用通用属性

属性名	作用	示例
id	定义元素唯一标识（页面内唯一）	<div id="header">
class	定义元素类名（可重复，用于样式和脚本）	<p class="text-danger">
style	定义行内CSS样式	<h1 style="color: red;">
title	定义鼠标悬停提示文本	<a title="百度首页">
lang	定义元素内容的语言	<html lang="zh-CN">
hidden	隐藏元素	<p hidden>隐藏文本</p>

实训实例：使用属性美化和控制元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>HTML属性示例</title>
</head>
<body>
    <!-- id属性：唯一标识 -->
    <h1 id="main-title" style="color: #2980b9; text-align: center;">HTML属性应用示例</h1>
    
    <!-- class属性：分类标识 -->
    <p class="important-text" style="font-size: 18px; color: #e74c3c;">
        这是重要文本（使用class和style属性）
    </p>
    
    <!-- title属性：提示文本 -->
    <img src="https://picsum.photos/400/200" alt="示例图片" 
         title="这是一张示例图片，鼠标悬停显示此提示"
         style="border: 2px solid #3498db; border-radius: 8px;">
    
    <!-- disabled属性：禁用元素 -->
    <button disabled style="padding: 8px 16px; margin: 10px 0;">
        禁用的按钮（无法点击）
    </button>
    
    <!-- hidden属性：隐藏元素 -->
    <p hidden>这段文本被hidden属性隐藏，不会显示在页面上</p>
    
    <!-- data-*自定义属性 -->
    <div data-user-id="1001" data-user-name="张三" style="padding: 10px; background: #f5f5f5;">
        自定义数据属性：用户ID=1001，用户名=张三
    </div>
</body>
</html>

二、列表标签

列表标签用于组织具有关联性的内容，HTML提供三种列表类型：无序列表、有序列表、定义列表。

2.1 无序列表（<ul> + <li>）

无序列表用于表示没有顺序的列表项，默认显示项目符号（圆点），可通过CSS修改样式。

<!-- 基本无序列表 -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
</ul>

<!-- 自定义列表样式 -->
<ul style="list-style-type: square;">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<!-- 嵌套无序列表 -->
<ul>
    <li>前端开发
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端开发
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>

2.2 有序列表（<ol> + <li>）

有序列表用于表示有顺序的列表项，默认显示数字序号，可自定义序号类型和起始值。

<!-- 基本有序列表 -->
<ol>
    <li>打开VS Code</li>
    <li>创建HTML文件</li>
    <li>编写代码</li>
    <li>保存并预览</li>
</ol>

<!-- 自定义序号类型 -->
<ol type="A"> <!-- A:大写字母 -->
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<!-- 设置起始值 -->
<ol start="5">
    <li>第五步</li>
    <li>第六步</li>
    <li>第七步</li>
</ol>

2.3 定义列表（<dl> + <dt> + <dd>）

定义列表用于表示术语和解释的对应关系，<dt>定义术语，<dd>定义解释。

<!-- 基本定义列表 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于定义网页结构</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页样式</dd>
    
    <dt>JavaScript</dt>
    <dd>脚本语言，用于实现网页交互效果</dd>
</dl>

实训实例：创建课程大纲页面

实现步骤：

创建"list-demo.html"文件
使用标题标签定义页面标题
使用有序列表创建课程章节
在每个章节中嵌套无序列表列出知识点
使用定义列表解释核心术语
添加适当的样式美化列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页设计与制作课程大纲</title>
    <style>
        body { max-width: 800px; margin: 0 auto; padding: 20px; }
        h1 { color: #2980b9; border-bottom: 2px solid #eee; }
        .chapter { margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 8px; }
        dt { font-weight: bold; color: #e74c3c; }
        dd { margin-bottom: 10px; color: #666; }
    </style>
</head>
<body>
    <h1>网页设计与制作课程大纲</h1>
    <ol type="I">
        <li class="chapter">
            <h2>基础入门</h2>
            <ul>
                <li>网页基础概念</li>
                <li>HTML/CSS基本概念</li>
                <li>开发环境搭建（VS Code）</li>
                <li>HTML基础结构</li>
            </ul>
            <dl>
                <dt>HTML</dt>
                <dd>超文本标记语言，用于定义网页结构</dd>
                <dt>CSS</dt>
                <dd>层叠样式表，用于美化网页样式</dd>
            </dl>
        </li>
        <!-- 后续章节略 -->
    </ol>
</body>
</html>

三、表格标签

表格标签用于展示结构化数据，由行、列、单元格组成，核心标签包括<table>、<tr>、<th>、<td>。

3.1 基本表格结构

<table border="1" width="100%">
    <tr>
        <th>姓名</th>
        <th>专业</th>
        <th>成绩</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>计算机网络应用</td>
        <td>95</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>计算机网络应用</td>
        <td>88</td>
        <td>良好</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>软件技术</td>
        <td>92</td>
        <td>优秀</td>
    </tr>
</table>

3.2 表格属性

属性	作用	取值
border	表格边框宽度	数字（px），0表示无边框
width/height	表格/单元格宽高	数字（px）或百分比（%）
cellpadding	单元格内边距	数字（px）
cellspacing	单元格间距	数字（px）
align	表格/单元格对齐方式	left/center/right
bgcolor	背景颜色	颜色值

3.3 单元格合并

<table border="1" width="100%" cellpadding="5">
    <tr>
        <th colspan="4" align="center">学生成绩表</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>90</td>
        <td>95</td>
        <td>88</td>
    </tr>
    <tr>
        <td rowspan="2">平均分</td>
        <td>87.5</td>
        <td>87.5</td>
        <td>90</td>
    </tr>
    <tr>
        <td colspan="3" align="center">总分平均分：88.3</td>
    </tr>
</table>

实训实例：创建学生信息管理表格

实现步骤：

创建"table-demo.html"文件
使用<table>标签创建表格，设置边框、内边距等属性
使用<caption>添加表格标题
使用<thead>、<tbody>、<tfoot>分组表格内容
根据需要合并单元格（跨行/跨列）
添加CSS样式美化表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生信息管理表格</title>
    <style>
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #3498db; color: white; }
        tr:nth-child(even) { background-color: #f8f9fa; }
        tr:hover { background-color: #e8f4fd; }
    </style>
</head>
<body>
    <h1>学生信息管理表</h1>
    <table>
        <caption>2025级计算机网络应用专业学生信息</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>入学成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2025001</td>
                <td>张三</td>
                <td>男</td>
                <td>19</td>
                <td>95</td>
            </tr>
            <!-- 更多数据 -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" align="center">数据更新时间：2025-09-01</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

四、表单标签

表单标签用于创建用户交互界面，收集用户输入数据，核心标签为<form>，配合各种表单控件使用。

4.1 表单基本结构

<form action="submit.php" method="post">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </div>
</form>

4.2 表单控件类型

控件类型	标签/属性	作用	示例
文本框	input type="text"	单行文本输入	<input type="text" name="name">
密码框	input type="password"	密码输入（隐藏显示）	<input type="password" name="pwd">
单选按钮	input type="radio"	单选选项	<input type="radio" name="gender" value="male">
复选框	input type="checkbox"	多选选项	<input type="checkbox" name="hobby" value="sport">
下拉列表	select + option	下拉选择	<select name="city"><option>北京</option></select>
文本域	textarea	多行文本输入	<textarea name="intro" rows="5" cols="30"></textarea>
文件上传	input type="file"	文件选择上传	<input type="file" name="file">
隐藏域	input type="hidden"	隐藏数据传递	<input type="hidden" name="id" value="1001">

实训实例：创建用户注册表单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册表单</title>
    <style>
        .form-container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
        .form-control { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-primary { background-color: #3498db; color: white; }
        .btn-reset { background-color: #e74c3c; color: white; }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>用户注册表单</h2>
        <form action="register.php" method="post">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" class="form-control" required>
            </div>
            <!-- 其他表单项 -->
            <div class="btn-group">
                <input type="submit" value="提交注册" class="btn btn-primary">
                <input type="reset" value="重置表单" class="btn btn-reset">
            </div>
        </form>
    </div>
</body>
</html>

五、HTML特殊字符

HTML中部分字符有特殊含义（如<、>、&），需要使用字符实体表示，避免解析错误。

5.1 常用特殊字符实体

特殊字符	字符实体	十进制编码	说明
<	<	<	小于号/左尖括号
>	>	>	大于号/右尖括号
&	&	&	和号/与符号
"	"	"	双引号
'	'	'	单引号/撇号
			非换行空格
©	©	©	版权符号
®	®	®	注册商标
¥	¥	¥	人民币符号
°	°	°	度符号

实训实例：正确显示代码和特殊文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML特殊字符示例</title>
</head>
<body>
    <h1>HTML特殊字符应用</h1>
    <div>
        &lt;!DOCTYPE html&gt;<br>
        &lt;html&gt;<br>
        &nbsp;&nbsp;&lt;head&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot;&gt;<br>
        &nbsp;&nbsp;&lt;/head&gt;<br>
        &lt;/html&gt;
    </div>
    <p>价格：&yen;99.00</p>
    <p>版权声明：&copy; 2025 保留所有权利</p>
</body>
</html>

六、综合实训任务：创建学生信息管理系统页面

实训要求：综合运用HTML属性、列表、表格、表单、特殊字符，创建一个完整的学生信息管理页面

实现步骤：

创建项目文件夹"student-management"，包含index.html文件
设计页面布局：顶部导航、左侧菜单、主内容区、底部信息
使用列表标签创建导航菜单（有序/无序列表）
使用表格标签展示学生信息数据
创建查询和添加学生的表单
正确使用特殊字符显示代码和特殊文本
添加CSS样式美化页面，提高用户体验

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生信息管理系统</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: "Microsoft YaHei", sans-serif; }
        .header { background: #2c3e50; color: white; padding: 20px; text-align: center; }
        .container { display: flex; min-height: calc(100vh - 140px); }
        .sidebar { width: 200px; background: #34495e; color: white; padding: 20px; }
        .menu { list-style: none; }
        .menu a { color: white; text-decoration: none; display: block; padding: 8px 10px; border-radius: 4px; }
        .menu a:hover { background: #3498db; }
        .main-content { flex: 1; padding: 20px; background: #f9f9f9; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        .table th { background: #f5f5f5; }
        .btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
        .btn-primary { background: #3498db; color: white; }
        .btn-danger { background: #e74c3c; color: white; }
        .footer { background: #2c3e50; color: white; text-align: center; padding: 20px; }
    </style>
</head>
<body>
    <div class="header">
        <h1>学生信息管理系统</h1>
        <p>&copy; 2025 计算机网络应用专业</p>
    </div>
    <div class="container">
        <div class="sidebar">
            <h3>功能菜单</h3>
            <ul class="menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">学生列表</a></li>
                <li><a href="#">添加学生</a></li>
                <li><a href="#">学生查询</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="card">
                <h2>学生信息列表</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>专业</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2025001</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>计算机网络应用</td>
                            <td>
                                <a href="#" class="btn btn-primary">编辑</a>
                                <a href="#" class="btn btn-danger">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>系统版本：v1.0 | 更新时间：2025-09-01</p>
    </div>
</body>
</html>