前端入门学习笔记（Day01）：HTML核心语法与实战应用
引入：
作为前端学习的第一天，我们将聚焦HTML（HyperText Markup Language，超文本标记语言）的核心知识——它是构建网页的"骨架"，所有视觉内容和交互逻辑都依赖于HTML的基础结构。本文将从文档结构、文本标签、图片引用、表单设计四个维度，结合实战案例和注意事项，帮你夯实前端入门第一步。
一、HTML基础文档结构
HTML（超文本标记语言）是构建网页的基础，一个完整的HTML文档有着固定的结构，以下是最基本的框架：
```html
<html><!-- 网页的根元素，所有内容都包裹在其中 -->
<head>
<title>这是我的第一个网页</title><!-- 定义网页标题，显示在浏览器标签页 -->
</head>
<body>
<!-- 网页的可见内容都写在这里 -->
</body>
</html>
```
- `<html>`：整个HTML文档的根元素，是所有其他元素的容器
- `<head>`：用于包含文档的元数据，如标题、样式等，这些内容不会直接显示在网页主体中
- `<title>`：设置网页的标题，会显示在浏览器的标签页上，对SEO也有重要作用
- `<body>`：包含网页中所有可见的内容，如文本、图片、表单等
二、文本相关标签
HTML提供了一系列标签用于组织文本内容，核心是**语义化**——即标签不仅能改变样式，更能表达内容的逻辑含义（比如"这是标题"、"这是强调内容"），这对搜索引擎（SEO）和无障碍访问至关重要。
1. 标题标签（h1-h6）
标题标签共6级，从`h1`到`h6`字体逐渐变小、权重逐渐降低，用于表示内容的主次关系。
<h1>这是一个标签</h1> <!-- 最大的标题，通常一个页面只使用一次 -->
<h2>这是一个标签</h2>
<h3>这是一个标签</h3>
<h4>这是一个标签</h4>
<h5>这是一个标签</h5>
<h6>这是一个标签</h6> <!-- 最小的标题 -->
2. 段落与文本格式化标签
<p>：用于定义段落，会自动在段落前后添加空行
<strong>：使文本加粗，语义上表示重要内容
-<em>：使文本斜体，语义上表示强调内容
-<del>：为文本添加删除线，表示已删除的内容
示例代码：
<p><strong>猫咪</strong>以为<em>女主</em>死了！<del>下一秒</del>，把主人的肚子都笑疼了看一遍笑一遍</p>
三、图片标签（img）
`<img>`标签用于在页面中插入图片，是**自闭合标签**（无需写`</img>`），核心是正确设置图片路径和优化用户体验。
1. 基础语法与核心属性
```html
<!-- 完整示例：包含路径、尺寸、替代文本、加载失败处理 -->
<img
src="images/scenery.jpg" <!-- 图片路径（核心） -->
width="400" <!-- 宽度（单位：像素，建议只设一个维度，避免图片拉伸） -->
alt="蓝色天空下的雪山湖泊，湖边有绿色草地" <!-- 替代文本（核心：无障碍+SEO） -->
title="新疆赛里木湖风景" <!-- 鼠标悬停时显示的提示文本 -->
οnerrοr="this.src='images/default.jpg'" <!-- 图片加载失败时，显示默认图 -->
>
```
2. 三种图片路径详解（新手必掌握）
| 相对路径 (图片和代码在同一目录下)
<img src="a.jpg" width="200" height="200" alt="风景照">
| 绝对路径
<img src="D:\桌面\前端页面学习\day01\a.jpg" width="200" height="200" alt="风景照">
| 网络路径
<img src="https://example.com/image.jpg" width="200" height="200" alt="风景照">
3. 优化技巧
1. **避免图片拉伸**：
只设置`width`或`height`其中一个属性，浏览器会自动按比例缩放图片（比如只设`width="400"`，高度会自动计算）。
2. **必须写`alt`属性**：
- 图片加载失败时，用户能通过`alt`文本了解图片内容；
- 屏幕阅读器（视障用户使用）会读取`alt`文本，提升无障碍性；
- 搜索引擎通过`alt`识别图片内容，提升图片搜索排名。
3. **使用合适的图片格式**：
- 照片/复杂图像：用`JPG`（体积小，支持压缩）；
- 图标/透明背景图：用`PNG`（支持透明，画质无损）；
- 动图：用`GIF`（仅支持256色，适合简单动画）；
- 现代优化格式：用`WebP`（体积比JPG小50%，兼容性需注意）。
四、表单相关标签
表单是网页与用户交互的核心组件（如登录、注册、搜索、问卷），用于收集用户输入并提交到服务器。一个完整的表单由`<form>`容器和内部的**表单控件**（输入框、按钮等）组成。
1. form标签：表单的"容器"
所有表单控件必须放在`<form>`标签内，它定义了表单数据的提交规则。
```html
<!-- 标准表单结构 -->
<form
action="https://api.example.com/submit" <!-- 数据提交的目标地址（后端接口） -->
method="post" <!-- 提交方式：get或post -->
enctype="multipart/form-data" <!-- 上传文件时必须设置，默认无需写 -->
>
<!-- 表单控件（输入框、按钮等） -->
</form>
```
#### 核心属性解析
- **action**：指定表单数据提交到哪个URL（后端接口地址），如果暂时没有后端，可先写`#`（表示提交到当前页面，仅用于测试）。
- **method**：提交方式，二选一：
| 提交方式 | 数据位置 | 数据大小限制 | 适用场景 | 安全性 |
|----------|----------|--------------|----------|--------|
| `get` | 拼接在URL后面（如`?username=zhangsan&password=123`） | 约2KB（不同浏览器略有差异） | 搜索、查询等无敏感数据的场景（如百度搜索） | 低（数据可见，易被拦截） |
| `post` | 放在请求体中（URL不可见） | 无明确限制（由后端配置） | 登录、注册、提交表单等含敏感数据的场景 | 高（数据不可见，需配合HTTPS） |
- **enctype**：仅在上传文件（如`<input type="file">`）时需要设置为`multipart/form-data`，否则默认值`application/x-www-form-urlencoded`即可。
2. 常用表单控件：收集信息的"组件"
表单控件是用户直接操作的元素，核心是通过`name`属性标识数据（后端通过`name`获取用户输入的值）。
（1）输入框（input）：最灵活的控件
`<input>`是表单中最常用的控件，通过`type`属性切换不同类型，支持文本、密码、数字等多种输入场景。
| type值 | 功能 | 示例代码 | 关键属性 |
|--------|------|----------|----------|
| `text` | 单行文本输入（如用户名） | `<input type="text" name="username" placeholder="请输入用户名" maxlength="20">` | - `placeholder`：输入提示（为空时显示）<br>- `maxlength`：最大输入长度（限制字符数）<br>- `value`：默认值（如`value="张三"`） |
| `password` | 密码输入（输入内容隐藏为圆点） | `<input type="password" name="password" placeholder="请输入6-16位密码" required>` | - `required`：必填项（提交时浏览器会校验，为空则提示） |
| `number` | 数字输入（仅允许输入数字、加减号、小数点） | `<input type="number" name="age" min="0" max="150" step="1">` | - `min`/`max`：最小/最大值<br>- `step`：步长（点击上下箭头时增减的幅度） |
| `tel` | 电话输入（移动端会弹出数字键盘） | `<input type="tel" name="phone" placeholder="请输入手机号" pattern="1[3-9]\d{9}">` | - `pattern`：正则表达式校验（如手机号格式） |
| `email` | 邮箱输入（浏览器会自动校验格式） | `<input type="email" name="email" placeholder="请输入邮箱" required>` | 无需写正则，浏览器会自动校验是否含`@`和域名 |
| `file` | 文件上传（如头像、附件） | `<input type="file" name="avatar" accept="image/*">` | - `accept`：限制上传文件类型（如`image/*`仅允许图片）<br>- 需配合`<form>`的`enctype="multipart/form-data"` |
| `submit` | 提交按钮（触发表单提交） | `<input type="submit" value="登录">` | - `value`：按钮上的文本（默认是"提交"） |
| `reset` | 重置按钮（清空表单所有输入） | `<input type="reset" value="重新填写">` | 谨慎使用，避免误触导致用户输入丢失 |
（2）单选按钮（radio）：二选一/多选一
用于从多个选项中选择**一个**，必须满足两个条件：
1. 同一组单选按钮的`name`属性值必须相同；
2. 每个选项必须设置`value`属性（后端获取的是`value`值，不是文本）。
```html
<div>
<label>性别：</label>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label> <!-- 点击"男"文字也能选中按钮，提升体验 -->
<input type="radio" name="gender" value="female" id="female" checked>
<label for="female">女</label> <!-- checked：默认选中该选项 -->
<input type="radio" name="gender" value="other" id="other">
<label for="other">其他</label>
</div>
```
（3）复选框（checkbox）：多选多
用于从多个选项中选择**一个或多个**，规则与单选按钮类似，但`name`建议用复数形式（如`hobbies[]`，后端接收时会是数组）。
```html
<div>
<label>爱好：</label>
<input type="checkbox" name="hobbies[]" value="coding" id="coding" checked>
<label for="coding">编程</label>
<input type="checkbox" name="hobbies[]" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobbies[]" value="travel" id="travel">
<label for="travel">旅行</label>
</div>
```
（4）下拉列表（select & option）：选项较多时使用
当
选项较多（如省份、年份）时，下拉列表比单选按钮更节省页面空间，由`<select>`（容器）和`<option>`（选项）组成。
```html
<div>
<label for="city">所在城市：</label>
<select name="city" id="city" multiple> <!-- multiple：允许按住Ctrl多选 -->
<option value="">请选择</option> <!-- 空选项，提示用户选择 -->
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option> <!-- selected：默认选中 -->
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
</div>
<!-- 分组下拉列表：选项较多时用<optgroup>分组，提升可读性 -->
<div>
<label for="province">所在省份：</label>
<select name="province" id="province">
<optgroup label="华北地区"> <!-- label：分组名称，不可选中 -->
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
<option value="hebei">河北</option>
</optgroup>
<optgroup label="华东地区">
<option value="shanghai">上海</option>
<option value="jiangsu">江苏</option>
<option value="zhejiang">浙江</option>
</optgroup>
</select>
</div>
```
（5）文本域（textarea）：多行文本输入
用于输入长文本（如留言、备注、简介），支持多行输入和自动换行，与单行文本框`<input type="text">`的核心区别是**支持多行**。
```html
<div>
<label for="remark">备注信息：</label><br>
<textarea
name="remark"
id="remark"
rows="5" <!-- 初始显示的行数 -->
cols="30" <!-- 初始显示的列数（字符数） -->
placeholder="请输入备注（最多200字）"
maxlength="200" <!-- 限制最大输入字符数 -->
></textarea>
</div>
```
#### 关键注意点
- 文本域的默认值需写在`<textarea>`标签内部（如`<textarea>默认内容</textarea>`），不能用`value`属性；
- 避免在标签内留多余空格（如`<textarea> </textarea>`），否则会显示空白内容。
3. 表单分组与标签关联：提升可用性
当表单控件较多时，需要用`<fieldset>`和`<legend>`进行分组，同时用`<label>`关联标签与控件，核心目标是**提升用户体验和无障碍性**。
（1）表单分组（fieldset & legend）
用于将逻辑相关的控件分组（如"个人信息"、"账户安全"），使表单结构更清晰，尤其适合长表单。
```html
<form action="#" method="post">
<!-- 第一组：个人基本信息 -->
<fieldset>
<legend>个人基本信息</legend> <!-- 分组标题，显示在边框上方 -->
<div>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" required>
</div>
<div>
<label for="phone">手机号：</label>
<input type="tel" name="phone" id="phone" pattern="1[3-9]\d{9}" required>
</div>
</fieldset>
<!-- 第二组：账户安全信息 -->
<fieldset style="margin-top: 10px;"> <!-- 用style简单调整间距，后续用CSS优化 -->
<legend>账户安全信息</legend>
<div>
<label for="password">密码：</label>
<input type="password" name="password" id="password" required>
</div>
<div>
<label for="confirm-pwd">确认密码：</label>
<input type="password" name="confirm-pwd" id="confirm-pwd" required>
</div>
</fieldset>
<div style="margin-top: 10px;">
<input type="submit" value="注册">
<input type="reset" value="重置">
</div>
</form>
```
（2）标签关联（label for）
`<label>`的核心作用是**关联标签文本与控件**，点击标签文本时，对应的控件会自动聚焦（如点击"用户名"文字，光标会定位到用户名输入框），尤其适合单选按钮、复选框等小控件。
关联方式有两种：
1. **显式关联**（推荐）：通过`for`属性绑定控件的`id`（需确保`for`值与`id`完全一致）；
```html
<label for="email">邮箱：</label>
<input type="email" name="email" id="email"> <!-- id必须与label的for一致 -->
```
2. **隐式关联**：将控件嵌套在`<label>`内部（无需`for`和`id`）；
```html
<label>
同意协议 <input type="checkbox" name="agree"> <!-- 点击"同意协议"也能选中复选框 -->
</label>
```
五、HTML新手必避的10个坑
1. 标签不闭合：
比如`<p>这是一个段落`（缺少`</p>`），浏览器可能自动补全，但会导致页面结构错乱（尤其嵌套标签时）。
2. 标签嵌套错误：
比如`<p><h1>标题</h1></p>`（块级标签不能嵌套在段落内），正确嵌套规则：块级标签（如`<div>`、`<h1>`）可嵌套行内标签（如`<span>`、`<strong>`），行内标签不能嵌套块级标签。
3. 路径大小写错误：
比如`src="Images/Scenery.jpg"`与实际文件`images/scenery.jpg`大小写不一致，Windows系统不区分大小写，但Linux服务器区分，会导致图片加载失败。
4. 表单控件无name属性：
后端无法获取数据（后端通过`name`识别字段，如`username`对应的值），即使写了`id`也不行（`id`是用于前端关联标签，与后端无关）。
5. 单选按钮无相同name：
导致多个单选按钮可同时选中（失去"单选"功能），必须确保同一组单选按钮的`name`值相同。
6. 用<br/>代替<p>：
比如用多个`<br/><br/>`实现段落间距，语义混乱且不利于样式控制（后续用CSS调整间距更灵活）。
7. 滥用div标签：
所有内容都用`<div>`包裹（如`<div class="h1">标题</div>`），忽略语义化标签（如`<h1>`、`<p>`、`<nav>`），会影响SEO和无障碍。
8. 直接用HTML设置样式：
比如`<font color="red">红色文本</font>`（已废弃）、`<body bgcolor="white">`，正确做法是用CSS控制样式（HTML负责结构，CSS负责样式）。
9. 图片无alt属性：
图片加载失败时显示空白，视障用户无法获取图片信息，搜索引擎也无法识别图片内容。
10. 忽略移动端适配：
忘记在`<head>`中添加`<meta name="viewport" content="width=device-width, initial-scale=1.0">`，导致页面在手机上显示异常（如字体过小、页面横向滚动）。
六、实战练习：制作个人信息表单
通过一个完整案例，综合运用上述所有知识点，实现一个包含个人信息、爱好选择、备注的表单页面。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息表单 | HTML实战</title>
<meta name="description" content="HTML表单实战案例，包含输入框、单选按钮、复选框、下拉列表等控件">
</head>
<body>
<h1>个人信息收集表</h1>
<hr>
<form action="#" method="post">
<!-- 第一组：基本信息 -->
<fieldset>
<legend>1. 基本信息</legend>
<div style="margin: 8px 0;">
<label for="fullname" style="display: inline-block; width: 80px;">姓名：</label>
<input type="text" name="fullname" id="fullname" placeholder="请输入真实姓名" required>
</div>
<div style="margin: 8px 0;">
<label for="age" style="display: inline-block; width: 80px;">年龄：</label>
<input type="number" name="age" id="age" min="0" max="120" placeholder="请输入年龄" required>
</div>
<div style="margin: 8px 0;">
<label style="display: inline-block; width: 80px;">性别：</label>
<input type="radio" name="gender" id="male" value="male" required>
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">女</label>
</div>
<div style="margin: 8px 0;">
<label for="city" style="display: inline-block; width: 80px;">城市：</label>
<select name="city" id="city" required>
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="other">其他</option>
</select>
</div>
</fieldset>
<!-- 第二组：兴趣爱好 -->
<fieldset style="margin: 15px 0;">
<legend>2. 兴趣爱好</legend>
<label style="display: inline-block; width: 80px;">爱好：</label>
<input type="checkbox" name="hobbies[]" id="coding" value="coding">
<label for="coding">编程</label>
<input type="checkbox" name="hobbies[]" id="reading" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobbies[]" id="travel" value="travel">
<label for="travel">旅行</label>
<input type="checkbox" name="hobbies[]" id="sports" value="sports">
<label for="sports">运动</label>
</fieldset>
<!-- 第三组：备注信息 -->
<fieldset>
<legend>3. 备注信息</legend>
<div>
<label for="remark" style="display: block; margin-bottom: 5px;">个人简介：</label>
<textarea name="remark" id="remark" rows="4" cols="50" placeholder="请简要介绍自己（最多300字）" maxlength="300"></textarea>
</div>
</fieldset>
<!-- 提交与重置按钮 -->
<div style="margin: 15px 0;">
<input type="submit" value="提交信息">
<input type="reset" value="重新填写" style="margin-left: 10px;">
</div>
</form>
</body>
</html>
```
### 练习目标
1. 理解表单的层级结构（`<form>`包含`<fieldset>`，`<fieldset>`包含控件）；
2. 掌握不同控件的使用场景（何时用单选、何时用下拉列表）；
3. 体会语义化标签的作用（如`<legend>`、`<label>`提升可用性）。
七、总结与下一步学习建议
1. Day01核心收获
- **HTML的本质**：不是编程语言，而是"标记语言"，负责定义网页的**结构**（骨架），不负责样式和交互；
- **语义化优先**：优先使用有语义的标签（如`<h1>`、`<p>`、`<strong>`），而非单纯追求样式（如`<div>`、`<b>`）；
- **路径与表单**：掌握相对路径的写法（避免绝对路径），理解表单控件的`name`属性和提交逻辑（后端交互的基础）。
2. 下一步学习方向
- **CSS基础**：学习如何用CSS美化HTML页面（如设置颜色、字体、间距、布局），实现"骨架"到"皮肤"的转变；
- **HTML5新标签**：学习语义化更强的标签（如`<header>`、`<nav>`、`<footer>`、`<article>`），优化页面结构；
- **表单进阶**：学习表单验证（如前端校验手机号格式）、下拉列表联动（如选择省份后加载对应城市）等交互功能。
建议每天花30分钟手写HTML代码（不要复制粘贴），通过实战巩固标签的使用场景，比如尝试制作"个人简历页面"、"商品列表页面"等，为后续学习CSS打下坚实基础。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
