HTML教程

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 156 阅读

4 ·

CC 4.0 BY-SA版权

切勿抄袭，后果自负

文章标签：

#html #前端

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它通过一系列标签来描述网页的结构和内容，以下是一些基础的 HTML 知识和示例：

基础 HTML 结构

一个完整的 HTML 文档通常包含以下基本结构：

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- 这里是网页的可见内容 -->
    <h1>这是一级标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：根元素，包含整个 HTML 文档。
<head>：包含文档的元数据（如字符集、标题、样式等），不直接显示在页面上。
- <meta charset="UTF-8">：指定字符编码为 UTF-8（支持中文等多语言）。
- <title>：定义网页标题，显示在浏览器标签页上。
<body>：包含网页的所有可见内容（文本、图片、链接等）。

常用 HTML 标签

文本标签
- 标题：<h1> 到 <h6>（从大到小）
  html
  
  预览
```
<h1>一级标题</h1>
<h2>二级标题</h2>
```
- 段落：<p>
  html
  
  预览
```
<p>这是一个段落文本。</p>
```
- 换行：<br>（单标签，无闭合）
  html
  
  预览
```
第一行<br>第二行
```
- 强调：<strong>（加粗）、<em>（斜体）
  html
  
  预览
```
<strong>加粗文本</strong>
<em>斜体文本</em>
```
链接标签：<a>

html

预览
```
<a href="https://www.example.com" target="_blank">访问示例网站</a>
```
- href：指定链接地址。
- target="_blank"：在新窗口打开链接。
图片标签：<img>（单标签）

html

预览
```
<img src="image.jpg" alt="图片描述" width="300" height="200">
```
- src：图片路径（本地或网络地址）。
- alt：图片无法显示时的替代文本（重要，利于 SEO 和无障碍）。
- width/height：设置图片尺寸。

列表标签

无序列表：<ul> + <li>

html

预览

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

有序列表：<ol> + <li>

html

预览

<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

容器标签
- <div>：块级容器（独占一行，常用于布局）。
- <span>：行内容器（不换行，常用于包裹部分文本）。
  html
  
  预览
```
<div>这是一个块级容器</div>
<p>这是<span style="color: red;">红色</span>文本</p>
```