CSS第五天 （网格布局、内联框架 iframe、常用实体、画布Canvas 和 SVG、媒体）
一、网格布局
（一）、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 中的预留字符必须被替换为字符实体。 如常见的"<"和">"这些字符出现会被当成 标签。
代码中要出现"<" 时，需要改为 <或者 < ;
四、画布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注释格式 --> 前端:三大技术 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> 声明告诉浏览器我们使用的是HTML5 --> <!DOCTYPE html> <!-- <h ...
最新文章
- c语言比较四个数大小并由小到大排序,c语言任意输入5个数，并按从大到小顺序输出...
- python无限循环条件循环_python 语句，条件，循环
- 走向管理：建立工作汇报机制
- 全网首发！2020年AI、CV、NLP顶会最全时间表！
- python字符串添加成员_Python - 字符串的操作方法
- 【免费毕设】基于PHP实现的WEB图片共享系统(源代码+论文)
- Delphi窗体部分属性
- 《Redis视频教程》（p21）
- 计算机系统概论（原书第2版）部分课后习题答案（五六七章）
- vue网易云二维码登录
- 局域网互传文件工具_如何在 iOS、Android、macOS、Windows 之间快速文件互传？
- 【Visual C++】游戏开发五十四 浅墨DirectX教程二十一 视觉的诡计:公告板(Billboard)技术
- python---导入 py文件
- 【C基础】11 指针与数组
- 怎样批量查询顺心捷达单号信息并分析是否延误
- 对于目标识别的一些idea-传递特征的position而不是特征或特征图
- LeetCode分类刷题----链表篇
- 画属于自己的STM32C8T6PCB电路板
- $.ajax() 详细参数
- 跳板攻击中如何追踪定位攻击者主机（上）