首页 前端知识 《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)

《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)

2024-08-27 21:08:37 前端知识 前端哥 556 322 我要收藏

在这里插入图片描述

文章目录

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

在这个例子中,<h1> 使得“我的旅行日记”变成了一个大标题,<strong> 让“巴黎”显得更加重要,<em> 为“埃菲尔铁塔”添加了一抹情感色彩,而 <blockquote> 则优雅地引用了马克·吐温的名言。

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>

这里,<h2> 作为产品名称的标题,<strong> 强调了产品的关键特点,而 <q> 则用来引用用户的评价,使之更加醒目。

2.1.3 案例扩展二:个人简历

最后,让我们来制作一个个人简历页面。你想要突出你的姓名、技能和经历。

<!DOCTYPE html>
<html>
<head>
    <title>小明的简历</title>
</head>
<body>
    <h1>小明</h1>
    <p>前端开发工程师</p>
    <h2>技能</h2>
    <p><strong>HTML</strong>, <strong>CSS</strong>, JavaScript</p>
    <h2>工作经历</h2>
    <p>2019-2022 在 <em>ABC 公司</em> 担任前端开发。</p>
</body>
</html>

在这个简历中,<h1><h2> 标签用来分别表示姓名和不同部分的标题。<strong> 强调了你的核心技能,而 <em> 则为你的工作经历添加了一点个性化的强调。

通过这些案例,你可以看到文本格式化标签在实际应用中的威力。它们就像是你的魔法棒,可以把普通的文本变成具有吸引力和表达力的内容。记住,掌握了这些标签,你就掌握了让你的网页内容“活起来”的秘密武器!

在这里插入图片描述

在这里插入图片描述


2.2 链接和锚点(🚪✨🌍 网页的神奇传送门)

欢迎来到链接和锚点的奇妙世界!在这里,我们将学习如何使用 <a> 标签,把你的网页变成一个充满神奇传送门的冒险乐园。让我们一起探索这些传送门,看看它们能带我们去哪些令人兴奋的地方吧!

2.2.1 基础示例:创建一个链接到其他网站

假设你正在写一篇关于旅行的博客,并想引用一个关于巴黎的有趣文章。这就是你可能会怎么做:

<!DOCTYPE html>
<html>
<head>
    <title>我的巴黎之旅</title>
</head>
<body>
    <p>想了解更多关于巴黎的信息吗?请访问 <a href="https://example.com/paris">这里</a></p>
</body>
</html>

在这里,<a> 标签创建了一个链接,指向一个关于巴黎的外部网站。只需点击“这里”,你的读者就可以立即传送到那篇文章,就像魔法一样!

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:example@email.com">example@email.com</a></p>
</body>
</html>

在这个例子中,<a href="mailto:example@email.com"> 创建了一个链接,当点击时,会自动打开访问者的电子邮件客户端,并创建一封地址已填好的邮件。这就像是给你的读者们送上了一张直达你邮箱的邮票!

通过这些案例,你已经学会了如何在你的网页中创建各种酷炫的链接和锚点。记住,<a> 标签不仅仅是一个链接,它是一个通向知识、故事和联系的神奇传送门。现在,让我们打开这些传送门,探索更多可能性吧!

在这里插入图片描述


2.3 图像与对象嵌入(🖼️🎥🌐 网页的图形化咖啡厅)

欢迎来到图像与对象嵌入的世界,这里就像是一家充满艺术气息的咖啡厅。在这里,我们将一起学习如何用 <img> 标签和其他方式把图片、视频和各种酷炫的对象嵌入到你的网页中。准备好了吗?让我们开始这段视觉盛宴!

2.3.1 基础示例:嵌入一张图片

让我们从最基础的开始:在你的网页上放置一张图片。假设你正在写关于自然的博客,想要展示一张美丽的风景照片。

<!DOCTYPE html>
<html>
<head>
    <title>我的自然之旅</title>
</head>
<body>
    <h1>美丽的山脉</h1>
    <img src="mountains.jpg" alt="美丽的山脉">
    <p>这是我在旅行中拍摄的山脉,非常壮观。</p>
</body>
</html>

在这里,<img src="mountains.jpg" alt="美丽的山脉"> 为我们的网页添加了一幅生动的山脉照片。alt 属性描述了图片的内容,这样即使图片无法显示,读者也能知道这里本应展示什么。

2.3.2 案例扩展一:创建图片画廊

假设你现在要为你的摄影作品创建一个画廊页面。你可以使用一系列的 <img> 标签来展示多张照片。

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

通过 <video> 标签,我们可以在网页上嵌入视频。controls 属性添加了播放控制,而 <source> 标签定义了视频文件和类型。这样,读者就可以直接在网页上观看你的旅行日记了。

通过这些案例,你已经学会了如何在你的网页中嵌入图像和视频,给你的内容添加更多色彩和生命。记住,视觉元素可以极大地增强你网页的吸引力。现在,让我们打开创意的大门,把你的故事以图像和视频的形式讲述给世界吧!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17092.html
标签
评论
发布的文章

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!