HTML基本元素（二）

2022-11-12 16:39:31

1.图像

　　Ps：注意在设置图像大小时，只设置width，或者只设置height，能实现等比例缩放。

　　适量使用图像能是页面更加美观，更加生动；但过度使用图像，则会使页面加载更慢。

　　<img> 标签的 src 属性是必需的，它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

　　1）绝对路径是指向其他站点（比如 src="http://www.baidu.com"）

　　2）相对路径是指向站内的文件（比如 src="./images/123.jpg"）

　　　　①若文件在当前目录，则src="./123.jpg"

　　　　②若要回到上一层目录，则src="../123.jpg"

　　　　③若要进入一层目录，则src="./images/123.jpg"

　　　　④若要先回到上一层目录，再进入另一层目录，则src="../images/123.jpg"

　　图像热区一般应用在地图上

　　</map>

说明
shape	形状(rect、circle、poly )
coords	坐标值

　　Ps：1）"图像地图名称"必须要一致，也就是，usemap的值必须与<map>标记中的name值相同

　　　　2）所有<area>标记均要在<map>与</map>之间

　　　　3）形状分为三种，各有不同的坐标取值：

　　　　　　①矩形rect，取值：左上角顶点坐标（x1,y1），右下角顶点坐标（x2,y2），代码如下：

　　　　　　<area shape="rect" coords="x1,y1,x2,y2" href="url"/>

　　　　　　②圆形circle，取值：圆心坐标（x1,y1），半径r，代码如下：

　　　　　　<area shape="circle" coords="x1,y1,r" href="url"/>

　　　　　　③多边形poly，各顶点坐标依次为（x1,y1），（x2,y2），（x3,y3），......，代码如下：

　　　　　　<area shape="poly" coords="x1,y1,x2,y2,......" href="url"/>

　　带控制器的音频/视频播放器

　　1）audio（音频）

　　Ps：如果考虑到不同浏览器对视频文件的兼容性，浏览器可以选择它所支持的文件，使用以下方式：

　　　　　　<p>Your browser does not support the audio tag.</p>

　　　　</audio>

　　　　或者，在开始标签和结束标签之间放置文本内容，这样不兼容的浏览器就可以显示出不支持该标签的信息：

　　　　<audio src="URL">

　　　　　　<p>您的浏览器不支持 audio 标签。</p>

　　　　 </audio>

　　*audio的属性说明：

属性	值	说明
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

　　2）video（视频）

　　　　同上。（"video标签" 替代 "audio标签"）

　　*video的属性说明：

属性	值	说明
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
width	px	设置视频播放器的宽度。
height	px	设置视频播放器的高度。

　　温馨提示：<audio>标签和<video>标签是HTML5的新标签，有部分浏览器不兼容，而且音频和视频会大大减慢了页面的加载速度，所以这两个标签可以尽量少用，甚至不用。