HTML 笔记

约 1801 字大约 6 分钟

2025-08-16

一、HTML 基础

1.1 什么是 HTML？

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它通过一系列标签来描述网页的结构和内容。

1.2 什么是 HTML5？

HTML5 是 HTML 的最新标准版本，于 2014 年正式发布。它不仅改进了 HTML 语法，还增加了许多新特性，使网页开发更加高效和功能丰富。HTML5 的核心目标是：

提供更好的语义化结构
原生支持多媒体
增强 Web 应用能力
提高跨浏览器兼容性

二、HTML 文档结构

2.1 基本文档结构

<!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>
    <!-- 页面内容 -->
</body>
</html>

关键标签说明：

<!DOCTYPE html>：声明文档类型，必须放在最前面
<html>：整个 HTML 文档的根元素
<head>：包含页面的元数据（不会显示在页面上）
<meta charset="UTF-8">：指定字符编码，避免乱码
<meta name="viewport">：移动端适配必备
<title>：浏览器标签页上显示的标题
<body>：页面的主体内容区域

2.2 常用文本标签

标签	用途	说明
`<h1>`-`<h6>`	标题	h1 最重要，h6 最不重要，一个页面建议只有一个 h1
`<p>`	段落	定义文本段落
`<br>`	换行	单标签，强制换行
`<hr>`	水平线	单标签，表示主题分隔
`<div>`	块级容器	无语义的块级容器，用于布局
`<span>`	行内容器	无语义的行内容器，用于文本样式

2.3 文本格式化标签

标签	用途	推荐替代方案
`<b>`	粗体文本	`<strong>` (有语义)
`<i>`	斜体文本	`<em>` (有语义)
`<u>`	下划线文本	CSS 实现
`<s>`/`<del>`	删除线	`<del>` (有语义)
`<sup>`	上标	如：E=mc²
`<sub>`	下标	如：H₂O

语义化建议：

使用 <strong> 代替 <b> 表示"重要"
使用 <em> 代替 <i> 表示"强调"

2.4 特殊字符

HTML 中有些字符有特殊含义，需要使用转义字符：

显示	代码	说明
空格	` `	普通空格会被浏览器忽略
<	`<`	小于号
>	`>`	大于号
&	`&`	和号
©	`©`	版权符号
¥	`¥`	人民币符号

三、常用内容元素

3.1 图像

<img src="image.jpg" alt="图片描述" width="300" height="200">

关键属性：

src：图片路径（必填）
alt：替代文本（非常重要，用于无障碍访问和图片加载失败时显示）
width/height：设置尺寸（可选，但建议设置以避免布局抖动）

3.2 超链接

<a href="https://example.com" target="_blank" title="访问示例网站">访问示例网站</a>

关键属性：

href：链接目标（必填）
target：打开方式（_blank 新窗口，_self 当前窗口）
title：鼠标悬停提示
download：下载链接（<a href="file.pdf" download>下载PDF</a>）

特殊链接：

邮件链接：<a href="mailto:user@example.com">发送邮件</a>
电话链接：<a href="tel:+8613800138000">拨打电话</a>
锚点链接：<a href="#section1">跳转到章节1</a>（需配合<div id="section1">）

3.3 列表

有序列表：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

无序列表：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

定义列表：

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

四、表格与表单

4.1 表格基础

<table border="1">
    <caption>学生信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>高三一班</td>
    </tr>
</table>

常用表格标签：

<table>：表格容器
<caption>：表格标题
<tr>：表格行
<th>：表头单元格（加粗居中）
<td>：普通单元格

合并单元格：

横向合并：<td colspan="2">
纵向合并：<td rowspan="2">

4.2 表单元素

基本结构：

<form action="/submit" method="post">
    <!-- 表单控件 -->
    <input type="submit" value="提交">
</form>

常用输入类型：

类型	代码	用途
文本	`<input type="text" name="username">`	一般文本输入
密码	`<input type="password" name="pwd">`	密码输入
单选	`<input type="radio" name="gender" value="male" id="male">` `<label for="male">男</label>`	二选一或多选一
复选	`<input type="checkbox" name="hobby" value="sports" id="sports">` `<label for="sports">运动</label>`	多选
下拉	`<select name="city">` `<option value="bj">北京</option><br/>` `<option value="sh">上海</option>` `</select>`	选择选项
文本域	`<textarea name="comment" rows="4" cols="50"></textarea>`	多行文本
按钮	`<button type="submit">提交</button>`	操作按钮
表单最佳实践：

始终使用 <label> 关联表单控件
为表单元素添加 name 属性（服务器接收数据用）
使用 required 属性标记必填项
为输入添加适当的 type 以获得移动端优化键盘
上传附件时，必须使用 Multipart/form-data 编码方式

五、HTML5 重要新特性

5.1 语义化标签

HTML5 引入了语义化标签，使文档结构更清晰：

<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <section>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </section>
    </article>
    
    <aside>
        <h3>相关推荐</h3>
        <ul>
            <li><a href="#">相关文章1</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2023 网站名称</p>
</footer>

常用语义标签：

<header>：页眉，通常包含标题和导航
<nav>：导航链接区域
<main>：页面主要内容（每个页面应只有一个）
<article>：独立内容区块（如博客文章）
<section>：文档中的节或段
<aside>：侧边栏内容
<footer>：页脚，通常包含版权信息

5.2 多媒体支持

音频：

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素
</audio>

视频：

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持视频标签
</video>

常用属性：

controls：显示播放控件
autoplay：自动播放（现代浏览器通常限制此功能）
loop：循环播放
muted：静音播放（有助于自动播放）

六、实用技巧与最佳实践

6.1 代码规范

使用小写字母编写标签和属性
为所有属性值添加引号
保持适当的缩进和换行
为图片始终添加 alt 属性
使用语义化标签代替纯 div

6.2 常用全局属性

以下属性适用于几乎所有 HTML 元素：

属性	用途
`id`	元素的唯一标识（页面中必须唯一）
`class`	元素的类名（可多个，用于 CSS 和 JS）
`style`	内联 CSS 样式（不推荐大量使用）
`title`	鼠标悬停提示信息
`data-*`	自定义数据属性（如`data-user-id="123"`）

6.3 移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">