HTML5 入门到精通全章节学习笔记

一、HTML 基础认知

1. 初识 HTML

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准标记语言，不是编程语言，而是标记语言，核心作用是定义网页的结构和内容，而非实现逻辑功能。

核心特点：
- 由一系列标签（Tag）组成，标签通常成对出现（如 <html> 和 </html>），部分为单标签（如 <img>）
- 不区分大小写，推荐使用小写
- 浏览器会解析 HTML 标签，渲染出可视化的网页
网页的本质：HTML（结构）+ CSS（样式）+ JavaScript（行为），HTML 是网页的骨架

2. 网页基本信息

一个标准的 HTML 页面有固定的基础结构，包含网页的核心元信息：

复制代码

<!DOCTYPE html> <!-- 声明文档类型，告诉浏览器这是HTML5文档 -->
<html lang="zh-CN"> <!-- 根标签，lang指定页面语言，zh-CN表示简体中文 -->
<head> <!-- 头部标签，存放页面的元信息，不直接显示在页面中 -->
    <meta charset="UTF-8"> <!-- 声明字符编码，UTF-8支持全球所有语言，避免乱码 -->
    <title>网页标题</title> <!-- 页面标题，显示在浏览器标签栏 -->
    <meta name="keywords" content="关键词"> <!-- 页面关键词，用于SEO优化 -->
    <meta name="description" content="页面描述"> <!-- 页面描述，搜索引擎展示 -->
</head>
<body> <!-- 主体标签，存放页面所有可见内容 -->
    网页内容
</body>
</html>

关键知识点：
- <!DOCTYPE html> 必须写在页面最顶部，用于触发浏览器的标准渲染模式
- <meta charset="UTF-8"> 必须紧跟在 <head> 标签后，否则可能出现中文乱码
- <head> 内的内容不会在浏览器页面中显示，仅用于给浏览器、搜索引擎提供信息

二、HTML 基础标签

1. 网页基本标签

基础标签用于构建网页的文本结构，是最常用的标签：

标题标签：<h1> ~ <h6>，从一级到六级，字号依次减小，h1 一个页面仅建议使用 1 个，用于 SEO
段落标签：<p>，用于定义段落，会自动在段落前后添加间距
换行标签：<br>，单标签，强制换行
水平线标签：<hr>，单标签，插入一条水平线
文本格式化标签：
- 加粗：<strong>（语义化，推荐）/ <b>（仅样式，不推荐）
- 斜体：<em>（语义化，推荐）/ <i>（仅样式，不推荐）
- 删除线：<del>
- 下划线：<ins>
分区标签：<div>（块级元素，用于大区块布局）、<span>（行内元素，用于文本修饰）

2. 图像标签

<img> 是单标签，用于在页面中插入图片，核心属性：

复制代码

<img src="图片路径" alt="图片描述" title="鼠标悬浮提示" width="宽度" height="高度">

核心属性说明：
- src：必填属性，指定图片的路径（相对路径 / 绝对路径）
- alt：必填属性，图片加载失败时显示的替代文本，同时用于 SEO 和无障碍访问
- title：鼠标悬浮在图片上时显示的提示文本
- width/height：设置图片尺寸，只设置一个属性时，另一个会等比例缩放，避免图片变形
路径规则：
- 相对路径：以当前 HTML 文件为基准，./ 表示当前目录，../ 表示上一级目录
- 绝对路径：完整的网络地址（如 https://xxx.com/xxx.jpg）或本地磁盘完整路径

3. 超链接标签及应用

<a> 标签用于定义超链接，实现页面跳转、文件下载等功能，核心属性：

复制代码

<a href="跳转目标" target="打开方式" title="提示文本">链接文本/图片</a>

核心属性说明：
- href：必填属性 ，指定跳转目标
  - 外部链接：直接写完整网址（如 https://www.baidu.com）
  - 内部链接：跳转到本地 HTML 文件（如 index.html）
  - 空链接：#，点击后回到页面顶部
  - 下载链接：指向压缩包、exe 等文件，点击直接下载
  - 锚点链接：#id名，跳转到页面中指定 id 的元素位置
- target：指定链接打开方式
  - _self：默认值，在当前窗口打开
  - _blank：在新窗口打开（推荐外部链接使用）

锚点链接实现：

复制代码

<!-- 1. 定义跳转目标，给元素添加id属性 -->
<h3 id="top">页面顶部</h3>
<!-- 2. 定义超链接，href="#id名" -->
<a href="#top">回到顶部</a>

4. 块元素和行内元素

HTML 元素按显示方式分为两类，核心区别如下：

元素类型	核心特点	常见标签
块级元素	独占一行，可设置宽高，默认宽度 100%	`<div>`、`<p>`、`<h1>`~`<h6>`、`<ul>`、`<ol>`、`<li>`、`<table>`
行内元素	不独占一行，不能设置宽高，宽高由内容决定	`<span>`、`<a>`、`<strong>`、`<em>`、`<i>`
行内块元素	不独占一行，可设置宽高	`<img>`、`<input>`、`<td>`

关键规则：
- 块级元素可以包含行内元素、块级元素（<p>标签不能包含块级元素）
- 行内元素只能包含行内元素，不能包含块级元素
- 可以通过 CSS 的 display 属性修改元素类型（如 display: block 将行内元素转为块级）

5. 列表标签

列表用于展示结构化的条目，分为三类：

无序列表（最常用）：<ul> + <li>，默认带项目符号，用于无顺序的条目
复制代码
```
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>
```
有序列表：<ol> + <li>，默认带数字序号，用于有顺序的条目
复制代码
```
<ol>
    <li>步骤1</li>
    <li>步骤2</li>
</ol>
```

自定义列表：<dl> + <dt> + <dd>，用于术语 + 描述的结构

复制代码

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，网页骨架</dd>
</dl>

核心注意：<ul>/<ol> 直接子元素只能是 <li>，<li> 可以包含任意元素

6. 表格标签

表格用于展示结构化数据，核心标签：

复制代码

<table border="1" width="500" height="300" align="center">
    <tr> <!-- 行标签 -->
        <th>表头1</th> <!-- 表头单元格，加粗居中 -->
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td> <!-- 普通单元格 -->
        <td>单元格2</td>
    </tr>
</table>

核心属性：
- border：表格边框宽度
- width/height：表格宽高
- align：表格在页面的对齐方式
- cellpadding：单元格内边距（内容与边框的距离）
- cellspacing：单元格间距
合并单元格：
- 跨行合并：rowspan="合并行数"，写在要合并的第一个单元格
- 跨列合并：colspan="合并列数"，写在要合并的第一个单元格
- 合并后需要删除被合并的单元格

三、HTML 进阶元素

1. 媒体元素

HTML5 新增了原生的音视频标签，无需插件即可播放：

音频标签 ``：
复制代码
```
<audio src="音频路径" controls autoplay loop muted>
    您的浏览器不支持audio标签
```
- 核心属性：controls（显示播放控件）、autoplay（自动播放，多数浏览器需静音才能生效）、loop（循环播放）、muted（静音）
视频标签 <video>：
复制代码
```
<video src="视频路径" controls width="800" poster="封面图路径">
    您的浏览器不支持video标签
```
- 核心属性：controls（显示播放控件）、width/height（视频尺寸）、poster（视频封面）、autoplay（自动播放，需静音）、loop（循环）

兼容写法：可通过 <source> 标签指定多种格式，适配不同浏览器

复制代码

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持video标签
</video>

2. 页面结构分析

HTML5 新增了语义化结构标签，替代传统的 <div>，让页面结构更清晰，利于 SEO 和无障碍访问：

核心语义化标签：
- <header>：页面头部 / 区域头部
- <nav>：导航栏
- <main>：页面主体内容（一个页面仅一个）
- <section>：页面中的独立区块
- <article>：独立的内容块（如文章、博客）
- <aside>：侧边栏 / 附属内容
- <footer>：页面底部 / 区域底部
语义化优势：
- 代码可读性更高，便于维护
- 搜索引擎更容易理解页面结构，提升 SEO
- 屏幕阅读器等辅助设备能更好地识别页面结构，提升无障碍访问体验

3. iframe 内联框架

<iframe> 用于在当前页面中嵌入另一个 HTML 页面，实现页面嵌套：

复制代码

<iframe src="嵌入页面地址" width="800" height="600" frameborder="0" name="iframeName"></iframe>

核心属性：
- src：嵌入页面的地址
- width/height：框架尺寸
- frameborder：框架边框，0 表示无边框
- name：框架名称，可配合 <a> 标签的 target 属性，在 iframe 中打开链接
注意事项：
- 现代网页中 iframe 使用较少，存在安全风险、加载性能问题
- 多数网站会禁止被 iframe 嵌套（通过 X-Frame-Options 响应头）

四、HTML 表单

表单是用户与网页交互的核心，用于收集用户输入，核心标签 <form>：

1. 初识表单 post 和 get 提交

<form> 标签用于定义表单，核心属性：

复制代码

<form action="后端接口地址" method="提交方式" name="表单名">
    表单元素
</form>

核心属性：
- action：指定表单数据提交的后端接口地址，不写则提交到当前页面
- method：指定数据提交方式，常用 GET 和 POST
  - GET：数据拼接在 URL 中，长度有限制（约 2KB），不安全，用于查询类请求
  - POST：数据放在请求体中，长度无限制，更安全，用于提交、修改类请求
- name：表单名称，用于 JavaScript 操作表单
表单提交原理：用户点击提交按钮后，浏览器将表单中 name 属性对应的 value 值，打包发送到后端接口

2. 文本框和单选框

表单输入元素的核心是 <input> 标签，通过 type 属性区分类型：

文本框：type="text"，用于输入单行文本
复制代码
```
<input type="text" name="username" placeholder="请输入用户名" maxlength="16">
```
- 核心属性：name（后端接收的参数名）、value（默认值）、placeholder（提示文本）、maxlength（最大输入长度）

密码框：type="password"，输入内容隐藏

复制代码

<input type="password" name="pwd" placeholder="请输入密码">

单选框：type="radio"，用于多选一
复制代码
```
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
```
- 核心注意：同一组单选框的 name 属性必须相同，才能实现多选一
- checked：默认选中项

3. 按钮和多选框

多选框（复选框）：type="checkbox"，用于多选
复制代码
```
<input type="checkbox" name="hobby" value="read" checked> 阅读
<input type="checkbox" name="hobby" value="game"> 游戏
```
- 核心注意：同一组多选框的 name 属性相同，后端会接收数组形式的数据
- checked：默认选中项
按钮类型：
- 普通按钮：type="button"，配合 JavaScript 实现自定义功能
  复制代码
```
<input type="button" value="点击我" onclick="alert('Hello')">
```
- 提交按钮：type="submit"，点击后触发表单提交
  复制代码
```
<input type="submit" value="提交">
```
- 重置按钮：type="reset"，点击后重置表单所有输入
  复制代码
```
<input type="reset" value="重置">
```
- 图片按钮：type="image"，用图片作为提交按钮
  复制代码
```
<input type="image" src="btn.png" alt="提交">
```
<button> 标签：功能与 <input> 按钮一致，可包裹内容，样式更灵活
复制代码
```
<button type="submit">提交表单</button>
```

4. 列表框文本域和文件域

下拉列表框：<select> + <option>，用于下拉选择
复制代码
```
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option> 
</select>
```
- 核心属性：multiple（多选，需按住 Ctrl/Command）、size（显示的选项数量）
文本域：<textarea>，用于输入多行文本（如留言、简介）
复制代码
```
<textarea name="intro" rows="10" cols="30" placeholder="请输入简介"></textarea>
```
- 核心属性：rows（行数）、cols（列数），实际开发中用 CSS 设置宽高
文件域：type="file"，用于上传文件
复制代码
```
<input type="file" name="file" accept="image/*">
```
- 核心属性：accept（限制上传文件类型，如 image/* 仅图片）、multiple（多文件上传）
- 注意：表单上传文件时，form 标签必须添加 enctype="multipart/form-data" 属性

5. 搜索框滑块和简单验证

HTML5 新增了多种 <input> 类型，实现原生的表单控件和验证：

新增输入类型：
- type="search"：搜索框，移动端会弹出搜索键盘
- type="number"：数字输入框，仅允许输入数字，可配合 min/max/step 限制范围
  复制代码
```
<input type="number" name="age" min="1" max="100" step="1">
```
- type="range"：滑块控件，用于选择范围内的值
  复制代码
```
<input type="range" name="volume" min="0" max="100" step="1">
```
- type="date"/month/week/time/datetime-local：日期时间选择器
- type="color"：颜色选择器
- type="email"/url/tel：邮箱、网址、电话输入框，浏览器会自动验证格式
原生表单验证属性：
- required：必填项，提交时验证非空
- pattern：自定义正则表达式验证（如手机号、身份证）
  复制代码
```
<input type="tel" name="phone" pattern="1[3-9]\d{9}" required>
```
- min/max：限制数值 / 日期的范围
- maxlength：限制最大输入长度

6. 表单的应用

表单的实际应用中，需要结合标签、布局、交互优化用户体验：

<label> 标签：用于绑定表单元素，点击标签即可聚焦对应输入框，提升交互体验

复制代码

<!-- 方式1：for属性绑定id -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<!-- 方式2：直接包裹 -->
<label>
    <input type="radio" name="gender" value="male"> 男
</label>

表单分组：<fieldset> + <legend>，用于给表单元素分组，提升可读性

复制代码

<fieldset>
    <legend>个人信息</legend>
    <input type="text" name="username">
</fieldset>

表单布局：结合 <div>、CSS 实现美观的表单样式，是实际开发的核心

7. 表单初级验证

表单验证分为前端验证 和后端验证，前端验证用于提升用户体验，后端验证用于保证数据安全（前端验证可被绕过，必须做后端验证）：

前端验证方式：

HTML5 原生验证：通过 required、pattern、type 等属性实现，无需 JavaScript

JavaScript 自定义验证：通过监听表单提交事件，编写自定义验证逻辑

复制代码

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    const username = document.querySelector('[name="username"]').value;
    if (username.length < 6) {
        alert('用户名长度不能少于6位');
        e.preventDefault(); // 阻止表单提交
    }
})

验证原则：
- 前端验证是 "锦上添花"，仅用于提升体验，不能替代后端验证
- 所有敏感数据、业务规则必须在后端二次验证，防止恶意请求

五、HTML 总结

1. HTML 核心知识点梳理

HTML 是网页的结构骨架，核心是标签，通过标签定义页面内容
页面基础结构：<!DOCTYPE html> → <html> → <head>（元信息）+ <body>（可见内容）
常用标签分类：
- 结构标签：<div>、<span>、语义化标签
- 文本标签：标题、段落、格式化标签
- 媒体标签：<img>、``、<video>
- 链接标签：<a>
- 列表标签：<ul>/<ol>/<dl>
- 表格标签：<table>
- 表单标签：<form>、<input>、<select>、<textarea>
核心概念：块级元素 / 行内元素、路径、表单提交、语义化

2. HTML 学习与开发建议

语义化优先 ：尽量使用 HTML5 语义化标签，替代无意义的 <div>，提升代码质量和 SEO
结构与样式分离 ：HTML 仅负责结构，样式交给 CSS，避免在标签中写大量 style 属性
兼容性处理：针对不同浏览器的差异，做兼容处理（如 IE 浏览器的 H5 标签兼容）
表单安全：前端验证仅做体验优化，必须做后端验证，防止恶意攻击
持续学习：HTML5 标准持续更新，关注新特性（如 Web Components、新表单控件）

3. 后续学习方向

CSS：学习 CSS 样式、布局，美化 HTML 页面
JavaScript：学习 JS 实现网页交互、动态效果
前端框架：学习 Vue、React 等框架，提升开发效率
后端知识：了解表单数据的后端处理，实现完整的前后端交互