文章目录
- 10.【HTML全解】HTML标签
- 10.1 视频:英语小课堂
- 10.2 视频:学习工具
- 10.3 视频:HTML起手式
- 10.4 视频:4
- 10.5 视频:5
- 10.6 视频:6
- 11.【HTML全解】HTML重点标签
- 11.1 视频:1
- 11.2 视频:2
- 11.3 视频:3
- 11.4 视频:4
- 12.【HTML全解】HTML 实践 & 手机调试
- 12.1 视频:HTML实践
- 12.2 视频:手机调试
- 12.3 视频:部署到GitHub Pages
- 13. 【CSS全解】CSS基础
- 13.1 视频:CSS历史
- 13.2 视频:体系化学习
- 13.3 视频:文档流(Normal Flow)
- 13.4 视频:盒模型
- 14. 【CSS全解】CSS布局上
- 14.1 视频:布局是什么
- 14.2 视频:float布局
- 14.3 视频:flex布局上
- 14.4 视频:Flex布局下
- 14.5 视频:Flex小游戏
- 14.6 视频:前端底线
- 15.【CSS全解】 CSS布局下
- 15.1 视频:Grid 简单语法
- 15.2 视频:Grid 例子和游戏
- 16. 【CSS全解】CSS定位
- 16.1 视频:一个DIV的分层
- 16.2 视频:position的5个取值
- 16.3 视频:层叠上下文
- 17. 【CSS全解】CSS动画
- 17.1 视频:动画的原理
- 17.2 视频:浏览器渲染原理
- 17.3 视频:transform全解
- 17.4 视频:跳动的心
- 17.5 视频:transition过渡
- 17.6 视频:animation和红心
- 18. 【HTTP全解】URL 是什么
- 18.1 视频:网络和IP
- 18.2 视频:端口
- 18.3 视频:域名, 路径, 查询参数, 锚点
- 18.4 视频:curl命令
- 19. 【HTTP全解】请求和响应 & Node.js Server
- 19.1 视频:演示Node.js Server
- 19.2 视频:后缀是垃圾
- 19.3 视频:请求和响应的规范写法
- 19.4 视频:用curl构造请求
- 19.5 视频:404页面是什么
- 19.6 视频:第一次讲console.log调试大法
- 19.7 视频:100元购买阿里云服务器
- 19.8 视频:部署Node.js代码
10.【HTML全解】HTML标签
10.1 视频:英语小课堂
10.2 视频:学习工具
- 推荐书籍 网道 HTML 教程
HTML的书没必要买, 练习主导 - 不要用
VSCode
, 同时开多个目录 VSCode
插件推荐
Prettier
: 更好地格式化工具- 代码问题如何提问
- JSBin
- 代码沙盒
10.3 视频:HTML起手式
<html lang="en">
en
可以改为zh-CN
(zh
:中文,CN
:中国,因为还有其他地区的中文)<meta name="viewport" content="width=device-width, initial-scale=1.0">
防止页面缩放<meta http-equiv="X-UA-Compatible" content="ie=edge">
默认访问IE
浏览器内核转为edge
版本
10.4 视频:4
- 表示文章/书的层级
- 标题h1~h6
- 章节section
- 文章article
- 段落p
- 头部header
- 脚部footer
- 主要内容main
- 旁支内容aside
- 划分div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章标题</title>
</head>
<body>
<header>导航栏</header>
<div>
<main>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
<section>
<h2>1.1 标题</h2>
<p>一段话111</p>
</section>
<section>
<h2>1.2 标题</h2>
<p>一段话222</p>
</section>
</section>
</main>
<aside>
参考文献:1, 2,3
</aside>
</div>
<footer>©bens版权所有</footer>
</body>
</html>
- 全局属性
所有标签都可以有的属性- class
- contenteditable
所选的范围可编辑
将style
放到body
上然后通过加入style{display:block; }
可以将style
显示出来,然后配合contenteditable
来实现样式可编辑(只能编辑已有的样式,新建样式不起作用)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文章标题</title> </head> <body> <style contenteditable> style{display:block; border:1px solid green} /* 这样写样式不方便,修改的话需要新加一个样式*/ /* [class="middle bordered"]{ background:black; color:white; border:5px solid red } */ .middle{ background:black; color:white; } .bordered{ border:5px solid red } </style> <header>导航栏</header> <div class="middle bordered" contenteditable> <main> <h1>文章标题</h1> <section> <h2>第一章</h2> <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p> <section> <h2>1.1 标题</h2> <p>一段话111</p> </section> <section> <h2>1.2 标题</h2> <p>一段话222</p> </section> </section> </main> <aside> 参考文献:1, 2,3 </aside> </div> <footer>©bens版权所有</footer> </body> </html>
- hidden
可以通过display:block
来显示出来 - id
不到万不得已, 千万不要用id
,无论是CSS
还是JS
。
在html
中,因为id
不报错
id
名与windos.
下的关键字同名时。
用这种形式来写JSxxx.style.border = "5px solid green";
是不报错的。
如果真的想用同名用下面这种方式:
document.getElementById('parent').style.border = "10px solid yellow";
- style
这是HTML
的属性,不是CSS
的样式 - tabindex
设置该属性后,按tab
键可以进行下一个带有该属性的地方 - title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章标题</title>
</head>
<style contenteditable>
/* 这样写样式不方便,修改的话需要新加一个样式*/
/* [class="middle bordered"]{
background:black;
color:white;
border:5px solid red
} */
.middle{
background:black;
color:white;
}
.bordered{
border:5px solid red
}
header{
display:block;
}
#xxx{
border:5px solid orange;
/* 不换行 */
white-space:nowrap;
/* 多余一样的省略 */
overflow: hidden;
/* 省略部分的处理方式 */
text-overflow:ellipsis;
}
</style>
<body>
<header hidden>导航栏</header>
<div class="middle bordered" contenteditable>
<main>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
<section>
<h2>1.1 标题</h2>
<p>一段话111</p>
</section>
<section>
<h2>1.2 标题</h2>
<p>一段话222</p>
</section>
</section>
</main>
<aside>
参考文献:1, 2,3
</aside>
</div>
<footer id="xxx" title="©bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有">©bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有</footer>
</body>
</html>
10.5 视频:5
- 默认样式
- 为什么有默认样式?
因为HTML
被发明的时候,CSS
还没有出生。 - 怎么看默认的样式?
Chrome
开发工具
Elements->Styles-> user agent stylesheet
- CSS reset
默认样式已经不符合我们的要求
* { margin: 0; padding: 0; box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } a { color: inherit; text-decoration: none; } input, button { font-family: inherit; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; }
- 为什么有默认样式?
10.6 视频:6
- 内容标签
ol + li
(ordered list + list item)ul + li
(unordered list + list item)dl + dt +dd
(description list + term +data)pre
(preview的缩写)
保留空格、回车和tab
hr
br
(break的缩写)a
(anchar的缩写)em
(emphasis的缩写)
语气上的强调strong
内容本身的重要性code
q
(quote缩写)blockquote
11.【HTML全解】HTML重点标签
11.1 视频:1
打开网页的两个软件:
http-server
#哪一种写法都可以(c表示缓存cache,-1表示否定) http-server . -c-1 http-server -c-1 hs -c-1
parcel
# 直接输入文件名 parcel xxx.html
a标签:
属性
-
href(hyper reference)
网站- https://baidu
- http://baidu
- //baidu
路径
-
/a/b/c
以及a/b/c
/a/b/c
的第一个/
表示的是浏览器打开文件的跟目录,这里不同于文件的/
跟目录。 -
index.html 以及./index.html
伪协议
javascript:代码;
点击后不做任何反应用<a href="javascript:;">javascript</a>
不能用<a href="#">javascript</a>
页面会定向到顶部
不能用<a href="">javascript</a>
页面会刷新
<!DOCTYPE html> <html lang="zh-CN"> <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>Document</title> </head> <body> <!-- p{$}*30 --> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> <p>23</p> <p>24</p> <p>25</p> <p>26</p> <p>27</p> <p>28</p> <p>29</p> <p>30</p> <input type="text"> <a href="javascript:;">查看1</a> <a href="">查看2</a> <a href="#">查看3</a> </body> </html>
mailto:邮箱地址
tel: 手机号
<a href="//baidu">百度</a> <a href="javascript:alert(1);">javascript</a> <a href="tel:13974452659">打电话</a> <a href="mailto:yu1piao09@163">发送邮箱</a>
id
href=#xxx
-
target
内置名字_blank
_top
在含有iframe的最外层打开_parent
在含有iframe中的上一个窗口打开_self
默认xxx
如果target的值都为xxx则打开的网页会覆盖之前打开的页面,也就是说打开一个名为xxx的新开的页面。
程序员的命名
- window的name
- iframe的name
-
download -
rel=noopener
后面将到JS部分了讲到。
作用
- 跳转外部页面
- 跳转内部页面
- 跳转到邮箱或电话等
11.2 视频:2
table表格标签:
相关标签
- table
- thead
- tbody
- tfoot
- tr
- td
- th
相关样式
- table-layout
- border-collapse
- border-spacing
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
<style>
table {
width: 600px;
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<thead>
<th></th>
<th>小张</th>
<th>小明</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td>130</td>
<td>144</td>
</tr>
<tr>
<td>英语</td>
<td>149</td>
<td>133</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>279</td>
<td>277</td>
</tr>
</tfoot>
</table>
</body>
</html>
11.3 视频:3
img标签:
作用
- 发出get请求,展示一张图片
属性
- alt
- height
仅设置高度,宽度会自适应
宽高不要同时设置,会是的图像变形 - width
仅设置宽度,高度会自适应
宽高不要同时设置,会是的图像变形 - src(source)
事件
- onload
- onerror
<!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>Document</title>
</head>
<body>
<img id=xxx width="100" src="img2.jpg" alt="图片加载失败11">
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
}
</script>
</body>
</html>
响应式
- max-width:100%
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 让盒子的包含border和padding的距离 */
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<img id=xxx src="img.jpg" alt="图片加载失败11">
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
}
</script>
</body>
</html>
可替换元素
- 考试可能会问,被问概率30%
11.4 视频:4
form表单标签:
作用
- 发get或post请求,然后刷新页面
属性
- action
- autocomplete
<!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>Document</title> </head> <body> <form action="aaa" autocomplete="on"> <input type="text" name="name" id=""> </form> </body> </html>
- method
- target
事件
- onsubmit
form表单中必须有一个button或者是type="submit"
button与type="submit"
区别:
button里面可以放任意的东西,例如图片等
type="submit"
只能修改文字<form action="aaa" autocomplete="on"> <input type="text" name="name" id=""> <!-- button默认的type就是submit --> <button type="submit"><img width="100" src="img.jpg" alt=""></button> <!-- <input type="submit">默认的value就是提交 --> <input type="submit"> </form>
input标签:
作用
- 让用户输入内容
属性
-color
- file
- textarea
- number
<input type="color">
<br />
<input type="file" multiple>
<br />
<textarea style="resize: none; width: 50%; height: 200px;"></textarea>
<br />
<input type="number">
事件
- onchange
- onfocus
- onblur
验证器
- HTML5 新功能
<form action="">
<input type="color">
<br />
<input type="file" multiple>
<br />
<textarea style="resize: none; width: 50%; height: 200px;"></textarea>
<br />
<input type="number" required>
<button>提交</button>
</form>
注意事项
- 一般不监听input的click事件
- form里面的input要有name
- form里要放一个
type="submit"
或button才能出发submit 时间
其他标签
- video
- audio
- canvas
- svg
注意事项
- 这些标签的兼容性一定要看文档
- 后续会在JS课程住啊们讲解这些标签
12.【HTML全解】HTML 实践 & 手机调试
12.1 视频:HTML实践
12.2 视频:手机调试
响应式必加的两条代码
meta:vp需要自己补充完整
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
img {
max-width: 100%;
}
</style>
12.3 视频:部署到GitHub Pages
godv介绍
13. 【CSS全解】CSS基础
13.1 视频:CSS历史
- CSS是李爵士挪威的同事赖先生(Hakon Wium Lie)首次提出的.
- CSS的牛X之处:层叠样式表
- 样式层叠
可以多次对同一选择器进行样式声明 - 选择器层叠
可以用不同选择器对同一个元素进行样式声明 - 文件层叠
可以用多个文件进行层叠 - 这些特性使得CSS极度灵活
这也为CSS后来被吐槽留下隐患
- 样式层叠
- CSS的版本
- 使用最广泛的版本: CSS2.1
- 现代版本, 分模块: CSS3
- 查看浏览器支持的特性
使用caniuse - CSS是艺术, 不要太理性了(不要问「为什么」, 而是说「原来这样子」).
所见即所得
13.2 视频:体系化学习
学一门语言必须学会什么
- 语法(怎么写代码)
- 如何调试(怎么知道自己代码写错了)
- 在哪查资料(其实就是为了抄代码)
- 标准制定者是谁
如何学
- Copy: 抄文档, 抄老师
- Run: 放在自己的机器上运行
- Modify: 加入自己一点想法,然后重新运行
如何调试代码
- 使用W3C验证器在线 基本不用
- 使用CSCode看颜色
- 使用WebStorm看颜色
- 使用开发者工具看警告
Border调试大法
在哪查资料
- Google搜索+MDN
- Google搜索+CSS tricks
- 张鑫旭的博客
练习素材
- PSD
- Freepik搜索PSD web
- 365PSD
- 效果图
- 顶级设计社区dribbble
- 常用的网站
不要沉迷临摹
- PC网站, 手机网站, UI套件每个类型临摹2个即可.
标准制定者
- 搜索CSS spec找到CSS最新标准
- CSS2.1 标准中文版
13.3 视频:文档流(Normal Flow)
文档流
- 流动方向
- inline元素从左到右,到达最右边才会换行.
inline中的span换行处会将放不下的span的部分内容, 放到下一行
- block元素从上到下,每个都另起一行.
- inline-block 也是从左到右.
元素部分内联元素和块级元素(HTML5后).
**不要在display为inline元素中加入display为block的元素
- inline元素从左到右,到达最右边才会换行.
- 宽度
- inline宽度为内部inline元素的和, 不能用width指定.
- block默认自动计算宽度, 可用width指定.
block块级元素的默认宽度是auto, 不是100%
永远不要写宽度100%(容易出bug),除了特殊情况后面课会说
- inline-block结合前两者特点, 可用width.
- 高度
- inline高度由line-height间接确定, 跟height无关
padding可以撑高span但是,红色部分只是span的可视范围, 绿色部分才是span的实际高度
间接的意思就是可能不是line-height设置的高度100px
修改字体后发现变为101px
深入理解line-height可看方方老师知乎:深入理解 CSS:字体度量、line-height 和 vertical-align - block高度由内部文档流元素决定, 可以设height
蓝圈圈起来的脱离了文档流. - inline-block跟block基本一致, 可以设置height
- inline高度由line-height间接确定, 跟height无关
overflow溢出
等内容的宽度或高度大于容器的,会溢出,可用overflow来设置是否显示滚动条
常用的是hidden和auto.
脱离文档流
float
position:absolute/fixed
13.4 视频:盒模型
content-box width = 内容宽度
border-box width = 内容宽度 + padding + border(好用)
@@@margin合并@@@
- 哪些情况会合并
只会上下合并- 父子margin合并
- 兄弟margin合并
- 如何阻止合并
- 父子合并用padding/border挡住
- 父子合并用overflow:hidden挡住
- 父子合并用display: flex挡住
- 兄弟合并用display:inline-block
基本长度
- px像素(pixel)
- em 相对于自身font-size的倍数
<!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>rainbow</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.rainbow {
/* border: 1px solid #000; */
height: 200px;
overflow: hidden;
}
/* @@@防止margin合并@@@ */
.rainbow div {
overflow: hidden;
}
.rainbow>div {
background: hsl(0, 80%, 50%);
width: 400px;
height: 400px;
border-radius: 50%;
}
.rainbow>div>div {
background: hsl(60, 80%, 50%);
height: 380px;
margin: 10px;
border-radius: 50%;
}
.rainbow>div>div>div {
background: hsl(120, 80%, 50%);
height: 360px;
margin: 10px;
border-radius: 50%;
}
.rainbow>div>div>div>div {
background: hsl(180, 80%, 50%);
height: 340px;
margin: 10px;
border-radius: 50%;
}
.rainbow>div>div>div>div>div {
border: 1px solid hsl(240, 80%, 50%);
background: hsl(240, 80%, 50%);
height: 320px;
margin: 10px;
border-radius: 50%;
}
.rainbow>div>div>div>div>div>div {
background: hsl(300, 80%, 50%);
height: 300px;
margin: 10px;
border-radius: 50%;
}
.rainbow>div>div>div>div>div>div>div {
background: hsl(330, 80%, 50%);
height: 280px;
margin: 10px;
border-radius: 50%;
}
.rainbow>div>div>div>div>div>div>div>div {
background: hsl(300, 80%, 100%);
height: 260px;
margin: 10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="rainbow">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
14. 【CSS全解】CSS布局上
14.1 视频:布局是什么
布局分类:
- 固定宽度布局, 一般宽度为960/1000/1024px
- 不固定宽度布局, 主要靠文档流的原理布局(文档流本来就是响应式的)
- 响应式布局:PC上固定宽度, 手机上不固定宽度.
布局的思路:
- 从大到小: 先定大局, 然后完善每个部分的小布局,然后晚上每个部分的小布局
- 从小到大: 先完成小布局, 然后组合成大布局
14.2 视频:float布局
步骤:
- 子元素上加float: left 和 width
- 在父元素上加 .clearfix
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.logo {
border: 1px solid red;
width: 100px;
height: 40px;
float: left;
}
nav {
border: 1px solid green;
width: 200px;
height: 50px;
float: left;
}
header {
border: 1px solid blue;
}
</style>
</head>
<body>
<header class="clearfix">
<div class="logo">Bens</div>
<nav>导航</nav>
</header>
</body>
</html>
经验1:
- 有经验的会留一些空间或者最好一个不设width
- 不需要做响应式, 手机上没有IE,这个布局是专门为IE准备的
- IE6/7存在双倍margin bug,
- 将错就错, 针对IE6/7把margin减半
_margin:5px(原来10px) - 神来之笔, 再加一个display:inline-block
- 将错就错, 针对IE6/7把margin减半
不同布局:
- 用float做两栏布局(如顶部条)
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.logo {
border: 1px solid red;
width: 100px;
height: 40px;
float: left;
}
nav {
border: 1px solid green;
width: 200px;
height: 50px;
float: left;
}
header {
border: 1px solid blue;
}
/* 最后一个不用写宽度 */
.user {
border: 1px solid orange;
height: 50px;
max-width: 100px;
float: left;
}
</style>
</head>
<body>
<header class="clearfix">
<div class="logo">Bens</div>
<nav>导航</nav>
<div class="user">我的信息</div>
</header>
</body>
</html>
- 用float做三栏布局(如内容区)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>three</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { max-width: 100%; } .clearfix::after { content: ''; display: block; clear: both; } .logo { /* display: inline-block; */ float: left; margin-top: 8px; } .logo>img { height: 26px; /* 图片有 border 的话图片会超出一点,通过下面方法解决*/ /* 快捷方式: va:t tab */ vertical-align: middle; } .nav { float: left; margin-left: 20px; } ul>li { float: left; padding: 4px 0.5em; line-height: 32px; } ul { margin-left: 20px; display: inline-block; } header { background: grey; /* border: 1px solid blue; */ color: white; } .content { /* 因为用的border-box, 要想aside main ad 一行则要用outline 因为用border的话占px. */ outline: 1px solid red; width: 800px; /* 当时block元素, 然后是固定宽度则可用以下两种方式居中 */ /* 法1: 可用这种但是可能会重叠之前写的margin-top和margin-bottom */ /* margin: 0 auto */ /* 法2: 直接自动居中左右, 对上下没有影响, 选第二种较好 */ margin-left: auto; margin-right: auto; } .content>aside { border: 1px solid green; width: 200px; height: 300px; float: left; background: #999; } .content>main { border: 1px solid blue; width: 500px; height: 300px; float: left; background: #ccc; } .content>.ad { border: 1px solid orange; width: 100px; height: 300px; float: left; background: #000; } </style> </head> <body> <header class="clearfix"> <div class="logo"> <img src="https://static.xiedaimala/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png" alt=""> </div> <ul class="clearfix nav"> <li>首页</li> <li>课程</li> <li>优惠</li> <li>关于</li> </ul> </header> <div class="clearfix content"> <aside></aside> <main></main> <div class="ad"></div> </div> </body> </html>
- 用float做四栏布局(如导航)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>four</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { max-width: 100%; } .clearfix::after { content: ''; display: block; clear: both; } .logo { /* display: inline-block; */ float: left; margin-top: 8px; } .logo>img { height: 26px; /* 图片有 border 的话图片会超出一点,通过下面方法解决*/ /* 快捷方式: va:t tab */ vertical-align: middle; } .nav { float: left; margin-left: 20px; } ul>li { float: left; padding: 4px 0.5em; line-height: 32px; } ul { margin-left: 20px; display: inline-block; } header { background: grey; /* border: 1px solid blue; */ color: white; } </style> </head> <body> <header class="clearfix"> <div class="logo"> <img src="https://static.xiedaimala/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png" alt=""> </div> <ul class="clearfix nav"> <li>首页</li> <li>课程</li> <li>优惠</li> <li>关于</li> </ul> </header> </body> </html>
- 用float做平均布局(如产品展示区)
平局布局宽度和间隙需要自己手动算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.logo {
/* display: inline-block; */
float: left;
margin-top: 8px;
}
.logo>img {
height: 26px;
/* 图片有 border 的话图片会超出一点,通过下面方法解决*/
/* 快捷方式: va:t tab */
vertical-align: middle;
}
.nav {
float: left;
margin-left: 20px;
}
ul>li {
float: left;
padding: 4px 0.5em;
line-height: 32px;
}
ul {
margin-left: 20px;
display: inline-block;
}
header {
background: grey;
/* border: 1px solid blue; */
color: white;
}
.content {
/* 因为用的border-box, 要想aside main ad 一行则要用outline 因为用border的话占px. */
outline: 1px solid red;
width: 800px;
/* 当时block元素, 然后是固定宽度则可用以下两种方式居中 */
/* 法1: 可用这种但是可能会重叠之前写的margin-top和margin-bottom */
/* margin: 0 auto */
/* 法2: 直接自动居中左右, 对上下没有影响, 选第二种较好 */
margin-left: auto;
margin-right: auto;
}
.content>aside {
border: 1px solid green;
width: 200px;
height: 300px;
float: left;
background: #999;
}
.content>main {
border: 1px solid blue;
width: 500px;
height: 300px;
float: left;
background: #ccc;
}
.content>.ad {
border: 1px solid orange;
width: 100px;
height: 300px;
float: left;
background: #000;
}
.image-list {
outline: 1px solid red;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.image-list>.x {
/* 平均布局关键一步: 因为最后.image多了一个12px, 则这里就需要套一个div来margin-right:-12px */
margin-right: -12px;
}
.image-list>.x>.image {
border: 1px solid green;
width: 191px;
height: 191px;
background: #000;
float: left;
margin-bottom: 12px;
margin-right: 12px;
}
</style>
</head>
<body>
<header class="clearfix">
<div class="logo">
<img src="https://static.xiedaimala/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png"
alt="">
</div>
<ul class="clearfix nav">
<li>首页</li>
<li>课程</li>
<li>优惠</li>
<li>关于</li>
</ul>
</header>
<div class="clearfix content">
<aside></aside>
<main></main>
<div class="ad"></div>
</div>
<div class="image-list">
<div class="clearfix x">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</body>
</html>
经验2:
- 加上头尾, 即可满足所有PC页面需求
- floa要程序员自己计算宽度, 不灵活.
14.3 视频:flex布局上
flex container样式:
- 让一个元素变成flex容器
.container{
/* 这两种写法都可以,类似于blok和inline-block.常用第一种 */
display: flex;
display: inline-flex;
}
- 改变item流动方向(主轴, 默认为raw)
.container{
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
- 改变折行(默认nowarp)
.container {
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
- 主轴对齐方式(默认flex-start)
.container {
justify-content: flex-start;
·
·
·
}
- 次轴对齐(默认stretch)
.container {
align-items: stretch;
·
·
·
}
- 多行内容(默认flex-start)
.container {
align-content: flex-start;
·
·
·
}
flex item属性:
- order
.itme {
/* 数值越小排在前面 */
order: 数值;
}
14.4 视频:Flex布局下
- flex-grow
控制自己如何长胖
- flex-shrink
控制如何变瘦
flex-shrink:0防止变瘦, 默认为1 - align-self定制align-times(container中)
container中只能整体控制item, 这个item属性就可以单独控制item了.
重点:
- display: flex
- flex-direction: row/column
- flex-wrap: warp
- justify-content:center/space-between
- align-items:center
14.5 视频:Flex小游戏
Flex青蛙游戏
14.6 视频:前端底线
flex实现局部:
<!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>Flex</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px;
background: grey;
border: 1px solid #000;
}
.logo {
display: flex;
align-items: center;
}
.logo>img {
border: 1px solid red;
height: 26px;
/* 图片有 border 的话图片会超出一点,通过下面方法解决*/
/* 快捷方式: va:t tab */
vertical-align: middle;
}
ul {
/* 效果和justify-content: space-between;使菜单靠右 */
/* margin-left: auto; */
display: flex;
border: 1px solid green;
}
ul>li {
padding: 4px;
/* border: 1px solid #000; */
}
.content {
/* 因为用的border-box, 要想aside main ad 一行则要用outline 因为用border的话占px. */
outline: 1px solid red;
width: 800px;
display: flex;
/* 当时block元素, 然后是固定宽度则可用以下两种方式居中 */
/* 法1: 可用这种但是可能会重叠之前写的margin-top和margin-bottom */
/* margin: 0 auto */
/* 法2: 直接自动居中左右, 对上下没有影响, 选第二种较好 */
margin-left: auto;
margin-right: auto;
}
.content>aside {
border: 1px solid green;
max-width: 200px;
height: 300px;
display: flex;
background: #999;
}
.content>main {
border: 1px solid blue;
flex-grow: 1;
height: 300px;
display: flex;
background: #ccc;
}
.content>.ad {
border: 1px solid orange;
max-width: 100px;
height: 300px;
display: flex;
background: #000;
}
.image-list {
outline: 1px solid red;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.image-list>.x {
/* 平均布局关键一步: 因为最后.image多了一个12px, 则这里就需要套一个div来margin-right:-12px */
display: flex;
flex-wrap: wrap;
margin-right: -12px;
}
.image-list>.x>.image {
border: 1px solid green;
width: 191px;
height: 191px;
background: #000;
display: flex;
margin-bottom: 12px;
margin-right: 12px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="https://static.xiedaimala/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png"
alt="">
</div>
<ul>
<li>首页</li>
<li>课程</li>
<li>优惠</li>
<li>关于</li>
</ul>
</header>
<div class="content">
<aside></aside>
<main></main>
<div class="ad"></div>
</div>
<div class="image-list">
<div class="clearfix x">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</body>
</html>
前端戒律:必须先给设计稿
- 没有设计稿, 自己画, 老板同意后写代码
- 设计师只给一稿, 让你做两套
- 直接拒绝, 坚守底线
- 转移责任, 可以开始干.
没有设计师, 则自己画, 常用草图软件(跨平台):
- Balasamiq(软件)
- Figma(在线)
- 墨刀(在线)
- Adobe XD(软件)
如何在两套布局中切换: 媒体查询@media
15.【CSS全解】 CSS布局下
15.1 视频:Grid 简单语法
二维布局用grid, 一维布局用flex
<!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>grid</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 100px 300px 100px;
border: 1px solid red;
}
.a,
.b,
.c {
border: 1px solid red;
}
.a {
grid-column-start: 1;
grid-column-end: 6;
}
.b {
grid-column-start: 1;
grid-column-end: 3;
}
.c {
grid-column-start: 3;
grid-column-end: 5;
}
</style>
</head>
<body>
<!-- 快捷键:.a+.b+.c+.d+.e tab -->
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
</body>
</html>
平均布局用free space
<!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>freeSpace</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
width: 800px;
grid-gap: 12px;
}
.image {
border: 1px solid red;
width: 191px;
height: 191px;
background: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
</html>
grid简单布局
<!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>layoutGrid</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
display: grid;
grid-template-rows: 60px auto 60px;
grid-template-columns: 100px auto 100px;
grid-column-gap: 5px;
grid-row-gap: 5px;
grid-template-areas:
"header header header"
"aside main ad"
"footer footer footer";
}
.container>* {
border: 1px solid red;
}
.container>header {
grid-area: header;
}
.container>aside {
grid-area: aside;
}
.container>main {
grid-area: main;
}
.container>.ad {
grid-area: ad;
}
.container>footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<aside>aside</aside>
<main>main</main>
<div class="ad">ad</div>
<footer>footer</footer>
</div>
</body>
</html>
15.2 视频:Grid 例子和游戏
<!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>grid-demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.demo {
display: inline-grid;
border: 1px solid red;
grid-template-rows: 240px repeat(4, 120px);
grid-template-columns: 200px 200px;
grid-template-areas:
"big mid1"
"big mid2"
"sm1 mid2"
"sm2 mid3"
"sm3 mid3"
;
}
.demo>.image {
border: 1px solid red;
}
.demo>.image:first-child {
grid-area: big;
}
.demo>.image:nth-child(2) {
grid-area: sm1;
}
.demo>.image:nth-child(3) {
grid-area: sm2;
}
.demo>.image:nth-child(4) {
grid-area: sm3;
}
.demo>.image:nth-child(5) {
grid-area: mid1;
}
.demo>.image:nth-child(6) {
grid-area: mid2;
}
.demo>.image:nth-child(7) {
grid-area: mid3;
}
</style>
</head>
<body>
<div class="demo">
<div class="image bigImage"></div>
<div class="image smallImage"></div>
<div class="image smallImage"></div>
<div class="image smallImage"></div>
<div class="image middleImage"></div>
<div class="image middleImage"></div>
<div class="image middleImage"></div>
</div>
</body>
</html>
grid小游戏
grid garden
26
16. 【CSS全解】CSS定位
16.1 视频:一个DIV的分层
16.2 视频:position的5个取值
opsition:
- static默认值, 待在文档流里
- relative 相对定位, 升起来, 但不脱离文档流
- 使用场景:
用于给absolute元素爸爸 - 配合z-index:
z-index:auto默认值, 不创建新层叠上下文
z-index:0/1/2
z-index:-1/-2 - 经验:
不要写z-index:9999
学会管理z-index
- 使用场景:
- absolute 绝对定位, 定位基准是祖先里的非static
- 使用场景:
脱离原来的位置,另起一层, 比如对话框的关闭按钮
鼠标提示 - 配合z-index:
- 经验:
需要写top和left, 否则会出bug
善用left:100%
善用left:50%; 加负margin
- 使用场景:
- fiexed固定定位, 定位基准是viewport(有诈)
- 使用场景:
烦人的广告
回到顶部按钮 - 配合z-index:
- 经验:
手机上不要用这个属性,bug很多,可以搜搜「移动端fixed」
有transform: scale(0.9);
则会使得fixed失效
- 使用场景:
- sticky粘滞定位, 不好描述直接举例
经验:
- 如果你写了absolute, 一般都得补一个relative
- 如果你写了absolute或fixed,一定要补top和left
- sticky兼容性很差, 主要用于面试装逼
16.3 视频:层叠上下文
比喻:
- 每一层上下文就是一个新的小世界(作用域)
- 这个小世界里面的z-index跟外界无关
- 处在同一个小世界的z-index才可以比较
不正交属性可以创建它: - 记忆z-index/ flex/ opacity/ transform
负z-index只能逃出有层叠上下文的世界.
html也是层叠上下文.
17. 【CSS全解】CSS动画
17.1 视频:动画的原理
定义:
- 由许多静止的画面(帧)
- 以一定的速度(如每秒30张)连续播放时
- 肉眼因视觉残象产生错觉
- 而误以为是活动的画面
概念:
- 帧: 每个静止的画面都叫做帧
- 播放速度:每秒24帧(影视)或者每秒30帧以上(游戏)
横移div(一般不会用left做动画)
<!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>define</title>
<script>
var n = 1
var id = setInterval(() => {
if (n <= 200) {
demo.style.left = n + 'px'
n = n + 1
} else {
clearInterval(id)
}
}, 1000 / 60)
</script>
<style>
#demo {
border: 1px solid red;
width: 100px;
height: 100px;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
横移div2
<!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>define2</title>
<style>
#demo {
border: 1px solid red;
width: 100px;
height: 100px;
transition: all 1s linear;
}
#demo.end {
transform: translateX(200px);
}
</style>
<script>
setTimeout(() => {
demo.classList.add('end')
}, 3000)
</script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
paint flashing:
- 打开开发者工具
- 任意界面按esc
- 选择rendering
- 最后选择rendering
- 勾选paint flashing
- 刷新页面(绿色的为重新渲染)
17.2 视频:浏览器渲染原理
参考文章(Google团队写的文章):
- 渲染树构建, 布局及绘制
- 渲染性能
- 使用transform来实现动画
浏览器渲染过程:
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一颗渲染书(render tree)
- Layout布局(文档流, 盒模型, 计算大小和位置)
- Paint绘制(把边框颜色, 文字颜色, 阴影等画出来)
- Composite合成(根据层叠关系展示画面)
如何更新样式(一般我们用JS来更新样式):
- 比如div.style.background = ‘red’
- 比如div.style.display = ‘none’
- 比如div.classList.add(‘red’)
- 比如div.remove()直接删掉节点
三种更新方式:
- 全走
div.remove()会出发当前小时,其他元素relayout - 跳过layout
改变背景颜色, 直接repaint + composite - 跳过layout和paint
改变transform, 只需要composite
所有属性触发流程:
css triggers
CSS动画优化:
- 没什么技术含量
Google写的文章 - JS优化
使用requestAnimationFrame替代setTimeout或setINterval - CSS优化
使用will-change或translate
17.3 视频:transform全解
四个常用的功能:
- 位移translate
- 常用写法:
translateX(<length-percentage>)
translateY(<length-percentage>)
translate(<length-percentage>, <length-percentage>?)
translateZ(<length>)
且父容器perspective
translate3d(x, y, z)
- 经验:
要学会看懂MDN的语法实例
translate(-50%, -50%)可以做绝对定位元素的居中
<!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>translate</title> <style> .wrapper { border: 1px solid #000; height: 500px; position: relative; } #demo { border: 1px solid red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="wrapper"> <div id="demo"> </div> </div> </body> </html>
- 常用写法:
- 缩放scale
- 常用写法:
scaleX(<number>)
scaleY(<number>)
scaleX(<number>, <number>?)
- 经验:
用的比较少,因为容易出现模糊
- 常用写法:
- 旋转rotate
- 常用写法:
rotate([ | ])
rotateZ([ | ])
rotateX([ | ])
rotateY([ | ]) - 经验:
一般用于360度旋转制作loading
- 常用写法:
- 倾斜skew
- 常用写法:
skewX([<angle>]|[<zero>])
skewY([<angle>]|[<zero>])
skew([<angle>]|[<zero>], [<angle>]|[<zero>]?)
- 经验:
用的较少
- 常用写法:
经验:
- 一般都需要配合transition过渡
- inline元素不支持transform, 需要选先变成block
transform多重效果
以上的4个功能可以组合使用.
17.4 视频:跳动的心
<!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>heart</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#heart {
position: relative;
margin: 100px;
display: inline-block;
transition: all 1s;
}
#heart:hover {
transform: scale(1.5);
}
#heart>.round-left {
background: red;
border-radius: 50% 0 0 50%;
position: absolute;
width: 50px;
height: 50px;
right: 100%;
bottom: 100%;
transform: rotate(45deg) translateX(31px);
}
#heart>.round-right {
background: red;
border-radius: 50% 50% 0 0;
position: absolute;
width: 50px;
height: 50px;
left: 100%;
bottom: 100%;
transform: rotate(45deg) translateY(31px);
}
#heart>.square {
background: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="heart">
<div class="round-left"></div>
<div class="round-right"></div>
<div class="square"></div>
</div>
</body>
</html>
17.5 视频:transition过渡
作用:
- 补充中间帧
语法:
- transition: 属性名 时长 过度方式 延迟
- 可以用逗号分隔两个不同属性 transition:left 200ms, top 400ms
- 可以用all代表所有属性 transition:all 200ms
- 过渡方式: liner …
注意:
- display:none=>block没法过渡, 一般改为visibility:hidden=>visible
- backgrou可以过渡
- opacity也可以过渡
如果还有中间点:
- 法一:使用两次transform
.a === transform ===? .b
.b === transform ===? .c
用setTimeout或者监听transitionend事件<!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>transition2</title> <style> #demo { border: 1px solid red; width: 100px; height: 100px; margin: 50px; transition: transform 1s linear; } #demo.b { transform: translateX(200px); } #demo.c { transform: translateX(200px) translateY(100px); } </style> </head> <body> <div id="demo"></div> <button id="x">start</button> </body> <script> x.onclick = () => { demo.classList.add('b') setTimeout(() => { demo.classList.add('c') }, 1000) } </script> </html>
- 法二:使用animation
声明关键帧
添加动画
17.6 视频:animation和红心
@keyframes完整语法(标准写法):
- 一种是from to
@keyframes slidein {
from {
transform: none;
}
to {
transform: translateX(200px);
}
}
- 一种是百分数
@keyframes move {
0% {
transform: none;
}
66.6% {
transform: translateX(200px);
}
100% {
transform: translateX(200px) translateY(100px);
}
}
animation缩写语法:
animation: 动画名| 时长| 过渡方式| 延迟| 次数| 方向| 填充模式| 是否暂停
- 时长: 1s或者1000ms
- 过渡方式:跟transition取值一样, 如liner
- 次数: 3或者2.4或者infinite
- 方向:reverse|alternate
- 填充模式:forwards
- 是否暂停: paused| running
以上所有属性都有对应的单独属性
通过@keyframes做红心
<!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>heart</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#heart {
position: relative;
margin: 100px;
display: inline-block;
animation: change 1s ease infinite alternate;
}
@keyframes change {
0% {
transform: scale(1.0);
}
0% {
transform: scale(1.3);
}
}
#heart>.round-left {
background: red;
border-radius: 50% 0 0 50%;
position: absolute;
width: 50px;
height: 50px;
right: 100%;
bottom: 100%;
transform: rotate(45deg) translateX(31px);
}
#heart>.round-right {
background: red;
border-radius: 50% 50% 0 0;
position: absolute;
width: 50px;
height: 50px;
left: 100%;
bottom: 100%;
transform: rotate(45deg) translateY(31px);
}
#heart>.square {
background: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="heart">
<div class="round-left"></div>
<div class="round-right"></div>
<div class="square"></div>
</div>
</body>
</html>
18. 【HTTP全解】URL 是什么
18.1 视频:网络和IP
李爵士发明了:WWW = URL + HTTP + HTML
IP(Internet Protocol)
- 如何定位一台设备
- 如何封装数据报文, 以跟其他设备交流
外网IP:
重启路由可能会使得IP地址改变
内网IP:
IP格式为192.168.xxx.xxx
路由器的功能:
- 路由器有2种IP, 内网IP和外网IP
- 内网中的设备可以相互访问, 但是不能直接访问外网, 需要路由器中转
- 外网中的设备可以互相访问, 但是无法访问你的内网, 需要路由器中转
18.2 视频:端口
一台机器可以提供不同服务:
- 要提供HTTP服务最好使用80端口
- 要提供HTTPS服务最好使用443端口
- 要提供FTP服务最好使用21端口
- 一共有65535个端口
端口使用规则:
- 0-1023号端口是留给系统使用的
- 其他端口可以给普通用户使用
- 比如http-server默认使用8080端口
- 一个端口被占用,只能换一个端口
IP和端口缺一不可
18.3 视频:域名, 路径, 查询参数, 锚点
域名对应的IP:
ping baidu
知识点:
- 一个域名可以对应不同IP, 这种叫做负载均衡, 防止一台机器扛不住.
- 一个IP可以对应不同域名, 这叫做共享主机
域名和IP通过DNS(Domain Name System)连接起来
当访问一个域名:
- 你的浏览器回想电信/联通等运营商提供的DNS服务器, 询问xxx对应的IP
- 电信/联通等运营商会返回给你一个IP
- 然后浏览器会对应IP的80/443端口发送请求
服务器默认用80提供http服务
服务器默认用443提供https服务
域名:
- com是顶级域名
- xxx是二级域名(俗称一级域名)
- www.xxx是三级域名(俗称二级域名)
- github.io吧子域名xxx.github.io免费给你使用
- 所以www.xxx和xxx可以不是同一家公司
- www是多余的
锚点:
- 看起来有中文, 实际不支持中文
- 锚点不会再network面板看到, 因为锚点不会传给服务器.
18.4 视频:curl命令
curl命令:
curl -v http://baidu
curl -s -v -- https//www.baidu
理解一下概念:
- url会被curl工具重写, 先请求DNS获得IP
- 先进行TCP连接, TCP连接成功后, 开始发送HTTP请求
- 请求内容看一眼
- 响应内容看一眼
- 响应结束后, 关闭TCP连接
- 真正结束
19. 【HTTP全解】请求和响应 & Node.js Server
19.1 视频:演示Node.js Server
请求与响应模型:
如何发请求:
- 用Chrome地址栏
- 用curl命令
帮你发请求的工具交「用户代理」(User Agent)
代码逻辑:
- `这种字符串`里面是可以回车的
- '这种字符串’里面要回车只能用\n表示
19.2 视频:后缀是垃圾
注意事项:
- URL里面的后缀没有用, /y.css不一定是CSS内容, Content-Type才是决定文件类型的关键.
19.3 视频:请求和响应的规范写法
HTTP基础概念:
-
请求:
- 请求动词 路径加查询参数 协议名/版本
- Host: 域名或IP
- Accept: text/html
- Content-Type: 请求体的格式
- 回车
- 请求体(也就是上传内容)
-
细节:
- 三部分: 请求行, 请求头, 请求体
- 请求动词有GET, POST, PUT, PATCH, DELETE
- GET请求中请求体一般为空
- 文档位于RFC2612第五章
-
响应:
- 协议名/版本 状态码 状态字符串
- Content-Type: 响应体的格式
- 回车
- 响应体(也就是下载内容)
-
细节:
- 三部分: 状态行, 响应投, 响应体
- 文档位于RFC2612第六章
19.4 视频:用curl构造请求
用curl构造请求:
curl -v http://localhost:8888
- 设置请求动词:-X POST(注意大小写)
- 设置路径和查询参数:直接在url后面加
- 设置请求头:
-H 'Name:Value'
或--hearder 'Name:Value'
- 设置请求体:
-d '内容'
或--data '内容'
用Node.js读取请求:
- 读取请求动词: request.method
- 读取路径:
- request.url路径, 带查询参数
- path纯路径, 不带查询参数
- query只有查询参数
- 读取请求头:
request.headers['Accept']
用Node.js设置响应
- 设置响应状态码:response.statusCode = 200
- 设置响应头:response.setHeader(‘Content-Type’, ‘text/html’)
- 设置响应体: response.write(‘内容’) 可追加内容
19.5 视频:404页面是什么
访问不到该页面, 同时也没有任何响应, Chrome会默认给你一个404页面.
19.6 视频:第一次讲console.log调试大法
<link rel="stylesheet" href="./style.css">
这里的.
读取的时候会被忽略点.
会导致} else if (path === './style.css') {
判断出错.
if (path === '/') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(`
<link rel="stylesheet" href="./style.css">
<h1>你好</h1>
`)
response.end()
} else if (path === './style.css') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/css;charset=utf-8')
response.write(`h1{color: red;}`)
response.end()
} else {
response.statusCode = 404
response.end()
}
19.7 视频:100元购买阿里云服务器
因为目前在校读研, 所以买的是学术服务器, 没有买方方老师推荐的按流量计费的.
- 允许8888端口
- 按下图点击加入安全组
- 然后点击配置规则
- 端口填写8888/8888(也可以填写一个区间:8880/8889)
- 授权对象填写0.0.0.0/0表示任何人都可以访问
- ssh 远程登录
- 首先通过阿里云root账户登录(远程连接VNC)
- 找到自己电脑的公钥内容
cat ~/.ssh/id_rsa.pub
- 然后到vsoce上添加
echo '公钥内容' >> ~/.ssh/authorized_keys
- 然后复制到远程连接VNC上, 运行.
- 最后可以在自己的电脑上ssh root@实例ip 访问了.
19.8 视频:部署Node.js代码
如何防止ssh卡住(远程服务器):
echo "Host *" >> /etc/ssh/ssh_config
echo " ServerAliveInterval 30" >> /etc/ssh/ssh_config
创建应用账户:
adduser frank
- Enter new UNIX password: 与root密码一样
- 一直回车, 直到结束, 运行如下命令
mkdir /home/frank/.ssh
cp ~/.ssh/authorized_keys /home/frank/.ssh/
chmod 755 /home/frank/.ssh/authorized_keys
chown frank:frank /home/frank/.ssh/authorized_keys
- 给bens添加sudo(super user do)权限
adduser frank sudo
- 然后退出, 可以运行
ssh bens@实例ip
多账户示意图:
安装Node.js 8
curl -sL https://deb.nodesource/setup_8.x | sudo bash -
sudo sed -i 's/deb.nodesource\/node_8.x/mirrors.tuna.tsinghua.edu\/nodesource\/deb_8.x/g' /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
sudo apt-get install -y nodejs
node -v
npm -v
npx -v
sudo apt install git
安装git
sudo apt install git
- 遇到[Y/n]输入回车, 或者y回车
git --version
部署应用:
git clone https://github/FrankFang/nodejs-test.git
cd nodejs-test
touch log
- 启动命令:
node server.js 8888 > log 2>&1 &
- 把启动命令做成 start 文件
- 添加执行权限
chmod +x ./start
- 运行
sh ./start
得到一个进程号 pid tail log
看 log 内容kill -9 pid
可以关掉进程killall node
可以关掉所有 node 进程
重启应用:
ssh bens@实例ip
cd nodejs-test
git pull
killall node
(因为忘了进程号,实际上可以记下来)sh ./start
更多推荐
方方-前端体系课程(二)
发布评论