HTML 常用标签与属性
约 2603 字大约 9 分钟
2025-11-2
文本与标题(H/P/Span/Strong/Em/Div)
标题:从重要到不重要,<h1> ~ <h6>。
<h1>我的网站</h1>
<h2>关于我</h2>
<h3>联系方式</h3>认识div标签
什么是 <div>?
<div> 是 "division"(分区)的缩写,可以理解为网页中的"容器"或"盒子"。
想象一下搬家时的纸箱:
- 网页 = 整个房间
<div>= 一个个纸箱- 箱子里 = 可以放各种物品(文字、图片、按钮等)
<div> 的基本特点
- 块级元素
<div>是块级元素,这意味着:
- 默认会占据整行的宽度
- 前后会自动换行
- 就像段落一样,每个
<div>都会从新的一行开始
<div> 本身没有特定含义,它只是用来分组和布局。
为什么要使用 <div>?
没有<div>的情况:
<!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> 的情况:
<!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的情况:
<!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了!
<!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>.warning {
color: red;
font-weight: bold;
}
.important-btn {
background-color: red;
color: white;
}现在自己动手尝试一下
动手练习:小作业
运用所学的 HTML 和 CSS 知识,创建一个美观的个人名片页面。不确定的时候翻翻文档
<!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样式自定,发挥自己的创作力,创建一个独特的个人名片页面。
段落与换行:
<p>这是一个段落,里面可以有<strong>加粗</strong>和<em>强调</em>。</p>
<p>这是另一个段落。<br>需要换行时用 <code><br></code>。</p>
<hr> <!-- 水平分割线 -->行内 vs 块级:
<div>是块级元素(换行占整行),用于分区布局;<span>是行内元素(不换行),用于强调局部文字。
使用建议与解释:
- 语义优先:
<strong>表示“语义上的重点”,<b>仅表示“加粗外观”;<em>表示“语气强调”,<i>仅表示“斜体外观”。优先使用语义标签,样式交给 CSS。 - 标题层级:通常一个页面只有一个
<h1>,下面按层级组织为<h2>/<h3>...。不要为求大小随意跳级或用标题替代普通文本。 - 段落与换行:换行请优先使用分段(
<p>),只有在同段内需要视觉换行时使用<br>。<hr>适合用于内容分隔或主题切换。
小案例:文本与标题
<!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>body { font-family: system-ui; margin: 2rem; }
h1 { font-size: 2rem; margin-bottom: .5rem; }
h2 { margin-top: 1.5rem; }
p { margin: .5rem 0; }小作业:写一段个人简介
<!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>body { font-family: system-ui; margin: 2rem; line-height: 1.8; }
p { max-width: 60ch; }三、链接与图片(A/IMG)
什么是 <img> 标签
<img> 标签用于在网页中插入图片,它是自闭合标签(不需要结束标签)。
<img> 标签的基本属性
- src:指定图片的路径(必填)
- alt:指定图片的替代文本(必填,用于图片加载失败时显示)
- width:指定图片的宽度(可选)
- height:指定图片的高度(可选)
基本语法:
<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:在顶部框架中打开链接
基本语法:
<a href="https://www.example.com">链接文本</a><a>标签:定义了一个超链接(anchor)。它是 HTML 中用来创建可点击链接的主要标签。- href 属性:指定目标 URL,当点击链接时,浏览器将导航到此 URL。
这里还有一个target 属性:
- _blank:在新窗口或标签页中打开链接
- _self:在当前窗口或标签页中打开链接(默认)
- _parent:在父框架中打开链接
- _top:在顶部框架中打开链接
<!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>用于图片与说明文字的组合。
小案例:链接与图片
<!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>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); }小作业:做一个“友链”与头像区块
<!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>section { margin-bottom: 1rem; }
img { border: 2px solid #eee; border-radius: 50%; }