《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>
标签定义了视频文件和类型。这样,读者就可以直接在网页上观看你的旅行日记了。
通过这些案例,你已经学会了如何在你的网页中嵌入图像和视频,给你的内容添加更多色彩和生命。记住,视觉元素可以极大地增强你网页的吸引力。现在,让我们打开创意的大门,把你的故事以图像和视频的形式讲述给世界吧!
相关文章:

《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
文章目录 2.1 文本格式化标签(🎩✨📜 网页的“时尚搭配师”)2.1.1 基础示例:一篇博客的格式化2.1.2 案例扩展一:产品介绍页面2.1.3 案例扩展二:个人简历 2.2 链接和锚点(Ὢ…...

2024斋月大促跨境卖家准备指南
市场覆盖西欧、中东、东南亚、北非地区的跨境电商卖家注意了,2024年的斋月即将开启,较往年日期,今年提前了10天左右,斋月的第一天预测在3月11日星期一到来。 根据Google搜索数据可知,目前已经进入高频“斋月”搜索期&…...

【C++干货铺】哈希结构在C++中的应用
目录 unordered系列关联式容器 unordered_map unordered_map的接口说明 1.unordered_map的构造 2. unordered_map的容量 3. unordered_map的迭代器 4. unordered_map的元素访问 5. unordered_map的查询 6. unordered_map的修改操作 7. unordered_map的桶操作 底层结构 …...

蓝桥杯算法赛第4场小白入门赛强者挑战赛
蓝桥杯算法赛第4场小白入门赛&强者挑战赛 小白1小白2小白3强者1小白4强者2小白5强者3小白6强者4强者5强者6 链接: 第 4 场 小白入门赛 第 4 场 强者挑战赛 小白1 直接用C内置函数即可。 #include <bits/stdc.h> using namespace std;#include <bits…...

【每日一题】6.LeetCode——轮转数组
📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》|《数据结构与算法》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏小杨水平有限,欢…...

Java编程练习之类的封装2
1.封装一个股票(Stock)类,大盘名称为上证A股,前一日的收盘点是2844.70点,设置新的当前值如2910.02点,控制台既要显示以上信息,又要显示涨跌幅度以及点数变化的百分比。运行效果如下:…...

Banana Pi BPI-R4开源路由器开发板快速上手用户手册,采用联发科MT7988芯片设计
介绍 Banana Pi BPI-R4 路由器板采用 MediaTek MT7988A (Filogic 880) 四核 ARM Corex-A73 设计,4GB DDR4 RAM,8GB eMMC,板载 128MB SPI-NAND 闪存,还有 2x 10Gbe SFP、4x Gbe 网络端口,带 USB3 .2端口,M.2…...

C#使用OpenCvSharp4库中5个基础函数-灰度化、高斯模糊、Canny边缘检测、膨胀、腐蚀
C#使用OpenCvSharp4库中5个基础函数-灰度化、高斯模糊、Canny边缘检测、膨胀、腐蚀 使用OpenCV可以对彩色原始图像进行基本的处理,涉及到5个常用的处理: 灰度化 模糊处理 Canny边缘检测 膨胀 腐蚀 1、测试图像lena.jpg 本例中我们采用数字图像处…...

蓝桥杯2024/1/31----第十届省赛题笔记
题目要求: 1、 基本要求 1.1 使用大赛组委会提供的国信长天单片机竞赛实训平台,完成本试题的程序设计 与调试。 1.2 选手在程序设计与调试过程中,可参考组委会提供的“资源数据包”。 1.3 请注意: 程序编写、调试完成后选手…...

CANopen转Profinet网关实现原理与CANopen主站配置方法
CANopen转Profinet网关(XD-COPNm20)具有Profinet从站功能的设备。CANopen是一种通用的工业网络协议,而Profinet是以太网上的一种通信协议,两者在工业自动化领域具有广泛的应用。CANopen转Profinet网关的主要作用是实现CANopen设备…...

Mysql单行函数练习
数据表 链接:https://pan.baidu.com/s/1dPitBSxLznogqsbfwmih2Q 提取码:b0rp --来自百度网盘超级会员V5的分享 单行函数练习 单行函数(一行数据返回一个结果) #1.显示系统时间(注:日期时间) #2.查询员工工号,姓名,工资以及提高百分之20后的结果(new…...

C++ 11新特性之完美转发
概述 在C编程语言的演进过程中,C 11标准引入了一系列重大革新,其中之一便是“完美转发”机制。这一特性使得模板函数能够无损地传递任意类型的实参给其他函数或构造函数,从而极大地增强了C在泛型编程和资源管理方面的灵活性与效率。 完美转发…...

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-友情链接管理实现
锋哥原创的SpringbootLayui python222网站实战: python222网站实战课程视频教程(SpringBootPython爬虫实战) ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程(SpringBootPython爬虫实战) ( 火…...

【百度Apollo】探索自动驾驶:深入解析Apollo开放平台架构的博客指南
🎬 鸽芷咕:个人主页 🔥 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下…...

代理模式详解(重点解析JDK动态代理)
- 定义 在解析动态代理模式之前,先简单看下整个代理模式。代理模式分为普通代理、强制模式、动态代理模式。其中动态代理模式主要实现方式为Java JDK提供的JDK动态代理,第三方类库提供的,例如CGLIB动态代理。 代理模式就是为其他对象提供一种…...

【大厂AI课学习笔记】1.3 人工智能产业发展(2)
(注:腾讯AI课学习笔记。) 1.3.1 需求侧 转型需求:人口红利转化为创新红利。 场景丰富:超大规模且多样的应用场景。主要是我们的场景大,数据资源丰富。 抗疫加速:疫情常态化,催生新…...

【Python】一个简单的小案例:实现将两张图片合并为一张
使用时保证已经安装了opencv-python import cv2bg "BG.jpg" # 背景图名称 fg "FG.jpg" # 前景图名称 output_filename "new.jpg" # 合成后图片名称img_bg cv2.imread(bg) # 读取背景图 img_fg cv2.imread(fg) # 读取前景图# 读取背景…...

不同的强化学习模型适配与金融二级市场的功能性建议
DQN ES DDPG A2C TD3 SAC QMIX MADDPG PPO CQL IMPALA 哪个模型适合进行股票操作 在考虑使用哪种模型进行股票操作时,需要考虑模型的特点、适用场景以及实现复杂度等因素。以下是对您列出的几种强化学习模型的简要概述,以帮助您做出选择: DQ…...

【音视频原理】音频编解码原理 ③ ( 音频 比特率 / 码率 | 音频 帧 / 帧长 | 音频 帧 采样排列方式 - 交错模式 和 非交错模式 )
文章目录 一、音频 比特率 / 码率1、音频 比特率2、音频 比特率 案例3、音频 码率4、音频 码率相关因素5、常见的 音频 码率6、视频码率 - 仅做参考 二、音频 帧 / 帧长1、音频帧2、音频 帧长度 三、音频 帧 采样排列方式 - 交错模式 和 非交错模式1、交错模式2、非交错模式 一…...

spring常用语法
etl表达式解析 if (rawValue ! null && rawValue.startsWith("#{") && entryValue.endsWith("}")) { // assume its spel StandardEvaluationContext context new StandardEvaluationContext(); context.setBeanResolver(new Be…...

【计算机毕业设计】128电脑配件销售系统
🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板ÿ…...

换个思维方式快速上手UML和 plantUML——类图
和大多数朋友一样,Jeffrey 在一开始的时候也十分的厌烦软件工程的一系列东西,对工程化工具十分厌恶,觉得它繁琐,需要记忆很多没有意思的东西。 但是之所以,肯定有是因为。对工程化工具的不理解和不认可主要是基于两个逻…...

策略模式+SpringBoot接口,一个接口实现接收的数据自动分流处理
策略模式 定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户。策略模式的精髓就在于将经常变化的一点提取出来,单独变成一类,并且各个类别可以相互替换和组合。 1、策略接口 CalculationStrategy //算数 public interface…...

P1228 地毯填补问题(葬送的芙蓉王【bushi】)
地毯填补问题 题目描述 相传在一个古老的阿拉伯国家里,有一座宫殿。宫殿里有个四四方方的格子迷宫,国王选择驸马的方法非常特殊,也非常简单:公主就站在其中一个方格子上,只要谁能用地毯将除公主站立的地方外的所有地…...

352. 闇の連鎖(树上差分,LCA)
352. 闇の連鎖 - AcWing题库 传说中的暗之连锁被人们称为 Dark。 Dark 是人类内心的黑暗的产物,古今中外的勇者们都试图打倒它。 经过研究,你发现 Dark 呈现无向图的结构,图中有 N 个节点和两类边,一类边被称为主要边ÿ…...

dcat admin + dingo + nginx 开发前台
前言 Dcat Admin 是一个功能强大的后端框架,主要用于开发管理后台。然而,大多数网站不仅需要一个管理后台,还需要一个用户界面,即“前台”,以及它们自己的用户系统。 为了实现这一目标,我们需要对 Dcat A…...

安卓线性布局LinearLayout
<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_width"match_parent"android:…...

Advanced CNN
文章目录 回顾Google NetInception1*1卷积Inception模块的实现网络构建完整代码 ResNet残差模块 Resedual Block残差网络的简单应用残差实现的代码 练习 回顾 这是一个简单的线性的卷积神经网络 然而有很多更为复杂的卷积神经网络。 Google Net Google Net 也叫Inception V…...

判断当前设备是不是安卓或者IOS?
代码(重要点): 当前文件要是 xxx.js文件,就需要写好代码后调用才会执行: // 判断是不是安卓 const isAndroid () > {return /android/.test(navigator.userAgent.toLowerCase()); }// 判断是不是ios const isIOS () > {return /iphone|ipad|ipod/.test(navigator.use…...

使用C++操作Matlab中的mat文件
matlab提供读写MAT文件的头文件和库函数,下面列出这些文件的路径,其中matlabroot指matlab安装的路径,arch来识别平台架构 头文件在matlabroot\extern\include库函数在matlabroot\bin\win64例程在matlabroot\extern\examples\eng_mat头文件 …...