CSS第五天（网格布局、内联框架 iframe、常用实体、画布Canvas 和 SVG、媒体）

白灵一

已于 2022-08-19 08:10:00 修改

阅读量373

点赞数

文章标签： css 前端

于 2022-07-25 20:49:32 首次发布

本文链接：https://blog.csdn.net/m0_70190404/article/details/125878838

版权

一、网格布局

（一）、display 属性

display: grid;或者 display:inline-grid 表示网格布局

（二）、grid-template-columns/-rows 属性

grid-template-columns: auto auto auto; 定义每列的宽度；代表三列，每列宽度相同；

grid-template-columns: auto auto auto; 定义每行的高度；代表三行，每行高度相同；

（三）、缝隙

grid-column-gap 列间缝隙
grid-row-gap 行间缝隙
grid-gap 行、列缝隙的简写属性，可以为两个值，也可以为一个

（四）、网格线

简写形式 grid-row: 1/3; grid-row: 1/ span 3;（从1开始，跨越3行）

grid-row-strat 网格线开始的列
grid-row-end 网格线结束的列，中间没有网格线，可以实现合并的功能

grid-column-start: 1; grid-column-end: 3;

简写形式同上

grid-row-start 网格线开始的行
grid-row-end 网格线结束的行，中间没有网格线，可以实现合并的功能

grid-row-start: 1; grid-row-end: 3;

`grid-area` 属性

1、可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。 grid-area : 1 / 1 / 3 / 4; => grid-area : 1 / 1 / span 2 / span 3;

2、grid-area 属性 可以用于为网格项目分配名称，可以通过网格容器的 grid-template-areas 属性来引用命名的网格项目。

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

item1 的名称是 "myArea"，并跨越五列网格布局中的所有五列：

.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

让 "myArea" 跨越五列网格布局中的两列（句号代表没有名称的项目）

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

跨越两列和两行，需要定义第二组的列，且两组之间用空格隔开。

常用的网页模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

3、可以用来改变项目顺序

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

.item1 { grid-area: 1 / 3 / 2 / 4; } 代表 “1” 的位置位于1,2行之间，3,4列之间

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

（五）、justify-content 属性

用于在容器内对齐整个网格。

当值为space-evenly 时，表示在列之间以及列周围留出相等的空间。

当值为space-around时，表示在列周围留出相等的空间。

当值为 space-between 会在列之间留出相等的空间。

当值为center 会在容器中间 对齐网络。

当值为 start 会在容器开始 对齐网络。

当值为 end 会在容器末 对齐网络。

（六）、align-content 属性

垂直对齐容器内的整个网格。网格的总高度必须小于容器的高度，否则不会生效。属性值同上。

二、框架

（1）、内联框架 iframe

iframe 用于在网页内显示网页。

<iframe src="demo_iframe.htm" width="200" height="200px" frameborder="0" ></iframe>

上述代码：内联页面的宽度为200px, 宽度200px, frameborder为0表示删除边框。

（2）、框架 frame

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

有垂直框架

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

和水平框架

<html>

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

注意：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！

但是当需要添加包含一段文本的<noframes> 标签时，就需要该标签包含<body></body> 标签，并且这段文本要放在<body></body> 标签里。

<html>

<frameset cols="25%,50%,25%">
  <frame src="https://www.w3school.com.cn/">
  <frame src="./h5and_h/practive3(表单).html" />
  <frame src="./h5and_h/practive2(表格).html">

  <noframes>

  <body>

    您的浏览器无法处理框架！
  </body>

  </noframes>

</frameset>

</html>

三、常用实体

HTML 中的预留字符必须被替换为字符实体。 如常见的"<"和">"这些字符出现会被当成标签。

代码中要出现"<" 时，需要改为 &lt或者 &#60 ;

四、画布Canvas 和 SVG

（1）、画布 Canvas 元素用于在网页上绘制图形。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

（2）、SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 直接嵌入 HTML 页面

具体学习路径SVG 教程 (w3school.com.cn)

（3）、两者对比

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

不适合游戏应用

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

五、媒体

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。

MP3 是最新的压缩录制音乐格式。

插件（Plug-in）是扩展浏览器标准功能的计算机程序。

object 元素

定义 HTML 文档中的嵌入式对象；它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中。（h4的也可以使用）

<object width="100%" height="500px" data="snippet.html"></object>

embed元素

也可定义了 HTML 文档中的嵌入式对象。<embed> 元素没有结束标记。它无法包含替代文本。

<embed width="100%" height="500px" src="snippet.html">

音频 audio

前面两个元素也可以定义音频；

存在各个版本浏览器及h4不可使用；最好的html解决办法：

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

向网站添加音频最好的方法 --雅虎的媒体播放器

使用方法：HTML 音频 (w3school.com.cn)

视频 video

前面两个元素也可以定义视频；

HTML 中播放视频也不容易，需要所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

最好的html解决办法：  HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

HTML 中显示视频的最简单的方法 -- 使用优酷等视频网站

使用方法： HTML 视频 (w3school.com.cn)

附：<source> 标签可以同时指定多个音频视频格式（为了兼容）；

<track> 标签为诸如 video 元素、audio元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。如:字幕、屏幕阅读器说明和主题等。