HTML

HTML 概述

HTML 是 HyperText Markup Language 的缩写，中文名称为“超文本标记语言”。

超文本：除普通文字外，还可以包含图片、音频、视频、链接、表格和表单等内容。
标记语言：通过标签描述页面的结构和内容。HTML 不是编程语言，也不是需要编译执行的脚本语言。

HTML 文件常用扩展名为 .html 或 .htm。浏览器读取 HTML 文件后，会解析标签并渲染页面。

HTML 文档结构

一个完整的 HTML 文档通常由文档声明、根元素、头部和主体组成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>我的第一个页面</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>：声明当前文档使用 HTML5。
<html>：HTML 文档的根元素。
<head>：保存页面标题、字符编码、样式表和脚本等页面信息。
<body>：保存浏览器中实际显示的页面内容。

常用文本标签

标题标签

HTML 提供 <h1> 到 <h6> 六级标题，<h1> 级别最高，<h6> 级别最低：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题级别应根据内容结构使用，不要只根据默认字体大小选择标题。

段落与换行

<p>这是一个段落。</p>
<p>这是另一个段落。<br />这里进行了换行。</p>

<p> 表示段落，<br /> 表示在当前位置换行。

水平分隔线

<hr />

旧版 HTML 中可以通过 size、color 等属性设置分隔线样式，但现代开发通常使用 CSS。

文本样式标签

<p><s>删除线文本</s></p>
<p><u>带下划线的文本</u></p>
<p><i>斜体文本</i></p>
<p><b>加粗文本</b></p>
<p>2<sup>10</sup></p>
<p>n<sub>log</sub></p>

<s>：表示不再准确或不再相关的内容，默认显示删除线。
<u>：默认显示下划线。
<i>：默认显示斜体。
<b>：默认显示粗体。
<sup>：上标。
<sub>：下标。

需要强调语义时，通常优先使用 <strong> 和 <em>。

预格式化文本

<pre> 会保留文本中的空格和换行：

<pre>
public class Person {
    private String name;
    private Integer age;
    private String sex;
}
</pre>

字体标签

旧版 HTML 可以使用 <font> 设置字体颜色和大小：

<font size="5" color="red">正式进入第三阶段：</font>
<font color="green">JavaWeb 程序开发</font>

<font> 已在 HTML5 中废弃，现代页面应使用 CSS 的 color、font-size 等属性。

HTML 实体字符

当字符与 HTML 语法冲突，或需要输入特殊空格时，可以使用实体字符：

实体	显示结果	说明
`<`	`<`	小于号
`>`	`>`	大于号
`&`	`&`	与号
` `	不换行空格	常用于插入固定空格

列表标签

描述列表

描述列表由 <dl>、<dt> 和 <dd> 组成：

<dl>
    <dt>图书信息</dt>
    <dd>Java 学习笔记</dd>
    <dd>Java 核心技术</dd>
    <dd>Java 编程思想</dd>
</dl>

有序列表

<ol type="1">
    <li>Java 学习笔记</li>
    <li>Java 核心技术</li>
    <li>Java 编程思想</li>
</ol>

type 的常见取值包括 1、A、a、I 和 i。

无序列表

<ul type="disc">
    <li>Java 学习笔记</li>
    <li>Java 核心技术</li>
    <li>Java 编程思想</li>
</ul>

旧版 HTML 的 type 属性可使用 circle、disc 或 square。现代开发通常通过 CSS 的 list-style-type 设置项目符号。

图像标签

<img> 用于在页面中显示图片：

<img src="" width="300" height="300" alt="图像丢失" />

src：图片地址。
width：图片宽度。
height：图片高度。
alt：图片无法显示时的替代文本，也有助于无障碍访问。

超链接标签

<a> 用于创建超链接：

<a href="www.baidu.com" target="_blank">百度</a>

href：目标地址。
target="_blank"：在新窗口或新标签页中打开。
target="_self"：在当前页面中打开，也是默认行为。

表格标签

表格主要用于展示结构化数据，不建议再使用表格完成整个页面布局。

基本结构

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格</th>
        <td>普通单元格</td>
    </tr>
</table>

<table>：定义表格。
<caption>：定义表格标题。
<tr>：定义一行。
<th>：定义表头单元格，默认加粗并居中。
<td>：定义普通单元格。

单元格合并

colspan：跨列合并，即水平方向合并。
rowspan：跨行合并，即垂直方向合并。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>表格示例</title>
</head>
<body>
    <table align="center" width="800" border="1" bordercolor="#ffb399" cellpadding="10" cellspacing="5">
        <caption>用户信息</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <td>女</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td colspan="2">水平方向合并两个单元格</td>
            <td rowspan="2">垂直方向合并两个单元格</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>22</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
    </table>
</body>
</html>

align、border、bordercolor、cellpadding 和 cellspacing 等表现类属性在现代 HTML 中已不推荐使用，实际开发通常通过 CSS 设置。

表单标签

表单用于收集用户输入，并将数据提交给服务器。

表单基本结构

<form action="http://localhost:8080/login.do" method="get">
    表单内容
</form>

action：表单提交地址。
method：提交方式，常见取值为 get 和 post。

只有带有 name 属性且未被禁用的表单控件，才会按规则参与表单提交。

`input` 控件

input 的常见 type 取值如下：

`type`	作用
`text`	单行文本框
`password`	密码输入框
`radio`	单选框
`checkbox`	复选框
`hidden`	隐藏域
`email`	邮箱输入框
`number`	数字输入框
`file`	文件选择框
`date`	日期选择框
`datetime-local`	本地日期时间选择框
`month`	年月选择框
`color`	颜色选择器
`button`	普通按钮
`image`	图片提交按钮
`submit`	提交按钮
`reset`	重置按钮

常见通用属性包括 id、name、class、placeholder、style 和 value。

表单示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>表单示例</title>
</head>
<body>
    <form action="http://localhost:8080/login.do" method="get">
        账户：<input type="text" name="userName" /><br />
        密码：<input type="password" name="userPwd" /><br />
        性别：
        <input type="radio" name="userSex" value="male" />男
        <input type="radio" name="userSex" value="female" />女<br />
        爱好：
        <input type="checkbox" name="hobby" value="smoking" />抽烟
        <input type="checkbox" name="hobby" value="drinking" />喝酒
        <input type="checkbox" name="hobby" value="perm" />烫头<br />
        邮箱：<input type="email" name="email" /><br />
        数字：<input type="number" name="number" /><br />
        文件：<input type="file" name="file" /><br />
        日期：<input type="date" name="date" /><br />
        本地时间：<input type="datetime-local" name="dateTime" /><br />
        颜色：<input type="color" name="color" /><br />
        年月：<input type="month" name="month" /><br />
        普通按钮：<input type="button" value="确定" /><br />
        图片按钮：<input type="image" src="fish.jpg" width="600" height="300" alt="提交" /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

单选框需要使用相同的 name 才能形成互斥组；需要提交的控件应设置 name 和适当的 value。

下拉选择标签

<select> 定义下拉列表，<option> 定义选项：

<label for="education">学历：</label>
<select id="education" name="education">
    <option value="">请选择</option>
    <option value="college">专科</option>
    <option value="bachelor">本科</option>
    <option value="master">研究生</option>
</select>

元数据标签

<meta> 通常放在 <head> 中，用于描述文档的字符编码、关键词、视口等信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="java程序开发,javaWeb程序设计,锅包肉" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元数据示例</title>
</head>
<body>
</body>
</html>

charset：设置文档字符编码。
name：指定元数据名称，例如 keywords 或 viewport。
content：指定对应元数据的内容。
http-equiv：模拟部分 HTTP 响应头功能。

框架标签

旧版 HTML 可以使用 <frameset> 和 <frame> 将浏览器窗口拆分为多个区域：

<frameset rows="150,*">
    <frame name="top" src="hello.html" />
    <frameset cols="200,*">
        <frame name="left" src="world.html" />
        <frame name="right" src="right.html" />
    </frameset>
</frameset>

rows：按行划分区域。
cols：按列划分区域。
name：框架名称。
src：框架中显示的页面地址。

<frameset> 和 <frame> 已在 HTML5 中废弃。现代页面布局应使用 CSS，嵌入其他页面时可以根据需要使用 <iframe>。

综合案例

下面的案例综合使用了标题、链接、列表、表格和表单。案例保留了使用表格布局的课程写法；在现代项目中，页面整体布局通常使用 CSS Flexbox 或 Grid。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>前端编程培训中心</title>
</head>
<body>
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" height="100" bgcolor="#f0f0f0" align="center">
                <h1>前端编程培训中心</h1>
                <p>专注 HTML、CSS、JavaScript 零基础前端教学</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="40" bgcolor="#2c3e50" align="center">
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">首页</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">课程介绍</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">师资力量</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">学员案例</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">在线报名</a>
            </td>
        </tr>
        <tr>
            <td width="200" bgcolor="#ecf0f1" valign="top" height="400">
                <h3 align="center">栏目导航</h3>
                <hr />
                <ul>
                    <li><a href="#">HTML 入门课程</a></li>
                    <li><a href="#">CSS 美化样式</a></li>
                    <li><a href="#">JavaScript 交互</a></li>
                    <li><a href="#">综合项目案例</a></li>
                </ul>
                <hr />
                <h3 align="center">联系我们</h3>
                <p align="center">电话：123-456789</p>
                <p align="center">地址：黑龙江工商学院</p>
            </td>
            <td width="600" valign="top" bgcolor="#ffffff">
                <h2 align="center">欢迎来到黑龙江工商学院</h2>
                <hr />
                <table width="90%" border="1" align="center" cellpadding="5" cellspacing="0">
                    <tr>
                        <th>课程名称</th>
                        <th>学习时长</th>
                        <th>适合人群</th>
                    </tr>
                    <tr>
                        <td>HTML 网页搭建</td>
                        <td>5 天</td>
                        <td>零基础学员</td>
                    </tr>
                    <tr>
                        <td>CSS 页面美化</td>
                        <td>7 天</td>
                        <td>掌握 HTML 基础</td>
                    </tr>
                    <tr>
                        <td>JavaScript 交互开发</td>
                        <td>10 天</td>
                        <td>有前端基础</td>
                    </tr>
                </table>
                <br />
                <hr />
                <h3 align="center">在线报名表单</h3>
                <form>
                    <table width="80%" align="center" border="0">
                        <tr>
                            <td width="100" align="right">姓名：</td>
                            <td><input type="text" name="name" placeholder="请输入姓名" /></td>
                        </tr>
                        <tr>
                            <td align="right">手机号：</td>
                            <td><input type="text" name="phone" placeholder="请输入手机号" /></td>
                        </tr>
                        <tr>
                            <td align="right">意向课程：</td>
                            <td>
                                <select name="course">
                                    <option>HTML 入门</option>
                                    <option>CSS 美化</option>
                                    <option>JavaScript 开发</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="提交报名" />
                                <input type="reset" value="重置" />
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="60" bgcolor="#2c3e50" align="center">
                <p style="color: #fff;">© 2026 前端编程培训中心 版权所有</p>
            </td>
        </tr>
    </table>
</body>
</html>

HTML

HTML

HTML 概述

HTML 文档结构

常用文本标签

标题标签

段落与换行

水平分隔线

文本样式标签

预格式化文本

字体标签

HTML 实体字符

列表标签

描述列表

有序列表

无序列表

图像标签

超链接标签

表格标签

基本结构

单元格合并

示例

表单标签

表单基本结构

input 控件

表单示例

下拉选择标签

元数据标签

框架标签

综合案例

`input` 控件