![[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
一. 元素按显示方式分为哪几种, 并举例, 正确描述它们
答：元素按显示方式分为块状元素和内联元素
块状元素
1.块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,(h1~h6),p,form,hr,iframe,colgroup,col,table,tr,td等等；
2.默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列
3.块状元素都可以定义自己的宽度和高度
4.块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素。我们可以把这种容器称为一个盒子。
内联元素
1.常见的内联元素如：a,span,i,em,strong,b等等
2.内联元素的表现形式是始终以行内逐个进行显示
3.内联元素没有自己的形状，不能定义它的宽和高，它显示的高度和欢度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
4.内联元素也会遵循盒模型基本规则，如可以定义padding，border，magrin，background等属性
二. CSS是什么? 它的主要作用是什么?
答：CSS全称为Cascading Style Sheets（层叠样式表），中文翻译为“层叠样式表”，简称CSS样式表。它是一种用来表现HTML或 XML 等文件式样的计算机语言。
在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
CSS的作用：CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。
三. 什么是CSS选择器,它的样式声明是哪二部分组成?
CSS3 选择器 在CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
它的样式声明是由属性和属性值两部分组成
例如：
<style type="text/css">
声明{ 属性: 值;}
</style>
四. 举例演示CSS简单选择器(全部)
常用的简单选择器有5种:
1.元素选择器: div {...}
2.属性选择器: tag[property...]
3.类/class选择器: .active {...}
4.ID选择器: #style {...}
5.群组选择器: p, .active, div {...}
通配符选择器: *, 表示全部元素, 通常用在上下文选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS简单选择器</title>
<style type="text/css">
/*标签选择器*/
h2{
color: red;
}
span{
background: burlywood;
color: cadetblue;
}
/*.类选择器*/
.style1{
font-size: 20px;
color: green;
background:blue;
}
.style2{
background: rebeccapurple;
font-size: 16px;
color: white;
}
/*ID类选择器*/
#style3{
font-size: 23px;
background: darkgrey;
}
/*属性选择器*/
p[class]{
background: green;
color: white;
font-size: 24px;
}
/*伪类选择器*/
a:link{font-size: 30px;color:yellow;} /*打开网页时标签为黄色*/
a:hover{font-size: 30px;color:green;} /*将鼠标放在标签上时标签为绿色*/
a:active{font-size: 30px;color:blue;} /*点击标签时标签为蓝色*/
a:visited{font-size: 30px;color:red;} /*点击后标签为红色*/
</style>
</head>
<body>
<section>
<h2>CSS简单选择器</h2>
<p class="style1">她年轻时迷死一大片男人，却不结婚不生子，<span>今39岁甜的像个水蜜桃</span></p>
<p class="style1">最近一对农村男女相亲火了，被网友称为最朴实最美好的相亲</p>
<p class="style2">直击北京故宫航拍照：尽显皇家威严，却被现代化的建筑步步紧逼</p>
<p id="style3">其实在唐僧的三个徒弟中，猪八戒实力垫底，<span>孙悟空也不一定排第一</span></p>
<a href="https://www.php.cn" target="_blank">PHP中文网</a>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
五. 举例演示CSS上下文选择器(全部)
所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器
后代选择器: 空格, 如 section p
父子选择器: >, 如 section > h2
同级相邻选择器: +, 如 h2 + p
同级所有选择器: ~, 如 h2 ~ a
通配选择器：* 如 section * a
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-上下文选择器</title>
<style type="text/css">
/*后代选择器*/
section p{
font-size: 20px;
color: darkgrey;
}
/*标签1 > 标签2
标签2必须是标签1的子元素。与其他常规的上下文选择符不同，这个选择符中的标签1不能使标签2的父元素之外的其他祖先元素*/
section > h2 {
font-size: 30px;
color: green;
}
/* 紧邻同胞选择符 +
标签1 + 标签2
标签2必须紧跟在其同胞标签1的后面 */
h2 + p {
background: #7a3dff;
}
/*一般同胞选择符 ~
标签1 ~ 标签2
标签2必须在（不一定紧挨着）其同胞标签1后面*/
h2 ~ a{
font-size: 26px;
color: darkslategray;
}
/*通配选择符 * 适用于section的非子元素a
*（常称为星号选择符）是一个通配符，它匹配任何元素*/
section * a{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<section>
<h2>CSS-上下文选择器</h2>
<p>她年轻时迷死一大片男人，却不结婚不生子，今39岁甜的像个水蜜桃</p>
<p>最近一对农村男女相亲火了，被网友称为最朴实最美好的相亲</p>
<p>直击北京故宫航拍照：尽显皇家威严，却被现代化的建筑步步紧逼</p>
<p>其实在唐僧的三个徒弟中，猪八戒实力垫底,<a href="https://www.php.cn" target="_blank">PHP中文网</a></p>
<a href="https://www.html.cn" target="_blank">HTML中文网</a>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS上下文选择器</title>
<style type="text/css">
em{
color: red;
font-size: 50px;
}
article li em{
color: blue;
font-size:20px;
}
aside li em{
color: chocolate;
background: darkgrey;
font-size: 20px;
}
</style>
</head>
<body>
<article>
<div class="main">
<h2><em>CSS</em>上下文选择器</h2>
<ul>
<li>她年轻时迷死一大片男人，却不结婚不生子，今39岁甜的像个水蜜桃</li>
<li>最近一对农村男女相亲火了，被网友称为最朴实最美好的相亲</li>
<li>直击北京故宫航拍照：<em>尽显皇家威严</em>，却被现代化的建筑步步紧逼</li>
</ul>
</div>
</article>
<aside>
<ul>
<li>最近昆凌出席活动的时候，穿了一件黑色的开叉长裙，轻松展现出曼妙性感的好身材</li>
<li>S型的身材曲线让人看完之后心动不已，一点都不像是已经生了两个孩子的人</li>
<li>其实在唐僧的三个徒弟中，<em>猪八戒实力垫底</em>，孙悟空也不一定排第一</li>
</ul>
</aside>
</body>
</html>点击 "运行实例" 按钮查看在线实例
六. 举例演示常用CSS结构伪类选择器(不少于四种)
:nth-child(n)是最主要的非限定类型,其它四个只是它的某种行为快捷方式
:nth-child(n): 匹配父元素中指定索引的子元素
:first-child: 匹配父元素中的第一个子元素
:last-child: 匹配父元素中的最后一个子元素
:nth-last-child(n): 匹配从父元素中倒数选择子元素
:only-child: 匹配父元素中的唯一子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用CSS结构伪类选择器</title>
<style type="text/css">
/*结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。*/
/*:nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同，唯一不同的是，它用来选择某个父元素下，指定类型的一个或多个特定的子元素。*/
section ul li:first-child{/*选择第1个li*/
color: red;
font-size: 20px;
}
section ul li:last-child{/*选择最后一个li*/
color: #3ad4ff;
background: darkgrey;
padding: 10px;
}
section ul li:nth-child(3){/*选择第3个li*/
font-size: 20px;
color: blue;
}
section ul li:nth-child(4){/*选择第四个li*/
background: green;
color: white;
}
section ul li:nth-last-child(2){/*选择倒数第二个li*/
color: chocolate;
background: aquamarine;
}
section ul li:nth-of-type(5){
background: black;
color: white;
}
</style>
</head>
<body>
<section>
<h2>常用CSS结构伪类选择器</h2>
<ul>
<li>她年轻时迷死一大片男人</li>
<li>今39岁甜的像个水蜜桃</li>
<li>最近一对农村男女相亲火了</li>
<li>被网友称为最朴实最美好的相亲</li>
<li>直击北京故宫航拍照：尽显皇家威严</li>
<li>却被现代化的建筑步步紧逼</li>
<li>唐僧的三个徒弟中，猪八戒实力垫底</li>
<li>孙悟空也不一定排第一</li>
</ul>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
七. 举例演示常用CSS表单伪类选择器(不少于三种)
所谓非限定类型, 是指只关注子元素的位置, 忽略子元素类型(当然也可以指定类型)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用CSS表单伪类选择器</title>
<style type="text/css">
input:enabled{
background: darkgrey;
}
input:focus {
background: #7a3dff;
}
input:disabled{
background: chocolate;
}
</style>
</head>
<body>
<section>
<h2>常用CSS表单伪类选择器</h2>
<form action="login.php">
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" value="请输入用户名">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p>
<p>
<label for="password">确认密码：</label>
<input type="password" name="password" id="password" placeholder="请确认密码">
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" placeholder="example@email.com">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
</form>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
