---
title: HTML 常用标签与属性
createTime: 2025/11/2 19:30:00
permalink: /programming/web/basic-syntax/html-tags-attributes/
---

## 文本与标题（H/P/Span/Strong/Em/Div）

**标题**：从重要到不重要，`<h1>` ~ `<h6>`。
```html title="index.html"
<h1>我的网站</h1>
<h2>关于我</h2>
<h3>联系方式</h3>
```

### 认识div标签

**什么是 `<div>`？**

`<div>` 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。

想象一下搬家时的纸箱：

* 网页 = 整个房间
* `<div>` = 一个个纸箱
* 箱子里 = 可以放各种物品（文字、图片、按钮等）

### `<div>` 的基本特点

1. 块级元素
`<div>` 是块级元素，这意味着：

* 默认会占据整行的宽度
* 前后会自动换行
* 就像段落一样，每个`<div>`都会从新的一行开始

**`<div>` 本身没有特定含义，它只是用来分组和布局。**

### 为什么要使用 `<div>`？

没有`<div>`的情况：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p>欢迎来到我的个人网站！</p>
<img src="photo.jpg" alt="我的照片">
<p>这是我的个人介绍...</p>
<button>联系我</button>
</body>
</html>
```

所有元素都堆在一起，很难分别控制样式。

使用 `<div>` 的情况：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<div class="header">
  <h1>我的网站</h1>
  <p>欢迎来到我的个人网站！</p>
</div>
<div class="content">
  <img src="photo.jpg" alt="我的照片">
  <p>这是我的个人介绍...</p>
</div>
<div class="footer">
  <button>联系我</button>
</div>
</body>
</html>
```
这样我就可以分别控制每个部分的样式啦！

这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是**起的名字！！**

太好了，恭喜你答对了，那么我们为什么要用class呢？

### Class

Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。

想象一个学校：
* HTML 元素 = 学生
* Class = 学生的身份（如"三年级一班"、"篮球队员"）
* CSS = 老师，根据身份给学生安排不同的任务和服装

class基本用法此处就不举例了，详情参照上面的代码。

如果没有class的情况：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p>普通段落</p>
<p>个人介绍</p>
<p>重要提示</p>
<button>普通按钮</button>
<button>重要按钮</button>
</body>
</html>
```

如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。

这时候就可以用class了！
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p class="normal">普通段落</p>
<p class="intro">个人介绍</p>
<p class="warning">重要提示</p>
<button class="normal-btn">普通按钮</button>
<button class="important-btn">重要按钮</button>
</body>
</html>
```
@tab style.css
```css
.warning {
  color: red;
  font-weight: bold;
}
.important-btn {
  background-color: red;
  color: white;
}
```
:::
**现在自己动手尝试一下**

## 动手练习：小作业

运用所学的 HTML 和 CSS 知识，创建一个美观的个人名片页面。不确定的时候翻翻文档

```html title='index.html'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 在这里添加字符编码和标题 -->
</head>
<body>
    <!-- 创建一个名片容器 div，class 为 "card" -->
    
        <!-- 在卡片内部分为三个区域： -->
        
        <!-- 1. 头部区域：包含姓名和职位 -->
        <div class="card-header">
            <!-- 添加 h1 标题显示你的姓名 -->
            <!-- 添加 p 段落显示你的职位或专业 -->
        </div>
        
        <!-- 2. 主体区域：包含联系信息 -->
        <div class="card-body">
            <!-- 添加至少3个联系信息，使用 p 标签 -->
            <!-- 例如：电话、邮箱、地址等 -->
        </div>
        
        <!-- 3. 底部区域：包含个人简介 -->
        <div class="card-footer">
            <!-- 添加一个个人简介段落 -->
        </div>
    
</body>
</html>
```

css样式自定，发挥自己的创作力，创建一个独特的个人名片页面。

**段落与换行**：
```html title="index.html"
<p>这是一个段落，里面可以有<strong>加粗</strong>和<em>强调</em>。</p>
<p>这是另一个段落。<br>需要换行时用 <code>&lt;br&gt;</code>。</p>
<hr> <!-- 水平分割线 -->
```

**行内 vs 块级**：
- `<div>` 是块级元素（换行占整行），用于分区布局；
- `<span>` 是行内元素（不换行），用于强调局部文字。

使用建议与解释：
- 语义优先：`<strong>` 表示“语义上的重点”，`<b>` 仅表示“加粗外观”；`<em>` 表示“语气强调”，`<i>` 仅表示“斜体外观”。优先使用语义标签，样式交给 CSS。
- 标题层级：通常一个页面只有一个 `<h1>`，下面按层级组织为 `<h2>/<h3>...`。不要为求大小随意跳级或用标题替代普通文本。
- 段落与换行：换行请优先使用分段（`<p>`），只有在同段内需要视觉换行时使用 `<br>`。`<hr>` 适合用于内容分隔或主题切换。

**小案例：文本与标题**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>文本与标题案例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>我的网站</h1>
    <h2>关于我</h2>
    <p>我是一名<strong>前端开发者</strong>，喜欢<em>简洁的设计</em>与清晰的结构。</p>
    <hr>
    <h3>联系方式</h3>
    <p>Email: hello@example.com</p>
  </body>
</html>
```
@tab style.css
```css
body { font-family: system-ui; margin: 2rem; }
h1 { font-size: 2rem; margin-bottom: .5rem; }
h2 { margin-top: 1.5rem; }
p { margin: .5rem 0; }
```
:::

**小作业：写一段个人简介**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>个人简介</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>你的名字</h1>
    <h2>一句话介绍</h2>
    <p>用两段文字，分别写你现在在做什么、你感兴趣的方向。</p>
    <p>使用 <strong>strong</strong> 与 <em>em</em> 做重点强调。</p>
  </body>
</html>
```
@tab style.css
```css
body { font-family: system-ui; margin: 2rem; line-height: 1.8; }
p { max-width: 60ch; }
```
:::

## 三、链接与图片（A/IMG）

### 什么是 `<img>` 标签

`<img>` 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。

### `<img>` 标签的基本属性

* src：指定图片的路径（必填）
* alt：指定图片的替代文本（必填，用于图片加载失败时显示）
* width：指定图片的宽度（可选）
* height：指定图片的高度（可选）

基本语法：
```html title='index.html'
<img src="photo.jpg" alt="我的照片" width="200" height="300">
```

### HTML 超链接

HTML 链接（Anchor）是网页之间跳转的核心部分。

HTML 使用链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

HTML 链接 通过 `<a>` 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。

## `<a>` 标签的基本属性

* href：指定链接的目标 URL（必填）
* target：指定链接在何处打开（可选）
  * _blank：在新窗口或标签页中打开链接
  * _self：在当前窗口或标签页中打开链接（默认）
  * _parent：在父框架中打开链接
  * _top：在顶部框架中打开链接

基本语法：
```html title='index.html'
<a href="https://www.example.com">链接文本</a>
```
- `<a>` 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
- href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。

**这里还有一个target 属性**：
- _blank：在新窗口或标签页中打开链接
- _self：在当前窗口或标签页中打开链接（默认）
- _parent：在父框架中打开链接
- _top：在顶部框架中打开链接

```html title='index.html'
<!DOCTYPE html>
<html>
<head>
    <title>target属性示例</title>
</head>
<body>
    <h2>target属性示例</h2>
    
    <!-- 在当前窗口打开（默认） -->
    <a href="https://www.baidu.com" target="_self">当前窗口打开</a>
    
    <!-- 在新窗口打开 -->
    <a href="https://www.baidu.com" target="_blank">新窗口打开</a>
    
    <!-- 在父窗口打开 -->
    <a href="https://www.baidu.com" target="_parent">父窗口打开</a>
    
    <!-- 建议：新窗口打开外部链接 -->
    <a href="https://www.example.com" target="_blank" rel="noopener">
        外部网站（安全的新窗口）
    </a>
</body>
</html>
```
复制代码到自己的html文件中，尝试一下不同的target属性值。

常用属性：
- `href`：目标地址；
- `target="_blank"`：新窗口打开；
- `rel="noopener"`：安全与性能（避免旧窗口被新页面控制）。

补充说明：
- 链接安全：外链新窗口打开时同时设置 `rel="noopener"` 或 `rel="noreferrer"`，避免安全与性能问题。
- 图片可使用 `loading="lazy"` 懒加载，减少首屏资源压力；`alt` 请写出图片用途或内容摘要。
- 设定 `width/height` 可以预留占位，减少页面布局抖动（CLS）。复杂场景可考虑 `<picture>` + `<source>` 做响应式图片。
- 与图片相关的配套标签：`<figure>` + `<figcaption>` 用于图片与说明文字的组合。

**小案例：链接与图片**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>链接与图片案例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav>
      <a href="/" >首页</a>
      <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>
    </nav>
    <img src="avatar.jpg" alt="我的头像" width="160" height="160">
  </body>
</html>
```
@tab style.css
```css
nav { display: flex; gap: 1rem; margin-bottom: 1rem; }
nav a { color: #06c; text-decoration: none; }
nav a:hover { text-decoration: underline; }
img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
```
:::

**小作业：做一个“友链”与头像区块**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>友链与头像</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
      <h2>友情链接</h2>
      <p>
        <a href="https://notes.simengweb.com" target="_blank" rel="noopener">祀梦笔记</a>
        ·
        <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>
      </p>
    </section>
    <section>
      <h2>头像</h2>
      <img src="avatar.jpg" alt="你的头像" width="160" height="160">
    </section>
  </body>
</html>
```
@tab style.css
```css
section { margin-bottom: 1rem; }
img { border: 2px solid #eee; border-radius: 50%; }
```
:::

