127 lines
3.5 KiB
Markdown
127 lines
3.5 KiB
Markdown
|
---
|
|||
|
|
tags: [前端, HTML, 基础]
|
|||
|
|
create time: 2026-04-24 18:41
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# HTML 基础
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
HTML（HyperText Markup Language）是构建网页的骨架。它不是一门编程语言，而是一种标记语言——用标签（tag）告诉浏览器"这里是一段标题"、"这里是一个按钮"、"这里是一张图片"。
|
|||
|
|
|
|||
|
|
思考题：为什么 HTML 被称为"标记语言"而不是"编程语言"？它有没有变量、循环或条件判断的能力？
|
|||
|
|
|
|||
|
|
## 正文
|
|||
|
|
|
|||
|
|
### 1. HTML 文档结构
|
|||
|
|
|
|||
|
|
一个标准的 HTML 文档包含以下核心部分：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html> <!-- 文档类型声明：告诉浏览器这是 HTML5 -->
|
|||
|
|
<html lang="zh-CN"> <!-- 根元素，lang 指定语言 -->
|
|||
|
|
<head> <!-- 元信息容器：不直接显示 -->
|
|||
|
|
<meta charset="UTF-8"> <!-- 字符编码 -->
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>页面标题</title> <!-- 浏览器标签页标题 -->
|
|||
|
|
</head>
|
|||
|
|
<body> <!-- 可见内容容器 -->
|
|||
|
|
<h1>Hello World</h1>
|
|||
|
|
<p>这是一段文字</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 常用标签分类
|
|||
|
|
|
|||
|
|
**标题与段落：**
|
|||
|
|
|
|||
|
|
| 标签 | 用途 |
|
|||
|
|
|------|------|
|
|||
|
|
| `<h1>` ~ `<h6>` | 标题（h1 最大，h6 最小） |
|
|||
|
|
| `<p>` | 段落 |
|
|||
|
|
| `<br>` | 换行 |
|
|||
|
|
| `<hr>` | 水平线 |
|
|||
|
|
|
|||
|
|
**文本格式化：**
|
|||
|
|
|
|||
|
|
| 标签 | 用途 |
|
|||
|
|
|------|------|
|
|||
|
|
| `<strong>` | 加粗（语义：重要） |
|
|||
|
|
| `<em>` | 斜体（语义：强调） |
|
|||
|
|
| `<code>` | 代码 |
|
|||
|
|
| `<mark>` | 高亮 |
|
|||
|
|
|
|||
|
|
**链接与图片：**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<a href="https://example.com" target="_blank">打开新窗口</a> <!-- 外部链接 -->
|
|||
|
|
<img src="photo.jpg" alt="描述文字"> <!-- 图片（alt 必填） -->
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> **提问：** 为什么 `<img>` 标签的 `alt` 属性是必填的？它除了辅助功能外，还对 SEO（搜索引擎优化）有什么影响？
|
|||
|
|
|
|||
|
|
**列表：**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- 无序列表 -->
|
|||
|
|
<ul>
|
|||
|
|
<li>第一项</li>
|
|||
|
|
<li>第二项</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<!-- 有序列表 -->
|
|||
|
|
<ol>
|
|||
|
|
<li>第一步</li>
|
|||
|
|
<li>第二步</li>
|
|||
|
|
</ol>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 表单 — 用户交互的核心
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<form action="/api/submit" method="POST">
|
|||
|
|
<label for="username">用户名：</label>
|
|||
|
|
<input type="text" id="username" name="username" required>
|
|||
|
|
|
|||
|
|
<label for="email">邮箱：</label>
|
|||
|
|
<input type="email" id="email" name="email" placeholder="example@mail.com">
|
|||
|
|
|
|||
|
|
<label for="password">密码：</label>
|
|||
|
|
<input type="password" id="password" name="password">
|
|||
|
|
|
|||
|
|
<label for="gender">性别：</label>
|
|||
|
|
<select id="gender" name="gender">
|
|||
|
|
<option value="">请选择</option>
|
|||
|
|
<option value="male">男</option>
|
|||
|
|
<option value="female">女</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<button type="submit">提交</button>
|
|||
|
|
</form>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> **思考：** `GET` 和 `POST` 方法有什么区别？为什么登录表单必须用 `POST` 而不是 `GET`？
|
|||
|
|
|
|||
|
|
### 4. 语义化标签 — HTML5 的新武器
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<header> <!-- 页眉 -->
|
|||
|
|
<nav> <!-- 导航栏 -->
|
|||
|
|
<main> <!-- 主要内容 -->
|
|||
|
|
<section> <!-- 独立章节 -->
|
|||
|
|
<article> <!-- 独立文章 -->
|
|||
|
|
<aside> <!-- 侧边栏 -->
|
|||
|
|
<footer> <!-- 页脚 -->
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
语义化的好处：
|
|||
|
|
- **SEO 友好**：搜索引擎更容易理解页面结构
|
|||
|
|
- **无障碍访问**：屏幕阅读器能更好地辅助视障用户
|
|||
|
|
- **代码可读性**：开发者一眼就能看懂结构
|
|||
|
|
|
|||
|
|
## 关联笔记
|
|||
|
|
|
|||
|
|
- [[CSS 基础]] — 接下来学习如何用 CSS 美化 HTML
|
|||
|
|
- [[JavaScript 基础]] — 最后学习如何让页面动起来
|