前置基础知识-HTML

一、HTML基础概念：认识网页的”构建语言“

1.1 什么是HTML？

HTML，即 HyperText Markup Language（超文本标记语言），是用于创建网页的标准标记语言。它并非编程语言（无法实现逻辑运算、循环等动态功能），而是通过一系列预定义的"标签"，来描述网页的结构、内容类型与展示方式，例如定义标题、段落、图片、链接等元素。

超文本（HyperText）：突破普通文本的局限，可包含链接（实现页面跳转）、图片、音频、视频等多媒体内容，构建起网页间的关联网络。
标记语言（Markup Language）：以 <标签名> 的形式对内容进行"标记"，告知浏览器内容的类型与用途。浏览器会根据这些标签的规则，将代码解析为用户可见的网页界面。

可以通过https://www.runoob.com/html/html-tutorial.html进行在线的练习

1.2 HTML 文档的基本结构

所有 HTML 文档都遵循固定的结构框架，浏览器会按照该结构自上而下解析内容。下面从"最小化 HTML 文档"入手，理解其核心组成部分：

<!DOCTYPE html>  <!-- 1. 文档类型声明：指定为 HTML5 文档 -->
<html lang="zh-CN">  <!-- 2. 根标签：整个文档的容器，lang 定义页面语言为中文 -->
  <head>  <!-- 3. 头部：存放文档元信息（不直接显示在页面可视区域） -->
    <meta charset="UTF-8">  <!-- 3.1 字符编码：确保中文等字符正常显示，避免乱码 -->
    <title>HTML 基础结构示例</title>  <!-- 3.3 网页标题：显示在浏览器标签栏 -->
  </head>
  <body>  <!-- 4. 主体：存放网页所有可见内容（文字、图片、按钮等） -->
    <!-- 这里是网页的可视内容 -->
    <h1>这是页面的一级标题</h1>
    <p>这是一个段落，用于展示网页的基本文本内容。</p>
  </body>
</html>

核心结构说明表

标签 / 声明	作用与重要性
`<!DOCTYPE html>`	必须放在文档第一行，声明文档类型为 HTML5，避免浏览器使用"兼容模式"解析导致样式错乱
`<html>`	根标签，所有其他 HTML 标签都必须嵌套在 `<html>` 内部，是文档的顶层容器
`<head>`	存放"元信息"，如字符编码、网页标题、CSS 样式引用、JavaScript 脚本引用等，不直接显示
`<meta charset="UTF-8">`	核心元标签！指定文档使用 UTF-8 字符编码，支持全球所有语言字符，是避免中文乱码的关键
`<title>`	定义网页标题，显示在浏览器标签栏，影响用户识别与搜索引擎优化（SEO）
`<body>`	网页的"可视区域"，用户能看到的所有内容（文字、图片、链接、表单等）都在此定义

二、HTML 常用标签：构建网页的"基本零件"

HTML 标签是网页内容的"基本零件"，不同标签对应不同功能。以下按类别讲解网络安全学习中高频用到的常用标签，每个类别均配套基础实验。

2.1 基本文本标签：定义文字内容与格式

基本文本标签用于组织网页中的文字内容，明确文字的层级（如标题、段落）与格式（如加粗、斜体）。

常用基本文本标签表

标签	作用	示例代码	说明
`<h1>`~`<h6>`	标题标签（1-6 级）	`<h1>一级标题（最大、权重最高）</h1>`	`<h1>` 通常用于页面主标题（1 个页面建议只写 1 个），级别越低（如 `<h6>`）文字越小
`<p>`	段落标签	`<p>这是一个段落，浏览器会自动为段落添加上下间距，且段落内文字会自动换行。</p>`	用于包裹大段文本，区分不同内容块
`<strong>`	加粗文本（强调重要性）	`<p>网络安全学习中，<strong>HTML基础</strong>是核心前置知识。</p>`	语义上表示"重要内容"，视觉效果为加粗，比 `<b>` 标签更具语义性
`<em>`	斜体文本（强调重点）	`<p>学习时需重点关注 <em>表单标签</em> 的安全风险。</p>`	语义上表示"强调内容"，视觉效果为斜体，比 `<i>` 标签更具语义性
`<br>`	强制换行标签	`<p>第一行文字<br>第二行文字（无需另起段落）</p>`	单标签（无需闭合），用于在段落内强制换行，不添加上下间距
`<hr>`	水平线标签	`<h3>学习目标</h3><hr><p>掌握HTML基础标签...</p>`	单标签，插入一条水平线，用于分割不同内容区域

2.2 style 只要是 HTML 元素，就能写 `style` 属性，美化界面

1.怎么写

<h1 style="color:red; font-size:32px;">标题</h1>
<p style="text-indent:2em; line-height:1.8;">段落</p>
<strong style="background:yellow;">加粗</strong>
<br style="clear:both;">   <!-- 甚至单标签也能写 -->
<hr style="border:1px dashed #ccc;">

2. `style` 里到底能放什么

值是 “一条或多条 CSS 声明”，格式永远相同：

style="属性1:值1; 属性2:值2; …"

常用且适合新手的“属性清单”

类别	可写属性	示例值	备注
文字颜色	`color`	`red`、`#e33`、`rgb(255,0,0)`	三选一写法
字号	`font-size`	`16px`、`1.2rem`、`120%`	单位别丢
字重	`font-weight`	`bold`、`normal`、`700`	数字 100~900
字体	`font-family`	`"Microsoft YaHei", Arial`	中文名加引号
斜体	`font-style`	`italic`、`normal`
行高	`line-height`	`1.5`、`24px`	无单位表示倍数
水平对齐	`text-align`	`left`、`center`、`right`	左中右
垂直对齐	`vertical-align`	`top`、`middle`、`bottom`	高中低
缩进	`text-indent`	`2em`、`20px`	段落首行
装饰线	`text-decoration`	`underline`、`line-through`	下划、删除线
背景色	`background` / `background-color`	`yellow`、`#ff0`
边框	`border`	`1px solid #000`	三要素：宽型色， 1px的黑色实线
内边距	`padding`	`10px`、`5px 10px`	上右下左
外边距	`margin`	同上	负值也允许
圆角	`border-radius`	`4px`、`50%`
宽度	`width`	`200px`、`50%`	块级才生效
高度	`height`	`100px`
显示方式	`display`	`block`、`inline-block`、`none`	换行/隐藏
阴影	`box-shadow`	`2px 2px 4px #999`
换行	`white-space`	`nowrap`、`pre-wrap`

任何合法 CSS 属性都能往里塞，语法与独立 .css 文件完全一致，只是作用范围仅对当前元素生效（行内样式优先级最高）。

基础实验 1：用VS Code创建第一个 HTML 文档并使用行内样式美化

实验目标

掌握 HTML 文档的基本结构；能独立创建简单页面并在浏览器预览；
用行内 style 给文字加颜色、改字号、设对齐方式。

实验要求

准备工具

安装并打开 VS Code（或 Sublime Text）。
新建文件，写出最简 HTML5 骨架。
<head> 内必须包含：
- 指定网页的字符编码为 UTF-8
- 网页标题为：我的第一个 HTML 页面
<body> 内必须包含下列 3 个元素，并按指定样式写行内 style：
- 一个一级标题：文字自拟，要求 红色、居中、字号 32 px
- 一个二级标题：文字自拟，要求 字号 20 px、右对齐
- 一个段落：文字自拟，要求 字号 18 px、颜色 #0066cc
文件保存为 test1.html`（UTF-8 编码），双击浏览器打开，确认颜色、字号、对齐均生效。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 HTML 页面</title>
</head>
<body>
  <!-- 红色、居中、大字 -->
  <h1 style="color:red; text-align:center; font-size:32px;">一级标题示例</h1>

  <!-- 20px、右对齐 -->
  <h2 style="font-size:20px; text-align:right;">二级标题：我的学习目标</h2>

  <!-- 18px、蓝色 -->
  <p style="font-size:18px; color:blue;">在这里写下你的学习目标……</p>
</body>
</html>

实验思考（原题不变）

删除 <meta charset="UTF-8"> 后刷新页面，可能出现什么问题？为什么？
把 <h1> 换成 <h6> 后，文字大小和权重有何变化？

3. 小提醒

行内 style 适合快速测试或极个别特殊元素；正式项目请移步外部样式表，方便维护。
单标签（<br>、<hr>、<img>）也能写，但只能改自身外观，不会包裹文字。

“外部样式表” = 把 CSS 单独写进一个 .css 文件，再让 HTML 去“引用”它。

好处：一份样式可给无数页面用，一改全站变，代码清爽。

2.3 CSS速成

1. 三步速成

① 新建文件

项目目录里新建 style.css（文件名随意，后缀必须是 .css）。

② 写样式（语法与行内 style 相同，只是去掉引号）

/* ===== ID 选择器 ===== */
#page-title {
    color: #c00;
    text-align: center;
}

/* ===== 类选择器 ===== */
.main-text {
    line-height: 1.8;
    text-indent: 2em;
}

.highlight {
    background: yellow;
}

/* ===== 保留原全局样式 ===== */
body {
    margin: 0;
    font-family: "Microsoft YaHei", Arial;
    background: #f5f5f5;
}

③ 在 HTML 里“链接”它

把下面这行扔在 <head> 里即可（href 写相对路径）：

<link rel="stylesheet" href="style.css">

完整最小可运行示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>外部样式表演示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="page-title">Hello 外部样式</h1>
    <p class="main-text">这段文字受 style.css 控制，<strong class="highlight">高亮</strong>样式也来自 CSS。</p>
</body>
</html>

双击 css_style.html` → 效果已生效。

2. CSS 语法口诀（3 句话）

选择器 { 属性1: 值1; 属性2: 值2; }

选择器：告诉浏览器“样式给谁用”
- 标签选择器：h1 { ... }
- 类选择器：.box { ... }（HTML 对应 class="box"）
- ID 选择器：#nav { ... }（HTML 对应 id="nav"）
花括号里任意放“属性:值;”列表，与行内 style 完全一致。
注释写法：/* 注释内容 */

3. 路径怎么写

场景	href 示例
css 与 html 在同一目录	`href="style.css"`
css 在子文件夹 css/	`href="css/style.css"`
css 在上一级目录	`href="../style.css"`
使用绝对路径（少见）	`href="/assets/style.css"`

4. 一个页面可链多个 CSS

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="color.css">

后加载的优先级更高，可用来分层管理。

5.CSS 优先级口诀（从高到低）：

行内样式（style=""） >
#ID 选择器 >
.类/伪类/属性 选择器 >
元素/伪元素 选择器 >
浏览器默认样式

同一条规则在同一来源里出现多次时，“后写的”覆盖“先写的”（下面的优先）。

因此：

如果 style.css 里先写 p{color:red} 再写 p{color:blue}，最终文字是蓝色。
如果 index.html 里仍保留行内 style="color:red"，不管外链/内联怎么写，都以行内样式为准（红色）。

6. 调试小技巧

F12 → Elements → 右侧 Styles 面板能看到哪条规则生效、来自哪个文件。
改数值后实时预览，确认无误再复制回 .css 保存。

基础实验 2：给“实验 1”页面穿上“外链 CSS”外套

实验目标

把实验 1 的“行内 style”全部迁移到独立 .css 文件，体验“一处改、全站变”的维护优势。
掌握 <link> 标签引用外部样式表的正确写法与路径规则。
熟练使用“标签 + 类 + ID”三种选择器。

实验要求

沿用实验 1 的 test1.html → 复制一份并改名为 test2.html。
在项目根目录新建 style.css（与 test2.html 同级）。
把实验 1 里写过的 3 条行内样式“搬”到 style.css 中，规则如下：
- 一级标题：红色、居中、字号 32 px → 用 ID 选择器 #mainTitle
- 二级标题：字号 20 px、右对齐 → 用 类选择器 .subTitle
- 段落：字号 18 px、颜色 #0066cc → 用 标签选择器 p（影响全部段落）
删除 test2.html 里所有行内 style=""，改为用 id 或 class 调用对应样式。
在 <head> 末尾加入 <link rel="stylesheet" href="style.css"> 完成外链。

示例代码

文件① test2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 HTML 页面</title>
  <!-- ① 外链 CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ② 用 id 调用主标题样式 -->
  <h1 id="mainTitle">欢迎来到我的第一个网页</h1>

  <!-- ③ 用 class 调用副标题样式 -->
  <h2 class="subTitle">实验 2：把样式搬到外部文件</h2>

  <!-- ④ 用标签选择器自动匹配 -->
  <p>这段文字通过外部 style.css 设置字号 18 px、颜色 #0066cc，一改全站变！</p>
</body>
</html>

文件② style.css （与 test2.html 放在同一目录）

/* ===== ① ID 选择器：主标题 ===== */
#mainTitle {
    color: red;
    text-align: center;
    font-size: 32px;
}

/* ===== ② 类选择器：副标题 ===== */
.subTitle {
    font-size: 20px;
    text-align: right;
}

/* ===== ③ 标签选择器：所有段落 ===== */
p {
    font-size: 18px;
    color: #0066cc;
}

/* ===== ④ 可选彩蛋：给整个页面加个淡蓝背景 ===== */
body {
    background-color: #f0f5ff;
    margin: 0;
    padding: 20px;
    font-family: "Microsoft YaHei", Arial;
}

实验思考

把 href="style.css" 故意写成 href="css/style.css" 后刷新，观察现象并解释原因。
在 style.css 最底部再加一条 body { background-color:#e9f0ff; }，优先级会覆盖行内样式吗？为什么？
再新建 about.html，同样链接 style.css，看两份网页能否共享同一样式。

2.2 图片标签 `<img>`：嵌入图像内容

图片标签 <img> 是单标签（无需闭合），用于在网页中插入本地图片或网络图片，是"图片马""图片钓鱼"等攻击的常见载体，需重点掌握。

基本语法

<img src="图片路径" alt="图片加载失败时的提示文字" width="图片宽度" height="图片高度" title="鼠标悬浮时的提示文字">

核心属性说明

属性	作用	取值示例	安全注意点
`src`	必选属性，指定图片的"路径"（本地路径或网络 URL）	1. 本地图片：`src="images/photo.jpg"`（图片需放在 `images` 文件夹中，与 HTML 文件同级） 2. 网络图片：`src="https://example.com/photo.jpg"`	风险点：若 `src` 被篡改（如指向恶意图片马），可能导致服务器被入侵；若指向不存在的路径，图片会加载失败
`alt`	必选属性，图片加载失败时显示的提示文字（无障碍访问必备）	`alt="校园风景图"`	无图片时，用户可通过 `alt` 文字了解图片内容，避免信息缺失
`width/height`	可选属性，设置图片宽度 / 高度（单位：像素 `px` 或百分比 `%`）	`width="500"`（仅设宽度，高度会按比例自动调整）或 `width="50%"`（占父容器宽度的 50%）	建议只设置一个属性（如仅设 `width`），避免图片拉伸变形
`title`	可选属性，鼠标悬浮在图片上时显示的提示文字	`title="点击查看大图"`	用于补充图片信息，提升用户体验

2.3 超链接标签 `<a>`：实现页面跳转

超链接标签 <a> 是网页间跳转的核心，也是 XSS 攻击、钓鱼攻击的高频利用点，必须熟练掌握其语法与安全注意事项。

基本语法

<a href="目标地址" target="打开方式" rel="安全属性">链接显示文本/图片</a>

核心属性说明

属性	作用	取值示例	安全注意点
`href`	必选属性，指定链接的"目标地址"	1. 外部网页：`href="https://www.baidu.com"` 2. 本地页面：`href="page2.html"`（需与当前页面同级） 3. 锚点跳转：`href="#top"`（跳转到页面中 `id="top"` 的标签位置） 4. 邮箱链接：`href="mailto:test@example.com"`	高危风险点！若 `href` 被注入恶意代码（如 `href="javascript:alert('XSS测试')"`），可能触发 XSS 攻击；若指向钓鱼网站，会诱导用户泄露信息
`target`	可选属性，设置链接的打开方式	1. `_self`：默认值，在当前窗口打开链接 2. `_blank`：在新窗口打开链接 3. `_parent`/`_top`：用于框架页面（较少用）	若用 `_blank` 打开外部链接，必须添加 `rel="noopener noreferrer"`，防止恶意页面通过 `window.opener` 劫持当前窗口
`rel`	可选属性，定义当前页面与目标页面的关系，主要用于安全加固	`rel="noopener noreferrer"`	搭配 `target="_blank"` 使用，切断新窗口与原窗口的关联，防止窗口劫持

安全示例：外部链接的安全写法

<!-- 安全的外部链接：新窗口打开+防止劫持 -->
<a href="https://www.zhihu.com" target="_blank" rel="noopener noreferrer">知乎（新窗口打开）</a>

基础实验 3：图片 & 超链接综合实战

实验目标

正确插入本地图片与网络图片，能使用 width/height/alt/title 属性并知悉安全风险。
能写出 3 类超链接：外部网页、本地页面、锚点跳转，并主动加 rel="noopener noreferrer" 防劫持。
体验“图片即链接”的常用做法，理解 javascript: 伪协议的危害。

实验要求

环境准备
- 用实验 1 的文件夹，新建 test3.html 。
- 在同目录放 1 张本地图 pic.jpg；再新建空白页 page2.html（内容任意）。
图片区（<img> 必做 3 项）

① 本地图：<img> 仅设 width="300"，保留原始比例；alt 写“校园风景”。

② 网络图：调用 https://picsum.photos/400/300；alt 写“随机网络图”。

③ 把①的图用 <a> 包起来，点击后在新窗口跳到 https://www.baidu.com；记得加安全属性。
链接区（<a> 必做 3 项）

① 外部链接：文字“去百度”；target="_blank"；必须带 rel="noopener noreferrer"。

② 本地链接：文字“跳到第二页”；href="page2.html"；默认 _self。

③ 锚点链接：顶部放 <div id="top"></div>，底部放“回到顶部”。
可选挑战
- 新建一段代码 <a href="javascript:alert('XSS')">点我</a>，测试点击效果，并记录控制台行为。
文件保存 test3.html + page2.html + pic.jpg 放同一目录，双击 test3.html 验收。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片与链接实验</title>
</head>
<body>
  <div id="top"></div>
  <h1>图片与超链接实验</h1>

  <!-- 本地图片当链接 -->
  <a href="https://baidu.com" target="_blank" rel="noopener noreferrer">
    <img src="pic.jpg" alt="校园风景" width="300">
  </a>

  <!-- 网络图片 -->
  <img src="https://picsum.photos/400/300" alt="随机网络图">

  <!-- 三种链接 -->
  <p>
    <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">去百度</a>
  </p>
  <p>
    <a href="page2.html">跳到第二页</a>
  </p>
  <p>
    <a href="#top">回到顶部</a>
  </p>
  <p><a href="javascript:alert('XSS测试')">危险链接（别在生产环境用）</a></p>
</body>
</html>

实验思考

把 <img> 同时固定 width="300" height="500"，且原图比例 4:3，会出现什么变形？如何避免？
去掉外部链接的 rel="noopener noreferrer" 后，恶意目标页可通过什么对象对当前页做“窗口劫持”？

2.4 列表标签：组织有序 / 无序内容

列表标签用于将多个相关内容（如步骤、分类、要点）以"列表"形式展示，分为"无序列表"和"有序列表"，是网页中常见的内容组织方式。

1. 无序列表 `<ul>`：内容无先后顺序

用"项目符号"（如圆点、方块）标记每个列表项，适用于无先后顺序的内容（如"学习重点""功能列表"）。

基本语法：

<ul type="项目符号类型">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

type 可选属性：disc（默认，实心圆点）、circle（空心圆点）、square（实心方块）；
注意：<li>（list item）是"列表项标签"，必须嵌套在 <ul> 或 <ol> 内部，不能单独使用。

2. 有序列表 `<ol>`：内容有先后顺序

用"数字 / 字母"标记每个列表项，适用于有先后顺序的内容（如"实验步骤""排名"）。

基本语法：

<ol type="序号类型" start="起始序号">
  <li>第一步：准备工具</li>
  <li>第二步：编写代码</li>
  <li>第三步：测试效果</li>
</ol>

type 可选属性：1（默认，数字）、A（大写字母）、a（小写字母）、I（大写罗马数字）、i（小写罗马数字）；
start 可选属性：设置序号的起始值（如 start="3"，序号从 3 开始）。

基础实验：创建有序 / 无序列表（可选）

实验目标

掌握 <ul> 和 <ol> 标签的使用，能根据内容需求选择合适的列表类型。

实验步骤

创建无序列表：在 <body> 中添加 <ul> 标签，type 设为 square，列表项为"HTML 基础标签""图片标签""超链接标签""表单标签"；
创建有序列表：在无序列表下方添加 <ol> 标签，type 设为 A，start 设为 2，列表项为"学习 HTML 常用标签""完成基础实验""分析标签安全风险"；
预览与调整：打开 HTML 文件，查看列表样式是否正确（无序列表为方块符号，有序列表从 B 开始）；尝试修改 type 和 start 的值，观察列表变化。

实验思考

若在 <ul> 标签内部直接写文字（不嵌套 <li>），浏览器会如何解析？为什么？

2.5 表格标签：展示结构化数据

表格标签用于将数据以"行 + 列"的结构化形式展示（如成绩表、产品信息表），在后台管理系统、数据统计页面中广泛应用，也可能因代码不规范导致数据泄露风险。HTML 表格通过 <table>（表格容器）、<tr>（行）、<td>（单元格）等标签组合实现。

核心标签与语法

一个完整的表格由"表格容器 + 行 + 单元格"组成，复杂表格还可包含"表头""表格标题""表格分区"：

<table border="1" width="500" align="center">
  <!-- 表格标题（可选）：位于表格上方，居中显示 -->
  <caption>HTML 常用标签汇总表</caption>
  <!-- 表头（可选）：用于定义列标题，文字默认加粗居中 -->
  <thead>
    <tr>
      <th>标签名称</th>
      <th>功能描述</th>
      <th>安全风险等级</th>
    </tr>
  </thead>
  <!-- 表格主体（必选）：存放表格核心数据 -->
  <tbody>
    <tr>
      <td>&lt;img&gt;</td>
      <td>插入图片</td>
      <td>中（可能被用于图片马）</td>
    </tr>
    <tr>
      <td>&lt;a&gt;</td>
      <td>创建超链接</td>
      <td>高（可能被用于XSS、钓鱼）</td>
    </tr>
    <tr>
      <td>&lt;form&gt;</td>
      <td>创建表单</td>
      <td>高（可能被用于CSRF、数据窃取）</td>
    </tr>
  </tbody>
  <!-- 表格底部（可选）：存放汇总信息（如合计、备注） -->
  <tfoot>
    <tr>
      <td colspan="3">注：标红标签需重点关注安全风险</td>
    </tr>
  </tfoot>
</table>

核心标签与属性说明

标签 / 属性	作用	取值示例	注意事项
`<table>`	表格容器标签：所有表格内容必须嵌套在 `<table>` 内部	`<table border="1" width="600">`	常用属性：`border`（表格边框宽度，默认 0）、`width`（表格宽度）、`align`（表格对齐方式：left/center/right）
`<caption>`	表格标题标签：位于 `<table>` 内部最上方，用于描述表格用途	`<caption>学生成绩表</caption>`	一个表格只能有一个 `<caption>`，文字默认居中显示
`<tr>`	表格行标签：定义表格的"一行"，嵌套在 `<thead>/<tbody>/<tfoot>` 内部	`<tr align="center">`	常用属性：`align`（行内文字对齐方式）、`bgcolor`（行背景色，不推荐使用，后续用 CSS 替代）
`<th>`	表头单元格标签：定义"列标题"，嵌套在 `<tr>` 内部	`<th>标签名称</th>`	文字默认加粗居中，与 `<td>` 区别：`<th>` 用于标题，`<td>` 用于数据
`<td>`	数据单元格标签：定义"数据单元格"，嵌套在 `<tr>` 内部	`<td colspan="2">合计</td>`	常用属性：`colspan`（跨列合并单元格，如 `colspan="2"` 表示跨 2 列）、`rowspan`（跨行合并单元格，如 `rowspan="3"` 表示跨 3 行）
`<thead>/<tbody>/<tfoot>`	表格分区标签：将表格分为"表头、主体、底部"，用于结构化管理表格内容	-	即使不写，浏览器也会默认生成 `<tbody>`，但建议显式声明，便于后续 CSS 样式控制和 JavaScript 操作

属性	全称含义	作用	举例	视觉效果
`colspan`	column span（跨列）	让单元格横向占 N 列	`colspan="2"`	把原本相邻的 2 列合并成 1 个大格
`rowspan`	row span（跨行）	让单元格纵向占 N 行	`rowspan="3"`	把原本上下相邻的 3 行合并成 1 个大格

结构化表格CSS常用

完整示例：

table {
  border-collapse: collapse;
  width: 500px;
  margin: 0 auto;
}

th, td {
  text-align: center;   /* 单元格文字左右居中 */
  vertical-align: middle; /* 单元格文字上下居中 */
  padding: 6px; /* 让文字与边框留点距离，更好看 */
}

这样整个表格的单元格内容（不论是表头 th 还是数据 td）都会水平 + 垂直居中。

基础实验：创建结构化表格（可选）

实验目标

掌握表格标签的组合使用，能创建包含"表头、主体、标题"的结构化表格，并实现单元格合并。

实验步骤

明确表格需求：创建"网络安全学习进度表"，包含列："阶段""学习内容""预计耗时""完成状态"，共 3 行数据，最后一行添加"备注"（跨 4 列）；
编写代码：

<style>
  table, th, td {
    border: 1px solid #000;   /* 顺便把边框颜色也带上 */
    text-align: center;       /* 水平居中 */
    vertical-align: middle;   /* 垂直居中 */
  }
</style>
<table border="1" width="700" align="center">
  <caption>网络安全学习进度表</caption>
  <thead>
    <tr>
      <th>阶段</th>
      <th>学习内容</th>
      <th>预计耗时</th>
      <th>完成状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>第一阶段</td>
      <td>HTML基础</td>
      <td>2天</td>
      <td>未完成</td>
    </tr>
    <tr>
      <td>第二阶段</td>
      <td>CSS与JavaScript基础</td>
      <td>3天</td>
      <td>未开始</td>
    </tr>
    <tr>
      <td>第三阶段</td>
      <td>XSS攻击原理与防御</td>
      <td>4天</td>
      <td>未开始</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">备注：每天学习时长建议不少于2小时</td>
    </tr>
  </tfoot>
</table>

预览与调整：打开 HTML 文件，查看表格是否完整显示（边框、对齐、单元格合并是否正确）；尝试添加 rowspan 属性（如将"未完成""未开始"所在单元格合并），观察表格变化。

实验思考

若表格数据量很大（如 100 行），不使用 <thead>/<tbody>/<tfoot> 分区，会对后续维护（如用 JavaScript 筛选数据）造成什么影响？
当 <td> 同时设置 colspan 和 rowspan 时，需要注意什么？（如 colspan="2" rowspan="3"）

基础实验 4：列表与表格综合实验

实验目标

会用 <ul>、<ol> 组织无/有序内容
会用完整表格标签 <table><thead><tbody><tfoot> 展示结构化数据，并掌握 colspan/rowspan 合并单元格
体验“同一样式表”控制多种元素：列表符号、表格边框、文字对齐全部写进 style.css

实验要求

文件准备
- 沿用前面文件夹，新建 test4.html`
- 同级准备 test4-style.css（后面统一写样式）
列表区（<body> 内顺序不限）

① 无序列表：<ul type="disc"> 列出 4 个“前端基础标签名” ② 有序列表：<ol type="A" start="3"> 列出 3 条“学习步骤”
表格区 ③ 创建“课程进度表”：列标题“阶段、内容、天数、状态”共 4 列；数据 ≥ 3 行

④ 表尾合并：用 <tfoot><td colspan="4"> 写一句“备注：每天学习 2 小时”

⑤ 给表格加 width="600"、border="1"、align="center"（先用 html 属性，后再用 css 重绘）
样式统一（style.css）
- 无序列表符号改为实心方块（ list-style-type: square;）
- 有序列表type改为罗马数字（ list-style-type: upper-roman; ）
- 表格文字居中、合并边框（border-collapse: collapse）、表头加背景 #eef、表尾文字加粗——全部用外部 CSS 实现

示例代码

test4.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>列表与表格综合实验</title>
  <link rel="stylesheet" href="test4-style.css">
</head>
<body>
  <h1>前端基础进度一览</h1>

  <!-- ① 无序列表：默认 disc，后面 CSS 改成 square -->
  <h2>重点标签清单（无序）</h2>
  <ul>
    <li>img</li>
    <li>a</li>
    <li>table</li>
    <li>form</li>
  </ul>

  <!-- ② 有序列表：type="A" start="3"，后面 CSS 改成罗马数字 -->
  <h2>学习步骤（有序）</h2>
  <ol type="A" start="3">
    <li>掌握 HTML 结构</li>
    <li>完成列表实验</li>
    <li>完成表格实验</li>
  </ol>

  <!-- ③④⑤ 表格区 -->
  <h2>课程进度表</h2>
  <table width="600" border="1" align="center">
    <caption>网络安全学习进度</caption>
    <thead>
      <tr>
        <th>阶段</th>
        <th>内容</th>
        <th>天数</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>HTML 基础</td>
        <td>2</td>
        <td>已完成</td>
      </tr>
      <tr>
        <td>2</td>
        <td>CSS 入门</td>
        <td>3</td>
        <td>进行中</td>
      </tr>
      <tr>
        <td>3</td>
        <td>JS 基础</td>
        <td>4</td>
        <td>未开始</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">备注：每天学习 2 小时</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

test4-style.css

/* ① 无序列表符号 → 实心方块 */
ul {
  list-style-type: square;
}

/* ② 有序列表符号 → 罗马数字（覆盖 html type="A"） */
ol {
  list-style-type: upper-roman;
}

/* ③ 表格统一美化 */
table {
  text-align: center;   /* 文字水平居中 */
  border-collapse: collapse; /* 合并边框 */
}
th {
  background-color: #eef; /* 表头背景 #eef */
}
tfoot td {
  font-weight: bold;   /* 表尾文字加粗 */
}

实验思考

如果把html的内联样式 ol 的 type="A" 改成 type="I"，列表符号会怎样变化？
同时给 <td> 写 colspan="2" rowspan="2"，需要注意什么才不会导致表格错位？

2.6 表单及各类输入类型：用户数据交互的核心（安全高危点！）

表单是网页与用户交互的核心组件（如登录、注册、提交数据），也是 SQL 注入、CSRF、数据窃取等攻击的主要目标，必须全面掌握其语法与安全风险。

2.6.1 表单容器标签 `<form>`

<form> 是表单的"容器"，所有表单控件（如输入框、按钮）必须嵌套在 <form> 内部，用于定义"数据提交的目标地址"和"提交方式"。

基本语法：

<form action="数据提交的后端接口地址" method="提交方式" enctype="数据编码格式" target="提交后页面打开方式">
  <!-- 表单控件：输入框、密码框、按钮等 -->
</form>

核心属性说明：

属性	作用	取值与示例	安全注意点
`action`	必选属性，指定表单数据提交到的"后端接口地址"（如登录接口、注册接口）	1. 绝对路径：`action="https://example.com/login"` 2. 相对路径：`action="login.php"`	风险点：若后端接口未验证"请求来源"，可能遭 CSRF 攻击；需确保接口使用 HTTPS 协议（防止数据传输被窃听）
`method`	必选属性，指定数据提交方式，主要有 `GET` 和 `POST` 两种	`method="POST"`	- `GET`：数据拼在 URL 中（可见、不安全，适合少量非敏感数据，如搜索） - `POST`：数据放在请求体中（不可见、相对安全，适合敏感数据，如密码）安全建议：所有敏感数据提交必须用 `POST`
`enctype`	可选属性，指定表单数据的"编码格式"，默认值为 `application/x-www-form-urlencoded`	1. 普通数据：默认值（无需显式设置） 2. 文件上传：必须设为 `multipart/form-data` 3. 纯文本：`text/plain`（极少用）	风险点：上传文件时若未设为 `multipart/form-data`，会导致文件数据损坏；若后端未验证文件类型，可能遭"文件上传漏洞"攻击
`target`	可选属性，指定"提交后页面的打开方式"，与 `<a>` 标签的 `target` 用法一致	1. `_self`：当前窗口打开（默认） 2. `_blank`：新窗口打开	若用 `_blank`，建议添加 `rel="noopener noreferrer"`（防止窗口劫持），但 `<form>` 标签不直接支持 `rel`，需通过 JavaScript 辅助实现

2.6.2 常用表单控件（输入类型）

表单控件通过 <input> 标签实现，核心是 type 属性 —— 不同 type 对应不同功能的控件（如文本输入、密码输入、文件上传）。

常用输入类型汇总表：

`type` 值	控件名称	基本语法	功能与安全注意点
`text`	单行文本输入框	`<input type="text" name="username" placeholder="请输入用户名" maxlength="20" value="默认值">`	用于输入普通文本（如用户名、手机号）；安全注意点：需限制输入长度（`maxlength`），防止"超长字符注入"；需过滤特殊字符（如 `<script>`），防止 XSS
`password`	密码输入框	`<input type="password" name="password" placeholder="请输入密码" required>`	用于输入敏感密码，输入内容会被"圆点"隐藏；安全注意点：必须搭配 `POST` 提交；需添加 `required`（必填验证）；后端需对密码加密存储（如用 MD5、SHA256），不可明文存储
`radio`	单选按钮	`<label><input type="radio" name="gender" value="male" checked> 男</label><label><input type="radio" name="gender" value="female"> 女</label>`	用于"二选一"或"多选一"（如性别、是否同意协议）；关键属性：`name` 必须相同（确保同一组单选按钮互斥）；`checked` 表示默认选中；安全注意点：后端必须重新验证单选值（防止用户篡改前端值，如将 `value="male"` 改为 `value="admin"`）
`checkbox`	复选框	`<label><input type="checkbox" name="hobby" value="coding"> 编程</label><label><input type="checkbox" name="hobby" value="hacking" checked> 网络安全</label>`	用于"多选多"（如兴趣爱好、权限选择）；关键属性：`name` 相同（表示同一组复选框）；`checked` 表示默认选中；安全注意点：后端需验证"选中值是否在允许范围内"（防止越权，如勾选"管理员权限"）
`file`	文件上传控件	`<input type="file" name="avatar" accept="image/*" multiple>`	用于让用户上传本地文件（如头像、文档）；关键属性：`accept`（限制上传文件类型，如 `image/*` 表示仅图片）；`multiple`（允许同时上传多个文件）；安全高危点！必须验证：① 文件类型（后缀 + 内容，防止伪装）② 文件大小（防止恶意上传超大文件占满服务器空间）③ 文件内容（防止上传木马、病毒）
`submit`	提交按钮	`<input type="submit" value="登录" style="background-color: #007bff; color: white;">`	点击后触发表单提交（将数据发送到 `action` 指定的接口）；`value` 属性定义按钮显示文字；可通过 `style` 简单设置按钮样式
`reset`	重置按钮	`<input type="reset" value="重置">`	点击后将表单所有控件恢复到"初始状态"（如清空输入框、取消选中）；注意：重置仅作用于前端，不会影响后端数据
`button`	普通按钮	`<input type="button" value="获取验证码" onclick="getCode()">`	无默认功能，需搭配 JavaScript 实现自定义逻辑（如获取验证码、弹窗提示）；`onclick` 属性指定点击后执行的函数
`hidden`	隐藏控件（不可见）	`<input type="hidden" name="user_id" value="123">`	用于存储"无需用户输入但需提交的隐藏数据"（如用户 ID、表单版本号）；安全风险点：前端隐藏数据可被篡改（如修改 `user_id` 为 `999` 查看他人数据），后端必须重新验证该数据的合法性

示例代码

form-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link rel="stylesheet" href="reg-style.css">
</head>
<body>
  <h1>新用户注册</h1>
  <form action="" method="POST" enctype="multipart/form-data">
    <p>
      <label>用户名：</label>
      <input type="text" name="user" maxlength="12" placeholder="4-12位字母数字" required>
    </p>

    <p>
      <label>密　码：</label>
      <input type="password" name="pwd" required>
    </p>

    <p>
      <label>性　别：</label>
      <label><input type="radio" name="gender" value="male" checked> 男</label>
      <label><input type="radio" name="gender" value="female"> 女</label>
    </p>
    <p>
      <label>爱　好：</label>
      <label><input type="checkbox" name="hobby" value="code"> 编程</label>
      <label><input type="checkbox" name="hobby" value="hack"> 网络安全</label>
      <label><input type="checkbox" name="hobby" value="read"> 阅读</label>
    </p>
    <p>
      <input type="submit" value="立即注册">
      <input type="reset" value="清空">
    </p>
  </form>
</body>
</html>

2.6.3 其他常用表单控件

除 <input> 外，表单还常用 <textarea>（多行文本输入框）和 <select>（下拉选择框）：

多行文本输入框 <textarea>

用于输入大段文本（如留言、备注、富文本内容），支持换行。

<label for="note">学习笔记：</label>
<textarea name="note" id="note" rows="5" cols="50" placeholder="请输入学习笔记...">默认文本</textarea>

核心属性：rows（文本框行数，控制高度）、cols（文本框列数，控制宽度）、placeholder（提示文字）；
安全注意点：需过滤 <script> 等恶意标签（防止 XSS），建议限制输入长度（后端验证）。
下拉选择框 <select> 与 <option>

用于从多个选项中选择一个（或多个），节省页面空间（如选择城市、学历）。

<label for="education">学历：</label>
<select name="education" id="education" multiple size="3">
  <option value="">请选择学历</option>
  <option value="high_school">高中</option>
  <option value="college" selected>大专</option>
  <option value="bachelor">本科</option>
  <option value="master">硕士</option>
</select>

核心标签与属性：
- <select>：下拉框容器，multiple 表示"允许多选"（按住 Ctrl 键选择），size 表示"显示的选项数量"；
- <option>：下拉选项，value 是提交到后端的实际值，selected 表示"默认选中"；
安全注意点：后端必须验证 value 值（防止用户篡改前端选项，如添加 value="admin" 选项）。

基础实验 5：制作“用户注册”表单（单页版）

实验目标

会用 <form> 创建完整注册页：用户名、密码、性别单选、爱好多选、学历下拉、头像上传、备注多行文本
掌握 POST 提交、required、maxlength、accept 等安全属性
体验“文件上传必填 multipart/form-data”与“单选/下拉后端需重验”的安全点

实验要求

文件准备
- 沿用文件夹，新建 test5.html
- 图片准备：任意 jpg/png 一张，用来测试上传
表单区（所有控件放在 <form> 内） ① 用户名：type="text"、name="user"、placeholder、maxlength="12"、required ② 密码：type="password"、name="pwd"、required ③ 性别单选：同一 name="gender"，值 male/female，默认选一项 ④ 爱好多选：同一 name="hobby"，至少 3 个选项，默认任选 ⑤ 学历下拉：<select name="edu">，含“请选择”占位项 + 3 个真实选项 ⑥ 头像上传：<input type="file" name="avatar" accept="image/*" required> ⑦ 备注多行：<textarea name="note" rows="4" cols="40" placeholder="选填..."></textarea> ⑧ 提交按钮：type="submit"，文字“立即注册” ⑨ 重置按钮：type="reset"，文字“清空”
安全设置
- 表单用 method="POST"、enctype="multipart/form-data"、action=""（空串表示提交到当前页，方便看地址栏无数据泄露）
- 文件上传区写 required 强制选图
- 所有敏感控件加 required 前端校验
样式（可选） reg-style.css 给表单加宽度、居中、按钮颜色即可
验证步骤
- 填写 → F12 Network 看是否 POST 且 Query String 为空（密码不会挂在地址栏）
- 不选文件直接点提交，浏览器应提示“请选择文件”

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link rel="stylesheet" href="reg-style.css">
</head>
<body>
  <h1>新用户注册</h1>
  <form action="" method="POST" enctype="multipart/form-data">
    <p>
      <label>用户名：</label>
      <input type="text" name="user" maxlength="12" placeholder="4-12位字母数字" required>
    </p>

    <p>
      <label>密　码：</label>
      <input type="password" name="pwd" required>
    </p>

    <p>
      <label>性　别：</label>
      <label><input type="radio" name="gender" value="male" checked> 男</label>
      <label><input type="radio" name="gender" value="female"> 女</label>
    </p>

    <p>
      <label>爱　好：</label>
      <label><input type="checkbox" name="hobby" value="code"> 编程</label>
      <label><input type="checkbox" name="hobby" value="hack"> 网络安全</label>
      <label><input type="checkbox" name="hobby" value="read"> 阅读</label>
    </p>

    <p>
      <label>学　历：</label>
      <select name="edu">
        <option value="">请选择学历</option>
        <option value="high">高中</option>
        <option value="college">大专</option>
        <option value="bachelor" selected>本科</option>
      </select>
    </p>

    <p>
      <label>头　像：</label>
      <input type="file" name="avatar" accept="image/*" required>
    </p>

    <p>
      <label>备　注：</label><br>
      <textarea name="note" rows="4" cols="40" placeholder="选填..."></textarea>
    </p>

    <p>
      <input type="submit" value="立即注册">
      <input type="reset" value="清空">
    </p>
  </form>
</body>
</html>

实验思考

把 method="POST" 改成 GET" 再提交一次，观察地址栏变化；这说明什么安全问题？
文件上传区去掉 enctype="multipart/form-data" 后，后台会收到什么结果？为什么必须加这句？

三、HTML5 新增元素：更语义化与更丰富的功能

HTML5 是 HTML 的第五个版本，在原有基础上新增了"语义化结构元素"和"增强型表单元素"，不仅让代码更易读、维护，也提升了网页的交互体验与安全性（部分新增元素自带基础验证功能）。

3.1 HTML5 新增语义化结构元素

传统 HTML 用大量 <div> 标签划分页面结构（如头部、导航、主体、侧边栏），但 <div> 无语义性，不利于浏览器解析和搜索引擎优化（SEO）。HTML5 新增的语义化元素，通过标签名直接体现其功能，让代码更具可读性。

核心新增结构元素表

元素标签	语义与作用	适用场景	代码示例
`<header>`	页面或区域的"头部"，通常包含标题、Logo、导航栏等	网页顶部、文章头部、板块头部	`<header> <h1>网络安全学习平台</h1> <nav>导航栏</nav> </header>`
`<nav>`	"导航栏"容器，专门用于存放页面导航链接（如首页、课程、论坛等）	页面顶部、侧边栏的导航区域	`<nav> <a href="/home">首页</a> <a href="/course">课程</a> <a href="/forum">论坛</a> </nav>`
`<main>`	页面的"主要内容区域"，一个页面只能有一个 `<main>`，包含与页面主题相关的内容	网页的核心内容（如文章正文、课程列表）	`<main> <article>HTML基础教程</article> <section>表单安全知识</section> </main>`
`<article>`	独立的"文章内容块"，可单独存在（如博客文章、新闻、课程卡片）	博客列表、新闻列表、课程卡片	`<article> <h2>XSS 攻击原理与防御</h2> <p>XSS 攻击是指通过注入恶意脚本...</p> <footer>作者：安全讲师</footer> </article>`
`<section>`	页面中的"功能区块"，用于划分不同主题的内容（如章节、模块）	文章的章节、页面的功能模块（如"学习目标""实验步骤"）	`<section> <h3>学习目标</h3> <ul> <li>掌握HTML5语义化元素</li> <li>理解表单安全风险</li> </ul> </section>`
`<aside>`	"侧边栏"或"辅助内容区"，包含与主要内容相关的补充信息（如作者简介、目录）	页面右侧的作者信息、文章目录	`<aside> <h4>作者简介</h4> <p>10年网络安全从业经验，专注Web安全教学</p> </aside>`
`<footer>`	页面或区域的"底部"，通常包含版权信息、联系方式、备案号等	网页底部、文章底部、板块底部	`<footer> <p>© 2024 网络安全学习平台版权所有</p> </footer>`

示例代码

html5.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 语义化最简示例</title>
  <style>
    body{margin:0;font-family:Arial;background:#f5f5f5}
    header,nav,main,footer{padding:15px;background:#fff;margin:10px;border-radius:5px}
    nav a{margin-right:10px}
  </style>
</head>
<body>
  <header>
    <h1>网络安全学习平台</h1>
  </header>

  <nav>
    <a href="/">首页</a>
    <a href="/course">课程</a>
    <a href="/forum">论坛</a>
  </nav>

  <main>
    <section>
      <h2>今日课程</h2>
      <article>
        <h3>XSS 攻击原理与防御</h3>
        <p>通过注入恶意脚本窃取用户数据……</p>
        <footer>作者：安全讲师</footer>
      </article>
    </section>
  </main>

  <aside>
    <h4>作者简介</h4>
    <p>10 年 Web 安全从业经验</p>
  </aside>

  <footer>
    <p>© 2024 网络安全学习平台 版权所有</p>
  </footer>
</body>
</html>

语义化结构的优势与安全关联

优势：
- 代码更易读：他人看标签名就知道对应区域的功能（如 <nav> 就是导航）；
- 利于 SEO：搜索引擎能通过语义化标签快速识别页面核心内容，提升排名；
- 适配性更好：屏幕阅读器（无障碍设备）能通过语义化标签为视障用户准确描述页面结构；
安全关联：语义化结构让页面逻辑更清晰，后续用 JavaScript 操作 DOM（如获取导航栏、修改主要内容）时更精准，减少因误操作 <div> 导致的功能异常或安全漏洞。

3.2 HTML5 新增表单元素与属性

HTML5 对表单进行了大幅增强，新增了"专用输入类型"和"实用属性"，不仅减少了 JavaScript 代码量（部分功能自带验证），也提升了用户体验与数据安全性（自带格式验证，减少非法数据提交）。

3.2.1 新增表单输入类型

这些输入类型本质还是 <input> 标签，但通过特定 type 值实现专用功能（如日期选择、邮箱验证），浏览器会自动适配输入格式并提供基础验证。

新增 `type` 值	功能描述	代码示例	安全与体验优势
`email`	邮箱输入框，自带邮箱格式验证（必须包含 `@` 和域名，如 `test@example.com`）	`<input type="email" name="user_email" required placeholder="请输入邮箱">`	减少非法邮箱提交，无需额外写 JavaScript 验证；移动端会弹出"邮箱专用键盘"（带 `@` 键）
`tel`	电话输入框，不自带格式验证（因各国手机号格式不同），但支持自定义验证	`<input type="tel" name="user_phone" pattern="1[3-9]\d{9}" placeholder="请输入手机号">`	移动端会弹出"数字键盘"，提升输入效率；配合 `pattern` 属性可实现手机号格式验证
`url`	URL 输入框，自带网址格式验证（必须包含 `http://` 或 `https://`）	`<input type="url" name="website" placeholder="请输入网址（如https://example.com）">`	防止无效 URL 提交，减少后端验证压力
`date`	日期选择器，浏览器会弹出日历控件，无需手写日期	`<input type="date" name="birthday" min="1900-01-01" max="2024-12-31">`	避免日期格式混乱（如"2024/01/01"和"2024-01-01"）；`min`/`max` 限制可选日期范围
`time`	时间选择器，弹出时间控件（小时：分钟）	`<input type="time" name="class_time" min="08:00" max="22:00">`	统一时间格式，避免"8:00"和"08:00"的差异
`number`	数字输入框，只允许输入数字、小数点和正负号，自带增减按钮	`<input type="number" name="age" min="18" max="60" step="1" placeholder="请输入年龄">`	限制输入内容为数字，`min`/`max` 限制范围，`step` 控制增减幅度（如 step="2" 表示每次加 2）
`search`	搜索输入框，自带"清空按钮"（输入内容后显示 ×），语义上表示搜索功能	`<input type="search" name="keyword" placeholder="搜索课程...">`	提升搜索体验，点击 × 可快速清空输入内容；部分浏览器会对搜索结果进行优化

3.2.2 新增表单属性

这些属性可用于 <input>、<textarea>、<form> 等标签，增强表单功能与安全性。

新增属性	作用与用法	适用标签	安全与体验优势
`placeholder`	输入框的"提示文字"，输入内容后自动消失（无需用 JavaScript 实现）	`<input>`、`<textarea>`	明确告知用户输入格式（如"请输入 11 位手机号"），减少输入错误；避免用默认值（如默认值"test@example.com"可能被误提交）
`required`	标记输入框为"必填项"，未输入时无法提交表单，浏览器自带提示	`<input>`、`<textarea>`、`<select>`	前端快速拦截空数据提交，减少后端无效请求；提示文案由浏览器自动生成，适配不同语言环境
`pattern`	自定义"正则表达式验证规则"，输入内容需匹配正则才能提交	`<input>`（除 `type="file"` 外）	灵活实现复杂验证（如手机号、身份证号、密码强度）；示例：手机号验证 `pattern="1[3-9]\d{9}"`
`min`/`max`	限制数字、日期、时间类型输入框的"最小值"和"最大值"	`<input type="number/date/time">`	防止超出合理范围的数据提交（如年龄不能小于 18 岁、日期不能是未来时间）
`step`	控制数字、日期、时间输入框的"增减幅度"（点击控件自带的 ± 按钮时生效）	`<input type="number/date/time">`	统一输入精度（如年龄 step="1"、价格 step="0.01"）
`autofocus`	页面加载完成后，自动将光标聚焦到该输入框（一个页面建议只设置一个）	`<input>`、`<textarea>`	提升登录、搜索等高频场景的体验（如登录页自动聚焦用户名输入框）
`autocomplete`	控制输入框是否"自动补全"（浏览器记住历史输入内容，默认开启）	`<input>`、`<form>`	敏感输入框（如密码、银行卡号）可设为 `autocomplete="off"`，防止浏览器记住敏感数据；示例：`<input type="password" autocomplete="off">`

最简示例

Html5-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 新增表单小体验</title>
</head>
<body>
  <h1>快速注册</h1>
  <form action="#" method="POST">
    <!-- 1. 邮箱：自带 @ 校验 + 移动端邮箱键盘 -->
    <p>
      <label>邮箱：</label>
      <input type="email" name="user_email" placeholder="name@example.com" required>
    </p>

    <!-- 2. 手机号：数字键盘 + 正则校验 -->
    <p>
      <label>手机：</label>
      <input type="tel" name="user_phone" pattern="1[3-9]\d{9}" placeholder="11位手机号" required>
    </p>

    <!-- 3. 日期：自带日历控件 + 范围限制 -->
    <p>
      <label>生日：</label>
      <input type="date" name="user_birth" min="1900-01-01" max="2024-12-31" required>
    </p>

    <!-- 4. 提交 -->
    <p>
      <input type="submit" value="立即注册">
    </p>
  </form>
</body>
</html>

基础实验 6：给实验5加装 HTML5“新装备”

实验目标

会用 HTML5 新增输入类型 email、tel、date 及属性 pattern、min/max、required
感受浏览器自带验证：免 JavaScript 即可完成格式检查、数字键盘、日期控件
理解“敏感数据用 POST + 新属性”带来的体验与安全提升

实验要求

文件准备
- 复制原 test5.html → 改名 test6.html
升级点（共 4 处，其余保持不动） ① 把“用户名”输入框的 type 改为 email，placeholder 换成 "name@example.com" ② 新增一行“手机”输入框：
- type="tel"、name="phone"
- 加 pattern="1[3-9]\d{9}"（11 位手机号规则）
- placeholder="11位手机号"、required
  
  ③ 新增一行“生日”输入框：
- type="date"、name="birth"
- 加 min="1900-01-01" max="2024-12-31"、required
验证效果
- 邮箱输错 → 浏览器自动提示格式错误
- 手机输非 11 位数字 → 提交被拦截
- 日期点击 → 弹出原生日历，且超出 1900-2024 范围不可选
- 两重置按钮都能正常清空表单

前置基础知识-HTML

一、HTML基础概念：认识网页的”构建语言“

1.1 什么是HTML？

1.2 HTML 文档的基本结构

核心结构说明表

二、HTML 常用标签：构建网页的"基本零件"

2.1 基本文本标签：定义文字内容与格式

常用基本文本标签表

2.2 style 只要是 HTML 元素，就能写 style 属性，美化界面

1.怎么写

2. style 里到底能放什么

常用且适合新手的“属性清单”

基础实验 1：用VS Code创建第一个 HTML 文档并使用行内样式美化

实验目标

实验要求

示例代码

实验思考（原题不变）

3. 小提醒

2.3 CSS速成

1. 三步速成

① 新建文件

② 写样式（语法与行内 style 相同，只是去掉引号）

③ 在 HTML 里“链接”它

2. CSS 语法口诀（3 句话）

3. 路径怎么写

4. 一个页面可链多个 CSS

5.CSS 优先级口诀（从高到低）：

6. 调试小技巧

基础实验 2：给“实验 1”页面穿上“外链 CSS”外套

实验目标

实验要求

示例代码

实验思考

2.2 图片标签 <img>：嵌入图像内容

基本语法

核心属性说明

2.3 超链接标签 <a>：实现页面跳转

基本语法

核心属性说明

安全示例：外部链接的安全写法

基础实验 3：图片 & 超链接综合实战

实验目标

实验要求

示例代码

实验思考

2.4 列表标签：组织有序 / 无序内容

1. 无序列表 <ul>：内容无先后顺序

2. 有序列表 <ol>：内容有先后顺序

基础实验 ：创建有序 / 无序列表（可选）

实验目标

实验步骤

实验思考

2.5 表格标签：展示结构化数据

核心标签与语法

核心标签与属性说明

结构化表格CSS常用

基础实验 ：创建结构化表格（可选）

实验目标

实验步骤

实验思考

基础实验 4：列表与表格综合实验

实验目标

实验要求

示例代码

实验思考

2.6 表单及各类输入类型：用户数据交互的核心（安全高危点！）

2.6.1 表单容器标签 <form>

2.6.2 常用表单控件（输入类型）

示例代码

2.6.3 其他常用表单控件

基础实验 5：制作“用户注册”表单（单页版）

实验目标

实验要求

示例代码

实验思考

三、HTML5 新增元素：更语义化与更丰富的功能

3.1 HTML5 新增语义化结构元素

核心新增结构元素表

语义化结构的优势与安全关联

3.2 HTML5 新增表单元素与属性

2.2 style 只要是 HTML 元素，就能写 `style` 属性，美化界面

2. `style` 里到底能放什么

2.2 图片标签 `<img>`：嵌入图像内容

2.3 超链接标签 `<a>`：实现页面跳转

1. 无序列表 `<ul>`：内容无先后顺序

2. 有序列表 `<ol>`：内容有先后顺序

基础实验：创建有序 / 无序列表（可选）

基础实验：创建结构化表格（可选）

2.6.1 表单容器标签 `<form>`