想自己在家做外贸网站,平台推广活动策划方案,深圳商业策划公司十大公司,网络域名怎么查将图片放到网页上
img 元素#xff0c;这个元素是空元素#xff0c;它需要两个属性才能起作用#xff1a;src 和 alt。src 属性包含一个 URL#xff0c;该 URL 指向要嵌入页面的图像#xff0c;src 属性可以是相对路径或绝对路径#xff0c;这与a元素的 href 属…将图片放到网页上
img 元素这个元素是空元素它需要两个属性才能起作用src 和 alt。src 属性包含一个 URL该 URL 指向要嵌入页面的图像src 属性可以是相对路径或绝对路径这与a元素的 href 属性相似。 不建议使用绝对 URL 进行链接使用相对 URL 比绝对 URL 更有效率
img srcdinosaur.jpg alt恐龙 / img srcimages/dinosaur.jpg alt恐龙 /
未经许可绝不要将 src 属性指向其他网站上的图像。这被称为“热链接hotlinking”。大多数人认为这是不道德的因为这会导致每当有人访问你的页面都会有另一些不知情的人为图像交付带宽费用。这也导致你无法掌控图像图像有可能在你不知情的情况下被删除或替换为尴尬的内容。
像img和video这样的元素有时被称为可替换元素因为元素的内容和大小由外部资源定义而不是由元素本身的内容定义。
宽度和高度图像标题
使用 width 和 height 属性来指定我们的图片的宽度和高度他们的值是不带单位的整数以像素为单位表示图像的宽度和高度。但是如果需要更改图片的大小应该使用 CSS 来实现。
imgsrcimages/dinosaur.jpgaltThe head and torso of a dinosaur skeleton;it has a large head with long sharp teethwidth400height341 /
使用 title 属性来给图片提供更多的信息类似于超链接这会给我们一个鼠标悬停提示和链接标题一样。title 有很多无障碍问题大多数浏览器都不会显示它除非你将鼠标悬停在上面最佳实践是将这样的支持信息包含在主要文章文本中而不是附加在图片上。
媒体资源和许可
常见许可类型
版权所有
原创作品其所有者通常以封闭的版权保护方式发布他们的作品执行操作获取带有版权所有许可的操作
获得版权持有人的明确书面许可支付许可费用以使用他们仅将使用限制在所被视为合理使用的用途
自由许可
自由许可我们无需支付许可费用或寻求许可即可使用它但我们需要履行各种许可条件如
提供来源指示出所作出的更改使用相同许可证作为该作品的许可不分享任何派生作品不用于商业用品
Copyleft
你可能会在自由许可的上下文中遇到“copyleft”一词。Copyleft 许可例如 GNU 通用公共许可证GPL 或“相同方式共享”创作共用许可证规定派生作品需要按照原始许可证发布
Copyleft 许可在软件界中很常见。其基本思想是使用 copyleft 许可的代码构建的新项目也需要根据相同的 copyleft 许可进行许可。这确保新项目的源代码也可供他人学习和修改。
关于图片的最佳实践
figureimgsrcimages/dinosaur.jpgaltThe head and torso of a dinosaur skeleton;it has a large head with long sharp teethwidth400height341 /figcaptionA T-Rex on display in the Manchester University Museum./figcaption
/figure
figure和figcaption元素作用是为图片提供一个语义容器在说明蚊子和图片之间建立清晰的关联。 figure里不一定要是图片只要是独立内容单元几张图片一段代码音视频房产表格等即可
用简洁易懂的方式表达意图可以置于页面线性流的某处为主要内容提供重要的补充说明
CSS 背景图片
可以使用 CSS 把图片嵌入网站中JavaScript 也行。CSS 属性 background-image 和其他的 background-*属性是用来控制背景图片的。
p {background-image: url(images/dinosaur.jpg);
}使用 CSS 插入图片仅为了装饰不能有任何的备选文本也不能被屏幕阅读器识别
网页上的其他图形
Canvas 元素提供了使用 JavaScript 绘制 2D 图形的 API可以借助 SVG可缩放矢量图形来使用线条曲线和其他几何形状来渲染 2D 图形WebGL API 指南帮助入门 WebGL这是用于 Web 的 3D 图形 API可以让你在 Web 内使用标准的 OpenGL ES。还有video 和audio等元素与img类似WebRTC技术等。
将视频放到网页上
video 元素
video 元素允许我们轻松地嵌入视频
video srcrabbit320.webm controlsp回退内容a hrefrabbit320.webm链接到视频/a/p
/video
src 与 img 元素属性相同source属性包含要嵌入的视频的路径controls 属性用户必须能够控制视频和音频播放video标签内的段落称为回退内容如果访问页面的浏览器不支持该元素则会显示该内容从而允许我们为旧浏览器提供回退
媒体文件内容
OGGWAVMP4WebM 等格式称为容器格式一个 WebM 文件包含一部电影该电影具有一个主视频轨道和一个备用角度轨道以及英语和西班牙与的音频以及英语评论轨道的音频可以概念化如下 针对不同格式的视频
video controlssource srcrabbit320.mp4 typevideo/mp4 /source srcrabbit320.webm typevideo/webm /pa hrefrabbit320.mp4链接到视频/a/p
/video
在这里删除了video标签中的 src 属性而是包含source单独属性type 属性包含指定的文件的 MIME 媒体类型类型浏览器可以使用立即跳过他们不理解的视频如果不包括浏览器将加载并尝试播放每个文件知道找到一个有效的文件。
其他video功能
videocontrolswidth400height400autoplayloopmutedpreloadautoposterposter.pngsource srcrabbit320.mp4 typevideo/mp4 /source srcrabbit320.webm typevideo/webm /pa hrefrabbit320.mp4链接到视频/a/p
/video
widthheight宽度和高度或者使用 CSS 控制视频大小autoplay自动播放立即开始播放同时加载页面的其余部分loop循环播放muted使媒体在默认情况下关闭声音的情况下播放poster在播放视频之前显示图像的 URL旨在用于启动画面或广告画面preload属性值包含 none不缓冲文件auto缓冲媒体文件metadata仅缓冲文件的元数据
audio元素
audio与video元素类似
audio controlssource srcviper.mp3 typeaudio/mp3 /source srcviper.ogg typeaudio/ogg /pa hrefviper.mp3链接到音频/a/p
/audio 与视频的区别不支持 width 和 height 属性不支持 poster 属性
WebVTT 文件格式和track元素
WebVTT 是一个格式用来编写文本文件这个文本文件包含了众多的字符串这些字符串会带有一些元数据它们可以用来描述这个字符串将会在视频中显示的时间甚至可以用来描述这些字符串的样式以及定位信息尽管有限制。这些字符串叫做 cue 你可以根据不同的需求来显示不同类型的 cue最常见的如下
subtitles 外语材料的翻译字幕来帮助那些听不懂音频中说的什么的人理解音频当中的内容。captions 同步翻译对白或是描述一些有重要信息的声音来帮助那些不能听音频的人理解音频中的内容。descriptions 由媒体播放器朗读的文本其向盲人或其他视力受损用户描述重要的视觉内容。
要将其与 HTML 媒体播放一起显示需要
将其保存为 .vtt 文件放在服务器可以提供服务的地方例如与 HTML 文件放在同一文件夹。用 track 标签链接 .vtt 文件track 标签需放在 audio 或 video 标签当中同时需要放在所有 source 标签之后。使用 kind 属性来指明是 subtitles、captions 还是 descriptions。然后使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。最后添加 label以帮助读者在查找时识别语言。
video controlssource srcexample.mp4 typevideo/mp4 /source srcexample.webm typevideo/webm /track kindsubtitles srcsubtitles_es.vtt srclanges labelSpanish /
/video
练习
将你的音频和视频文件保存在你电脑上的一个新目录中。在相同的路径下创建一个新的 HTML 文件命名为 index.html。在页面上添加 audio 和 video 元素让它们显示浏览器默认的控件。在当中添加 source 标签并添加 type 属性以便于浏览器能够找到其能够支持的格式并加载它。在 video 元素中添加 poster 属性这会在视频播放之前显示。尽情创作属于自己的海报图形吧。
另外你可以尝试研究一下文本音轨试着为你的视频添加一些字幕。
