HTML基础插入视频等标签的使用

最新推荐文章于 2024-01-10 17:09:07 发布
最新推荐文章于 2024-01-10 17:09:07 发布
阅读量788 收藏 2
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/opo77_/article/details/105772607
版权

HTML1

<body>
<!-- 主体 -->
<h1>小狗Turisa的太空空间站</h1>
<!-- 标题 -->
<hr/>
<!-- 水平线horizontal -->
<p>你好，我是一只名叫<i>Turisa</i>的小狗，我来自<i>狗狗星球</i>。欢迎来到我的<b>太空空间站</b>。</p>
<!-- 段落 -->
<p>这是我使用了一个换行符<br/>的文字</p>
<!-- 换行符break -->
<i>今天天气很好</i>
<!-- 斜体字italic -->
<b>我今天心情很好</b>
<!-- 加粗bord -->
<pre>
 Black and white
 Thick and furry
 Fast as the wind
 Always ina hurry
</pre>
<!-- preformatted预先定好格式 -->
<img src="https://i-blog.csdnimg.cn/blog_migrate/11ba433eb32d2c9f6714f1d6f0775c98.jpeg" />

</body>

效果：

小狗Turisa的太空空间站

你好，我是一只名叫Turisa的小狗，我来自狗狗星球。欢迎来到我的太空空间站。

这是我使用了一个换行符
的文字

今天天气很好 我今天心情很好 
 Black and white
 Thick and furry
 Fast as the wind
 Always ina hurry

HTML2


<ol>
    <li>糯米洗净泡好之后放入电饭锅中，加入糖，眼，倒入椰浆，再加适量水，开始煮饭功能</li>
    <li>芒果去皮去核切两大片</li>
    <li>把煮好的糯米饭以及芒果放在盘子里</li>
    <li>在盘子里倒入一些椰浆</li>
</ol>
 <!-- ordered list 有序列表 -->

<p>芝士蛋糕配方</p>
<ul>
    <li>奶油奶酪</li>
    <li>鸡蛋</li>
    <li>黄油</li>
    <li>牛奶</li>
    <li>低筋面粉</li>
    <li>细砂糖</li>
</ul>
<!-- unordered list无序列表 -->
 
<dl>
    <dt>Ponny</dt>
        <dd>
            据最新的吉尼斯世界纪录统计，现在世界上最长寿的猫是一只叫做Poppy的猫，它已有24岁,相当于人类的114岁左右了。Poppy在它24岁时成为了世界上最古老的猫冠。Poppy出生于1990年2月。现在它已十分的老了
        </dd>
    <dt>Boo Boo</dt>
        <dd>世界上最小的狗 现今世界上最小的狗是一只名叫Boo Boo的小狗，它是一只吉娃娃，这只来自美国肯塔基的小狗，身在2007年12月测得的身长只有10.16厘米（4英寸）。</dd>
       
    
    <dt>Chilli</dt>
        <dd>世界上最大的奶牛英国这头名叫Chilli的奶牛是世界上最大的奶牛。奶牛高6英尺重一吨多，这还不是他的最终体重，“红辣椒”还在成长中</dd>   
</dl>
<!-- definition list 定义列表<dt>代表被定义的词</dt><dd>代表词的意义</dd> -->

<a href="https://www.cxy61.com/index-image/index.html">橙旭园 儿童编程</a>

<p>电影评论：</p>
    <ul>
        <li><a href="https://movie.douban.com/subject/1291546/">霸王别姬</a></li>
        <li><a href="https://movie.douban.com/subject/1291875/">阳光灿烂的日子</a></li>
        <li><a href="https://movie.douban.com/subject/1291561/">千与千寻</a></li>
        <li><a href="https://movie.douban.com/subject/3541415/">盗梦空间</a></li>
	</ul>

<!-- 小狗网站 -->
<body>
    <!-- 主体 -->
    <h1>小狗Turisa的太空空间站</h1>
    <!-- 标题 -->
    <hr/>
    <!-- 水平线horizontal -->
    <p>你好，我是一只名叫<i>Turisa</i>的小狗，我来自<i>狗狗星球</i>。欢迎来到我的<b>太空空间站</b>。</p>
    <!-- 段落 -->
    <p>这是我使用了一个换行符<br/>的文字</p>
    <!-- 换行符break -->
    <i>今天天气很好</i>
    <!-- 斜体字italic -->
    <b>我今天心情很好</b>
    <!-- 加粗bord -->
    <pre>
     Black and white
     Thick and furry
     Fast as the wind
     Always ina hurry
    </pre>
    <!-- preformatted预先定好格式 -->
    <img src="https://i-blog.csdnimg.cn/blog_migrate/11ba433eb32d2c9f6714f1d6f0775c98.jpeg" />
    <img src="https://i-blog.csdnimg.cn/blog_migrate/3658eddfffa43e120167741f1576673e.jpeg"/>
    <p>如何开始与一只小狗玩耍</p>
    <ol>
        <li>得到小狗主人同意，确定小狗打过疫苗</li>
        <li>深情望着小狗双眼并且微笑</li>
        <li>看到小狗尾巴在摇摆</li>
        <li>缓缓的伸出手，摸摸小狗脑袋</li>
        <li>根据小狗反应，决定下一步动作</li>
    </ol>
    <p>狗狗的品种</p>
    <ul>
        <li>哈士奇</li>
        <li>吉娃娃</li>
        <li>柴犬</li>
        <li>金毛</li>
        <li>斗牛犬</li>
        <li>中华田园犬</li>
    </ul>
    <a href="https://www.worldanimalprotection.org.cn/">推进世界动物保护</a>
    <p>动物保护：</p>
    <ul>
    <li><a href="http://www.china.com.cn/aboutchina/zhuanti/ysdw/2008-12/08/content_16915955.htm" target="_blank">中国野生动物保护协会</a></li>
    <li><a href="https://capn-online.info/" target="_blank">中国动物保护网</a></li>
    <li><a href="https://www.worldanimalprotection.org.cn/" target="_blank">世界动物保护协会</a></li>
    </ul>
    <!-- target="_blank"使网站在新窗口打开 -->
</body>

效果：

  1. 糯米洗净泡好之后放入电饭锅中，加入糖，眼，倒入椰浆，再加适量水，开始煮饭功能
  2. 芒果去皮去核切两大片
  3. 把煮好的糯米饭以及芒果放在盘子里
  4. 在盘子里倒入一些椰浆

芝士蛋糕配方

  • 奶油奶酪
  • 鸡蛋
  • 黄油
  • 牛奶
  • 低筋面粉
  • 细砂糖
Ponny
据最新的吉尼斯世界纪录统计，现在世界上最长寿的猫是一只叫做Poppy的猫，它已有24岁,相当于人类的114岁左右了。Poppy在它24岁时成为了世界上最古老的猫冠。Poppy出生于1990年2月。现在它已十分的老了
Boo Boo
世界上最小的狗 现今世界上最小的狗是一只名叫Boo Boo的小狗，它是一只吉娃娃，这只来自美国肯塔基的小狗，身在2007年12月测得的身长只有10.16厘米（4英寸）。 
<dt>Chilli</dt>
    <dd>世界上最大的奶牛英国这头名叫Chilli的奶牛是世界上最大的奶牛。奶牛高6英尺重一吨多，这还不是他的最终体重，“红辣椒”还在成长中</dd>

橙旭园 儿童编程

电影评论：

小狗Turisa的太空空间站

你好，我是一只名叫Turisa的小狗，我来自狗狗星球。欢迎来到我的太空空间站。

这是我使用了一个换行符
的文字

今天天气很好 我今天心情很好 
     Black and white
     Thick and furry
     Fast as the wind
     Always ina hurry

如何开始与一只小狗玩耍

  1. 得到小狗主人同意，确定小狗打过疫苗
  2. 深情望着小狗双眼并且微笑
  3. 看到小狗尾巴在摇摆
  4. 缓缓的伸出手，摸摸小狗脑袋
  5. 根据小狗反应，决定下一步动作

狗狗的品种

  • 哈士奇
  • 吉娃娃
  • 柴犬
  • 金毛
  • 斗牛犬
  • 中华田园犬
推进世界动物保护

动物保护：

HTML3


<video src="https://static1.bcjiaoyu.com/%E4%B8%AD%E5%8D%8E%E9%A3%8E%E5%85%89.mp4" preload="none" controls loop></video>
<!-- 插入视频 -->
<dl>
    <dt>preload="..."</dt>
    <dd>后面可以跟三种内容</dd>
<ul>
    <dt>none</dt>
    <dd> 表示在用户按下播放按钮之前，浏览器不会加载视频</dd>

    <dt>auto</dt>
    <dd>表示浏览器应该在页面加载时载入视频</dd>

    <dt>metadata</dt>
    <dd>表示当页面加载后仅加载音频/视频的元数据</dd>
</ul>
    <dt>controls</dt>
    <dd>使浏览器提供默认播放控件</dd>
    <dt>loop</dt>
    <dd>表示在视频结束之后重新反复播放</dd>
    <dt>autoplay</dt>
    <dd>视频文件自动播放</dd>
</dl>
<audio src="https://static1.bcjiaoyu.com/SolarRollerCoaster%205.8.15.MP3" controls loop></audio>
<!-- 插入音频 -->
<!-- div将一组元素变成块级元素 -->

效果：
在这里插入图片描述

opo77_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
插入视频--使用＜video＞标签为网页添加视频
m0_57327747的博客
05-10 3567
使用方法 举例 显示结果 在网页上添加视频和添加音频的标签属性用法相同。 讲解 1.autoplay:如果出现该属性，则视频在就绪后马上播放。 2.controls:如果出现该属性，则向用户显示控件，比如播放按钮。 3.loop:如果出现该属性，则当媒介文件完成播放后再次开始播放。 4.muted:如果出现该属性，视频的音频输出为静音。 5.preload:如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 6.poster:规定视频正在下载时
html基础-常用标签的使用
qq_45383769的博客
04-04 988
html基础-常用标签的使用 1.h系列的标题标签 一般是<h1>到<h6> 可以看到h标签大致的区别就是h1最大，h6最小，主要是大小的区别 2.<p>标签 表示为段落标签，表示囊括的范围就是一个自然段，自然段有什么特点呢，那就是换行了。 p标签会在开始的时候自动换到下一行，且结尾的地方不允许别人跟着。其他的内容只能滚到下一行去。 3.<a>标签 （1）当前窗口打开 a标签跳转的时候默认就是当前页面跳转 （2）新窗口中打开 需要增加一个命令：target
HTML：图片和视频标签的使用
dienangpiao2051的博客
08-22 489
介绍：在html网页中，图片和视频是基本的元素，在网页中插入图片和视频有自己的标签，分别是img、embed，来源都是使用src来链接。 插入图片： <img src="图片的来源" alt="图片的介绍" title="鼠标放在图片时显示的信息"> 使用alt：是为了方便搜索引擎识别图片，因为基本上搜索引擎是不能直接识别二进制的图片的。 使用tit...
零基础HTML入门教程(13)——插入视频video标签
weixin_61808806的博客
12-06 5768
我们前几小结学习了，插入图片插入音频等，我们这一小结学习一下，插入视频标签video并熟练使用。(1)直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 (2)controls 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 代码如下 效果如下 我们可以看到，页面上面会出现一个可以播放的视频，我们再一些网站上看到视频，都是用
html中使用video标签插入视频
Tiffany_959的博客
05-08 6006
Web 上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 的 这就是有些后缀名为.mp4却无法通过video标签插入网页中的原因。之后我倾情推荐一个视频转码的软件：Any Video Converter Ultimate。 特别...
HTML5新增视频标签（HTML5）
...
08-13 155
HTML5新增视频标签（HTML5） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML基本标签使用
qq_42960126的博客
02-14 392
小白学HTML_01 Day HTML使用注意事项 W3C协议 一般在HTML开发中，很多时候开发人员都会注重W3C协议中的内容，因为在很多时候在开发过程中标签的使用不当，W3C一般不会提示报错。而在网页上传万维网时不会达到自己理想的效果。一个优秀的网页首先第一点一定要遵守W3C协议，这样才能真正的到达理想化。也是前端开发人员面试的重点。 语义化 在上传页面时，会进行一个页面的解析。 HTML...
html5基础标签(html5视频标签 html5新标签用法)
09-28
在本文中，我们将深入探讨HTML5的基础标签，特别是视频标签和新引入的结构元素。 首先，HTML5声明变得更加简洁，只需要`<!DOCTYPE html>`即可。在字符编码方面，推荐使用`<meta charset="utf-8">`，以确保网页内容...
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
首先，使用`<video>`标签非常简单，只需要在HTML文档中插入一个空的`<video>`标签即可。基础形式如下： ```html <video></video> ``` 接下来，我们需要为视频指定来源，通过`src`属性来实现。例如： ```html 视频URL...
html标签例如img，div，span等基本标签的使用
01-07
HTML基本标签的使用 HTML（HyperText Markup ...HTML 的基本标签是构建网页的基础，我们可以使用 img 标签插入图像，用 div 标签分组元素，用 span 标签高亮文本。 HTML5 的发展也使得网页开发变得更加丰富多样化。
HTML零基础经典入门视频
06-19
8. **HTML5新特性**：了解HTML5引入的新标签，如`<header>`、`<footer>`、`<article>`、`<section>`等，以及离线存储、拖放功能、音频/视频支持等。 9. **实战演练**：在课程中，你会进行实战项目，将所学知识应用...
html静态网页（导航条、表格、表单、音视频插入、照片框等）
03-29
HTML静态网页设计是Web开发的基础，它涉及到一系列的网页元素和功能，如导航条、表格、表单、音视频插入以及照片框等。这些元素在创建一个完整的、交互性强的网站时都起着至关重要的作用。 首先，让我们来讨论HTML5...
在html页面中如何放置video,HTML5中video标签如何使用
weixin_28767943的博客
06-04 1007
HTML5中的video标签用于播放视频文件的，在video标签中我们可以设置窗口的宽高，视频的自动播放，循环播放以及视频的封面图片等等HTML5是下一代HTML，新增了许多新的标签，这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。接下来在文章中将为大家具体介绍如何使用video标签，具有一...
html插入视频的方法
热门推荐
2301_80106709的博客
12-28 21万+
至于我使用的时候有个时间点，和视频长度，本来就是想着这个属性是不是能用来做那个视频的播放条那个东西。controls 属性设置或返回浏览器应当显示标准的视频控件（播放，暂停，进度条，音量，全屏切换，字幕，轨道）。我引入视频就是使用这个标签，但是我使用视频的的属性并不多，只是使用了简单的播放暂停，至于其他的属性可能现在没有怎么使用，以后需要继续用一下。同方法二一样在html中嵌入多媒体元素。用于在html元素中嵌入多媒体元素。用于在html元素中添加视频元素。方法二和方法三是不常用的。
使用HTML5的<vedio>标签插入视频，兼容主流浏览器
JohnShen的博客
04-03 878
1.在头部引入js文件如下：<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>注意：只把js下载到本地服务器目录，然后修改为本地服务器的引用路径是不行的，因为该js文件中还引用了远程服务器上的其它资源。2.在正文里引入如下标签：<video id="video_1" src="video/qrcode.
html 标签前插入视频标签，并修改属性
tianqi861128的博客
11-25 541
&lt;article&gt;文章&lt;/article&gt;   &lt;script type="text/javascript"&gt; &lt;!-- function videodivscript(){ //获得标签&lt;article&gt;     var articletag =document.getElementsByTagName("article");
HTML中怎样嵌入视频
最新发布
zqzgng的博客
01-10 2225
以上是在HTML中嵌入视频的基本步骤和一些常用的属性和技巧。上面的示例中，视频的宽度和高度分别设置为500和300像素，视频会自动播放且循环播放，并显示控制按钮。标签分别指定了MP4格式和WebM格式的视频文件。浏览器会解析支持的格式，并播放第一个支持的视频文件。你可以使用自己的视频文件，或从互联网上下载到本地。标签的闭合标签之前，可以为不支持HTML5视频的浏览器提供替代内容。属性会在视频中显示控制按钮，例如播放/暂停按钮、音量控制按钮等。在标签内部，指定视频文件的URL。标签：在HTML中，使用。
html中插入视频怎么写,HTML5中插入视频使用什么标记？描述其语法格式及含义、该标记的属性及功能。...
weixin_29737207的博客
05-31 680
慕村9548890HTML5提供了视频内容的标准接口，规定使用标记来描述和播放视频。标记语法格式如下：替代文字如果浏览器不支持url指定的video元素，将显示替代文字。标记常用的属性及说明如表5-1所示。表5-1 标记常用属性及说明属性值说明srcurl要播放视频的URLautoplayautop...
JavaScript OnClick事件以及事件绑定方法
opo77_的博客
04-27 1万+
事件之鼠标点击事件 事件 说明 onclick 鼠标点击事件 onmouseover 鼠标经过事件 onmouseout 鼠标移开事件 onchange 文本框内容改变事件 onselect 文本框内容被选中事件 onfocus 光标聚集 onblur 光标离开 onload 网页导入 onunload 关闭网页 那么要怎么做的呢？ 1、将HTM...
HTML视频插入指南：使用标签
"在HTML中插入视频是网页设计的基本技能之一。HTML，全称为超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。它允许开发者通过使用不同的标签来控制页面布局、内容展示以及交互性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值