前端基础知识

置顶渣渣辉啊

已于 2023-02-24 00:11:10 修改

阅读量835

点赞数

分类专栏：前端文章标签：前端

于 2022-10-25 15:11:29 首次发布

本文链接：https://blog.csdn.net/m0_46487682/article/details/127513784

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是前端？

浅显的理解：前端就是网站的前台部分，无论是在PC端还是移动端，通过浏览器以页面的形式展示在用户的面前的一些可视化和交互的部分都是前端的工作范畴

前端知识小科普

什么是网页/网站

网站(Website)是指在因特网上根据一定的规则，使用HTML(标准通用标记语言）制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务…”
常见的浏览器内核

浏览器的内核：负责渲染页面

浏览器内核备注
IE Trident ie、猎豹…
firefox Gecko 火狐浏览器
safari Webkit 苹果浏览器
Chrome/Opera Blink Chrome/Opara浏览器内核Blink是webkit的再次开发
万维网联盟(w3c)

浏览器	内核	备注
IE	Trident	ie、猎豹…
firefox	Gecko	火狐浏览器
safari	Webkit	苹果浏览器
Chrome/Opera	Blink	Chrome/Opara浏览器内核Blink是webkit的再次开发

web标准的构成

结构–HTML
表现–CSS
行为–javaScript

html基础知识学习

什么是html?

HTML是一个超文本标记语言，它是一种规范，一种标准，它通过标记符号来标记要显示网页中的各个部分，正因为有规则，浏览器才知道怎样去解读你的文件但需要注意的是，对于不同的浏览器，对同一标记符可能会有差异，因而可能会出现不同的显示效果。
标记语言

什么是标记语言?通俗的说，我们的汉字，当我们给别人说衣服这个词汇的时候，别人马上知道我们指的的物品是什么，就是把这个汉字相当于某种物品的标记。同理，我们前端写好的页面，在浏览器上进行渲染的时候，也有一套规范。例如，当我们写一个p标签的时候，浏览器就知道是一个段落。那为啥说是超文本呢?因为它不仅仅是单纯的文本，还可以放图片，音频，视频等内容。
html语法规范
1. html标签由尖括号把关键词包裹，比如<div></div>
2. 基本上都是成对出现，由开始标签和结束标签组成,也叫“双标签”，比如<p></p>
3. 还有另一类标签比较特殊，是单独出现的，叫“单标签”、“自闭合标签”、“空标签”,
  比如<input>
标签的关系
- 包含关系：html和head，html和body
- 并列关系：head和body

html基本结构

<html>
	<head>
		<meta charset="UTF-8">
		<title>网页标题</title>
	</head>
	<body>
		可视区域
	</body>
</html>

常用的标签

标题标签：h1-h6

表现形式上：都是加粗，字号由大到小，对搜索引擎来说，重要程度逐层递减
段落标签：p
换行标签：br(单标签)
大盒子标签：div
小盒子标签：span
插入图片标签：img
超链接：a
格式化标签：
1. 加粗：strong / b
2. 斜体：em / i
3. 删除线：del / s
4. 下划线：ins / u
预格式化标签：pre

标签属性

标签的属性: 属性提供了有关HTML元素的更多的信息，用来描述某个特征和功能的。可以分为内置属性和自定义属性。

表现形式: 属性总是以键值对的形式出现，比如: name=“value”。

注意的细节:

属性总是在HTML元素的开始标签中规定(跟在关键词的后面)
以键值对的形式出现
元素可以有多个属性，属性和属性之间至少要有一个空格
属性是没有先后顺序的

路径

路径可以分为：绝对路径和相对路径

绝对路径：绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。完整的描述文件位置的路径就是绝对路径。主要有两种形式:

1. fle:///C:/learn

2. https://www.mi.com/

相对路径: 就是指由这个文件所在的路径引起的跟其它文件(或文件夹路径)的路径关系。(以当前的文件做为参照物，去寻找其它文件的一种路径方式，在项目开发中经常使用)

	1. 同级目录：直接写文件名字
	2. 下一级：/
	3. 返回上一级：../，如果要返回多级，就需要写多个../

a标签详解

a标签里面常用的属性

target = “_blank”：在新窗口打开
target = “_self”：在当前窗口打开（默认值）

a标签href里面常用的几个值

具体跳转的网址：href = “http://www.baidu.com”
刷新：href = " "
回到顶部：href = “#”
锚点跳转：作用：点击某个a标签的时候，可以跳转到相应的模块
```
<div id="goods">模块一</div>
<a href="#goods">跳转到模块一</a>
```

table表格标签

table表格的作用

主要用来展示我们的数据，增强可读性

table的基本标签

table：表格标签
tr：代表每一行
td：代表每一个单元格
th：表头标题
caption：表格标题

table的结构

thead、tbody、tfoot

table相关的属性

align 对齐方式：left，center，right
width 宽度
height 高度
cellpadding 内容单元格边框的距离
cellspacing 单元格到单元格的距离
calspan 跨列
rowspan 跨行

三大列表标签

列表的作用

列表：列表主要是用来布局的，除了这个之外，只要是代表咱们列表的版块都可以用

有序列表

<ol>
	<li>吃饭</li>
	<li>睡觉</li>
	<li>打豆豆</li>
</ol>

无序列表

<ul>
	<li>吃饭</li>
	<li>睡觉</li>
	<li>打豆豆</li>
</ul>

表单元素

表单的作用：收集用户信息，便于以后的管理

表单的组成：表单域（form）、表单元素、提示信息

表单域元素

表单域：form

表单域的作用：包含表单的区域，在提交表单信息的时候，可以把这个区域中的信息提交给后台

表单与form常见的属性

属性	属性值	含义
action	url	提交信息的地址
method	post / get	请求方式
name	名称	用于区分一个页面中多个表单域

表单元素

常见表单元素

input：类型的表单元素
button：按钮
select：下拉框表单元素
textarea：文本域

input类常用的表单类型

input常用的属性

单选功能的实现

单选按钮功能实现

对于同一组的单选按钮，我们需要给它们起一个相同的name值，这样浏览器就知道它们是一组了，就可以实现单选功能

请选择您的性别：<br/>
女 <input type="radio" name="sex" value="女">
男 <input type="radio" name="sex" value="男">

文字关联功能的实现

为了增加用户的体验，我们会实现文字关联功能，点击文字的时候，就可以实现选中的input，这个需要用到咱们的label标签。

label功能：当点击文字的时候，可以让和它关联的表单元素被选中

<form action="index.html" method="GET" name="getSex">
	请选择您的性别：<br/>
	<label for="wonman">女</label> <input type="radio" name="sex" value="女" id="wonman">
	<label for="man">男</label> <input type="radio" name="sex" value="男" id="wonman">
</form>

下拉框和文本域

select 下拉框

select 下拉框及常用的属性

selected 默认被选中
disabled 禁止选中

<select>
	<option value="北京" disabled>北京</option>
	<option value="上海" checked>上海</option>
	<option value="河南">河南</option>
</select>

textarea 文本域

文本域：textarea，一般用在评论框或者留言

col：一行显示的文字
rows：规定多少行

<textarea cols="30" rows="10"></textarea>

字符实体

在HTML中不能使用小于号（<)和大于号(>)，这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体(character entities)
字符实体用的不是很多，所以大家不用刻意去记忆，需要的时候直接查文档即可
链接: https: / / www.w3school.com.cn/

<p>你是你&nbsp;&nbsp;我是我</p>

css 篇章

css简介

css是Cascading Style Sheets的简称，我们把它称为“层叠样式表”主要用来美化页面的，可以给网页设置字体大小、颜色、布局等，让网页更加的漂亮。

语法规范

选择器和多条语句组成

p{color:yellow;width:100px;height:100px}

选择器：具体的元素（选中谁）
{}：花括号里面存放选中元素的样式（要给这个元素化哪些妆容）
具体的样式，包含属性名和属性值，它们中间用":"进行连接
声明语句和语句之间我们需要用";"进行分割（一定是英文状态下的）

字体相关样式

定义字体的样式：文字字体，文字大小，文字粗细，文字样式

文字字体：font-family

注意

对多个单词组成的字体，我们需要用双引号包裹起来
如果有多种字体的话，我们需要用英文的逗号进行分割
顺序关系

文字大小：font-size
文字粗细：font-weight
文字样式：font-style

字体的复合属性：

body{
	font:font-style font-weiht font-size/line-height font-family;
}

注意

用font复合属性的时候，必须按照上面的顺序，并且属性之间要有空格隔开
font-size和font-family这两个属性不能省略

文本属性

css的文本属性：主要是定义文本的外观，它包含文本颜色，文本对齐，文本缩进，文本装饰线，行高

属性作用

color 文本设置颜色：英文颜色单词，16进制，rgb

text-align 文本水平对齐方式：left，center，right

text-indent 文本缩进（缩进两个字的距离2em）

text-decoration 文本装饰线

line-height 行高，控制行与行之间的距离

块级元素水平居中

div{
	width:10px;
	height:100px;
	border:5px double green;
	margin:0 auto;
}

清除默认样式

清除默认的margin和padding

*{
	margin:0;
	padding:0;
}

清除列表前面的默认样式

ul,ol{
	list-style:none;
}

css引入的几种方式

行内样式
```
<div style="width:100px"></div>
```
优点：书写方便，权重高

缺点：没有做到结构样式相分离
内嵌样式
```
<style>
	div{
		color:red;
	}
</style>
```
优点：结构样式相分离

缺点：分离不彻底
外链
```
<link rel="stylesheet" href="index.css">
```
优点：完全结构和样式相分离

导入

<style>
	@import url('index.css')
</style>

在实际项目开发中，我们不用

link和@import区别

link除了可以加载CSS外，还可以定义RSS，定义rel连接属性等其他作用；@import只能加载CSS。
加载顺序: link引用的CSS会在页面被加载的时候同时加载；@import 引用的CSS会等到页面全部被下载完再被加载。
兼容性的差别。@import 是CSS2.1提出的，老的浏览器不支持，IE5以上的才能识别（不过现在来说，已经不是问题了，应该很少有使用IE5及以下的浏览器了)。link浏览器都支持。
使用javascript可以控制到link，但@import却无法控制。

css选择器

什么是选择器？

主要用来选取元素的一些方式。比如：给某个人化妆的时候，咱们得叫他一下，知道是哪个人化妆。

选择器可以分为基础选择器和复合选择器。

通配选择器

权重：0

符号：*

* {
	margin: 0;
	padding: 0;
}

标签选择器

权重：1

选择器：标签名

作用：会对这一类都起作用

p {
	color: red;
}

类选择器

权重：10

作用：把具有特定类名的元素都选中

.box {
	color: red;
}

id选择器

权重：100

作用：把具有这个id名字的元素选中

#box {
	color: red;
}

复合选择器

常用的复合选择器

子选择器 >

后代选择器：空格

相邻兄弟选择器：+

通用兄弟选择器：~

并集选择器：，

交集选择器：没有符号，紧紧相邻

伪类选择器

伪类选择器(简称:伪类)通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。伪类选择器比较多，这里咱们介绍下链接伪类选择器和focus伪类选择器。

链接伪类选择器

link 默认链接的颜色
visited 访间过后的颜色
hover 鼠标滑上的颜色
active 鼠标点击上的面色

注意：需要按照一定的顺序，这个顺序在网络上被称为"爱恨原则”，( love hate)

focus伪类选择器

focus伪类选择器：用于选取获取焦点的表单元素

input:focus{
	background: yellow;
}

css三大特性

css三大特性：继承性，层叠性，优先级

继承性

官方解析，继承是一种规则、它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。简单说就是给父元素设置一些属性，子元素 / 后代也可以使用，这个我们称之为继承性。

层叠性

层叠性就是css处理冲突的一种能力。通俗的说就是多种选择器选中了同一个元素，又对相同的属性设置了不同的属性值，这个时候就会发生层叠性。

如果权重相同的话，就看css代码的顺序，后面的会把前面恶属性覆盖
如果权重不相同的话，谁权重大就听谁的

优先级

!important(无穷大) > 行内样式(1000) > id(100) > 类(10) > 标签(1) > 通配符，继承(0)

注意：如果该元素没有直接选中，而是通过继承得到的属性设置，那么不管它的父级权重有多高，该元素的权重都是0

标签分类

块级元素

独占一行
可以设置宽，高，内边距，外边距
如果不设置高度，可以继承父级的宽度
是一个容器或者盒子，里面可以放行内或者块级元素

常见的块级元素：div，p，h1~h6，ul，ol，li等

注意：文字类的元素内不能使用块级元素。
p标签主要用来存放文字，因此p里而不能放块级元素h1-h6也是文字类的块级标签，里面也不能放块级元素

行内元素

注意：行内块也是行内元素的一种

相邻的行内元素可以在一行上
设置宽，高无效，盒子的大小就是自身的内容大小
只能放文字或者其它的行内元素

常见的行内元素：a，span，b，strong，em等格式化标签

注意：a标签里面不能再放a标签

行内块元素

行内块是特殊的行内元素

可以和其它的行内(行内块)元素共占一行，但是中间会出现缝隙
可以设置宽，高
盒子默认的大小就是本身内容的大小

常见的块级元素：img，input，table，video等

标签的相互转换

转换为块级：display:block
转换为行内：display:inline
转换为行内块：display:inline-block

display还有一个值：none，让元素隐藏

盒模型

盒模型是一种写网页的思维模式，每一个元素都可以看成一个盒子。为了方便记忆，我们可以把它想象成手机盒子。手机就是content部分，白色填充物就是padding部分，手机盒子的边框就是border,多个手机盒子之间距离就是margin。

写页面最重要的知识：盒模型，浮动，定位

盒模型主要包括几部分

content：主要内容区域
padding：元素盒子与内容直接的内填充
border：元素盒子的边框
margin：元素与元素之间的距离

注意：对于行内元素，不要用padding-top，padding-bottom，margin-top，margin-bottom

计算盒子的总大小

总盒子的宽度 = content的width + 左右padding + 左右border

总盒子的高度 = content的height + 上下padding + 上下border

盒模型的两种分类

标准盒模型：box-sizing：content-box；(默认)
IE盒模型：box-sizing：border-box；

区别

标准盒模型中，代码里面所写的width和height指的是盒模型中content部分的宽和高
ie盒模型中，代码里面所写的width和height指的是总盒子的宽和高（在实战项目中经常用这个）

面试题

外边距合并

外边距塌陷（穿透）

描述：

有一个大盒子里面包含小盒子，如果大盒子没有设置padding-top或者是border-top，直接给小盒子设置margin-top，大盒子会跟着小盒子一起向下移动，这个现象就是margin值穿透问题。

解决办法:

给大盒子加border-top:1px solid transparent ;
给大盒子增加overflow:hidden;
既然margin-top有这样的问题，我们可以给大盒子增加padding-top，来规避这个问题。
还有浮动、固定定位、绝对定位、行内块等也都可以解决这个问题

外边距合并

描述：

有两个兄弟元素: box1，box2垂直排列，我给box1设置margin-bottom:30px;再给box2设置margin-top:100px;这两个元素之间的距离并不是两者之和，而是取最大的那个值。就是margin值穿透问题。

解决办法：

对于同一侧的盒子距离，我们只给某个元素设置即可

两个块级元素转换成行内块存在的问题

解决的办法：

消除换行符
给父元素设置font-size：0

img常见的缝隙问题

解决的办法：

把img转换为块级
给父盒子设置一个固定的高度

margin和padding值写法规律

无论是margin还是padding都遵循这样的规律，margin和padding都有四个方向：

padding-left（padding-left）
padding-right（padding-right）
padding-bottom（padding-bottom）
padding-top（padding-top）

复合写法：

padding：10px 20px 30px 40px；（四个值的时候，按照顺时针：上右下左）
padding:10px 20px 30px；(三个值得时候：上、左右、下)
padding:10px 20px；(两个值：上下、左右)
padding: 10px；(一个值：四个方向都是10px)

background相关知识

值描述
background-color 背景颜色
background-image 背景图片
background-repeat 背景图像平铺的方式
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景位置
background-size 控制背景图片的大小

background复合写法

background: background-color background-image background-repeat background-attachment background-position

浮动

浮动的出现

想让块级元素在一行显示
有很多的布局效果，普通文档流是无法完成的，实现起来也特别麻烦

浮动的值

left 元素左浮动

right 元素右浮动

none 默认值，元素不浮动

浮动的特点

脱离了普通文档流
浮动的元素具备行内块的特性
- 可以左右排列
- 即使是行内元素，浮动浮动之后写大写也可以起作用
- 即使是块级元素，如果不写宽度，不在默认占满父盒子，而是自身内容的决定
- 浮动的元素碰到普通文档流的边缘就会停下类，浮动的元素之后影响它后面的普通文档流元素（对前面不造成影响）

浮动技巧

浮动和普通文档流父盒子搭配使用：

先用普通文档流的父盒子排列好上下位置，里面的小盒子咱门再采用浮动进行左右排列
一浮全浮：一个元素浮动了，它的兄弟元素都要浮动

清除浮动

问题：浮动造成父级盒子塌陷的问题

解决方法：

给父级加高度
给父级添加overflow: hidden;
隔墙法，用clear清除浮动造成的影响

通过伪元素清除浮动

.clearfix:after {
	content:"";
	font-size:0;
	display:block;
	visibility:hidden;
	clear:both;
}
.clearfix{
	*zoom:1;
}

浮动的拓展

浮动的初心：

最早发明浮动的时候，就是为了实现图片的环绕排列，浮动的元素，层级会高于普通文档流的，但是它不会压住文字，文字会进行环绕性排列

定位

为什么会有定位，它的应用场景有哪些?

定位的元素，可以随心所欲的移动位置，但不会影响其它元素，这些是普通文档流、浮动所没有的，常用的场景，比如: banner图、快速导航…

目的：不论哪种定位，都是为了让某个元素摆放到设计的位置。

定位的组成

定位的方式 + 具体的方向值

定位的分类

静态定位：position：static；（默认情况下就是此种）
相对定位：position：relative;
决定定位：position：absolute;
固定定位：position：fixed;
粘性定位：sticky

定位的方向值

left：距离参照物左边的距离
right：距离参照物右边的距离
top：距离参照物顶边的距离
bottom：距离参照物底边的距离
以上的值可以是正数、负数、0

相对定位

参照物是自身，参照自己原来的位置进行的移动
另一个比较重要的作用：给绝对定位做参照物

相对定位的特点：

没有脱离普通的文档流，位置还在。

绝对定位

参照物是其它元素（祖先元素），绝对定位关于参照物的规则
只要是祖先级儿素，并且里面有绝对定位或固定定位或相对定位就满足了参照物条什
如果多个祖先级都满足条件，按照“就近原则”，谁离那个元素最近，谁就是参照物
如果祖先级元素都没设置参照物条件，那参照物就是body

绝对定位的特点

绝对定位的元素，脱离了普通文档流，不再占位，层级高于普通文档流的层级
绝对定位的元素，即使是行内元素，写宽、高也可以起作用
绝对定位的元素，如果是块级元素，不写宽度，就是自身内容大小

固定定位

固定定位主要参照浏览器窗口的。

不论滚动条怎么滚动，设置固定定位的元素位置始终相对于浏览器窗口是不动的。

经常用来做固定导航

粘性定位

position：sticky是css定位新增属性。可以说是相对定位relative和固定定位fixed的结合，它主要用在对scroll事件的监听上。简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)。position:sticky这时的效果相当于fixed定位，固定到适当位置.。

目前兼容性不是很好