首页  思维导图  详情

前端

2022-04-01 20:17:55   0  举报





仅支持查看

AI智能生成

前端基础笔记

前端

作者其他创作

大纲/内容

三剑客

1、HTML

table 表格

caption

thead

rules

值

frame

值

tbody

rowspan

colspan

align

值

tfoot

表单

form

action属性

method属性

表单项

input

type属性

button

text

password

不能使用输入法

radio

checkbox

file

hidden

**submit

reset

number

value属性

name属性

单选框的时候，名字一致为互斥

placeholder

select

option

value属性

textarea

其他一些标签及其属性

***监听事件

2、CSS

基础

%这个单位的参照基准是父元素

原则：不要使用body为根元素，可放入div或者其他标签内

做页面需要考虑网页安全区域，即网页宽度，应考虑兼容性，设根元素width为合适值，一般1170px、1190px等

元素优先级

插入样式表

1.外部样式表（外链式）

2.内部样式表（行内式）

3.内联样式（内嵌式）

...
<head>
...
<style type="text/css">
p{
color：red
}
<style type="text/css">
...
</head>

...

4、导入式

外链式与导入式的区别：

1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS，只能写在style标签里。

2、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4、link支持使用Javascript控制DOM去改变样式；而@import不支持。

css三种写法

1、.css文件内

2、style标签内

3、标签的style属性里

4、浏览器自带，但优先级最低

优先级：就近原则。3>2>1

原则：公共样式写在.css文件，
页面独有写在style标签

选择器

语法

.id选择器

.class

class="item box1"

多个类选择器，写在一个class里用空格分开

标签名选择器

多选

逗号分隔多个选择器

后代选择器

用空格分隔，后代都继承

子代选择器

>只作用子一代

+兄弟选择器

属性选择器

【属性名】{}

属性名（=值）

属性名（~=值）

...W3school去看

伪类选择器
伪元素默认为行内元素

格式为：名字

：hover{} 鼠标悬停

如果有link，:hover 必须位于 :link 和 :visited 之后

可以给任何元素加，可以写任何样式

：focus{} 选择获取焦点的那个

input 有轮廓去掉 outline：none

：：selection{} 被拉取的状态

：checked{} 被选中

一般input配合使用

：last-child{}

写在兄弟元素上，生效于最小的兄弟

*** ：before{}

向她之前插入

*** ：after{}

之后插入

after和before选择器不仅仅是加几个字那么简单，可以把他们当作子元素去用，
！！！content：‘’；必须加

。。。

css中使元素隐藏

1、透明度o pacity：0；【0~1】

占位

2、display:none;隐藏

不占位

兼容性高，优先考虑

3、overflow：hidden

不占

样式

css支持简写属性

font

font-family：‘’，‘’，‘’

font-size:

color

计算机中颜色表示形式

1.颜色名

2.rgb():红绿蓝

3.rgba（）：最后透明度设置为0~1，0为透明

4.十六进制表现形式

5.hsl(css3新出的)色调、饱和度、亮度

text

text-alingn：

center 居中

框模型（盒子模型）

内容区 element

width和height

内边距 padding

边框 border

宽度

颜色

风格

外边距 margin

谷歌浏览器body有外边距，一般需要设置为0

一个元素在页面所占的实际大小

内容区大小+内边距+外边距

box-sizing

border-box

。。。

框类型display

none 不显示还在不占位

block 块级元素

前后带有换行符
可以设置宽高

inline 行内元素

无换行符
不可设置宽高

inline-block 行内块元素

可设宽高、无换行符

块与块有间距：父元素设置font-size为0，其子元素设置font-size

水平居中

1、margin：0 auto；

块级元素设置的宽度比窗口小的时候，
右边空出来的被margin覆盖

前提：1、元素为块元素。2、宽度比窗口小

脱离文档流

浮动 float

方向

left

right

脱离文档流

清除浮动：清除周围元素浮动给自己带来的影响

1、clear：加在被影响元素上

left

right

both

浮动的实际应用

1、布局

原因：兼容浏览器优先使用浮动布局，兼容IE8

子元素向一个方向浮动

父元素高度坍塌，处理方法

父级方法

1、给父元素设置display:inline-block;

2、给父元素设置overflow:hidden;

3、加一个不会显示的子元素

4、利用伪元素:after，并且清除浮动

2、行内挪动元素

给元素单独加float

定位：position

目的：解决元素默认自然顺序排列元素，让元素微调位置

三个关键属性

定位方式（参照物不同）

static：元素默认不定位

relative：相对定位

参照物为自己之前的位置，移动不影响其他元素的位置

适用于细节微调、一般不需要

absolute：绝对定位

参照物为已定位的父元素的边框

问题

脱离文档流

要求父元素的定位不能是static，如果是则向上查找，直到页面边缘

一般写在兄弟元素后边

应用场景

图标右上角惠、123

fixed：fixed

不同：参照物浏览器边缘

与绝对定位一样

应用场景

跟着滚动的菜单栏

其他内容可以设置一个边距，顶出来，使其不被脱离文档流的元素盖住
也可加一个div

位置属性

left：100px right： top： bottom：

元素发生覆盖，设置层级

z-index:整数，越大越在上边显示

不定位元素默认层级为0

只对定位了的元素生效

设置相对定位，因为不脱离文档流

背景：background

background-color

background-image：url（）；

背景图与背景颜色不共存

背景大小是图片大小

设置是否平铺background-repeat：

background-size:

background：缩写

继承性：no

不设背景即看为透明，子元素不是继承而是透过的

现在没什么用了

-webkit-

浏览器前缀，指c3标准在早期被一些浏览器支持的情况

-o- 欧朋

-moz- 火狐

-ms- IE

border框

border-radius：10px、50%

圆角框

阴影

图片框，不好看，一般不用

text

行高 line-height：

单行文字居中

伪类

:nth-child(2)

选择同名标签的第几个

做页面的一些

不直接使用body

***重点

文字垂直居中

line-height：20px；去文字的框行高设置成框高

文字垂直居中对齐

text-align: center;子文本div居中

ul外边距塌陷

使用无痕模式设计：消除缓存影响

去掉ul前边的点

list-style：none

挤压内容box-sizing：border-box

继承width：inherit

浮动布局和inline-block兼容性好

超出边距省略内容，显示...

1、/* 内容过长显示成省略号（内容显示为一行） */
white-space: nowrap;/*设置不换行*/
overflow: hidden; /*设置隐藏*/
text-overflow: ellipsis; /*设置隐藏部分为省略号*/
width: 20em;/*不允许出现半汉字截断*/

https://www.cnblogs.com/sinceForever/p/11350332.html

溢出处理和
页面去除滚动条

overflow：

谷歌浏览器

::-webkit-scrollbar{

display:none;

}

兼容性较强
一定定高、宽属性

在父元素1上加一个父元素2，父元素2的宽为父元素1的宽（不包括+的滚动条宽

设置属性overflow：hidden；
宽高

父元素1 宽+17像素即滚动条宽

设置属性overflow：scroll；
宽高

记得不好，上代码吧

div+css响应式布局：现在不这么叫了

手机端网页在手机端兼容

@media

里边写html的font-size大小
设置尺寸用rem单位
因为rem根据html的font-size的尺寸变化

img标签可以做懒加载

布局

画块、划分区域

水平居中

垂直居中

line-height：20px；
display：inline-block；
vertical-aling：top；

尺寸单位

绝对单位

相对单位

em 当前字体的比例

font-size：20px；1em=20px，基准为字体大小

适合响应式的，页面变化的

BUG

字体继承，如果例font-size：1.5em，可能被影响，逐层放大一处改多处3乱

rem

只以html根标签font-size字体大小为基准

viewport width

100vw=屏幕宽度

1vw = 1%的屏幕宽度

viewport height

100vh=屏幕高度

vmax

100vmax=宽高中最大

继承

100%与继承inherit的区别

Flex布局（弹性布局）

用来为盒状模型提供最大活性

核心理念：不需要设置尺寸，只需高速浏览器要什么布局，所有尺寸浏览器计算得出
*长宽一般还是要自己设置

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end

基础

弹性容器：指定父元素为display：flex；弹性容器，子元素自动横向排列

与浮动不同，浮动为设置子元素，此为设置父元素

弹性子元素（容器成员、Felx项目）项目即子元素

容器的属性

设置主轴的方向，即元素的排列方向flex-direction:

设置换行规则flex-wrap：

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

项目在主轴上的对齐方式justify-content：

新属性：space-evenly

项目在交叉轴上如何对齐align-items：

多根轴线的对齐方式align-content：

新属性：space-evenly

项目的属性

不实用

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

有剩余，分剩余空间

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

站不下，等比例缩小自己给他人留空间

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

规定自己占据固定空间

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

flex：0 0 100px；
多了不给少了不拿自己占100px

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

手机端弹性布局的一个典型应用

左边定宽，右边随屏幕大小设宽

实例

CSS Grid 网格布局教程

3、JS

事件冒泡

传参加一个event

DOM

什么是DMO？

什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，
它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

只列出一点常用方法

获得节点 Document .

getElementById()：根据id获取，获取的是节点对象
getElementsByName：根据name属性的值获取，获取的是节点的数组
getElementsByTagName：根据标签名获取，获取的是数组
getElementsByClassName：根据class来获取

操作节点的方法

1.操作标签内的内容
innerHTML：能识别标签
innerText：不能识别标签

2.操作标签属性
setAttribute(属性名, 属性值);
getAttribute(属性名)
removeAttribute(属性名)

什么是 HTML DOM？

什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

3cDOM和htmlDOM异同点

相同：获取节点不变

htmlDOM操作属性

节点对象.属性名（属性名Name）

BOM

bom 是browser object model 也就是浏览器对象模型，BOM由多个对象组成，
其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

顶层对象：window

子对象：location、history、screen、navigator、document、event

js面向对象
创建对象的三种方式

1.利用构造函数

2.利用objec创建原型

3.Json语法

ajax

数据获取四部

//1、创建连接对象
var xhr = new XMLHttpRequest();

//2、打开请求
/*请求方法
* get、post两种
* */
xhr.open(param.method,param.url);

//3、绑定处理函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4){
//回调param对象的success方法传递数据过去
param.success(xhr.responseText);
}
};

//4、发送请求
xhr.send();

ajax的五种状态

ajax的五种状态（readyState ）
　　0 －（未初始化）还没有调用send()方法
　　1 －（载入）已调用send()方法，正在发送请求
　　2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
　　3 －（交互）正在解析响应内容
　　4 －（完成）响应内容解析完成，可以在客户端调用了
readyState 状态说明

Json

Js中如何把一个对象转化为json字符串

var str = Json.stringify(对象);

Js把json字符串变成对象

var p =Json.parse(str);

ES6

let和const命令

模板字符串

用反引号（`）标识

字符串新增方法

trimStart
trimEnd
startWith
endWith

解构赋值