收藏
批改状态：合格
老师批语：总结的不错
1、内联标签和语义化标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联标签和语义化标签</title> </head> <body> <header style="text-align: center"> <h1>头部</h1> </header> <main> <article > <nav> <a href="https://www.sogou.com/" target="soso" >搜狗</a> <a href="https://www.baidu.com/" target="soso">百度</a> </nav> <section> <br> <iframe srcdoc="搜索一下" frameborder="1"name="soso"width="400" height="200"></iframe> </section> </article> <aside> <section> <h3>课程学习</h3> <a href="https://baike.so.com/doc/5336503-5571942.html" target="main">php课程</a><br> <a href="https://baike.so.com/doc/2303745-2436931.html" target="main">mysql课程</a><br> <a href="https://baike.so.com/doc/5504725-5740469.html"target="main">ThinkPHP框架课程</a> </section> <section> <br> <iframe srcdoc="课程学习" frameborder="1"name="main" width="400" height="200"></iframe> </section> </aside> </main> </body> </html>
点击 "运行实例" 按钮查看在线实例
运行结果：
小总结：
对于内联标签iframe的使用，需要掌握其基本的属性方法，可以搭配a标签进行使用，iframe标签的name属性值需要跟a标签的target属性值一致，这样在a标签的页面就会显示在iframe的框架内，但是由于有些页面存在禁止作用，所以禁止该页面在iframe框架打开。
对于语义化标签，不是很了解，似懂非懂，有待进一步的学习
附上iframe标签的基本属性
2、css中的内联样式,内部样式,外部样式的应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS简介与引入</title>
<!-- 2. 内部样式: style标签-->
<style>
/*类选择器*/
.pblue{
color:blue;
font-size: 18px;
}
.pperu{
color:peru;
}
/* id选择器 */
#pgreen{
color: green;
}
</style>
<!-- link标签可以引入外部样式表-->
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<p>默认样式</p>
<!--1. 内联样式: style属性-->
<p style="color:red;font-size: 24px">内联样式 红色 24号字体</p>
<p class="pblue">内部样式 类选择器 蓝色 18号字体</p>
<p id="pgreen">内部样式 id选择器 绿色</p>
<div>
<p>外部样式 div标签下的p标签 浅绿</p>
</div>
<p class="pblue pperu ">内部样式 多个类选择器 褐色 </p>
<p class="pblue" id="pgreen">内部样式 类选择器 VS id选择器 绿色 </p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
外部css引入：
运行结果：
小总结：
掌握了css的内联样式、内部样式、外部样式的使用，对于css样式的优先级，基本上符合“内联样式>内部样式>外部样式”的规律，但是，同时也存在一些例外，对于内部样式和外部样式而言，越晚引用级别越高，所以总结一下优先级：
内联样式 > 内部样式 > 外部样式
id > class > tag
后引用 > 前引用
3、对于盒 模型中的内外边距, 边框的样式设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
div{
width:300px;
height:300px;
background-color: aqua;
color:blue;
margin:10px 20px;
padding: 30px 20px 10px 50px;
border:5px solid red;
}
</style>
</head>
<body>
<div>盒模型</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
padding: 内边距, 内容与边框之间的填充区域，只能设置宽度
margin: 外边距,决定当前盒子与其它盒子之间的位置与关系，只能设置宽度
border: 边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色
4、盒模型的每个要素的排列方式是什么?
盒模型的排列方式主要按照：上-右-下-左 顺时针的方向排列
也可以按照：上-左右-下 上下-左右
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
