《HTML 简易速速上手小册》第2章：HTML 的标签和元素（2024 最新版）
文章目录
- 2.1 文本格式化标签（✨ 网页的“时尚搭配师”）
-
- 2.1.1 基础示例：一篇博客的格式化
- 2.1.2 案例扩展一：产品介绍页面
- 2.1.3 案例扩展二：个人简历
- 2.2 链接和锚点（✨ 网页的神奇传送门）
-
- 2.2.1 基础示例：创建一个链接到其他网站
- 2.2.2 案例扩展一：在同一页面内使用锚点
- 2.2.3 案例扩展二：链接到邮箱地址
- 2.3 图像与对象嵌入（️ 网页的图形化咖啡厅）
-
- 2.3.1 基础示例：嵌入一张图片
- 2.3.2 案例扩展一：创建图片画廊
- 2.3.3 案例扩展二：嵌入视频
2.1 文本格式化标签（✨ 网页的“时尚搭配师”）
欢迎进入文本格式化的世界，这里是 HTML 的 T 台秀！文本格式化标签可以让你的网页文本从普通话变成多种方言，从安静的图书馆变成热闹的街头。让我们一起学习如何使用这些标签，把你的网页打扮得花枝招展！
2.1.1 基础示例：一篇博客的格式化
假设你正在写一篇博客。你想要一个大标题，一些突出的关键词，还有一段引用。这是你可能会怎么写：
DOCTYPE html>
<html>
<head>
<title>我的旅行日记title>
head>
<body>
<h1>我的旅行日记h1>
<p>去年夏天，我去了 <strong>巴黎strong>，这是一个美丽的城市。p>
<p><em>埃菲尔铁塔em> 真的很壮观。p>
<blockquote>“旅行是最好的教育。” - 马克·吐温blockquote>
body>
html>
在这个例子中， 使得“我的旅行日记”变成了一个大标题， 让“巴黎”显得更加重要， 为“埃菲尔铁塔”添加了一抹情感色彩，而 则优雅地引用了马克·吐温的名言。
2.1.2 案例扩展一：产品介绍页面
现在，想象你在为一款新产品制作介绍页面。你想要清晰地展示产品的名称、特点和用户评价。
DOCTYPE html>
<html>
<head>
<title>超级充电宝title>
head>
<body>
<h2>超级充电宝h2>
<p>这款 <strong>超级充电宝strong> 可以在短短30分钟内充满你的手机。p>
<p>用户评价：p>
<ul>
<li><q>这是我用过的最快的充电宝！q> - 小李li>
<li><q>设计优雅，性能强大。q> - 小张li>
ul>
body>
html>
这里， 作为产品名称的标题， 强调了产品的关键特点，而 则用来引用用户的评价，使之更加醒目。
2.1.3 案例扩展二：个人简历
最后，让我们来制作一个个人简历页面。你想要突出你的姓名、技能和经历。
DOCTYPE html>
<html>
<head>
<title>小明的简历title>
head>
<body>
<h1>小明h1>
<p>前端开发工程师p>
<h2>技能h2>
<p><strong>HTMLstrong>, <strong>CSSstrong>, JavaScriptp>
<h2>工作经历h2>
<p>2019-2022 在 <em>ABC 公司em> 担任前端开发。p>
body>
html>
在这个简历中， 和 标签用来分别表示姓名和不同部分的标题。 强调了你的核心技能，而 则为你的工作经历添加了一点个性化的强调。
通过这些案例，你可以看到文本格式化标签在实际应用中的威力。它们就像是你的魔法棒，可以把普通的文本变成具有吸引力和表达力的内容。记住，掌握了这些标签，你就掌握了让你的网页内容“活起来”的秘密武器！
2.2 链接和锚点（✨ 网页的神奇传送门）
欢迎来到链接和锚点的奇妙世界！在这里，我们将学习如何使用 标签，把你的网页变成一个充满神奇传送门的冒险乐园。让我们一起探索这些传送门，看看它们能带我们去哪些令人兴奋的地方吧！
2.2.1 基础示例：创建一个链接到其他网站
假设你正在写一篇关于旅行的博客，并想引用一个关于巴黎的有趣文章。这就是你可能会怎么做：
DOCTYPE html>
<html>
<head>
<title>我的巴黎之旅title>
head>
<body>
<p>想了解更多关于巴黎的信息吗？请访问 <a href="https://example.com/paris">这里a>。p>
body>
html>
在这里， 标签创建了一个链接，指向一个关于巴黎的外部网站。只需点击“这里”，你的读者就可以立即传送到那篇文章，就像魔法一样！
2.2.2 案例扩展一：在同一页面内使用锚点
现在，让我们假设你有一个内容丰富的网页，需要创建一种方式，让读者可以快速跳转到页面的不同部分。
DOCTYPE html>
<html>
<head>
<title>我的个人博客title>
head>
<body>
<h2>目录h2>
<ul>
<li><a href="#section1">第一部分a>li>
<li><a href="#section2">第二部分a>li>
ul>
<h3 id="section1">第一部分h3>
<p>一些有趣的内容。p>
<h3 id="section2">第二部分h3>
<p>另一些有趣的内容。p>
body>
html>
这里，通过使用 href="#section1" 和 id="section1"，我们创建了一个锚点。点击“第一部分”，页面会自动滚动到对应的内容。这就像是在你的网页上装上了一个电梯，让读者不用爬楼梯就能到达他们想去的楼层！
2.2.3 案例扩展二：链接到邮箱地址
最后，如果你想让访问者能够通过点击一个链接来发送电子邮件给你，该怎么做呢？
DOCTYPE html>
<html>
<head>
<title>联系我title>
head>
<body>
<p>有问题吗？给我发邮件：<a href="mailto:[email protected]">[email protected]a>p>
body>
html>
在这个例子中， 创建了一个链接，当点击时，会自动打开访问者的电子邮件客户端，并创建一封地址已填好的邮件。这就像是给你的读者们送上了一张直达你邮箱的邮票！
通过这些案例，你已经学会了如何在你的网页中创建各种酷炫的链接和锚点。记住， 标签不仅仅是一个链接，它是一个通向知识、故事和联系的神奇传送门。现在，让我们打开这些传送门，探索更多可能性吧！
2.3 图像与对象嵌入（️ 网页的图形化咖啡厅）
欢迎来到图像与对象嵌入的世界，这里就像是一家充满艺术气息的咖啡厅。在这里，我们将一起学习如何用
2.3.1 基础示例：嵌入一张图片
让我们从最基础的开始：在你的网页上放置一张图片。假设你正在写关于自然的博客，想要展示一张美丽的风景照片。
DOCTYPE html>
<html>
<head>
<title>我的自然之旅title>
head>
<body>
<h1>美丽的山脉h1>
<img src="mountains.jpg" alt="美丽的山脉">
<p>这是我在旅行中拍摄的山脉，非常壮观。p>
body>
html>
在这里，
alt 属性描述了图片的内容，这样即使图片无法显示，读者也能知道这里本应展示什么。
2.3.2 案例扩展一：创建图片画廊
假设你现在要为你的摄影作品创建一个画廊页面。你可以使用一系列的
DOCTYPE html>
<html>
<head>
<title>我的摄影画廊title>
head>
<body>
<h1>我的摄影作品h1>
<img src="nature.jpg" alt="大自然">
<img src="city.jpg" alt="城市风光">
<img src="portrait.jpg" alt="人像">
<p>欢迎来到我的摄影世界！这里有我拍摄的各种照片。p>
body>
html>
在这个画廊中，每张图片都是一个视觉故事的开端，引导观众进入你的艺术世界。
2.3.3 案例扩展二：嵌入视频
现在，让我们尝试点不一样的。如果你想在网页上嵌入一个视频怎么办？比如，你的旅行记录。
DOCTYPE html>
<html>
<head>
<title>我的旅行视频title>
head>
<body>
<h1>观看我的旅行日记h1>
<video width="320" height="240" controls>
<source src="travel_diary.mp4" type="video/mp4">
你的浏览器不支持视频标签。
video>
<p>这是我去年夏天旅行的视频记录，希望你喜欢！p>
body>
html>
通过 标签，我们可以在网页上嵌入视频。controls 属性添加了播放控制，而
通过这些案例，你已经学会了如何在你的网页中嵌入图像和视频，给你的内容添加更多色彩和生命。记住，视觉元素可以极大地增强你网页的吸引力。现在，让我们打开创意的大门，把你的故事以图像和视频的形式讲述给世界吧！