1.1 HTML 基础
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础。与 HTTP（超文本传输协议）不同，HTML 专注于定义网页的内容和结构。"超文本"意味着它不仅包含纯文本，还可以嵌入图片、链接、音频等多媒体元素；"标记语言"则指通过标签来组织和描述内容。
HTML 文档主要由各种标签构成，例如：
html
<h1>我是一级标题</h1>
其中 <h1> 和 </h1> 就是标签对，通常由开始标签和结束标签组成，结束标签包含斜杠 /。开始标签中可以包含属性，如：
html
<h1 id="h1id">我是一级标题</h1>
这里的 id="h1id" 就是属性，为该元素设置了唯一标识符。
一个标准的 HTML 文档结构如下：
html
<!DOCTYPE html>
<html lang="en">
<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>是根元素，包含整个页面<head>包含元数据，如字符集、视口设置和标题<body>包含可见的页面内容
推荐使用 VS Code 等专业编辑器进行开发，通过输入 ! 然后按 Tab 键可快速生成基础模板。浏览器开发者工具（F12）可帮助调试和查看页面结构。
1.2 HTML 常用标签
1）标题标签 h1-h6
HTML 提供六级标题，从 <h1> 到 <h6>，字号依次递减：
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2）段落标签 p
在 HTML 中，连续的空白字符（空格、换行）会被合并为单个空格。要创建段落，需使用 <p> 标签：
html
<p>这是第一个段落，包含多行文本
但显示时仍会保持连续。</p>
<p>这是第二个独立段落。</p>
3）换行与空格
- 换行：使用
<br>标签 - 空格：使用
（不间断空格）
html
<p>第一行内容<br>第二行内容</p>
<p>这里有多 个空格</p>
4）图片标签 img
通过 <img> 标签嵌入图片，支持绝对路径或相对路径：
html
<img src="QQ截图20240915161600.png" alt="示例图片" width="200" height="200">
重要属性：
src：图片路径alt：替代文本（图片无法显示时展示）width/height：尺寸（单位 px 可省略）
5）超链接 a
创建跳转链接：
html
<a href="https://www.example.com">访问示例网站</a>
<a href="image.png" download>下载图片</a>
href 可指向网址、文件或页面锚点。
6）表格标签
基础表格结构：
html
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<table>：定义表格<tr>：定义行<td>：定义单元格
7）表单标签 form
表单用于收集用户输入：
html
<form action="/submit" method="post">
<!-- 表单控件 -->
</form>
action：提交目标 URLmethod：HTTP 方法（GET/POST）
8）输入控件 input
<input> 是最常用的表单元素，通过 type 属性定义类型：
html
<!-- 文本框 -->
<input type="text" name="username" placeholder="请输入用户名">
<!-- 密码框 -->
<input type="password" name="password">
<!-- 单选框 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="read">
<label for="read">阅读</label>
<!-- 按钮 -->
<input type="button" value="普通按钮">
<input type="submit" value="提交表单">
注意事项：
- 单选框需设置相同的
name属性实现互斥 <label>标签提高可用性，点击文本即可选中value定义提交时的数据值
9）下拉菜单 select
创建下拉选择框：
html
<select name="major">
<option value="1">人工智能</option>
<option value="2">计算机网络</option>
<option value="3" selected>计算机科学与技术</option>
</select>
selected 属性设置默认选项。
10）文本域 textarea
多行文本输入框：
html
<textarea name="description" rows="4" cols="50"></textarea>
11）布局标签 div 和 span
<div>：块级容器，用于页面分区<span>：行内容器，用于文本片段
html
<div class="container">
<span>文本块1</span>
<span>文本块2</span>
</div>
<div class="footer">
<span>页脚内容</span>
</div>
表单综合练习
以下是一个完整的注册表单示例：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title用户注册</title>
</head>
<body>
<form action="/register" method="post">
<!-- 用户名 -->
<label>用户名：</label>
<input type="text" name="username" required><br>
<!-- 密码 -->
<label>密码：</label>
<input type="password" name="password" required><br>
<!-- 性别单选 -->
<label>性别：</label>
<input type="radio" name="gender" value="1" id="male" required>
<label for="male">男</label>
<input type="radio" name="gender" value="2" id="female">
<label for="female">女</label><br>
<!-- 兴趣爱好多选 -->
<label>兴趣：</label>
<input type="checkbox" name="hobbies" value="sports" id="sports">
<label for="sports">运动</label>
<input type="checkbox" name="hobbies" value="music" id="music">
<label for="music">音乐</label><br>
<!-- 专业选择 -->
<label>专业：</label>
<select name="major">
<option value="1">人工智能</option>
<option value="2">计算机网络</option>
<option value="3" selected>计算机科学与技术</option>
</select><br>
<!-- 个人简介 -->
<label>个人简介：</label><br>
<textarea name="bio" rows="4" cols="40"></textarea><br>
<!-- 提交按钮 -->
<input type="submit" value="立即注册">
</form>
</body>
</html>
关键要点：
- 使用
<label>提升表单可访问性 required属性设置必填字段- 相同
name的单选框实现互斥选择 selected设置默认选中项
掌握这些 HTML 标签已足够构建基础网页。接下来我们将学习 CSS 美化页面样式，再进一步学习 JavaScript 实现交互功能，共同构成前端开发的核心技术栈。
