HTML基本元素(二)

时间:2021-06-07 15:54:44

1.图像

  <img src="URL" alt="" />

说明
src 定义图像的url
alt 定义图像的替代文本
width 设置图像的宽度
height 设置图像的高度

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

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

2.文件引入地址

  <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"

3.图像热区

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

  <img src="URL"  usemap="#map名称" />

  <map name="map名称">

    <area shape="形状" coords="坐标值" href="URL" />

  </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"/>

4.audio(音频),video(视频)

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

  1)audio(音频)

  <audio src="URL"></audio>

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

    <audio width="200" height="100" controls="controls">

      <source src="song.ogg" type="audio/ogg">

      <source src="song.mp3" type="audio/mpeg">

      <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的新标签,有部分浏览器不兼容,而且音频和视频会大大减慢了页面的加载速度,所以这两个标签可以尽量少用,甚至不用。