1
大前端都能做什么?
RedMonk发布了2021年第一季度编程语言排行榜JavaScript 连续10年一直名列前茅是全世界公认最好的编程语言!
2什么是HTML?
HTML是用来描述网页的一种语言。
.HTML指的是超文本标记语言(Hyper Text Markup Language).HTML不是一种编程语言，而是一种标记语言(markup language)
3浏览器
Can I use网站监测浏览器是否兼容
4web标准
5
7文档声明与字符编码
<html lang=“***">
UTF-8 - Unicode 万国码字符编码
8常用标签
语义化例子
1.裸奔好看
2.爬虫喜欢
3.方便维护
1、文本标题(h1-h6)
<h1>一级标题</h1
><h2>二级标题</h2>
><h3>三级标题H3</h3>
><h4>四级标题H4</h4>
><h5>五级标题</h5>
><h6>六级标题</h6>
注:文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
2、段落文本(p)
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
3、换行(br)
<br />
换行是一个空标记(强制换行)
4、水平线
<hr />空标记
5、加粗有两个标记(推荐strong)
<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本
6、倾斜有两个标记(推荐em)
<em>强调文本</em>
<i>倾斜文本</i>
7、删除线有两个标记(推荐del)
<s>文本</s>删除线
<del>文本</del>删除线
8、扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
10不一般的hr
align表示靠在哪边
color=====颜色
width=====宽度
align=====对其方式
noshade===取消阴影
1、<常规标记>也叫双标记<标记></标记>
<标记属性=“属性值”属性=“属性值”></标记>标记也可叫标签或叫元素
例如:<head> </head>
2.空标记也叫单标记<标记/>
<标记属性=“属性值”/>例如: <br />
11特殊符号
空格
不好用
  用的多
12div和span
span，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
div标签，没有具体含义，用来划分页面的区域，独占一行。
13有序列表
- li里面可以随意放标签，但是ol里面只能放置li,
- 数字是自动生成的。
- 就这五个type:1,a,A,i,I（罗马数字）
表示从哪开始start:取值只能是一个数字
14无序列表
快捷键创建
- ul里面只能放li,li里面可以放其他标签
- 默认的是黑色的实心圆
- type, disc 实心圆 circle 空心圆 square 正方形 none（使用的最多）
15自定义列表
快捷键
16图片标签的路径
同级目录
- code.gif
- ./code.gif当前
相对路径：例子
. ./表示上一级,如果不在同一级，需要先跳出来，再寻找
. ./. ./上一级的上一级多级返回
17图片标签的属性
<img src=“图片路径”title=“鼠标悬停上去之后的提示信息”alt=“图片不显示之后（加载失败)的提示信息" width=“200px" height=“200px”/>
19超链接
能够实现不同页面的跳转
<a href=“路径” title=“鼠标悬停上去之后的提示信息”target=“规定在何处打开文档">内容
20table表格
21表格属性
表格属性
- 宽度width
- 高度height
- 边框border
- 边框颜色 bordercolor
- 背景颜色bgcolor
- 水平对齐align=“left或right或center"
- cellspacing="单元格与单元格之间的间距
- cellpadding=“单元格与内容之间的空隙”
22行tr 属性
- 高度height
- 背景颜色 bgcolor
- 文字水平对齐align=“left或right或center"
- 文字垂直对齐valign=“top或middle或bottom";
23单元格td属性
- 宽度width
- 高度height
- 背景颜色bgcolor
- 文字水平对齐align=“left或right或center"
- 文字垂直对齐valign=“top或middle或bottom”;
如果一个单元格的设置宽度，影响的是这一整列的宽度
24
Colspan=“所要合并的单元格的列数”必须给td。
Rowspan=“所要合并的单元格的行数”必须给td。
26表单标签
27CSS样式表
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值;
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5)在书写样式过程中，空格、换行等操作
28CSS外部样式表
link和@import
扩展知识点:link和import之间的区别?
①差别1:本质的差别: link属于XHTML标签，而@import完全是CSS提供的一种方式。
②差别2∶加载顺序的差别:当一个页面被加载的时候（就是被浏览者浏览的时候),link引用的CSS会同
时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
③差别3∶兼容性的差别: @import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的
才能识别. 而link标签无此问题。
更多使用link
29行内样式表
30CSS样式表
行内>内部>外部
！important优先级最高
31选择器
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一，
对多或 者多对一的控制,这就需要用到CSS选择器
元素选择符/类型选择符（element选择器）如: div{width:100px; height:100px; backgroundred;}
语法:元素名称{属性:属性值;}如: div,p,h1,img,a,span,i,em,strong,b,ul,li,ol, i…等
说明:
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span .….。b)所有的页面元素都可以作为选择符;
用法:
1)如果想改变某个元素得默认样式时，可以使用类型选择符;
(如:改变一个div、p、h1样式)
2)当统一文档某个元素的显示效果时，可以使用类型选择符(如:改变文档所有p段落样式)
32class选择器/类选择器
语法: ·class名{属性:属性值;}
说明:
- A)当我们使用class选择符时，应先为每个元素定义一个class名称
- B) class选择符的语法格式是:
如:
.top{width:200px;height:100px; background:green;}
用法: class选择符更适合定义一类样式;
33id选择器
语法:#id名{属性:属性值;}说明:
- A）当我们使用id选择符时，应该为每个元素定义一个id
属性如:<div id="box"></div> - B)id选择符的语法格式是“#”加上自定义的id名如:#box{width:300px; height:300px;}
- C)起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)如: head标记
- D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)
34*通配符/通配选择器
语法: * {属性:属性值;}
说明:通配选择符的写法是“ * ”，其含义就是所有元素。
*{margin:O; padding:0;}代表清除所有元素的默认边距值和填充值;
35群组选择器
语法:选择符1，选择符2，选择符…[属性:属性值;}
- 例:#top1,#nav1，h1{width:960px;}
- 说明:当有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。
- margin:0 auto;实现盒子的水平居中
包含选择器/后代选择器
语法:选择符1选择符2{属性:属性值;}
说明:含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如:结构:
<ul class="list">
<li><li>
<li></li>
<li><li>
</ul>
样式: .list li{background:red;}
36伪类选择器
语法︰
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active。
说明:
- A）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:alink,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
- B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: acolor.red;} ahover(color.green}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
38洗择器的权重
当多个选择器,选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
id选择器权重>class>元素
39大小和字体
41
42文本水平对齐
text-align: justify;
两端对齐
多行文本用
line-height和height是高度一致的
line-height
行高
line-height的数据=height的数据，可以实现单行文本垂直居中
43首行缩进文本间距
text-indent:以当前文字大小进行缩进
44文本修饰
46
font
文字简写
font是font-style font-weight font-size / line-height font-family 的简写。
font:italic 800 30px/80px “宋体”;顺序不能改变,必须同时指定font-size和font-family属性时才起作用
47列表属性
list-style: none;
最常用去掉默认属性
48背景属性
repeat:默认平铺
repeat-x：x轴平铺
repeat-y：y轴平铺
no-repeat:不平铺
49
- cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中。
5. contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白
50背景的固定和滚动
background-attachment: fixed;
53背景的复合属性
复合写法:
1．用空格隔开
2．顺序可以换
3．可以只取一个值，放在后面能覆盖前面的值
==54浮动
55清浮动
2．清浮动 clear :none / left,right, both
56一个例子
57盒子模型
text-align: justify;
padding
1个值，4个方向一样
2个值,上下，左右
3个值，上 左右 下
4个值,上右下左
58 内边距
- 背景色蔓延到内边距
- 可以设置单一方向吗?
padding-方向:top bottom left right
60外边距
1.margin-方向4个方向
2．背景色蔓延?没有
3.* {margin:o}
4．外边距负值?支持.
5.屏幕居中? margin:0 auto; 横向居中
61盒子外边距
1．兄弟关系，两个盒子垂直外边距与水平外边距问题
- 垂直方向,外边距取最大值.
- 水平方向,外边距会进行合并处理.
2．父子关系，给子加外边距,但作用于父身上了,怎么解决?
- 子margin-top===>父的padding-top，注意高度计算
- 给父盒子设置边框
- 加浮动
- overflow:hidden.BFC,
62PS(以后看）
64溢出属性
1、溢出属性（(容器的)
说明:
- overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
- visible:默认值，溢出内容会显示在元素之外;
- hidden:溢出内容隐藏;
- scroll:滚动，溢出内容以滚动方式显示;
- (常用)auto:如果有溢出会添加滚动条，没有溢出正常显示;
- inherit:规定应该遵从父元素继承overflow属性的值。
- overflow-x:X轴溢出;
- overflow-y:Y轴溢出
66 溢出省略号
2、空余空间
说明:
white-space: normal/nowrap/pre/pre-wrap（会折行） /pre-line /inherit 该属性用来设置如何处理元素内的空白;normal:默认值，空白会被浏览器忽略，
nowrap:文本不会换行，文本会在同一行上继续，直到遇到br标签为止;
nowrap :不换行
pre:显示空格,回车,不换行pre-wrap:显示空格,回车,换行
pre- line:显示回车,不显示空格，换行
3、省略号显示
说明:
text-overflow:clip/ellipsis ;
clip:默认值，不显示省略号(…);ellipsis: 显示省略标记;
当单行文本溢出显示省略号需要同时设置以下声明:
1、容器宽度:width: 200px;
2、强制文本在一行内显示:white-space: nowrap;
3、溢出内容为隐藏: overflow: hidden;
4、溢出文本显示省略号: text-overflow: ellipsis;
67元素显示类型——块
p标签里不加其他块
68元素显示类型——行内
img和input都可以在同一行，也可以添加属性
69
span行内元素只能设置边距的左右边距,不能设置上下边距.
70
移上去显示，移开不显示
71二级菜单
（>）是子代选择器
空格是后代选择器
76定位的属性和属性值
77静态定位和相对定位
78绝对定位
position: absolute;
绝对定位
脱离文档流
子绝父相
83层级
后来者居上
z-index值越大，·层级越大，·越靠上显示·
84绝对定位
行内元素转换成块元素
- display : block;
- absolute;绝对定位脱离文档流
- float:left;
85水平垂直居中
怎么让盒子水平垂直居中
position: absolute;
top: 50%;
left:50%;
margin-Lleft: -100px;
margin-top:-100px;
用margin 设置原来的一半
86
float:半脱离，文字环绕
absolute:全脱离，不会出现文字环绕效果
87锚点
88精灵图
css Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。
二、图片整合的优势:
1）通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。2)通过整合图片来减小图片的体积。
89宽高自适应
自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适
宽度自适应高度自适应
(1）宽度自适应
元素宽度的默认值为auto（不设置或设置为auto）
(2)高度自适应
元素高度的默认值{height:auto;}
90
height: 100px; 1．如果浮动过多，换行，就出现问题
2.增加空标签,不利于代码可读性
91浮动元素之父元素高度自适应2
display: none;
不占为隐藏
visibility: hidden;
占位隐藏
92窗口自适应（没懂）
盒子根据窗口的大小进行改变
设置方法: html,body{height:100%;}
93两栏布局
calc()函数的使用
calc()函数:用于动态计算长度值。
需要注意的是，运算符前后都要保留一个空格，例如: width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;
calc()函数支持"+“，”-“，”*“，”/”运算;
calc()函数使用标准的数学运算优先级规则;
95单选框
要加name
这种情况可以点击字体的时候选择
label标签
check是默认选项
96复选框
97
<div>
<!--上传文件-->
<input type="file" name="" id="">
</div>
提交
<div>
<div>图片按钮-代替提交按钮(input type="submit")</div>
<form action="">
<!-- 上传文件-->
<input type="image" src="submit.jpg"></form>
</div>
<div>
<div>隐藏按钮</div><!-- 隐藏-->
<input type="hidden" name="" id="" value="带给后端的个人信息,">
</div>
disable禁用
<div>
<button disabled="disabled">注册</button><br>
<input type="radio" disabled>不满意
</div>
disable是不能选中
只读 能看不能改
<br>
<input type="text" disabled value="1111111">
<input type="text" readonly value="222">
98下拉菜单
<div>
<div>你的收获地址</div>
<select size="3">
<option>辽宁</option>
<option>山东</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
</select>
</div>
select支持的属性
- size ,显示几个
- multiple
option支持的属性
- value ,提供给后端需要用的value值
- selected,默认选中
99文本域
placeholder:提示文字，
默认value:写在双标签内部,注意空格问题
resize重新设置大小,vertical, horizonta,both
<textarea cols="10" rows="10" placeholder="请输入你的意见"><textarea>
100字段集
<fieldset>
<legend>性别</legend>
<input type="radio"]name="aa">男
<br>
<input type="radio" name="aa">女
</fieldset>
101H5基础与语法
101-104H5
105增强表单
Type= “color”生成一个颜色选择的表单
Type= “tel”唤起拨号盘表单
Type=“search”产生一个搜索意义的表单
Type= "range”产生一个滑动条表单
Type= “number”产生一个数值表单
Type= “email”限制用户必须输入email类型
Type= “url”限制用户必须输入url类型
Type= “date”限制用户必须输入日期
Type= “month”限制用户必须输入月类型
Type=“week”限制用户必须输入周类型
Type=“time”限制用户必须输入时间类型
Type= “datetime-local”选取本地时间
106Datalis选项列表
例:
提示: option元素永远都要设置value属性。 <input type="text” list="mylist">
<datalist id="mylist">
<option value="手机">
</option><option value="手表">
</option><option value="手环">
</option><option value="手镯">
</option>
</datalist>
107增强表单-属性
autofocus属性:
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
自动获取焦点
required属性:
验证输入不能为空
Multiple:
可以输入一个或多个值，每个值之间用逗号分开例: <input type= “email"multiple/>
还可以应用于file
pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例:<input pattem =“0-9]A-Ztitle=“输入内容:一个数与三个大写字母” placeholder=‘输入内容:一个数与三个大写字母’>
108 CSS3
109层级选择器
/＋当前元素的后面第一个兄弟/
/.child+li{
background : yellow;}/
/~当前元素的后面所有的亲兄弟/
110二、属性选择器
1、E[attr]:只使用属性名，但没有确定任何属性值;口
2、E[attr=“value”]:指定属性名，并指定了该属性的属性值;口
3、Eattr=vau ]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“e”不能不写D
扩展知识
4、E[attr个=“value”]:指定了属性名，并且有属性值，属性值是以value开头的;口5、E[attr$=“value”]:指定了属性名，并且有属性值，而且属性值是以value结束的口6、E[attr*=“value”]:指定了属性名，并且有属性值，而且属值中包含了value;口
/*完全匹配*/
div[class=box1]{
border:1px solid blue;}
/*包含就匹配*/
div[class~=box1]{
border:1px soli dblue;
}
111结构伪类
/*ul li:first-child{
background: yellow;
}
第一个
ul li:last-child{
background : red;}*/
最后一个
第几个
/*li:nth-child(2){
background:blue;}*/
/*第几个，偶数*/
奇数·2n+1·2n-1(odd)
li:nth-child(2n){
background:yellow;
}
div p:only-child /*独生子*/
div : empty/*选中空标签，不含空格*/
112目标伪类
点到哪，哪就亮
设置锚点，和目标伪类
第一步，
第二步
113、UI元素状态伪类选择器
E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
E:checked 匹配所有用户界面(form表单）中处于选中状态的元素E
E:selection匹配E元素中被用户选中或处于高亮状态的部分
114否定与动态
115文本阴影
两个阴影的写法
116盒子阴影
117
border-radius : 10px;
px或者百分比*/
v1 ,四个角一样
v1, v2,·左上右下，·左下右上·一致
v1, v2,v3·左上，·左下右上·右下
·v1, v2,v3, v4·顺时针
先上下再左右
118
半圆
120字体引入
先引入，再应用
121怪异盒模型
box-sizing: content-box;
标准盒模型
box-sizing: border-box;
怪异盒模型（会挤压内部空间）
border，padding会计算在盒模型内
用处很大
122弹性盒子
1．子元素默认横向排列
2．行内元素，变成了块级元素
3. 只有一个元素的时候，margin: auto自动居中
124
flex-direction: column
justify-content: center;
space-between两端对齐
space-around距离环绕
align-items: flex-end;
调整侧轴
flex-start
flex-end
center
125
flex-wrap : wrap;
/折行/
align-content: space-between;
控制折行后行间距
flex-start
flex-end·center
space-around
space-between
126项目对齐
.div1{
align-seLf: flex-start;
}
.div2{
align-self: flex-end;
}
.div3{
align-self: center;
}
.div4{
aLlign-self: baseline;
}
.div5{
align-self: stretch;/*拉伸，不设置高度*/
}
127项目顺序调整
order:0默认值
设置order可以调整顺序
128剩余宽高
flex:1;
/占满剩余空间/
141多列布局
/显示的列数/
column-count: 5;
/调整列间距/
coLumn-gap: 30px;
/列边框/
coLumn -ruLe: 2px solid red;
/列高度统一/
column-fill: auto;
auto 把父盒子占满
/调整列宽/
/*column-width: 500px;
div>h1{
coLumn-span: all;
/*all 横跨所有列*/
}
143横竖屏幕显示
146
<! – px , em , rem之争
px:50px
em:·相对单位，·相对于父元素的字体大小。div width : 10em;
rem:相对单位，相对于根元素（html）字体大小，div width : 10rem;
147rem布局（有个插件）
fontsize =当前设备的css布局宽度/物理分辨率*基准font-size
148足球圈rem(完全没懂0_0)
149 <! – vh 与 vw -->
<!-- vh view-height
100vh === 视口的高度
vw view-width
100vw ====视口宽度
150单位转换
有滚动条
100vw包含滚动条，窗口大小
100%刨除滚动条剩余的空间占满，|
151渐变
支持多颜色渐变
2.支持方向,to left
3.支持角度的写法
152径向渐变
153重复渐变
154太极
align-items: center;侧轴居中
155过渡
transition:height 2s;要加在非hover的盒子上面
这是两面都有过渡
all 所有属性
2s 动画时间
linear 匀速
2s 延迟
除了display : none /block属性。
156过渡属性
157动画过渡单一属性
all单一属性:transition-property:检索或设置对象中的参与过渡的属性
5s单一属性:transition-duration:检索或设置对象过渡的持续时间
158平移
x轴平移
写在一起
159缩放
transform: scale(0.5);缩小
transform: scale(1.5)放大
transform: scale(-1)颠倒
最好加个overfLow:hidden;
transform-origin: left bottom;
- 改变中心点的位置
center
left topleft bottom
left center
right topright bottom
right center
160旋转
transform: rotatez( -80deg);
rotate中心==== rotatez
正值顺时针
负值逆时针
rotatex绕x轴旋转
rotatey绕y轴旋转
transform-origin: left top;
改变旋转中心
161扇子模型
162多属性值
先进性位移，再旋转
163倾斜
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
一个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
skewX正值,拽右下角，往右边拉动，形成30deg
skew(x,y)正值，拽右下角，往右下边拉动,形成30deg
166关键帧动画
animation: kerwinrun 2s linear;
/声明动画/
@keyframes identifier
from{
}
to{
}
第二种写法
infinite无限次
167关键帧动画单一属性
1.animation-name检索或设置对象所应用的动画名称
2.animation-duration检索或设置对象动画的持续时间
3.animation-timing-function检索或设置对象动画的过渡类型
4.animation-delay检索或设置对象动画延迟的时间
5.animation-iteration-count检索或设置对象动画的循环次数
6.animation-direction检索或设置对象动画在循环中是否反向运动
animation-direction: alternate-reverse;
/normal 正常
reverse反方向
alternate正常方向-交替
alternate-reverse反方向-交替/
animation-fill-mode: backwards;
forwards保留在初始画面
backwards保留在结尾画面
170-animate动画库
171-3D平移
transform-style: preserve-3d;
构建3D属性
/* flat: 2d舞台*/
/preserve-3d: 3d舞台/
transform:translatez(-100px）;景深perspective: 800px;
172旋转
transform: rotate3d(1,1,1,30deg);
/前面三个值取值0-1小
173缩放
scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果
175网格布局
/*4. repeate autofill 自动填充*/
grid-tempLate-rows : repeat(auto-fiLl,20opx);grid-tempLate-coLumns: repeat(auto-filL,20%);
设置最值
auto自适应
177
grid-row-gap : 20px/行间距/
grid-column-gap : 20px/列间距/
grid-gap:30px 30px/复合式写法/
178
180
181
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
