案例扩展一产品介绍页面2.1.3

台秀文本格式化标签可以让你的网页文本从普通话变成多种方言从安静的图书馆变成热闹的街头。

让我们一起学习如何使用这些标签把你的网页打扮得花枝招展

2.1.1

假设你正在写一篇博客。

你想要一个大标题一些突出的关键词还有一段引用。

这是你可能会怎么写

!DOCTYPE

strong巴黎/strong这是一个美丽的城市。

/ppem埃菲尔铁塔/em

马克·吐温/blockquote

现在想象你在为一款新产品制作介绍页面。

你想要清晰地展示产品的名称、特点和用户评价。

!DOCTYPE

可以在短短30分钟内充满你的手机。

/pp用户评价/pulliq这是我用过的最快的充电宝/q

小张/li/ul

最后让我们来制作一个个人简历页面。

你想要突出你的姓名、技能和经历。

!DOCTYPE

bodyh1小明/h1p前端开发工程师/ph2技能/h2pstrongHTML/strong,

strongCSS/strong,

JavaScript/ph2工作经历/h2p2019-2022

emABC

通过这些案例你可以看到文本格式化标签在实际应用中的威力。

它们就像是你的魔法棒可以把普通的文本变成具有吸引力和表达力的内容。

记住掌握了这些标签你就掌握了让你的网页内容“活起来”的秘密武器

2.2

标签把你的网页变成一个充满神奇传送门的冒险乐园。

让我们一起探索这些传送门看看它们能带我们去哪些令人兴奋的地方吧

2.2.1

假设你正在写一篇关于旅行的博客并想引用一个关于巴黎的有趣文章。

这就是你可能会怎么做

!DOCTYPE

hrefhttps://example.com/paris这里/a。

/p

/body

标签创建了一个链接指向一个关于巴黎的外部网站。

只需点击“这里”你的读者就可以立即传送到那篇文章就像魔法一样

2.2.2

现在让我们假设你有一个内容丰富的网页需要创建一种方式让读者可以快速跳转到页面的不同部分。

!DOCTYPE

idsection1我们创建了一个锚点。

点击“第一部分”页面会自动滚动到对应的内容。

这就像是在你的网页上装上了一个电梯让读者不用爬楼梯就能到达他们想去的楼层

2.2.3

最后如果你想让访问者能够通过点击一个链接来发送电子邮件给你该怎么做呢

!DOCTYPE

hrefmailto:exampleemail.comexampleemail.com/a/p

/body

创建了一个链接当点击时会自动打开访问者的电子邮件客户端并创建一封地址已填好的邮件。

这就像是给你的读者们送上了一张直达你邮箱的邮票

通过这些案例你已经学会了如何在你的网页中创建各种酷炫的链接和锚点。

记住a

标签不仅仅是一个链接它是一个通向知识、故事和联系的神奇传送门。

现在让我们打开这些传送门探索更多可能性吧

2.3

欢迎来到图像与对象嵌入的世界这里就像是一家充满艺术气息的咖啡厅。

在这里我们将一起学习如何用

img

标签和其他方式把图片、视频和各种酷炫的对象嵌入到你的网页中。

准备好了吗让我们开始这段视觉盛宴

2.3.1

让我们从最基础的开始在你的网页上放置一张图片。

假设你正在写关于自然的博客想要展示一张美丽的风景照片。

!DOCTYPE

属性描述了图片的内容这样即使图片无法显示读者也能知道这里本应展示什么。

2.3.2

假设你现在要为你的摄影作品创建一个画廊页面。

你可以使用一系列的

img

/html在这个画廊中每张图片都是一个视觉故事的开端引导观众进入你的艺术世界。

2.3.3

现在让我们尝试点不一样的。

如果你想在网页上嵌入一个视频怎么办比如你的旅行记录。

!DOCTYPE

typevideo/mp4你的浏览器不支持视频标签。

/videop这是我去年夏天旅行的视频记录希望你喜欢/p

/body

标签定义了视频文件和类型。

这样读者就可以直接在网页上观看你的旅行日记了。

通过这些案例你已经学会了如何在你的网页中嵌入图像和视频给你的内容添加更多色彩和生命。

记住视觉元素可以极大地增强你网页的吸引力。

现在让我们打开创意的大门把你的故事以图像和视频的形式讲述给世界吧