10.HTML 嵌入多媒体元素

数字时代，多媒体元素如视频、音频、图片和动画成为了网页设计中不可或缺的一部分。它们不仅能够提升用户体验，还能有效地传达信息和情感。在本文中，我们将探讨如何在网页中嵌入各种多媒体元素，并提供一些例子来说明如何使用它们。

图片

图片是最常见的多媒体类型之一。在HTML中，我们使用 <img> 标签来嵌入图片。

示例

<img src="example.jpg" alt="描述性文字" width="500" height="300">

在这个例子中，src 属性指定图片的路径，alt 属性提供图片的替代文本（对于视觉障碍用户和图片无法加载的情况非常有用），width 和 height 属性指定图片的尺寸。

视频

视频可以提供动态的视觉体验和信息。HTML5引入了 <video> 标签，使得嵌入视频变得简单。

示例

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

在这个例子中，controls 属性添加了视频播放控件，如播放、暂停和音量控制。<source> 标签允许指定多个视频格式，以确保跨不同浏览器的兼容性。

音频

音频元素可以用来播放声音或音乐。HTML5通过 <audio> 标签提供了对音频内容的支持。

示例

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  您的浏览器不支持音频元素。
</audio>

与视频标签类似，controls 属性为音频文件提供了基本的控制选项，而 <source> 标签让我们可以指定多个音频格式。

嵌入式内容

除了直接嵌入文件，我们还可以嵌入整个网页或者其他网站的内容，比如地图或社交媒体帖子。这通常是通过 <iframe> 标签完成的。

示例

<iframe src="https://www.example.com" width="600" height="400">
  <p>您的浏览器不支持iframe标签。</p>
</iframe>

在这个例子中，src 属性指定了要嵌入的网页的URL，width 和 height 属性设置了iframe的尺寸。

动画和图形

SVG（可缩放矢量图形）和Canvas API是创建网页动画和图形的两种流行技术。

SVG 示例

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

这个SVG示例创建了一个简单的带有绿色边框和黄色填充的圆。

Canvas 示例

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

这个Canvas示例使用JavaScript在画布上绘制了一个红色的矩形。

社交媒体嵌入

我们还可以嵌入社交媒体平台上的内容，如推文或Instagram帖子。

示例

<!-- Twitter -->
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Instagram -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B1JWcqCgsdH/">
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>

这些例子展示了如何嵌入Twitter和Instagram的内容。通常，社交媒体平台提供了易于嵌入内容的代码片段。

总结

嵌入多媒体元素可以极大地提升网站的吸引力和互动性。通过使用HTML的 <img>, <video>, <audio>, <iframe>, <svg> 和 <canvas> 标签，我们可以在网页中添加丰富的视觉和听觉内容。此外，社交媒体的嵌入功能使得分享和展示社交媒体内容变得简单。当设计包含多媒体元素的网页时，记得考虑到所有用户的访问性，确保内容对所有人都是可访问的。

当给移动端写网页的时候就会出现要兼容各种屏幕大小的情况。

了解的rem之后，觉得挺不错的，决定尝试一下。

原理提一下：1rem的长度等于 html的font-size大小，默认浏览器的html的font-size是16px,所以

正常情况下1rem = 16px(chrome默认字体大小下限是12px);

要想让网页内容随屏幕大小而等比放大和缩小，首先我得找个基准值。我决定在屏幕宽度为320px，html的font-size等于10px为一个基准值。此时，1rem=10px;

随着屏幕的宽度不断改变，只要html的font-size大小跟着改变就行了。

这里有个等式：

基准html的font-size大小(10)／基准的屏幕宽度(320) = 实际html的font-size大小／实际的屏幕宽度

有了这个等式就好办了。

当页面载入时，马上获取实际的屏幕宽度 ,就可以根据上面的等式计算出实际html的font-size大小，随即页面中使用rem单位的内容实际大小，也跟着变化了。我写了一个函数：

var setFontSize = function(){
var width = document.documentElement.clientWidth;//获取页面可见宽度
if(width>320){
var w = width/32
var html = document.getElementsByTagName('html')[0];
html.style.fontSize = w+'px';
}else{
//alert("此屏幕大小不支持")
}
}

当页面载入时，使用此方法：

window.onload = function(){
setFontSize();
}

当屏幕放大和缩小时，也可以使用这个方法：

window.onresize = function(){
setFontSize();
}

如此便可实现网页内容随屏幕宽度等比缩放。

下面是这个demo的代码：

在微软员工已经陆续返回工作岗位，迎接2016年新任务，其中最重要的当属Win10Redstone系统更新。许多消息表明，Win10 RS1将解决Win10正式版早期遗留的问题，并增加众多新功能。

对于Windows10Redstone，微软对于细节还是保持谨慎。不过Windows工程师和开发者将会谈及到Windows系统显示缩放问题。在CES2016上，大会展示了很多PC和类PC设备，即将在今年上市。不幸的是，很多用户依然抱怨Windows系统不佳的显示缩放，缺乏标准化扩展，不过Win10 Redstone有望成功解决这个问题。

在nsider Hub中有一系列叫做Made by you（由你做主），Windows团队谈到在Win10系统中显示缩放的处理细节。

“对于开放的Windows系统来说，显示缩放是一个复杂的问题，必须支持4英寸到84英寸不同尺寸的设备。DPI范围需要50DPI到500DPI。在Windows10系统中巩固和简化了开发者缩放处理，提升终端用户的视觉体验。未来版本请保持关注。”

由于Windows10 insider社区提供的详细争议和真实例子，使得Windows团队可以及时看到在Win10开发中开发者药遇到的像素战争。

首先Windows团队列出了Win10显示缩放的相关专业术语包括：

• Physical Pixels（物理像素）：屏幕上的实际像素点，可以点亮屏幕的最小单位。

• Effective Pixels（有效像素）：抽象的显示单位，每一点对应着物理像素。

• Scale Factor（尺寸缩放比例系数）：有效像素与物理像素之间的比例对应，大约相当于有效分辨率与物理分辨率之间的比率。

• Dynamic Scaling（动态缩放）：基本上现在的Modern应用遵循了这项原则，可以根据显示和窗口尺寸进行切换和内容调整。即使是投影、对接和不同显示器中移动应用，使用远程连接窗口。

大多数Windows用户已经知道或有所了解，在高分辨率屏幕上，UWP应用看起来很棒，一些升级的WPF应用看起来也不错。而大多数Win32程序看起来比较模糊。

在此起点上，Windows团队采取统一内容缩放跨设备方案，将重要的系统UI缩放系统扩展到8K分辨率屏幕上，提升Windows对系统和应用内容的支持。Windows间隔缩放比例为100%、125%、150%、200%和250%。在Win8.1系统上，商店应用缩放比例可以为100%、140%和180%，不过导致并排应用之间显示不一致。对于高分屏仍然会导致“窗口太小字体看不见”的噩梦时代。

在Windows10和后续版本中，读取的缩放比例进行调整，从100%到450%，有足够的空间支持6英寸4K屏幕和上至23英寸8K显示器。

作为成果的一部分，Windows10将使常规桌面UI变得更加漂亮和清晰，即使是在400%下。

与大众想法不同的是，Windows团队也在致力于Win10 Mobile系统的显示缩放，检查移动系统的可扩展性。可以理解的是，大多数努力是适配确保UWP应用在手机和平板上正常尺寸显示，整个工作可能主要是针对UWP应用可以更好支持Continuum特性。

除了缩放系统，Windows团队还将精力放在动态缩放上，不仅仅局限在UWP HTML和XAML，还有一些UI元素，包括：

• Windows“经典”桌面UI

• 开始界面体验

• 文件管理器

• Windows任务栏

• 命令编辑器等等

• 用户缩放设置

除了上面这些，Windows团队还有很多工作要做。据传Win10红石系统将在今年夏季发布，Windows团队希望可以解决遗留的一些缩放问题。

比如大多数前窗口程序打开文件管理器时出现的选择窗口图标就与其他格格不入。微软计划在这方面做统一。

模糊的位图内容缩放

Windows团队目前正在定位的实例，特别是在Office应用。即使是Win10 UWP可以较好地扩展，但是经典桌面程序还是利用旧的Windows系统缩放，当扩展停靠到第二块屏幕时会出现位图显示模糊。这些程序包括Notepad++、Chrome和Firefox。Windows团队正在通过迁移工具改善更复杂的Win32应用程序。

最低程度上，Windows团队目前正在准备Win10基础工作，在可预见的未来进行实施。希望在Win10 Redstone上我们可以看到成果显现，期待走出解决Windows高分屏显示艰难过程的第一步。

（via: WinBeta，By KAREEM ANDERSON）

微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（戳这里）也可参与评论抽楼层大奖！

在线咨询

上一篇：亚马逊详情页面将不再支持使用HTML标记
下一篇：CSS解析-px、em、rem单位

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商