内联框架
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.ul{
list-style: none;
float: left;
margin-left: 20px;
}
.iframe{
float: left;
width: 300px;
height: 300px;
margin: 20px;
}
</style>
<title>内联框架</title>
</head>
<body>
<ul class="ul">
<li class="li"><a href="https://www.php.cn/blog/detail/14566.html" target="iframe">本地网页环境的搭建</a></li>
<li class="li"><a href="https://www.php.cn/blog/detail/14597.html" target="iframe">HTML初识</a></li>
<li class="li"><a href="https://www.php.cn/blog/detail/14793.html" target="iframe">html元素、列表、表格、表单的理解</a></li>
<li class="li" ><a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567446011108&di=6806a64e08b3f3c2d5683eb6a6acee1b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F31%2F20160131005816_zkJjB.jpeg" target="iframe"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567446011108&di=6806a64e08b3f3c2d5683eb6a6acee1b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F31%2F20160131005816_zkJjB.jpeg" alt="" style="width: 30px;"></a></li>
</ul>
<iframe frameborder="0" name="iframe" class="iframe" ></iframe>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS样式设置优先级
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS设置的优先级</title>
<style>
/* 标签选择器 */
p {
color: blue;
font-size: 25px;
}
/* 类选择器：.类名 */
.page {
color: #999;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
/* id选择器：#id名 */
#page {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<!-- 选择器的优先级：id选择器>类选择器>标签选择器 -->
<p id="page" class="page">这是一段文本</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒子模型
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.main {
width: 300px;
height: 300px;
/* 外边距，上下100px 左右自动，即左右居中对齐*/
margin: 100px auto;
background-color: sienna;
}
.page {
width: 200px;
height: 200px;
/* 内边距，上20px 右30px 下40px 右50px*/
padding: 20px 30px 40px 50px;
background-color: aqua;
/* 外边距，上下0px 左右自动，即居中对齐*/
margin: 0px auto;
border: 2px solid black;
}
p {
height: 50px;
background-color: aliceblue;
padding: 15px;
border: 1px solid blue;
}
</style>
<title>盒子模型</title>
</head>
<body>
<!-- 盒子模型 -->
<div class="main">
<div class="page">
<p>这是盒子里的段落</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
一、内联框架元素：标签<iframe>中的属性name的值，作为<a>标签中target属性的值，即可完成框架与标签<a>的连接，<a>连接中href属性值可以是html文件，也可以是外网的图片链接、视频链接等。
二、语义化标签：页头<header></header>，页脚<footer></footer>，导航<nav></nav>,主体<main></mai>等，出现于HTML5中，易于浏览器和所搜引擎的辨别，对seo优化有较好的兼容。
三、样式选择器：常用的选择器三大类：id选择器、class选择器、tag选择器。另外附加JS中针对id/class/tag的选择器。其优先级为JS选择器>id选择器>class选择器>tag选择器。基本用法：id选择器前加#号，class选择器前加.号,tag选择器直接写起名称。属性和属性之间用分号隔开。
四、盒子模型：对于块级元素都有基本的6大设置：宽度width、高度height、背景background、内边距padding、外边距margin、边框border。内外边距及边框它们对应的设置顺序为上、右、下、左，若有三个数值则中间两个为右左，若只有两个数值则第一个为上下，第二个为左右。
