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

在这个例子中,<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> 标签定义了视频文件和类型。这样,读者就可以直接在网页上观看你的旅行日记了。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/652489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matplotlib实现动画效果

实现正弦波动画 import matplotlib.pyplot as plt from matplotlib.animation import FuncAnimation import numpy as np# 创建图像和轴 fig, ax plt.subplots()# 生成平均分布在0~2*pi之间的100个坐标点 x_data np.linspace(0, 2 * np.pi, 100) # 画出初始图 line, ax.plo…

【漏洞复现】中移铁通禹路由器信息泄露漏洞

Nx01 产品简介 中移禹路由器支持宽带拨号、动态IP和静态IP三种上网模式,一般中国移动宽带的光猫都是智能光猫也就是光猫带路由器功能,中移禹路由器作为二级路由使用。 Nx02 漏洞描述 中移禹路由器ExportSettings处存在信息泄露漏洞&#xff0c;攻击者可以获取后台权限。 Nx03…

sqli.labs靶场(8-17关)

8、第八关&#xff08;布尔盲注&#xff09; id1显示You are in...........&#xff0c;id1单引号不显示&#xff0c;id1 --显示正常 这个应该是单引号闭合&#xff0c;接下来就和第七关差不多上脚本 爆库名长度&#xff1a;id1%27%20and%20length(database()){i}%20-- 爆库…

算法分析(概论)

目录 第一章 概论 1.算法的概念 1.定义 2.算法设计要求 3.算法的特性 4.算法描述 5.数据结构与算法 6.算法设计的基本步骤 2.算法分析 1.计算机资源 2.算法分析 3.评判算法效率的方法 4.算法时间复杂度分析 5.渐进符号 1.大Ο符号 2.大Ω符号 3.大Θ符号 4.三…

花式分析一个5M的SQL占用70GB内存

进程内存分析 "WAL writer process (PID 66902) was terminated by signal 6: Aborted",,,,,,,,,"","postmaster"从日志中找到被kill的postmaster进程66902 到osw中找进程消耗的内存。由于top没有PPID&#xff0c;PS没有USS信息&#xff0c;所…

1-1 this指针闭包 作用域

作用域 & 上下文 作用域链 - 儿子能用爸爸的东西&#xff0c;调皮的儿子&#xff08;var&#xff09;可以去领居家&#xff08;块级&#xff09;拿东西 面试题&#xff1a; let a globalconsole.log(a)function course() {let b zhaowaconsole.log(b)// 2.6 函数提升 &…

洗牌 发牌 以及玩家拿到牌之后整理牌的实现思路

题目&#xff1a;洗牌 发牌 以及玩家拿到牌之后整理牌的实现思路 实现思路&#xff1a; 方式1&#xff1a;用数组实现 import java.util.Arrays; public class demo14 {public static void main(String[] args) {//所有的牌面花色char[] flags {♥,♠,♦,♣};//所有的牌面数…

bert预训练模型下载

查看 bert 模型所支持的预训练模型有哪些 from transformers import BERT_PRETRAINED_MODEL_ARCHIVE_LIST print(BERT_PRETRAINED_MODEL_ARCHIVE_LIST) 运行结果会吧所有支持的模型打印出来&#xff0c;比如 bert-base-chinese 一般下载模型我们搜索到的都是去 https://hugg…

详解顺序结构双指针处理算法

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…

每日一题 力扣365 水壶问题

365. 水壶问题 题目描述&#xff1a; 有两个水壶&#xff0c;容量分别为 jug1Capacity 和 jug2Capacity 升。水的供应是无限的。确定是否有可能使用这两个壶准确得到 targetCapacity 升。 如果可以得到 targetCapacity 升水&#xff0c;最后请用以上水壶中的一或两个来盛放取…

MySQL中使用percona-xtrabackup工具 三种备份及恢复 (超详细教程)

CSDN 成就一亿技术人&#xff01; 今天讲讲再MySQL中使用percona-xtrabackup这个开源工具来实现在线备份。 CSDN 成就一亿技术人&#xff01; 目录 介绍percona-xtrabackup 安装Percona 完整备份 备份流程 恢复流程 1.模拟文件损坏 2.滚回日志 3.恢复数据目录 4.授权…

可解释性人工智能(XAI)概述

文章目录 每日一句正能量前言可解释性人工智能&#xff08;XAI&#xff09;定义研究的作用应用领域XAI的目标后记 每日一句正能量 一个人若想拥有聪明才智&#xff0c;便需要不断地学习积累。 前言 人工智能&#xff08;AI&#xff09;的发展速度迅猛&#xff0c;并在许多领域…

【JavaScript】ECMA6Script es6

文章目录 一、 es6的介绍二、 es6的变量和模板字符串2.1 let 与 var2.2 const 与 var2.3 模板字符串 三、 es6的解构表达式四、 es6的箭头函数4.1 声明和特点4.2 实践和应用场景4.3 rest和spread 五、es6的对象创建和拷贝5.1 对象创建的语法糖5.2 对象的深拷贝和浅拷贝 六、es6…

Qt扩展-QXlsx读写Excel配置使用

QXlsx读写Excel配置使用 一、概述1. 功能概述2. 其他维护 二、安装1. 下载源码2. 配置项目3. 测试代码4. 运行结果 一、概述 项目介绍&#xff1a;https://qtexcel.github.io/QXlsx/Example.html GitHub&#xff1a;https://github.com/QtExcel/QXlsx/tree/master QXlsx 是一个…

2024年最适合开Palworld的游戏服务器

如果要开Palworld服务器&#xff0c;当然要选大内存的服务器 在雨云&#xff0c;你不仅可以 链接&#xff1a;雨云 - 新一代云服务提供商欢迎来到以用户体验为优先的雨云&#xff0c;我们提供稳定高速的国际虚拟主机&#xff0c;云服务器产品&#xff0c;强大的功能&#xff…

requests库的使用

Requests 是一个优雅而简单的 Python HTTP 库&#xff0c;其实 Python 内置了用于访问网络的资源模块&#xff0c;比如urllib&#xff0c;但是它远不如 Requests 简单优雅&#xff0c;而且缺少了许多实用功能。所以&#xff0c;更推荐掌握 Requests 做接口测试&#xff0c;这也…

不学前沿技术与朽木浮草何异 ?Java21新特性

不学前沿技术与朽木浮草何异 &#xff1f;Java21新特性 文章目录 不学前沿技术与朽木浮草何异 &#xff1f;Java21新特性JEP 430&#xff1a;字符串模板&#xff08;预览&#xff09;JEP431&#xff1a;序列化集合JEP 439&#xff1a;分代 ZGCJEP 440&#xff1a;记录模式JEP 4…

自定义包的设计与实现

这是一个 CPacket 类&#xff0c;用于解析包含固定格式的数据。该类的成员变量包括固定包头 sHead、包长度 nLength、控制命令 sCmd、包数据 strData 和和校验 sSum。 构造函数&#xff1a; CPacket()&#xff1a;默认构造函数&#xff0c;初始化成员变量。 CPacket(const B…

WindowsOS

C:. ├─PerfLogs&#xff0c;系统日志文件夹 ├─Program Files&#xff0c;程序文件 ├─Program Files&#xff08;x86&#xff09;&#xff0c;程序文件&#xff08;x86&#xff09; ├─ProgramData&#xff0c;程序数据 ├─Windows&#xff0c;Windows系统文件夹 └─Us…

数据结构排序小结

排序类型小结 &#x1f4a6; 插入排序直接插入排序希尔排序 &#x1f4a6; 选择排序直接选择排序堆排序 &#x1f4a6; 交换排序冒泡排序快速排序&#x1f43e;霍尔版本补坑位版本前后指针版本非递归版本 &#x1f4a6; 归并排序递归版本非递归版本 &#x1f4a6; 性能测试 &am…