html中图片、音乐、视频标签及选择器、背景

这篇具有很好参考价值的文章主要介绍了html中图片、音乐、视频标签及选择器、背景。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

图片

音乐

视频

子代选择器

交集选择器

背景


文章主要补充之前html文章一些漏洞:HTML常用标签+表格+表单_小俱的一步步的博客-CSDN博客

在VScode中新创建html文件,!+“Tab”键,自动生成html骨架

图片

<img src="图片相对地址"></img>

     属性:

alt:替换文本

title:提示文本,鼠标悬停在图片上提示文本

音乐

<audio src="音乐相对地址" controls autoplay loop></audio>

     属性:

controls:显示播放控件

autoplay:自动播放

loop:循环播放

视频

        <video src="视频相对地址" controls autoplay muted></video>

     属性:

controls:显示播放控件

autoplay:自动播放,但是谷歌浏览器中要配muted 才能自动播放且静音

loop:循环播放

补充标签: 

html中图片、音乐、视频标签及选择器、背景,前端,html5

子代选择器

html中图片、音乐、视频标签及选择器、背景,前端,html5

交集选择器

多个相同标签可以单独选择一个

html中图片、音乐、视频标签及选择器、背景,前端,html5

背景

html中图片、音乐、视频标签及选择器、背景,前端,html5 

背景颜色

background-color:颜色名/rgba(红,绿,蓝,透明度)

快捷键 :w300+h200+bgc

html中图片、音乐、视频标签及选择器、背景,前端,html5

html中图片、音乐、视频标签及选择器、背景,前端,html5

背景图

快捷键:bgi

html中图片、音乐、视频标签及选择器、背景,前端,html5

背景平铺

background-repeat

快捷键 :bgr

属性值:

取值 效果
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿水平方向(x轴)平铺
repeat-y 沿垂直方向(y轴)平铺

背景位置

background-position

快捷键: bgp

html中图片、音乐、视频标签及选择器、背景,前端,html5html中图片、音乐、视频标签及选择器、背景,前端,html5 

背景符合属性写法:

background: color image repeat position 文章来源地址https://www.toymoban.com/news/detail-731479.html

到了这里,关于html中图片、音乐、视频标签及选择器、背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5中的视频和音频标签

    HTML5中的视频标签是 video ,音频标签是 audio 。这两个标签都是HTML5新增的多媒体标签,用于在网页中嵌入视频和音频。 1、视频标签 video 可以通过以下属性来控制视频的播放: src:指定视频文件的URL。 poster:指定视频封面图的URL。 width:指定视频的宽度。 height:指定视频的

    2024年02月03日
    浏览(42)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)
  • HTML5中视频标签学习中出现只显示声音而没有画面的情况。

    作为一名程序小白,这是第一篇博客,目的在于记录自己学习过程中遇见的问题,怎么去解决问题。 1、这是使用的视频标签: 2、出现的问题:只有声音没有画面 3、查阅资料总结: (1)视频的格式是否支持: 目前html的video元素支持一下三种视频格式: MP4 : MPEG4 文件使用

    2024年02月08日
    浏览(39)
  • HTML5中关于解决video标签禁止右键和下载视频的办法

    近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能,领挖还有一些office、压缩包、图片、文本、音频和视频的预览功能。 音频我使用的是APlayer,视频使用的是DPlayer,为了做个兼容,视频还有htm

    2024年02月11日
    浏览(73)
  • 【前端web入门第一天】02 HTML图片标签 超链接标签

    文章目录: 1.HTML图片标签 1.1 图像标签-基本使用 1.2 图像标签-属性 1.3 路径 1.3.1 相对路径 1.3.2 绝对路径 2.超链接标签 3.音频标签 4.视频标签 作用:在网页中插入图片。 src用于指定图像的位置和名称,是的必须属性。 本地图片的使用 图片拖拽到文件夹里 前两个属性是重点,后两

    2024年01月25日
    浏览(48)
  • 大二Web课程设计:服装网页设计题材——HTML+CSS汉服文化带背景音乐素材带视频(12页)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年01月17日
    浏览(54)
  • 【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明

    一、图片标签 在介绍图片标签之前,首先可以了解一下图片的格式。 1、jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图; 2、gif:支持的颜色比较少,支持简单透明,支持动图; 3、png:支持的颜色丰富,支持复杂透明,不支持动图; 4、webp:是谷歌新推出

    2023年04月08日
    浏览(56)
  • HTML5 <rt> 标签、HTML5 <ruby> 标签

    HTML5 rt标签用于表示为ruby标签中的注释内容。 一个 ruby 注释: 尝试一下 » IE 9+、Firefox、Opera、Chrome 和 Safari 支持 rt 标签。 注释: IE 8 或更早版本的 IE 浏览器不支持 rt 标签。 rt 标签定义字符(中文注音或字符)的解释或发音。 将 rt 标签与 ruby 和 rp 标签一起使用: ruby 元素

    2023年04月23日
    浏览(118)
  • HTML5 <s> 标签、HTML5 <sub> 和 <sup> 标签

    s 标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。 在 HTML 4.01 中不赞成使用 s 标签。 在 HTML 5 中不支持 s 标签。 提示:请使用 del 标签代替。 关于s 标签的详细详细,你可以参考本站的“HTML s 标签”一节! HTML5 sub和sup标签分别为文档中的内容定义下标

    2024年02月01日
    浏览(80)
  • Html5版音乐游戏制作及分享(H5音乐游戏)

    这里实现了Html5版的音乐游戏的核心玩法。 游戏的制作借鉴了,很多经典的音乐游戏玩法,通过简单的代码将音乐的节奏与操作相结合。 可以通过手机进行游戏,准确点击下落时的目标,进行得分。 点击试玩 游戏内的下落数据是通过手打记录的,可能有些偏差哈。 1、Html中

    2023年04月17日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包