HTML+CSS宝典 HTML进阶
一、iframe元素
iframe 通常用于在网页中嵌入另一个页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe元素</title> </head> <body> <iframe name="myname" src="https://www.taobao.com" frameborder="0"></iframe> </body> </html>
src属性 嵌入网页的地址
frameborder属性 设置边框
name属性 给iframe起名
2、iframe元素是一个可替换元素
可替换元素的特点
1). 通常是一个行盒inline（当然也可以改成块盒）
2). 通常显示的内容，取决于元素的属性，
iframe元素要显示什么，取决于src属性（不是所有的可替换元素都这样，后边表单有另外一种情况）
3). css不能完全控制其中的样式，
比如图片可以用css控制宽高，但不能控制图片里面颜色
4). 具有行块盒的特点，意思是宽高是可以设置的
3、A元素的target属性有一些别的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe元素 框架页</title>
<style>
iframe{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<a href="https://www.bilibili.com/" target="myname">哔哩哔哩</a>
<a href="http://www.douyu.com" target="myname">抖鱼</a>
<a href="http://www.taobao.com" target="myname">淘宝</a>
<iframe name="myname" src="https://www.taobao.com" frameborder="0"></iframe>
</body>
</html>4、iframe元素有什么用呢？
通常是我们网站中，要放别人网站的视频，
别人的网站有一些视频，但不会放mp4地址共享出来，所以用video元素是获取不到的，
分享的时候允许使用iframe元素，把他的网页给包起来，
也就是说不允许别人的网站访问，但允许自己的网站访问
B站例子
我就可以在自己的网站，使用一个iframe区连接他的网站，让他的网页来播放视频
<iframe src="//player.bilibili.com/player.html?aid=722938093&bvid=BV1mD4y1F7JF&cid=477071372&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
scrolling="no" 如果网页超出这个区域的高度，要不要设置滚动条，no是不显示滚动条
border="0" 这个属性已经失效了，不建议使用
frameborder="no" 有没有边框
framespacing="0" 框架页的边框，到内部之间是不是有空隙，空隙是多少
allowfullscreen="true" 是否允许全屏，true允许全屏
二、如何在页面上使用flash
通常会用两个元素，
1). object 表示一个东西，嵌入一个对象
2). embed 单词本身就是嵌入的意思
两个元素都可以任选其一，
当然这两个元素不仅仅可以嵌入flash，还可以嵌入别的东西，只不过通常用来嵌入flash，
这两个元素都是可替换元素，意味着可以设置宽、高等
1、object
<object data="./example.swf" type="application/x-shockwave-flash"></object>
data属性，表示资源位置，data数据的意思，我们要的数据在哪
type属性，嵌入资源的类型是什么（音乐、视频、flash…）
MIME格式：
type属性的描述是一个标准格式，这个标准格式叫MIME，
百度搜一下，会搜到互联网中有哪些常见MIME格式，
MIME(Multipurpose Internet Mail Extensions) 多用途互联网邮件扩展类型（名字听起来奇奇怪怪的）
因为在很早的时候，互联网就是用来发送邮件的，邮件里面可能会包涵一些东西、一些资源，
要告诉浏览器或告诉邮箱，这个资源是什么类型
怎么告诉呢？
就通过一个标准格式的文本来告诉，
比如发送的资源是一个jpg图片 MIME：image/jpeg
搜索下面网页中swf的MIME类型，".swf", "application/x-shockwave-flash"
https://baike.baidu.com/item/MIME/2900607?fr=aladdin
这样浏览器就能识别，这是一个falsh程序
<object data="./example.swf" type="application/x-shockwave-flash"></object>
object元素里可以加子元素param
<object data="./example.swf" type="application/x-shockwave-flash"> <param name="quality" value="high"> </object>
param表示参数的意思
1). name参数名字，value参数值
2). quality表示flash画面质量，high表示画面质量为高
2、embed
embed元素
1). src属性，对应object元素的data属性
2). type属性是一样的，表示资源的类型
<embed src="" type="">
embed元素参数直接在行间写
<embed src="./example.swf" type="application/x-shockwave-flash" quality="high">
3、为什么有两个元素呢？
因为有的浏览器能识别object，有的浏览器能识别embed，当然谷歌浏览器都能识别
兼容的写法
<object data="./example.swf" type="application/x-shockwave-flash"> <param name="quality" value="high"> <embed src="./example.swf" type="application/x-shockwave-flash" quality="high"> </object>
三、背景图练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<style>
.clearfix::after{
content: "";
display: block;
clear: botah;
}
body{
background: url(./img/bg.jpg) no-repeat center top;
}
.header{
width: 1198px;
height: 73px;
line-height: 73px;
color:#f8b700;
margin: 0 auto;
margin-top: 45px;
background:url('./img/bg_nav.jpg') no-repeat 0 0/100% 100%;
border:1px solid #3f2a22;
border-left: none;
border-right: none;
position: relative;
}
.header nav a{
float:left;
width: 161px;
height: 73px;
text-align: center;
box-sizing: border-box;
border:1px solid #3f2a22;
border-top: none;
border-bottom: none;
}
.header nav a:nth-child(3){
margin-right:232px;
}
.header .logo{
position: absolute;
width: 238px;
height: 118px;
background: url(img/logo.png) no-repeat;
/* 水平居中 */
left:0;
right: 0;
margin: auto;
top: -37px;
}
.header .logo h1{
display: none;
}
.menu{
text-align: center;
margin-top: 510px;
}
.menu a{
display: inline-block;
width: 323px;
height: 105px;
background: url('img/btns.png') no-repeat;
}
.menu a span{
display: none;
}
.menu a:nth-child(2){
background-position: -323px 0;
}
.adv{
width: 1203px;
/* 高度自动撑开 */
margin:72px auto;
}
.adv .item{
float: left;
width: 290px;
height: 200px;
margin-right: 13px;
/* box-sizing: border-box; */
outline: 1px solid#3f2a22;
}
.adv .item:last-child{
margin-right: 0;
}
.adv .item .title{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #211510;
color:#f8b700;
box-sizing: border-box;
border-bottom: 1px solid#3f2a22;
}
.adv .item .img {
height: 150px;
}
.adv .item .img img {
height: 150px;
width: 290px;
}
</style>
<title>背景图练习</title>
</head>
<body>
<header>
<nav>
<a href="">进入官网</a>
<a href="">账号注册</a>
<a href="">充值管理</a>
<a href="">游戏下载</a>
<a href="">客户中心</a>
<a href="">官方论坛</a>
</nav>
<a href="">
<h1>魔兽世界</h1>
</a>
</header>
<div>
<a href="">
<span>了解详情</span>
</a>
<a href="">
<span>客户端下载</span>
</a>
</div>
<div class="adv clearfix">
<div>
<div>
<h2>
<a href="">点卡兑换先已开启</a>
</h2>
</div>
<div>
<a href=""><img src="/img/1.jpg" alt=""></a>
</div>
</div>
<div>
<div>
<h2>
<a href="">直升110级现在开启</a>
</h2>
</div>
<div>
<a href=""><img src="img/2.jpg" alt=""></a>
</div>
</div>
<div>
<div>
<h2>
<a href="">客户端下载</a>
</h2>
</div>
<div>
<a href=""><img src="img/3.jpg" alt=""></a>
</div>
</div>
<div>
<div>
<h2>
<a href="">免费注册</a>
</h2>
</div>
<div>
<a href=""><img src="img/4.jpg" alt=""></a>
</div>
</div>
</div>
</body>
</html>firstTime: 20220123