Web前端进阶：语义化标签与多媒体嵌入详解-优快云博客

本文链接：https://blog.youkuaiyun.com/linglingpractice/article/details/127983571

本文深入讲解了HTML中强调标签的语义区别、CSS样式应用，以及区块引用、内联框架、文本格式化、图像映射、多媒体嵌入技术，包括iframe、wbr、pre/code、map/area、embed/object和文本方向控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端学习第五周

strong和b、em和i

strong 和 em 都是表示强调的标签，表现形态为文本加粗和斜体。 b 和 i 标签同样也表示文本加粗和斜体。
区别在于，strong和em 是具备语义化的，而b和i是不具备语义化的。

使用CSS样式也能呈现出加粗和斜体的表现形态。

优势：可以不用多个class进行区分，简化选择器操作

引用标签

blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr：缩写或首字母缩略词
address:引用文档地址信息
cite：引用著作的标题

iframe嵌套页面

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。其中src与srcdoc（可渲染标签）同时存在时仅优先识别排在首位的

应用场景：
数据传输、共享代码、局部刷新、第三方介入等。

br 与 wbr

br标签表示换行操作
wbr标签表示软换行操作

提示:如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr 元素来添加 Word
BreakOpportunity(单词换行时机)

pre 与 code

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code 标签。虽然 code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

map 与 area

定义一个客户端图像映射
图像映射(image-map)指带有可点击区域的一幅图像。
area 元素永远嵌套在map元素内部。
area元素可定义图像映射中的区域。

给特殊图形加链接

href属性定义区域的URL
shape属性来定义区域的形状
coords属性定义热区的坐标

	<img src="./R-C.jpg" alt="" usemap="#c">
	<map name="c">
		<area shape="circ" coords="970 465 93" href="" alt="">
	</map>

embed 与 object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。

object元素需要配合param元素一起完成

embed 与 object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。

object元素需要配合param元素一起完成

文字注释与文字方向

ruby 注释(中文注音或字符)，rt 标签定义字符(中文注音或字符)的解释或发音。
bdo标签可覆盖默认的文本方向

<bdo dir="rtl">lingling</bdo>pracice 40hours a day

效果
在这里插入图片描述

通过CSS方式实现

<style>
		span{
			direction: rtl;
			unicode-bidi: bidi-override;
		}
	</style>
</head>
<body>
	<p>
		<span>lingling</span>pracice 40hours a day
	</p>
</body>

在这里插入图片描述

练习：古诗排版

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>琵琶行</title>
	<style>
		h1{
			float: left;
			writing-mode: vertical-rl;
		}
		.author{
			float: left;
			height: 140px;
			writing-mode: vertical-rl;
			writing-mode: tb-rl;
			color: gray;
		}
		.p{
			float: left;
			writing-mode: vertical-rl;
		}
	</style>
</head>
<body>
	<div class="p"><p>浔阳江头夜送客，枫叶荻花秋瑟瑟。<br>
		主人下马客在船，举酒欲饮无管弦。<br>
		醉不成欢惨将别，别时茫茫江浸月。<br>
		忽闻水上琵琶声，主人忘归客不发。<br>
		寻声暗问弹者谁，琵琶声停欲语迟。<br>
		移船相近邀相见，添酒回灯重开宴。<br>
		千呼万唤始出来，犹抱琵琶半遮面。<br>
		转轴拨弦三两声，未成曲调先有情。<br>
		弦弦掩抑声声思，似诉平生不得志。<br>
		低眉信手续续弹，说尽心中无限事。<br>
		轻拢慢捻抹复挑，初为《霓裳》后《六幺》。<br>
		大弦嘈嘈如急雨，小弦切切如私语。<br>
		嘈嘈切切错杂弹，大珠小珠落玉盘。<br>
		东船西舫悄无言，唯见江心秋月白。</p></div>
		<div class="author">白居易 〔唐代〕</div>
		<div><h1>琵琶行</h1></div>
</body>
</html>