![[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 按内容是否可替换
置换元素
* 元素内容来自文档外部, 可以替换成不同的资源
* 该类元素都过特定属性实现资源的置换
* 由于这类元素不由文档直接提供,所以大小尺寸未知
* 此时,遵循最小化原则,尽可能最小的空间来显示它们
* 所以, 这类元素通常都是以*行内元素*身份出现(并非总是如此)
* 你可能已经猜到, 置换元素大多用*自闭合标签/空标签*来描述
* 实例: `<img>`, `<input>`都是这类元素
* `<img src="...">`: 以src属性指向引用的外部图片资源
* `<input type="...">`: type不同,替换成不同的类型
非置换元素
* 元素内容由文档直接提供, HTML中绝大多数元素,都属于此类
* 非置换元素的内容通常放在二个标签之间, 所以大多采用*双标签*
* 非置换元素, 有块元素与有行内元素, 只是提供者不同罢了
* 实例: `<h1><p><span><div><table><ul+li><a>...`
2 按元素是否独占一行
块级元素
* 遵循: *最大化原则*
* 总是独占一行显示, 自动充满父级元素的内容区
* 块级元素二边不允许有任何其它元素,也就是它总是自带换行的
* 块级元素在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在
* 例如: `<div>`, `<ul+li>`, `<table>`,`<p>`, `<h1-h6>`...
行内元素
* 遵循: *最小化原则*
* 总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置
* 例如: `<span>`,`<input>`, `<em>`,`<strong>`,`<a>`...
元素的显示方式
一切元素都是框任何元素都会在页面上占据一定的空间, 页面是以框的形式来显示它们块级框对应的是块级元素, 行内框对应的是行内元素行内框的宽高, 由它内部的内容决定,块级框的宽高, 是由它内部的子元素决定一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)
内联元素。
常用的内联元素有：
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素和其他元素都在一行
元素的高度、宽度及顶部和底部边距不可设置
元素的宽度就是它包含的文字或图片的宽度，不可改变。
块级元素.
在html中<div>、 <p>、<h1>、<form>、<ul> 、 <li>就是块级元素。
每个块级元素都从新的一行开始，并且其后的元素也另起一行,元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
<!DOCTYPE html> <body lang="en"> <head> <meta charset="UTF-8"> <title>块级元素内联元素演示</title> </head> <body> <!--块级元素演示--> <div>块级元素 一个块级元素独占一行 </div> <p>块级元素 一个块级元素独占一行</p> <ul> 块级元素 一个块级元素独占一行 </ul> <!--内联元素演示<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>--> <a href="/">内联元素a</a> <span>内联元素sapn</span> <strong>内联元素我们都在一行</strong> </body> </html>
点击 "运行实例" 按钮查看在线实例
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
主要作用：CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
选择器是一种模式，用于选择需要添加样式的元素。它的声明由属性和值两部分组成。
标签选择器，又称类型选择器（Type Selector），是最常见的CSS选择器，文档的元素就是选择器。
属性选择器,属性选择器可以根据元素的属性及属性值来选择元素
类选择器.类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用.
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
群组选择器。当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
通配符选择器，它可以匹配任意类型的HTML元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS简单选择器</title>
<style>
/*1.标签选择器*/
p {
color: blue;
}
/*2.属性选择器*/
p[class] {
color: aliceblue;
}
p[class="blue"] {
color: aquamarine;
}
p[id="red"] {
color:blue ;
}
/*3.类选择器*/
.red {
color: deeppink;
}
/*4.ID选择器*/
#blue {
color: springgreen;
background: cornflowerblue;
}
/*5.群组选择器*/
.red, h3 {
background: bisque;
}
/*6.通配符选择器*/
body * {
font-size: 2rem;
}
</style>
</head>
<body>
<p>CSS基础与选择器</p>
<p class="yellwo">CSS基础</p>
<p class="red" id="blue">CSS选择器</p>
<p class="red">前端学习</p>
<h3>php学习</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
上下文选择器：基于祖先或者同胞元素选择一个元素
后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素
父子选择器:先找到父级元素,再选择他下面所有直接后代元素
相邻选择器: 可选择紧接在另一元素后的元素，且二者有相同父元素
同级所有选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
/*后代选择器*/
div p{background: red;}
/*父子选择器:*/
div > h1 {background: aqua;}
/*同级相邻选择器*/
h1 + span{background: antiquewhite;}
/*同级所有选择器*/
span ~ a{ background: blue;}
</style>
</head>
<body>
<div>
<p>后代选择器</p>
<h1 >父子选择器</h1>
<span>同级相邻选择器 </span>
<a href="">同级所有选择器</a>
<a href="">同级所有选择器</a>
<a href="">同级所有选择器</a>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
*:nth-child(n)`: 匹配父元素中指定索引的子元素
*:first-child`: 匹配父元素中的第一个子元素
*:last-child`: 匹配父元素中的最后一个子元素
*:nth-last-child(n)`: 匹配从父元素中倒数选择子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS结构伪类选择器</title>
<style>
/*选中页面所有的ul下面的子第一个子元素*/
ul :nth-child(1){ background-color: grey; }
/*匹配父元素中的第一个子元素*/
li:first-child {background: blue;}
/*匹配父元素中的最后一个子元素*/
li:last-child {background: antiquewhite;}
/*匹配从父元素中倒数选择子元素*/
li:nth-last-child(1){background: red;}
</style>
</head>
<body>
<div>
<div>
<ul>
<li>
<h1>第一个子元素</h1>
<ul>
<li>第一个子元素第一</li>
<li>第一个子元素第二</li>
<li>第一个子元素第三</li></ul>
</li>
<li>
<h1>第二个子元素</h1>
<ul>
<li>第二个子元素第一</li>
<li>第二个子元素第二</li>
<li>第二个子元素第三</li></ul>
</li>
<li>
<h1>第三个子元素</h1>
<ul>
<li>第三个子元素第一</li>
<li>第三个子元素第二</li>
<li>第三个子元素第三</li></ul>
</li>
</ul>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>input:enabled{
background-color: red;
}
input:disabled{
background-color: pink;
}
input:required{
background-color: yellow;
}</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="">
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" id="pass">
</p>
<p>
<label for="warning">警告：</label>
<input type="text" value="不允许重复登录" id="warning" style="border:none;" disabled>
</p>
<p>
<label for="save">保存密码：</label>
<input type="checkbox" name="save" id="save" checked>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
