一、网格布局

（一）、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元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。如:字幕、屏幕阅读器说明和主题等。

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

前端学习 -- 内联框架iframe
内联框架iframe 可以向一个页面中引入其他的外部页面内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 <iframe></iframe> 属性: sr ...
day11学习前端HTML网页基本结构、标签及超链接的使用、内联框架
前端  前端:三大技术 HTML:负责显示页面内容(文字.按钮.输入框等) CSS:负责页面内容的布局和样式 JavaScript:负责实现功能. 前 ...
HTML 基本元素2（图像、超链接、表格、列表、块div和span、字体、内联框架）
HTML的图像标签<IMG> 详解 <img> 即图像标签需要设置其属性 src指定图像的路径 1.同级目录图像如果是本地文件,只需把图片放在同一个目录下即可 src ...
HTML: 内联框架超链接链接分类文本标签列表
## 内联框架 ##### 1. 作用:使用内联框架可以引入一个外部的页面 ##### 2. 语法使用iframe 来创建一个内联框架 ``` <iframe src="02.htm ...
HTML学习笔记（十一）内联框架
内联框架<iframe>: 用于在网页内显示网页. 基本结构: <span style="font-family:Times New Roman;">< ...
图片标签，内联框架 css简介
目录一.图片标签: 属性: scr 属性指定的是外部图片的路径(路径规则和超链接是一样的) width 图片的宽度(单位是像素) height 图片的高度二.内联框架: src指定要引入的网页的路 ...
HTML的表和内联框架
文章目录表表格-table 表格的基本标签表格的基本属性 table属性 tr属性 th/td属性表单-form 表单组件表单属性内联框架基本语法内联框架配合超链接traget 结束- ...
HTNL5列表，表格，音频，视频，iframe内联框架
一.列表: 无序列表: <ul> 特性:没有顺序,每个<li>标签独占一行(块级元素) <li>内容</li> 默认每一个li标签前有一个实心小圆点 & ...
HTML-基本语法、常用标签、列表、超链接、超链接定义锚点、表格、表单和内联框架
HTML基本语法  <!DOCTYPE html> <!-- <h ...

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

一、网格布局

`grid-area` 属性

二、框架

（1）、内联框架 iframe

三、常用实体

四、画布Canvas 和 SVG

SVG 直接嵌入 HTML 页面

五、媒体

音频 audio

视频 video

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

最新文章

热门文章

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

一、网格布局

grid-area 属性

二、框架

（1）、内联框架 iframe

三、常用实体

四、画布Canvas 和 SVG

SVG 直接嵌入 HTML 页面

五、媒体

音频 audio

视频 video

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

最新文章

热门文章

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

`grid-area` 属性

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