![[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.按照内容是否可以替换
1）置换元素
元素内容来自文档外部，可以替换成不同的资源
该类元素可以通过特定的属性实现资源的替换
由于这类元素不由文档直接提供，所以大小尺寸未知，此时，遵循最小化元祖，尽可能最小的控件来显示，所以这类元素通常都是以行内元素出现
置换元素大多用自闭合标签/空标签来描述
实例：<img src="" alt=""> 以src属性指向引用的外部图片资源
<input type=""> 以type属性值的不同，替换成不同的类型
2）非置换元素
元素的内容由文档直接提供，HTML中绝大数元素都属于此类
非置换元素的内容通常使用的是双标签
非置换元素有块元素和行内元素
2.按照元素是否在浏览器中独占一行
1）块元素
遵循最大化原则
总是独占一行显示，自动充满父级元素的内容区
块元素两边不允许有任何其他元素，它总是自动换行的
块元素在没有内容时，需要手动设置宽高，否则会看不到
实例：<div></div>、<table></table>、<p></p>、<h1></h1>....
2）行内元素
遵循最小化原则
总是在一行文本元素的内部生成，它的宽高有所在行决定，不可以设置
实例：<span>、<input>
3.元素的显示方式
1）一切元素都是框
2）任何元素都会在页面上占据一定的控件，页面是以框的形式开显示他们
3）块级框对象的是块元素，行内元素对应的是行内元素
4）行内框的宽高由内部的内容决定
5）块级框的宽高由内部的子元素决定
6）一般来说，块级框内可以嵌套行内框，反之不允许（但是可以用display改变）
二、CSS是什么? 它的主要作用是什么?
1.CSS是什么？
层叠样式表（英文全称 ：Cascading Style Sheets）
2.CSS的主要作用？
用来设置HTML元素在文档中的布局和显示方式
三、什么是CSS选择器,它的样式声明是哪二部分组成?
1.要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器
2.CSS的样式声明
CSS 样式声明：属性+属性值
实例：
p{
color:red;
}
四、举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<!-- 简单选择器是根据元素的标签名称和属性来选择元素，是最直观的方式 -->
<!-- 当元素选择器，类选择器和ID选择器同级共存时，优先级是：属性选择器<类选择器<ID选择器 -->
<style>
/* 元素选择器 */
h2{
color:red;
}
h4{
color: rosybrown;
}
/* 属性选择器 */
p[class="text1"]{
background-color: slategray;
}
p[class="text3"]{
color: green;
}
/* 类选择器 */
.text2{
font-size: 8em;
}
.text3{
background-color: grey;
}
/* ID选择器 */
#line{
color: indianred;
}
/* 群组选择器 */
.text1,h4{
background-color: khaki;
}
/* 通配符选择器 */
body *{
font-size: 2rem;
}
</style>
</head>
<body>
<p>段落1</p>
<p class="text1">段落2</p>
<p class="text2">段落3</p>
<p id="line">段落4</p>
<p class="text3">段落5</p>
<h2>标题1</h2>
<h4>标题2</h4>
</body>
</html>点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上下文选择器</title> <link rel="stylesheet" href="style1.css"> </head> <body> <div class="box1"> <ul> <li>这是第1个li标签</li> <ul> <li>第2层的第1个标签</li> <li>第2层的第2个标签</li> </ul> <li>这是第2个li标签</li> </ul> </div> <div class="box2"> <dl> <dt class="dt1"> 这是第一个定义列表 <dd class="dd1">这是第1个dd标签</dd> <dd>这是第2个dd标签</dd> <dd>这是第3个dd标签</dd> </dt> <dt> 这是第二个定义列表 <dd>这是第1个dd标签</dd> </dt> </dl> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
/* 后代选择器：空格 */
/* 后代选择器选择的是标签下的所有标签 */
.box2 dd{
color: red;
}
/* 父子选择器：> */
/* 父子选择器选择的是标签的第一层标签 */
.box1>ul>li{
background-color: aqua;
}
/* 同级相邻选择器：+ */
.box2 .ddl+*{
color: green;
}
/* 同级所有选择器：~ */
.box2 .dd1~dd{
background-color: hotpink;
}点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 结构伪类选择器</title>
<style>
/*ul里的第二个子元素*/
ul>:nth-child(2){
color: lightcoral;
}
/*锁定最外面的ui，第一个元素*/
ul:first-child>:nth-child(1){
color: red;
}
/*锁定最外面的ul，最后一个元素*/
ul:first-child>:last-child{
color: green;
}
/*锁定最外面的ul，最后一个元素里的li*/
ul:first-child>:last-child li:nth-child(n+1){
color: red;
}
/*限定伪类*/
ul:first-of-type>:last-of-type h4:nth-of-type(n+1){
background-color: lightcoral;
}
</style>
</head>
<body>
<ul>
<li>
<h1>标题1</h1>
<ul>
<li>这是一段文字。</li>
<li>这是一段文字。</li>
<li>这是一段文字。</li>
</ul>
</li>
<li>
<h1>标题1</h1>
<ul>
<li>这是一段文字。</li>
<li>这是一段文字。</li>
<li>这是一段文字。</li>
</ul>
</li>
<li>
<h1>标题1</h1>
<ul>
<li>这是一段文字。</li>
<li>这是一段文字。</li>
<li>这是一段文字。</li>
</ul>
<h4>标题4.1</h4>
<h4>标题4.2</h4>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled{
background-color: lightcoral;
}
input:required{
background-color: green;
}
input:disabled
{
background-color: red;
}
</style>
</head>
<body>
<form action="">
<p>
<label for="username">账号：</label>
<input type="text" id="username" required>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" disabled>
</p>
<label for="email">邮箱：</label>
<input type="email" id="email" placeholder="xxxxxxx@emai.com">
<p>
<button>提交</button>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
