• HTML基本元素(二)


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

  • 相关阅读:
    【Jenkins】坑
    【Windows】修改hosts
    【Linux】防火墙操作-centos7
    【Linux】学习-centos 7
    【Jenkins】介绍、安装
    【Jenkins】有关网站
    【Jenkins】中文汉化
    【Jenkins】修改Jenkins插件为国内源
    python笔记之孤单的元组
    python笔记之水仙花数
  • 原文地址:https://www.cnblogs.com/mossbaoo/p/5730540.html
Copyright © 2020-2023  润新知