多媒体与嵌入
HTML的图片
怎样将有一副图片放到网页上?
使用<img>标签时,尽量将图片与HTML文档放在统一服务器的相同路径下.由于搜索引擎会读取images/下的图片文件名,所以尽量将图片取一个描述性的文件名.
尽量不去使用其他URL的图片,这样会让浏览器做更多工作,如重新通过DNS再寻找IP地址.
备选文本alt
它的值是对图片的文字描述,用于在图片无法显示或不能被看到的情况.
使用备选文本有一下原因
- 用户有视力障碍,通过屏幕阅读器浏览网页.而事实上,给图片一个备选的描述文本对大多数用户都是有用的.
- 当你把路径或文件名拼错时可以提醒你
- 浏览器不支持该图片类型,有些用户仍在使用纯文本的浏览器.
- 你会想提供一些文字描述给搜索引擎使用.
- 用户自主关闭图片以节省流量
应该什么时候使用alt:
- 装饰:如果图片只是用于装饰,而不是内容的一部分,可以写一个空的
alt="" - 内容:如果图片提供了重要信息,就要在
alt文本中提供相同的信息. - 链接:如果把图片嵌套在
<a>标签中,那必须提供无障碍的链接文本 - 文本:不应该将文本放到图像中.
宽度和高度
不应用HTML属性改变图片的大小,如果把图片尺寸设定太大,最终图片看起来会很模糊;如果太小,会在下载远远大于你需要的图片时浪费带宽.正确做法是使用图片编辑器使图片尺寸正确.
图片标题
即图片的标题title属性.将鼠标移到图片上即可获得图片的标题.
通过为图片搭配说明文字的方式来解说图片
大多数都会用<p>元素去配合图片,但是HTML5提供了<figure>和<figcaption>元素,它正是为此而创造出来的.
示例代码
<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="200"
height="171">
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
结果:
CSS背景图片
用CSS属性background-image放置背景图片
p {
background-image: url("images/dinosaur.jpg");
}
主要用于没有语义的纯装饰图片.无法附加alt和title等属性.
视频和音频内容
web中的音频和视频
<video>元素
允许你轻松地嵌入一段视频.
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
-
src指向想要嵌入网页中的视频资源,同
<img> -
controls加入后用户可以包含浏览器提供的控件界面,包括回放功能进度条等.
-
<video>标签内的内容即为后备内容.当浏览器不支持
<video>标签时就会显示这段内容.
我们可以将src属性从<video>标签中移除.转而放在几个单独的标签<source>中
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
每个<source>中含有一个type属性,这个属性是可选的,浏览器可以通过检测这个属性跳过那些不支持的格式,如果不加浏览器会尝试加载每个文件消耗大量时间和资源.
其他<video>特性
例子:
<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
-
width和height可以用属性控制视频的尺寸,也可以用
CSS来控制视频尺寸.无论使用哪种方式,视频都会保持原始的长宽比,如果你设置的尺寸没有保持原始视频的长宽比,那么视频边框将会拉伸. -
autoplay这个属性会使音频和视频内容立即播放.即使页面其他部分还没加载完全.
-
loop这个属性可以让音频或者视频循环播放.
-
muted这个属性会让媒体播放时默认关闭声音.
-
poster指向了一个图像URL,这个图像会在视频播放前显示,用于粗略的预览或者广告.注意,与autoplay可能有冲突
-
preload这个属性被用来缓冲较大的文件:
"none":不缓冲"auto":页面加载后缓存媒体文件"metadata":仅缓冲文件的元数据
<audio>音频
使用方式几乎完全相同,只有一些细微的差别.
<audio>不支持width/height属性- 不支持poster属性
响应式图片
为什么要用自适应图片
适应不同的屏幕,浏览器大小以提供不同的空间分配,使得页面在不同大小上保持可观性
怎样创建自适应的图片
分辨率切换:不同的尺寸
可以使用srcset和sizes属性.
例子:
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
srcset定义了我们允许浏览器选择的图像集以及图片的大小,在每个逗号前,我们写:
- 一个文件名
- 一个空格
- 像素的固有宽度(以像素为单位)
sizes定义了一组媒体条件(例如屏幕宽度)并且知名当某些媒体条件为真时,什么样的图片尺寸是最佳选择–我们在之前讨论了一些提示,在这种情况下,每个逗号之前我们写:
- 一个媒体条件
- 一个空格
- 当媒体条件为真时,图像将填充槽的宽度
有了这些属性,浏览器会:
- 查看设备宽度
- 检查
sizes列表中哪个媒体条件是第一个为真 - 查看基于该媒体查询的槽大小
- 加载
srcset列表中引用的最接近的所选槽的大小的图像
分辨率切换:相同的尺寸,不同的分辨率
如果你支持多种分辨率显示但希望每个人在屏幕上看到的图片的实际尺寸是相同的,你可以让浏览器通过srcset和x语法结合—-一种更简单的语法而不是sizes来选择适当分辨率的图片.
例
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
img {
width: 320px;
}
HTML表格
HTML表格应该用于表格数据,但很多人习惯于用表格实现网页布局.使用表格布局而不使用CSS布局是很糟糕的,主要理由有:
- 表格布局减少了视觉受损的用户的无障碍:盲人所使用的屏幕阅读器会解析存在于HTML页面的标签.
- 表格会产生很多标签,使得布局比正确的技术涉及更复杂的标签结构,这会使得代码更难以编写,维护,调试.
- 表格不能自动响应.需要采取额外措施来获取表格布局样式
表格的几个元素:
<tr>table row,一行表格<td>table data,一格数据<th>table header 表格标题
允许单元格跨越多行多列
使用<colspan>和<rowspan>属性来让其多占几个单元格
对<col>应用样式
例:
<table>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
<colgroup>中第一个<col>元素指定了第一行,第二个元素指定了第二行,对指定的<col>元素修改,样式就会应用到相应的列上.如果想把样式应用到每一列上,可以使用<col>元素且包含span属性.
例:
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>
使用<caption>为表格增加一个标题
添加<thead> <tfoot> <tbody>结构
完.
原文地址：http://www.cnblogs.com/Moonlightcode/p/16852318.html
