![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
内联框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联</title> </head> <body> <h2>内联demo演示</h2> <ul style="float: left"> <li><a href="https://www.baidu.com/" target="main">百度一下</a></li> <li><a href="http://www.so.com/" target="main">360搜索</a></li> <li><a href="http://www.sogou.com/" target="main">搜狗搜索</a></li> <li><a href="http://www.taobao.com/" target="main">淘宝商城</a></li> </ul> <iframe srcdoc="<h3>演示文字</h3>" frameborder="1" width="500" height="300" style="float: left" name="main"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
HTML5原生支持视频在线播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5原生支持视频在线播放</title> </head> <body> <video src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" controls width="300" height="450" poster="https://img.php.cn/upload/course/000/000/015/5d199b00c2b82390.jpg"></video> </body> </html>
点击 "运行实例" 按钮查看在线实例
CSS样式引入：内部、内联、外部三种不同形式与优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--内部样式-->
<style>
p{
color: fuchsia;
}
</style>
<!--引入外联样式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>初始CSS：简介与引入</h1>
<h3>优先级：内联样式>内部样式>外联样式</h3>
<p>内部样式控制变色</p>
<!--内联样式-->
<p style="color: red">内联样式控制变色</p>
<!--外联样式-->
<p class="biaoqian">外联样式之标签选择器控制变色并且加大字号显示</p>
<p id="lei">外联样式之类选择器控制变色并且加更大字号显示</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
这个是外部样式表
.biaoqian{
color: blue;
font-size: large;
}
#lei{
color: blueviolet;
font-size: larger;样式表不可直接运行，因为路径暂时无法保持一致。
3. 对于盒 模型中的内外边距, 边框的样式设置有什么不同, 写出你的理解
暂无理解，小白，暂时只能简单理解。。。
4. 盒模型的每个要素的排列方式是什么?要求背下来
临阵磨枪了。。。
一切皆盒子（BOX）
<!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>一切皆盒子(box)</title>
<link rel="stylesheet" href="static/css/style2.css">
</head>
<body>
<!--
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
(根据盒子模型示意图分析)
3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框
(1): width: 宽度(水平方向)
(2): height: 高度(垂直方向)
(3): background-color: 背景 (默认透明)
(4): padding: 内边距, 内容与边框之间的填充区域
(5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系
(3): border: 边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色
4. 根据是可见性可以分为二类:
(1). 可见的: width, height, border
(2). 透明的: background, padding, margin
注: padding,margin 只允许设置宽度, 不允许设置样式与颜色
-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<!-- 下面是CSS引入文件 -->
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* 可以简写:按顺时针 */
padding: 20px 30px 40px 50px;
/* 如果左右相等30,而上下不相等20,40,可以这样简写 */
/*padding: 20px 30px 40px;*/
/* 如果上下也相等40 */
/*padding: 40px 30px;*/
/* 大家可注意到规律了,不论是二个,还是三个参数,第二个总表示左右内边距 */
/* 如果四个方向全部相等,例如20 */
/*padding: 20px;*/
/* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
/* 上边框 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
/* 右边框 */
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
/* 左边框 */
border-left-width: 10px;
border-left-style: double;
border-left-color: black;
/* 以上样式与可以简写 */
border-top: 10px solid red;
border-right: 10px dashed green;
border-bottom: 10px dotted blue;
border-left: 10px double black;
/* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
border: 10px solid red;
/* margin有很多特殊的规则,后面单独讨论 */
}
/*box2盒子是box1的内容*/
.box2 {
/*子元素自动继承了宽度,所以这个样式是多余的*/
/*但是只有宽度是看到这个盒子的,想想为什么?*/
/*width: inherit;*/
height: inherit;
/*默认padding不会被继承,而是会传递到父元素, 这个明天再说*/
/*padding: inherit;*/
/*margin是无效的, 因为外边距是指二个同级盒子之间的间隙,而不是互相嵌套的关系*/
/*margin: inherit;*/
background-color: wheat;
}
/*明天学习更多的盒子模型的特征, 还是选择器的知识, 布局的原理以及常用的布局模型: 双飞冀布局和圣杯布局*/点击 "运行实例" 按钮查看在线实例