day01
1.阿里云服务器购买
2.阿里云服务器环境配置（ubuntu16.04 + apache2 + jdk1.8 + mysql-server-5.7）
购买链接：https://developer.aliyun.com/plan/grow-up
手机端注册
会员名：中文+数字
手机号：自己手机号
登录
实名认证
刷新刚刚购买页面
(注意这个是新人+学生专享的活动)
购买完毕后，重置服务器root用户密码，然后牢记
连接阿里云服务器
1）通过可视化软件 Xshell / Putty
1. 云服务器的地址
47.101.151.68
2. 账号 密码
输入密码时，控制台不会显示密码的内容和长度，直接输入你的密码，输完成后按回车
2）windows/mac终端
>ssh root@47.94.46.113
3）阿里云官网控制台 远程连接
阿里云安装服务
1）?Apache静态服务器
# apt update // 用来更新软件源
# apt install apache2
Apache部署目录
/var/www/html
找到Apache默认页面的位置
cd /var/www/html/
ls
index.html
vi index.html
按两次d 删除当前行
shift+i进入编辑模式
2）?Java环境jdk
apt install openjdk-8-jre-headless
测试
java -version
3）?MySQL数据库
apt install mysql-server-5.7
测试
# mysql -uroot -p
修改配置文件=> 可以实现远程连接阿里云的数据库
1) mysql> use mysql 切换数据集
2) mysql> select user,host from user;
3) mysql> update user set host='%' where user='root';
4) # cd /etc/mysql/mysql.conf.d
# vi mysqld.cnf
找到bind-address,将光标定位到127的位置，然后按 i 进入插入模式
将127.0.0.1 修改为 0.0.0.0
按 esc 退出插入模式
按:（英文冒号）进入底行模式
输入 wq 点击回车（保存并退出）
5）重启mysql服务
# service mysql restart
6）阿里云防火墙的3306端口是否打开
腾讯云（安全组）
3.本地软件安装
navicat安装
1. 自定义安装
2. 目标文件夹直接改盘符 改为C盘之外的
3. 选择创建桌面快捷方式
4. 安装
5. 广告勾选掉
6. 完成
navicat连接云数据库
1. 菜单栏左上角-连接-mysql
2. 连接名暂时不填
3. 主机名或IP地址：47.101.151.68（公网ip）
4. 端口：3306
5. 用户名：root
6. 密码：****
putty
博客：一周3篇（大厂就业）
https://developer.mozilla.org/zh-CN/docs/
html5
前端三要素：
js 动画（能说会道 会交流）
css 美化（妆容）
html 结构（身材）
jquery echarts (dom)
vue/react/angular (html/css/js)
脚手架（http://localhost:3000）
sass/less （css）
移动互联方向
大前端（移动端）
- html5
超文本标记语言
解释型标签语言
运行机制？
1) 开发pc - 部署pc - pc-浏览器 file:// 【开发】
2) 开发pc - 部署云服务 - pc-浏览器 http://
apache2 - scp/filezilla
http://www.tyut.edu.cn/
B/S架构 b浏览器(html、css、js) s服务器
面试题：
1. 访问百度/淘宝，浏览器-页面渲染出来中间经历了什么？
2. h5 与h4区别？
标准
doc声明不同
h5新增标签
h5新增api
超文本:
超级文本：字符，超级链接，图片，音频，视频，画布（地图、图表、3D模型）
标记：
标签进行标记， html标签（无法使用自定义标签）
标题1
段落
语言：
c、java 编译型语言 ，
hello.c --gcc–> hello.o --运行–>linux
Hello.java --javac–> Hello.class --运行–> jvm --> linux/win
html、js、css 解释型语言
hello.html --> 浏览器 -> linux/win
执行效率：c > java > js
- 工具
vscode(koroFileHeader) - 前端地位
软件开发主流架构（前后端分离）
前端(html、css、js)
浏览器（终端）显示
pc（淘宝pc） 移动端（android/ios/pad h5、混合式app）小程序 大屏
后端(Java / python / c# / Nodejs)
逻辑（登录、注册）
数据库操作
中间件操作（消息队列…）
4. html结构
继承 xml
文档类型： html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
head中的内容无法显示到浏览器视口中
charset 设定编码格式
viewport 适配移动端
pc分辨率 1480 * 800
手机分辨率 2000 * 400
title 网页标题，显示在选项卡中
apache2 favicon.ico
5. 标签
不区分大小写
单标签
双标签
元素
标签 + 内容
这是一个一级标题
logo
属性
位于开始标签中
核心属性（通用，绝大多数标签都具有的属性）
id 唯一标识
class 分类，可以重复
title 悬浮提示
style 添加css规则的
自有属性
百度一下，你就知道
注释
不会被浏览器解释，注释是用来描述代码含义。
6. 块标签（块元素）
特点：
1) 独占一行空间（100%）
2) 高度默认为0，高度由内容决定
3) 可以指定宽、高
4) 用来搭建页面框架
元素：
h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
h5：header、footer、nav、section、article、aside、address… 语义化标签
简单大方、无招胜有招
7. 行内标签（行内元素）
特点：
1) 行内与其他行内元素共享一行空间
2) 宽高都由内容决定
3) 无法指定宽、高
4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。
元素：
span、a、img
装饰类型标签：strong b em i sub sup …
功能标签：
a
超级链接
href="" 跳转
url 跳转到一个外网地址中
相对路径：相对于当前代码所在文件的路径
. 当前目录下
… 当前目录下的上一级目录
绝对路径：相对于基准点
linux操作系统中
/ 操作系统根目录 也就是 /
/var/www/html apache2部署目录
index.html / 代表apache的根部署目录 即 /var/www/html
锚点
1. 定义锚点 <div id="top">顶部</div>
2. 跳转 <a href="#top">跳转顶部</a>
其他
target="" 目标
_self 默认值 ，当前页面
_blank 新页面
img
src 图片地址
1. 网络资源
2. 相对路径
3. 绝对路径
4. base64格式值
alt 图片找不到时候的文本替换
- 功能标签（功能元素）
- table 表
tbody 表格体 thead、tfoot
tr 行
td、th 列 （容器）
子标签可以为任意其他标签
行中的列数在经过计算后应该是相同的 - form
用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
ajax 异步交互
前置技术： http协议
form( action 后端处理接口，enctype 表示编码方式，method请求方法)
method取值
get 用于查询操作，参数携带在url后面
post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
enctype取值：
application/x-www-form-urlencoded
查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
schoolName=太原理工大学&userName=陈明
multipart/form-data
用于表单中有附件提交的时候，二进制，无需进行编码
text/plain
纯文本提交
1) input 输入框
注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性
<input type="text" /> 单行文本框
<input type="password" /> 密码
<input type="radio" /> 单选按钮
<input type="checkbox" /> 复选按钮
<input type="file"/> 附件
<input type="submit" /> 提交按钮
<input type="reset" /> 重置按钮
<input type="date" /> 日期选择器（h5新增，兼容性差，一般不用）
...
2) textarea 多行文本
<textarea name="description" cols="50" rows="4"></textarea>
3) select 下拉菜单
<select name="address">
<option value="js">江苏</option>
<option value="sx">山西</option>
<option value="hn">河南</option>
</select>
iframe
9、 css3
层叠样式表
- 在html中应用
css嵌入到html的头部的style标签内
css嵌入到元素style属性内
css规则与html结构分离（解耦）
css规则可以复用
css单独写入到.css文件，通过link引入到html - 语法
注释： /* 注释内容 */
语法：
选择器 {
样式规则
}
.box {
background-color:lightcoral;
color: #fff;
width: 300px;
margin-bottom: 1em;
} - 选择器
1. 核心选择器
id选择器 利用了html元素的id属性，唯一
#one {} 选中id为one的元素
class选择器 利用html元素的class属性，非唯一
.box {} 选中class为box的元素
标签选择器 利用标签名进行选择
div {} 选中所有的div元素
并且选择器
div.box {} 选中div元素，并且这个div的class为box
和选择器
div,.box{} 选中div元素和class为box的元素
普遍选择器
* {} 选中所有元素
2. 层次选择器( 两个选择器配合使用)
子选择器 通过父元素选择子元素
>
.menu > li {}
后代选择器
空格
.menu li {}
<ul class="menu">
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
兄弟选择器
~ 当前元素之后的所有兄弟
ul.rank > li:nth-child(2) ~ *{}
第二个li之后的所有li
+ 当前元素之后的下一个兄弟
ul.rank > li:nth-child(2) ~ +{}
第三个li
3. 属性选择器(属性过滤器)，一般应用在表单元素
input[name]
具有name属性input元素
input[name='username']
具有name属性，并且name属性值为username的input元素
input[name^='u']
具有name属性，并且name属性值以'u'作为开始
input[name*='u']
具有name属性，并且name属性值包含'u'
input[name$='u']
具有name属性，并且name属性值以'u'作为结尾
4. 伪类选择器(伪类过滤器)
:first-child
:last-child
:nth-child(n) 第n个孩子阶段
:visited 访问过的
:hover 光标悬浮上去
:active a标签
:focus 聚焦
5. 伪元素选择器
::after
ul.menu::after {
}
在class为menu的ul元素中追加一个子元素
<ul class="menu">
<li>one</li>
<li>two</li>
::after
</ul>
ul.menu::before {
}
在class为menu的ul元素中插入一个子元素
<ul class="menu">
::before
<li>one</li>
<li>two</li>
</ul>
- 计算选择器优先级
当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。
公务员 -> 考研211+ -> 进入BAT（30%） -> 进入中小型私企（0）
1. 权重（积分）
1000 style
100 id
10 class、伪类
1 元素选择器、伪元素
1+10 + 1 + 10 + 1+ 10 + 1
ul.menu > li.menu_item > ul.sub_menu > li {
color: lightcyan; /* 34*/
}
#introduce {
color:lightcoral /*100*/
}
.si {
color: gray !important;
}
2. 顺序（排名）
当权重值相同的情况下，后者覆盖前者
3. 特权（!important）
脱离了权重和顺序规则
- 样式规则
1. 字体规则
可被继承
font-family 字体
字体栈 "Microsoft YaHei","宋体"
在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体
font-size 字体大小
12px
font-weight 字体粗细程度
100~900
bold
bolder
font-style 是否是斜体
italic
normal
color 字体颜色
line-height 行高
长度的相对单位
1px
em 相对于当前元素上的字号
rem 相对于根元素上的字号
font 速写形式
font: font-style font-weight font-size/line-height font-family
font: normal normal 14px/1.2 '宋体','微软雅黑';
font: 14px/1.2 '宋体','微软雅黑';
网络字体(iconfont)
应用
分析实现过程
@font-face {
font-family:"iconfont"
src:
}
.iconfont {
font-family:"iconfont"
}
.icon-Backward-Button:before {
content: "\e82e";
}
2. 文本规则
text-align 文本在容器中显示方式
center
text-decoration-line:underline;
text-decoration-style: double;
text-decoration-color: lightsalmon;
text-decoration: none;
text-indent 缩进
text-transform 控制大小写
white-space：容器内的文本是否会主动换行
nowrap 不换行
overflow: 容器内的内容超出部分如何处理？
hidden
text-overflow: 文本超出部分如何显示提示？
ellipsis '...'
3. 列表规则
用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
list-style:none;
4. 其他规则
cursor:pointer;
visibility:hidden
opacity:0.2
display:none; 【三十年河东三十年河西】
改变元素的显示方式
none
block 将行内元素转换为块元素
inline 将块元素转换为行内元素
inline-block 行内块元素
与其他行内元素共享一行空间
可以指定宽高
面试题：
如何将一个文本在块元素进行水平居中？
text-align:center
如何将一个文本在块元素进行垂直居中？
如何将一个块元素进行水平居中？【3种】
overflow:
overflow-x,overflow-y速写
overflow:hidden;
overflow:scroll;
overflow:auto;
容器，容器的内容的大小超过容器本身
outline
外圈线框
outline-color: pink;
outline-width: 2px;
outline-style: solid;
outline-offset: 1px;
outline:
5. 盒子规则
盒子 - 块元素
margin 外边距（盒子外边框距离其他元素的距离）
margin: 10px; 上右下左
margin: 10px 20px; 上下，左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 下 右 下 左
速写形式，外边距，上下外边距会进行重叠
margin-top
margin-right
margin-bottom
margin-left
border 边框
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border 速写
border: 2px solid #ccc;
padding 内边距(内容距离盒子内边框的距离)
padding: 10px; 上右下左
padding: 10px 20px; 上下，左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 下 右 下 左
速写形式，外边距，上下外边距会进行重叠
padding-top
padding-right
padding-bottom
padding-left
width/height
宽高
box-sizing(盒子模式)
内容盒子（普通盒子 ， 默认盒子）
content-box;
盒子实际占据的宽度 2borderWidth + 2padding + width
盒子实际占据的高度 2borderWidth + 2padding + height
边框盒子（怪异盒子 ie低版本）
border-box;
盒子实际占据的宽度 :width
width = 2borderWidth + 2padding + 内容宽
盒子实际占据的高度 :height
border-radius:2px
外圆 300px
内圆 200px
期望 内圆由200 变化到250，并且，中心点不变
background
background-color
background-image
background-repeat
background-size
background-position
background-clip
background-orign
background-attachment
background 速写形式
6. 默认文档流 （y轴）
块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列
7. 浮动布局（x轴）
float:left
浮动元素：
1) 脱离文档流
2) 块元素的宽度不再是100%，由内容决定
3) 块元素不再支撑其父元素
4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
clear
清理浮动
left 不与左浮动元素在同一水平线上
right 不与右浮动元素在同一水平线上
8. 伸缩盒布局（x轴）
div.container > div
ul.container > li
1) 概念
伸缩盒容器 div.container 、ul.container
伸缩盒元素 div、li
主轴 默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
交叉轴 与主轴垂直的轴
2) 规则
伸缩盒容器
display:flex;
强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
flex-direction:row;
定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
flex-wrap:nowrap
当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
align-items: stretch;
定义伸缩盒容器中的子元素在交叉轴上的排列方式
justify-content:space-around;
定义伸缩盒容器中的子元素在主轴上的排列方式
伸缩盒元素
flex-basic: 主轴上的基础长度（基本工资）
flex-grow: 主轴上剩余空间分配的份数（分红）
flex-shrink: 主轴上亏损空间的分摊份数（亏损）
9. 定位布局(z轴)
position:
static 静态（默认、非定位元素）
relative 相对（定位元素）
absolute 绝对（定位元素）
fixed 固定（定位元素）
sticky 粘滞（定位元素）
定位元素的特点: 可以使用定位规则。top right bottom left
1) 相对定位
1. 不脱离文档流
2. 相对于它原来所在位置移动
2) 绝对定位
1. 脱离文档流
2. 相对于距离它最近的父定位元素位置移动！如果所有的父元素都不是定位元素，相对于浏览器视口位置移动
一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用
3) 固定定位
1. 脱离文档流
2. 相对于浏览器视口进行定位
4) 粘滞定位
1. 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定）
2. 通过left、top、right、bottom来设定阈值
定位布局的应用：
1. 二级栏目
2. 模态框
3. 特殊布局
10. 动画
设计师；美工；前端（实现）
动态网站（具有动画 错误！）是数据是动态的。
1) 实现步骤
1. 定义动画帧
@keyframes 动画名{
from {
// 开始帧
}
to {
// 结束帧
}
}
@keyframes 动画名{
0% {
// 开始帧
}
20% {
}
...
100% {
// 结束帧
}
}
2. 设定动画（贺卡）
animation-name: move;
动画名
animation-duration: 2s;
持续时间
animation-timing-function: linear;
时间曲线函数（自由落体，贝塞尔曲线）
animation-fill-mode:forwards;
填充模式，动画结束后保留哪一帧规则
animation-iteration-count: 2;
动画迭代次数 infinite
animation-direction: alternate-reverse;
动画执行的方向 from->to , to->from
animation-play-state: paused;
动画状态
animation-delay: 1s;
延迟时间
animation: move 2s 1s 2 linear;
动画的速写形式
2) 案例（呼吸灯）
3) 案例（梦幻西游）
11. 动画库 animate.css
动画帧、动画设定规则都有第三方完成，我们直接使用class即可
1) 引入动画库
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
2) 使用
1. 直接调用动画设定类
<div class="box animate__animated animate__infinite animate__bounce"></div>
2. 引用关键帧
<style>
.bounce {
animation: flash 10s linear infinite;
}
</style>
<div class="box bounce"></div>
12. 过渡
过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）
transition-property: width;
过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
transition-duration: 2s;
过渡持续时间
transition-delay: 0;
过渡延迟时间
transition-timing-function: linear;
时间曲线函数
transition:transform,background-color 2s,2s 0s linear;
速写形式
13. 变形
transform:变形函数
1. 缩放
scale(2)
2. 平移
translate(100px,50px)
3. 旋转
rotate(360deg)
4. 拉伸
skew(45deg)
14. 媒体查询（响应式布局）
网页类型（产品生态）
pc网页 （html5/css3）
火狐 淘宝、网易严选
h5（移动端）网页 (html5/css3)
uc/safari 淘宝、网易严选
app(移动端)
html5、css3 -(ionic webview)
webapp【ios不允许上架，andriod】
混合式开发 原生/h5css3
混合式开发 框架（rn/weex - js）+ mvvm思想（vue）
原生开发语言 android
android/ios 淘宝、网易严选
* 后台管理系统（适配 - 自动适配，响应式vue ）
大屏（特殊屏幕）网页
9. 定位布局（z轴）
注意：
html源码中，多个空格等于一个空格，一个换行也等于一个空格
面试题：
如何理解语义化？
利用标签表达出来的含义（而不利用标签表达的样式）来表达页面结构
换句话说，就是在合适的页面位置上使用合适的标签
hello world
什么是盒子模型？
内容盒子（默认盒子） width = 内容宽
边框盒子（怪异盒子 ie低版本）width = 内容宽 + padding + border
居中？
文本在盒子中水平居中？
text-align:center
文本在盒子中垂直居中?
1) line-height = height
2) vertical-align 行内元素？
盒子应该位于容器内部，容器通常情况下要比盒子大
盒子在容器中水平居中?
1) margin: 0 auto;
2) 定位 margin-left:50%; left:-50px; position:relative;
3)
盒子在容器中垂直居中？
2) 父元素padding, box-sizing:border-box
2) 父元素padding + 子元素margin, box-sizing:border-box
动画题目：
1. 效果要求
（1. 定义：目前两圈的大小为常规大小
（2. 正常运动轨迹：两圈常规大小 -> 外圈向外扩大10px（2000ms） -> 外圈向内回归正常大小（2000ms）-> 内圈向内缩小12px（2500ms) -> 内圈放大至常规大小（2500ms) -> 循环
（3. 加速运动轨迹：两圈常规大小 -> 外圈向外扩大10px（1000ms） -> 外圈向内回归正常大小（1000ms）-> 内圈向内缩小12px（1200ms) -> 内圈放大至常规大小（1200ms) -> 循环
（4. 加速运动轨迹下，当文字显示为：“我很生气”时，内圈的颜色变为红色
（5. 加速运动轨迹下，当文字显示为：“我很高兴”时，内圈的颜色变为绿色
这道题你做下 分别用JS和CSS3来实现 做好了发我邮箱
第三方库(职业技能)
iconfont
字体图标库，原理：网络字体 @font-face() font-family
bootstrap
栅格布局（grid layout，原理：flex、float
animate.css
动画库，原理：animation
day03 简单的重构网页 Html+CSS
html元素 css 选择器 属性 值 git使用
- git介绍
克隆别人的仓库，就能拿到你当时克隆时候仓库里的文件
git clone 仓库地址
当仓库发生了更新，使用git pull命令获取最新内容
tyut-2021 % git pull
Already up to date.
git错误提示：
fatal: not a git repository (or any of the parent directories): .git
- 网页重构 经典网站去重构
header：logo 搜索框
nav：导航栏
轮播图
address：地址 联系方式
footer：网站底部 联系方式 联系地址 版权 其它网站的链接 - html文件后缀名
.html（建议使用这个） .htm - css文件的后缀名
.css
day07 动画：呼吸灯、梦幻西游
/* 指定应用的一系列动画 属性值是一个由@ keyframes 定义的动画序列*/
animation-name: outer;
/* 指定一个动画周期的时长 单位支持s ms 无单位值无效 /
animation-duration: 5s;
/ 定义CSS动画在每一动画周期中执行的节奏。 /
animation-timing-function: linear;
/ 定义动画在结束前运行的次数 infinite代表无限循环 number默认是1 可以用小数 */
animation-iteration-count: infinite;
复习：
- 大前端
第一阶段 重构（美工，页面仔）
psd设计图 -> html、css、js
html5 + css3 15天（网易严选）
第二阶段 dom驱动框架
linux操作系统 3天
Javascript（es5/dom/bom）15天
jquery、bootstrap、antv、echarts、highcharts、地图（腾讯、百度、高德）
行学天下门户(后台管理系统、门户前台、swagger)
第三阶段 企业级开发阶段
es6、typescript 5天
vue全家桶（vue + vuerouter + vuex + elementui + axios【ajax】 + …）
家政服务预约云平台
第四阶段 拓展阶段
小程序
react全家桶（react + reactrouter + redux + antdesign + axios + …）
reactnative (混合式app开发 - app)
第五阶段 服务端开发阶段
nodejs(io流、http网络模块)
express
egg
第六阶段 优化阶段
nuxt.js vuepress
… - 校招(大厂 25w起步)
绝大多数大厂已经开始！！！
网申（报名） -> 笔试 -> 面试3轮 -> offer
- 简历 数据结构 **授课 ** ***** M起
1. 个人信息 算法
学校 专业 数据库、网络
* 博客(会学习会分享) 【leecode、牛客】
* gitee、github（专业）
2. 个人技能
招聘需求
3. 项目经验
* TYUT新闻网
技术栈
预览地址
描述：你在项目组中的贡献
2~3个
4. 获奖经历
-
html结构
-
语法
注释
标签
元素
实体
一个回车、多个空格表示一个空格
? 空格
>
< -
块元素
搭建页面骨架；独占一行空间、高度由内容决定、指定宽高 -
行内元素
填充 ；与其他行内元素共享一行空间、不可以指定宽高(css中)
a
img 可以指定 -
功能
- 表格
表格组件 div -模拟-> table
table
caption
thead
tfoot
tbody
tr
td/th : rowspan colspan - 表单
用于向后台提交数据，原生表单和后台交互的数据格式主要还是为查询字符串
qs ‘name=terry&age=12’
json ‘{“name”:“terry”,“age”:“12”}’
form : action，enctype，method
input : name(text,password,file,radio,checkbox...), value(radio,checkbox),placeholder
select:name > option: value
textarea: name,value,rows,cols
- iframe
载入外部页面
css相关技术点
- css介绍
层叠样式表 - css在html使用方式
1) style标签
2) style核心属性
3) link
- 语法
注释 /* */
声明：
选择器 {
}
- 选择器
1) 核心选择器
id、class、元素、并且div.box、和 div,.box、*
2) 层次选择器
子代 ul.menu>li
后代 ul.menu li
兄弟 + ~
3) 属性过滤器
[name]
[name='username']
[name*='u']
[name^='u']
[name$='u']
form.login_form > input[checked]
4) 伪类过滤器
子元素
:nth-child(n) n序号，从1开始
:nth-child(2n+1) 1、3、5...
:nth-child(even) 偶数
:nth-child(odd) 奇数
:first-child
:last-child
状态
:hover
:visited
5) 伪元素选择器
::after
::before
<ul>
<li>one</li>
<li>two</li>
::after
</ul>
ul::after {
content:"hello world"
}
- 文本规则
text-align
center/left/right
text-decoration
none
text-indent
overflow:hidden
white-space: nowrap
text-overflow:ellipsis
vertical-align: 行内元素在容器中的垂直排列方式
display:inline-block; - 字体规则
color:red;
line-height: 行高
font-size:12px
font-family:‘Microsoft Yahei’,‘微软雅黑’;
font-style:是否打开斜体 normal/italic
font-weight: bold/bolder
font: style weight size/line-height family;
html {
font: 14px/1.5 ‘Microsoft Yahei’,‘微软雅黑’
}
px 像素
em 相对于当前元素的字体大小
rem 相对于html元素上设置字体大小
网络字体（应用 iconfont）
1. 获取字体文件 .ott .woff... (字体方正) 阿里云服务器（共享）
2. css3
@font-face {
font-family:'李氏名字';
src:url('./lszi.woff')
}
.logo {
font-family:'李氏名字';
font-size:12px;
}
------------------------
@font-face {
font-family: "iconfont"; /* Project id 2736919 */
src: url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff2?t=1628652186798') format('woff2'),
url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff?t=1628652186798') format('woff'),
url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.ttf?t=1628652186798') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fuwufankui:before {
content: "\e67d";
}
3. 应用
1) 引入iconfont.css (声明了新字体，声明了很多class)
2) 使用
<i class="iconfont icon-fuwufankui"></i>
- 列表规则
- 其他规则
- 盒子规则
块元素，布局时候使用盒子来进行，y轴，x轴，z轴
1) 组成：
margin、border、padding、内容
2) 盒子模型
默认盒子（box-sizing:content-box）
width = 内容宽 即 盒子实际占据的宽度 = borderWidth + padding + 内容宽
怪异盒子（box-sizing:border-box）
width = borderWidth + padding + 内容宽 即 盒子实际占据的宽度 = width
3) 背景规则
background-color
background-img
background-repeat
background-position
background-origin
background-size
background-clip
background
- 默认文档流(y轴)
块元素默认特性：div 默认宽度为100%，高度由内容决定，可以指定宽高
div p ul>li
10.浮动布局(x轴)
解决块元素在容器中多列显示的问题
建议：尽量给块元素设定宽度而非高度（块元素最终节点可以指定高度）
1) float
块元素 - 浮动元素
1. 脱离默认文档流
2. 宽度要么为设定值，如果没有设定，宽度由内容决定
3. 在同一级别（相邻兄弟）的浮动元素，可以在一行排列
4. 当一行无法容纳所有浮动元素，浮动元素会自动回车
2) clear
清理浮动，left 清理float:left； right清理float:right
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
11.伸缩盒布局（x轴、y轴）
应用场合：父子结构， h5页面中（移动端页面，pc）
概念：x轴、y轴、主轴、交叉轴、伸缩盒容器、伸缩盒元素
规则：
伸缩盒容器
display:flex;
flex-direction:row; 主轴x轴
align-items: y轴（主轴）上的显示方式
justify-content:x轴（交叉轴）上的显示方式
flex-wrap:wrap;
伸缩盒元素
flex-basic
flex-grow 剩余空间分配
flex-shrink 亏损空间分配
flex: 速写
flex:1
- 聊天
- 通讯录
- 我的
12.定位布局（z轴）
position: static ; // 非定位元素
定位元素： 可以使用定位属性，top right bottom left
position: relative;
不脱离文档流；相对于自身原来所在位置来进行定位
position: absolute;
脱离文档流；相对于距离它最近的父定位元素来进行定位
position: fixed;
脱离文档流；相对于浏览器视口来进行定位
position: sticky;
在没有达到阈值前不脱离文档流（相对定位），达到阈值后脱离文档流（固定定位）
应用场景：
特殊场景布局：二级栏目；广告；回到顶端；模态框
实现块元素的居中
left/margin-left
- 动画与过度
-------------第三方框架（社区代码）-------------
一如前端深似海
html/css/js 深度理解
iconfont 字体图标库
bootstrap html/css封装【组件库 （基础html/css/js的组件库）】
12栅格系统
组件（html+css） 按钮、列表、表格、模态框…
elementui 组件库 （基础 vue 的组件库）