介绍：在html网页中，图片和视频是基本的元素，在网页中插入图片和视频有自己的标签，分别是img、embed，来源都是使用src来链接。

插入图片：

<img src="图片的来源" alt="图片的介绍" title="鼠标放在图片时显示的信息">

使用alt：是为了方便搜索引擎识别图片，因为基本上搜索引擎是不能直接识别二进制的图片的。

使用title：是为了方便用户鼠标触碰图片查看一些相关的信息。

插入视频：

<embed src="视频来源" allowFullScreen="视频全屏" quality="视频质量" width="宽" height="高" .......> </embed>

代码：

<html>

<head>

  <title>插入图片和文字</title>

</head>

  <body>

    <h2>插入图片</h2>

    <img src="http://img.zcool.cn/community/03378c3554c7a5e00000158fc5f68ad.jpg" alt="baidu logol" title="百度的logol">

    <h2>插入视频</h2>

    <embed src="http://player.youku.com/player.php/sid/XMTQ4MTQ5MTQ2OA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

  </body>

</html>

截图：

HTML：图片和视频标签的使用的更多相关文章

  1. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  2. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  3. 在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...

  4. HTML5_音视频标签 <audio> 和 <video>

    HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...

  5. 自定义jq插件，鼠标悬浮展示图片或者视频放大图，可自定义展示内容

    网站项目经常会遇到一些视频或者图片素材的展示功能,那么就需要自己写一个功能,就是在一些列表页面你想要是这个数据的详细内容,弹框在页面某个位置 例如这是视频悬浮展示效果,可自定义自动播放等属性标签 又例 ...

  6. android--------WebView实现 Html5 视频标签加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  7. MVP+Dagger2+Rxjava+Retrofit+GreenDao 小应用，包含新闻、图片、视频3个大模块，代码整洁干练

    练习MVP架构开发的App,算是对自己学过的知识做一个总结,做了有一段时间,界面还算挺多的,代码量还是有的,里面做了大量封装,整体代码整理得很干净,这个我已经尽力整理了.不管是文件(Java.xml. ...

  8. MVP+Dagger2+Rxjava+Retrofit+GreenDao 开发的小应用，包括新闻、图片、视频3个大模块，代码封装良好

    练习MVP架构开发的App,算是对自己学过的知识做一个总结,做了有一段时间,界面还算挺多的.代码量还是有的,里面做了大量封装,总体代码整理得非常干净,这个我已经尽力整理了. 不管是文件(java.xm ...

  9. uni-app实现图片和视频上传功能

    使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写,  1.页面布局 通过 ...

随机推荐

  1. 编辑器之Sublime Text3、Notepad++

    Sublime text 3 破解版是一款极其强大的代码编辑器,又是一款可以代替记事本的文本编辑器.Sublime text 3拥有着美观的界面和实用的功能,既能够完成代码的编辑又能够完成文本编辑,还 ...

  2. vim 图册

    网上看到的一些图,感觉不错,分享一下 我现在感觉配置文件,很多没有必要,反而很花哨,但是这些基础的东西,反而很高效,实在 VIM的列编辑操作 删除列 1.光标定位到要操作的地方. 2.CTRL+v 进 ...

  3. Web前端开发最佳实践（2）：前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  4. python生成随机数据插入mysql

    import random as r import pymysql first=('张','王','李','赵','金','艾','单','龚','钱','周','吴','郑','孔','曺','严' ...

  5. POJ3292 Semi-prime H-numbers [数论，素数筛]

    题目传送门 Semi-prime H-numbers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10871   Acce ...

  6. 火焰图&perf命令

    最近恶补后端技术,发现还是很多不懂,一直写业务逻辑容易迷失,也没有成长.自己做系统,也习惯用自己已知的知识来解决,以后应该多点调研,学到更多的东西应用起来. 先学一个新的性能分析命令. NAME pe ...

  7. NetCore在Centos7上部署和Nginx集群部署访问

    NetCore在Linux上部署 工具:WMWare虚拟机,Wmware12,CentOS7ISO镜像,VS2017 1.安装虚拟机,过程略,网上一搜一大把 2.用VS2017建一个NetCore的W ...

  8. Highcharts实现走势图

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...

  9. 【BZOJ 2957】 2957: 楼房重建 （线段树）

    2957: 楼房重建 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1753  Solved: 841 Description 小A的楼房外有一大片施 ...

  10. 「HAOI2015」按位或

    「HAOI2015」按位或 解题思路 : 这类期望题一眼 \(\text{Min-Max}\) 容斥,只需要稍微推一下如何求 \(E(minS)\) 即可. \[ E(minS) = \frac{1} ...