18910140161

Html

首页 >> 前端开发 >> Html

html基础菜鸟教程 初识HTML（下）

顺晟科技

2022-09-30 11:33:28

175

媒体标签|链接标签

初识HTML（下）

媒体标签

图片标签

  • 单标签
  • img标签借助标签的属性设置
<img src="" alt="">
<!--src、alt属性名 “” 属性值-->

src属性

  • 属性名：src

  • 属性值：目标图片的路径

  • 网页和目标图片在一个文件夹中，路径直接写目标图片的名字（包括后缀名）

  • 图片路径问题详见下一部分有关路径的描述

    <body>
    <img src="./1.jpg" alt="">
</body>
<!--标签上可以存在多个属性，属性之间用空格隔开-->
<!--标签和属性之间用空格隔开-->
<!--属性之间没有先后顺序之分-->

alt属性

  • 属性名：alt

  • 属性值：替换文字——当图片无法显示时显示的文字

title属性

  • 属性名：title
  • 属性值：鼠标悬停时显示的文字
  • title属性不仅仅用于图片标签

width和height属性

  • 属性名：width和hight
  • 属性值：宽度和高度（数字）
  • 如果只设置其中一个属性，另一个会自动等比例缩放
  • 如果同时设置两个属性可能会时图片变形

路径

  • 绝对路径

    目录下的绝对位置，可直接到达的目标位置，通常从盘符开始

  • 相对路径

    从当前文件出发找目标文件的过程

    • 同级目录

      <!--方法一：-->
<img src="目标图片.后缀">
<!--方法二：-->
<img src="./目标图片.后缀">

    • 下级目录

      <img src="目标图片所在文件夹/目标图片.后缀">

    • 上级目录

      <img src="../目标图片.后缀">

音频标签

  • 双标签

    <audio src="音频路径" controls></audio>
<!--音频+controls默认手动播放-->
<!--不加controls无法播放-->

  • 属性

src 音频路径 controls 显示播放控件 autoplay 自动播放（部分浏览器不支持） loop 循环播放
属性名 功能
  • 音频标签目前支持3种格式：MP3、Wav、Ogg

视频标签

  • 双标签
<video src="视频路径" controls></video>
  • 属性
src 音频路径 controls 显示播放控件 autoplay 自动播放（谷歌浏览器中需要配合muted实现静音播放） loop 循环播放
属性名 功能
  • 视频标签目前支持3种格式：MP4、WebM、Ogg

链接标签

href：跳转地址

  • 双标签

    <a href="./目标网页.html">超链接</a>

    当开发网页初期，href的值写到#（空白链接）代替具体的跳转地址

target属性

  • 属性名：target
  • 属性值：目标网页的打开方式
_self 默认值，在当前窗口中跳转 _blank 在新窗口中跳转
取值 效果 
<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
上一篇：html上标标签 HTML（上） 下一篇：使用requests爬取网页:Pyt
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！