HTML 常用标签与属性

约 2603 字大约 9 分钟

2025-11-2

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

标题：从重要到不重要，<h1> ~ <h6>。

index.html
<h1>我的网站</h1>
<h2>关于我</h2>
<h3>联系方式</h3>

认识div标签

什么是 <div>？

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

想象一下搬家时的纸箱：

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

`<div>` 的基本特点

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

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

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

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

没有<div>的情况：

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> 的情况：

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的情况：

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了！

index.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>

style.css

.warning {
  color: red;
  font-weight: bold;
}
.important-btn {
  background-color: red;
  color: white;
}

现在自己动手尝试一下

动手练习：小作业

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

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样式自定，发挥自己的创作力，创建一个独特的个人名片页面。

段落与换行：

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> 适合用于内容分隔或主题切换。

小案例：文本与标题

index.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>

style.css

body { font-family: system-ui; margin: 2rem; }
h1 { font-size: 2rem; margin-bottom: .5rem; }
h2 { margin-top: 1.5rem; }
p { margin: .5rem 0; }

小作业：写一段个人简介

index.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>

style.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：指定图片的高度（可选）

基本语法：

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：在顶部框架中打开链接

基本语法：

index.html
<a href="https://www.example.com">链接文本</a>

<a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。

这里还有一个target 属性：

_blank：在新窗口或标签页中打开链接
_self：在当前窗口或标签页中打开链接（默认）
_parent：在父框架中打开链接
_top：在顶部框架中打开链接

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> 用于图片与说明文字的组合。

小案例：链接与图片

index.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>

style.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); }

小作业：做一个“友链”与头像区块

index.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>

style.css

section { margin-bottom: 1rem; }
img { border: 2px solid #eee; border-radius: 50%; }