HTML2023年10月3日

m0_71819030

已于 2023-10-04 16:25:05 修改

阅读量52

点赞数

文章标签：前端 javascript 开发语言

于 2023-10-03 21:44:37 首次发布

本文链接：https://blog.csdn.net/m0_71819030/article/details/133525937

版权

文章详细介绍了HTML中图片、音频、视频的嵌入方法，包括src、alt、width、height等属性，以及表格的colgroup、colspan、rowspan等特性。此外，还提及了响应式图片和表格样式调整技巧。

摘要由CSDN通过智能技术生成

HTML中的图片

<img src="">d

<img src="" alt="">

width height

image title

result

图片说明

法一

<p></p>

法二

<figure>

<figcaption>

result

<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>

HTML中的音频和视频

视频

<video src="" controls>

</video>

提高视频播放兼容性

单独<source>标签

<video controls>

<source src="" type=""/>

</video>

其他video特性

width和height

autoplay

自动播放

loop

循环播放

muted

静音

poster

视频预览or广告

preload

缓冲

音频

<audio controls>

<source src="" type=""/>

</audio>

audio与video的差异

1.不支持width和height

2.不支持poster

视频字幕

<track kind=""

src=""

srclang="" />

从 object 到 iframe——其他嵌入技术

<iframe>

allowfullscreen

frameborder

src

width和height

备选内容

sandbox

始终使用sandbox属性

<embed>和<object>元素

embed

object

在 Web 文档中嵌入其他内容这一主题可以很快变得非常复杂，因此在本文中，我们尝试以一种简单而熟悉的方式来介绍它，这种介绍方式将立即显示出相关性，同时仍暗示了一些涉及更高级功能的技术。刚开始，除了嵌入第三方内容（如地图和视频），你不太可能在网页上使用到嵌入技术。当你变得更有经验时，你可能会开始为他们找到更多的用途。

除了我们在这里讨论的那些外，还有许多涉及嵌入外部内容的技术。我们看到了一些在前面的文章中出现的，如 <video>、<audio> 和 <img>，但还有其他的有待关注，如 <canvas> 用于 JavaScript 生成的 2D 和 3D 图形，<svg> 用于嵌入矢量图形。我们将在此学习模块的下一篇文章中学习SVG。

在网页中添加矢量图形

见在网页中添加矢量图形 - 学习 Web 开发 | MDN (mozilla.org)

响应式图片

响应式图片 - 学习 Web 开发 | MDN (mozilla.org)

HTML表格

tr

td

th

“tr”代表“table row” 一行

“td”代表“table data” 数据

'th' 代表 'table header' 表格标题

单元格跨行跨列

colspan

rowspan

统一列样式

colgroup

span

 <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>

我们使用了两个 <col> 来定义“列的样式”，每一个 <col> 都会指定每列的样式，对于第一列，我们没有采取任何样式，但是我们仍然需要添加一个空的 <col> 元素，如果不这样做，那么我们的样式就会应用到第一列上，这和我们预想的不一样。

如果你想把这种样式信息应用到每一列，我们可以只使用一个 <col> 元素，不过需要包含 span 属性，像这样：

<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>

就像 colspan 和 rowspan 一样，span 需要一个无单位的数字值，用来指定让这个样式应用到表格中多少列。

result

通过下面这些步骤来重构这个表格。

首先，把 timetable.html 文件复制到你的本地环境。这个 HTML 文件包含你在上文中看到的表格，不过是减去样式信息的。
在 table 的顶部添加一个 <colgroup> 元素，就放在 <table> 标签下面，<colgroup>可以添加 <col> 元素 (继续看下面剩余的步骤)。
第一列和第二列不需要应用样式。
为第三列添加一个背景颜色。style 属性是 background-color:#97DB9A;
为第四列设置一个独立的宽度，style 属性是 width: 42px;
为第五列添加一个背景颜色。style 属性是 background-color: #97DB9A;
为第六列添加不同的背景颜色和边框，表示这是一个特殊的日子，表示她正在教一个新的课。 style 属性是 background-color:#DCC48E; border:4px solid #C1437A;
最后两天是休息日，所以只需将它们设置为无背景颜色，但需要设置宽度；style 属性是 width: 42px;