当前位置：首页 > news >正文

HTML教程

news 2025/10/23 9:22:40

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>
```