网站在当地做宣传,文艺风格wordpress主题,公众号开发服务招标公告,互动营销是什么意思文章目录 2.1 文本格式化标签#xff08;#x1f3a9;✨#x1f4dc; 网页的“时尚搭配师”#xff09;2.1.1 基础示例#xff1a;一篇博客的格式化2.1.2 案例扩展一#xff1a;产品介绍页面2.1.3 案例扩展二#xff1a;个人简历 2.2 链接和锚点#xff08;#x1f6a… 文章目录 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
headtitle我的旅行日记/title
/head
bodyh1我的旅行日记/h1p去年夏天我去了 strong巴黎/strong这是一个美丽的城市。/ppem埃菲尔铁塔/em 真的很壮观。/pblockquote“旅行是最好的教育。” - 马克·吐温/blockquote
/body
/html在这个例子中h1 使得“我的旅行日记”变成了一个大标题strong 让“巴黎”显得更加重要em 为“埃菲尔铁塔”添加了一抹情感色彩而 blockquote 则优雅地引用了马克·吐温的名言。
2.1.2 案例扩展一产品介绍页面
现在想象你在为一款新产品制作介绍页面。你想要清晰地展示产品的名称、特点和用户评价。
!DOCTYPE html
html
headtitle超级充电宝/title
/head
bodyh2超级充电宝/h2p这款 strong超级充电宝/strong 可以在短短30分钟内充满你的手机。/pp用户评价/pulliq这是我用过的最快的充电宝/q - 小李/liliq设计优雅性能强大。/q - 小张/li/ul
/body
/html这里h2 作为产品名称的标题strong 强调了产品的关键特点而 q 则用来引用用户的评价使之更加醒目。
2.1.3 案例扩展二个人简历
最后让我们来制作一个个人简历页面。你想要突出你的姓名、技能和经历。
!DOCTYPE html
html
headtitle小明的简历/title
/head
bodyh1小明/h1p前端开发工程师/ph2技能/h2pstrongHTML/strong, strongCSS/strong, JavaScript/ph2工作经历/h2p2019-2022 在 emABC 公司/em 担任前端开发。/p
/body
/html在这个简历中h1 和 h2 标签用来分别表示姓名和不同部分的标题。strong 强调了你的核心技能而 em 则为你的工作经历添加了一点个性化的强调。
通过这些案例你可以看到文本格式化标签在实际应用中的威力。它们就像是你的魔法棒可以把普通的文本变成具有吸引力和表达力的内容。记住掌握了这些标签你就掌握了让你的网页内容“活起来”的秘密武器 2.2 链接和锚点✨ 网页的神奇传送门
欢迎来到链接和锚点的奇妙世界在这里我们将学习如何使用 a 标签把你的网页变成一个充满神奇传送门的冒险乐园。让我们一起探索这些传送门看看它们能带我们去哪些令人兴奋的地方吧
2.2.1 基础示例创建一个链接到其他网站
假设你正在写一篇关于旅行的博客并想引用一个关于巴黎的有趣文章。这就是你可能会怎么做
!DOCTYPE html
html
headtitle我的巴黎之旅/title
/head
bodyp想了解更多关于巴黎的信息吗请访问 a hrefhttps://example.com/paris这里/a。/p
/body
/html在这里a 标签创建了一个链接指向一个关于巴黎的外部网站。只需点击“这里”你的读者就可以立即传送到那篇文章就像魔法一样
2.2.2 案例扩展一在同一页面内使用锚点
现在让我们假设你有一个内容丰富的网页需要创建一种方式让读者可以快速跳转到页面的不同部分。
!DOCTYPE html
html
headtitle我的个人博客/title
/head
bodyh2目录/h2ullia href#section1第一部分/a/lilia href#section2第二部分/a/li/ulh3 idsection1第一部分/h3p一些有趣的内容。/ph3 idsection2第二部分/h3p另一些有趣的内容。/p
/body
/html这里通过使用 href#section1 和 idsection1我们创建了一个锚点。点击“第一部分”页面会自动滚动到对应的内容。这就像是在你的网页上装上了一个电梯让读者不用爬楼梯就能到达他们想去的楼层
2.2.3 案例扩展二链接到邮箱地址
最后如果你想让访问者能够通过点击一个链接来发送电子邮件给你该怎么做呢
!DOCTYPE html
html
headtitle联系我/title
/head
bodyp有问题吗给我发邮件a hrefmailto:exampleemail.comexampleemail.com/a/p
/body
/html在这个例子中a hrefmailto:exampleemail.com 创建了一个链接当点击时会自动打开访问者的电子邮件客户端并创建一封地址已填好的邮件。这就像是给你的读者们送上了一张直达你邮箱的邮票
通过这些案例你已经学会了如何在你的网页中创建各种酷炫的链接和锚点。记住a 标签不仅仅是一个链接它是一个通向知识、故事和联系的神奇传送门。现在让我们打开这些传送门探索更多可能性吧 2.3 图像与对象嵌入️ 网页的图形化咖啡厅
欢迎来到图像与对象嵌入的世界这里就像是一家充满艺术气息的咖啡厅。在这里我们将一起学习如何用 img 标签和其他方式把图片、视频和各种酷炫的对象嵌入到你的网页中。准备好了吗让我们开始这段视觉盛宴
2.3.1 基础示例嵌入一张图片
让我们从最基础的开始在你的网页上放置一张图片。假设你正在写关于自然的博客想要展示一张美丽的风景照片。
!DOCTYPE html
html
headtitle我的自然之旅/title
/head
bodyh1美丽的山脉/h1img srcmountains.jpg alt美丽的山脉p这是我在旅行中拍摄的山脉非常壮观。/p
/body
/html在这里img srcmountains.jpg alt美丽的山脉 为我们的网页添加了一幅生动的山脉照片。alt 属性描述了图片的内容这样即使图片无法显示读者也能知道这里本应展示什么。
2.3.2 案例扩展一创建图片画廊
假设你现在要为你的摄影作品创建一个画廊页面。你可以使用一系列的 img 标签来展示多张照片。
!DOCTYPE html
html
headtitle我的摄影画廊/title
/head
bodyh1我的摄影作品/h1img srcnature.jpg alt大自然img srccity.jpg alt城市风光img srcportrait.jpg alt人像p欢迎来到我的摄影世界这里有我拍摄的各种照片。/p
/body
/html在这个画廊中每张图片都是一个视觉故事的开端引导观众进入你的艺术世界。
2.3.3 案例扩展二嵌入视频
现在让我们尝试点不一样的。如果你想在网页上嵌入一个视频怎么办比如你的旅行记录。
!DOCTYPE html
html
headtitle我的旅行视频/title
/head
bodyh1观看我的旅行日记/h1video width320 height240 controlssource srctravel_diary.mp4 typevideo/mp4你的浏览器不支持视频标签。/videop这是我去年夏天旅行的视频记录希望你喜欢/p
/body
/html通过 video 标签我们可以在网页上嵌入视频。controls 属性添加了播放控制而 source 标签定义了视频文件和类型。这样读者就可以直接在网页上观看你的旅行日记了。
通过这些案例你已经学会了如何在你的网页中嵌入图像和视频给你的内容添加更多色彩和生命。记住视觉元素可以极大地增强你网页的吸引力。现在让我们打开创意的大门把你的故事以图像和视频的形式讲述给世界吧
