html基础

封面图 • 2025-11-09 • Html/Css

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过标签（tags）来定义网页的结构和内容，如标题、段落、链接、图片等。

---

## 🧩 一、HTML 基础概念

### 1. **HTML 文档结构**
一个基本的 HTML 页面结构如下：

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
```

- `<!DOCTYPE html>`：声明文档类型为 HTML5。
- `<html>`：根元素，包含整个网页内容。
- `<head>`：包含元信息（如标题、样式、脚本等）。
- `<title>`：网页标题，显示在浏览器标签上。
- `<body>`：网页的可见内容部分。

---

## 📝 二、常用 HTML 标签

| 标签 | 说明 |
|------|------|
| `<h1>` ~ `<h6>` | 标题标签，`h1` 最大，`h6` 最小 |
| `<p>` | 段落 |
| `<a href="url">文字</a>` | 超链接 |
| `<img src="图片路径" alt="描述文本">` | 图片 |
| `<ul>` / `<ol>` / `<li>` | 无序列表 / 有序列表 / 列表项 |
| `<div>` | 容器，常用于布局 |
| `<span>` | 内联容器，用于对文本进行样式控制 |
| `<br>` | 换行 |
| `<hr>` | 水平线 |

---

## 🧩 三、HTML 属性

HTML 元素可以有属性，用来提供额外的信息。

```html
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<img src="image.jpg" alt="示例图片" width="200" height="150">
```

- `href`：链接地址
- `src`：资源路径（图片、脚本等）
- `alt`：图片的替代文本
- `target="_blank"`：在新窗口中打开链接

---

## 🧩 四、HTML5 新增特性（简要）

- 更丰富的语义化标签：
  - `<header>`、`<footer>`、`<nav>`、`<section>`、`<article>` 等
- 表单增强：
  - `<input type="email">`、`<input type="date">`
- 多媒体支持：
  - `<audio>`、`<video>`
- Canvas 和 SVG 支持绘图

---

## 🧩 五、学习建议

1. **动手实践**：使用 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或本地编辑器编写 HTML。
2. **查看源代码**：多看看你感兴趣的网页的 HTML 源码。
3. **学习 CSS 和 JavaScript**：HTML 是基础，配合 CSS 和 JS 可以做出更强大的网页。

---

如果你是初学者，可以从以下内容开始学习：

- 学习 HTML 标签和结构
- 掌握基本的页面布局
- 尝试做一个简单的个人主页

---

需要我帮你写一个完整的 HTML 页面示例吗？或者你想了解某个特定标签的用法？