HTML-CSS(三十二)一些比较特殊的标签之间的区别与联系

br与wbr

br标签表示换行操作，wbr标签表示软换行操作。
br：只要你在段落中添加br标签，再进入页面那一刻就已经形成换行了。而当你宽度变小时，长单词随着宽度会整个移动。
wbr： 如果单词太长，或者你担心浏览器会在错误的位置换行，那么你可以使用wbr元素来添加Word Break Opportunity。wbr将一个长单词分割成几个小单词，当宽度变小，需要换行时，将长单词划分成几个小单词进行换行，而不是将整个单词换行。
下图就能够看到sunshineyou在br和wbr之下的区分

pre和code

pre元素可定义与格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成宽字体，但它暗示着这段文本是源程序代码
如果希望代码能够完全复制粘贴到网页当中，必不可少的操作就是要将特殊符号进行转译。 要不它就会以代码形式执行，要知道标签是无法直接展示页面当中的
一般我们不会使用那么麻烦的自己去转译，都会使用富文本编辑器去改变一些字符

map与area

定义一个客户端图像映射。图像映射指代有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域.。总而言之，就是给特殊图形添加链接

map元素定位需要映射的图片，通过map中name属性和img中的usemap属性值一致，才能通过map元素操作对应的图片。
基本结构：

<img src="../img/龙猫.jpeg" usemap="#cat">
<map name="cat">
	<area>...<area>
</map>

area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。设置以后当你鼠标移入到设置的区域，鼠标就会变成小手了（这是a标签自带的cursor：pointer）

area能添加的热区的形状：矩形、圆形、多边形。通过点击区域内部，不松手，就会形成一个框框，到时候你就可以看到你划得区域对不对了
矩形：（左上角和右下角坐标必须确定）

 <area shape="rect" coords="左上角x轴 左上角y轴 右下角x轴 右下角y轴" href ="https://www.baidu.com" alt="" />

圆形：

<!-- 圆形 -->
<area shape="circle" coords="圆心x 圆心y 半径" href ="https://www.taobao.com" alt="" title="我是小粉哦,我会跳转淘宝哦"/>

多边形：就增加多几个坐标点就好了：记得坐标是要按照顺序的围成一圈，要么顺时针，要么逆时针。不能乱排序否则你获得的图案就不会围成你想要的范围

<area shape="poly" coords="147 77 211 153 280 80 381 387 211 655  16 362 " href ="https://www.taobao.com" alt="" title="我是小粉哦,我会跳转淘宝哦"/>

embed与object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是兼容不同的浏览器而已。这两个标签使用非常少，而且使用起来还需要安装插件，还有就是移动端不怎么支持flash插件(我就不详细介绍栏)

<embed src="引入flash动画地址" type=""> //得是flash类型的哦

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

<object data="">
			<param name="movie" value="flash地址">
</object>

video（视频）和audio（音频）（H5新标签）

udio标签嵌入音频文件、video标签表示嵌入视频文件。默认控件是不显示的，可通过control属性来显示控件。
controls=‘controls’ 显示控件

loop=‘loop’: 循环播放

autoplay=‘autoplay’ 自动播放
以上三个都可以只写属性名
audio:

<audio src="./王雨澄%20-%20原谅.mp3" controls="controls" loop="loop" autoplay="autoplay">
</audio>

vedio：

<video src="./王嘉尔,林俊杰%20-%20过.mp4" controls autoplay loop></video>

为了能够支持多个备选文件的兼容支持，可以配合source标签。浏览器会根据你给的音频找到一种兼容本浏览器的播放，这就是为什么一个音频文件往往需要不同格式的放在代码留作备用的原因

<video controls>
	<source src="王嘉尔,林俊杰%20-%20过.ovg">
	<source src="王嘉尔,林俊杰%20-%20过.mp4">
</video>
<audio controls autoplay>
		<source src="王雨澄%20-%20原谅.ogv" >
		<source src="王雨澄%20-%20原谅.mp3" >
</audio>

实现视频能够展现半屏播放

div style="width: 100%; height: 400px;overflow: hidden;">
			<video src="./王嘉尔,林俊杰%20-%20过.mp4"autoplay="" style="min-width: 100%;min-height: 100%;">
			</video>
</div>

如果直接在元素上使用width：100%，height：100%那么就跟图片一样就以为是等比缩放