首页 > 其他分享> > 前端-总

前端-总

2022-08-28 20:32:16 作者：互联网

前端与后端简介
HTTP超文本传输协议
HTML-超文本标记语言
CSS-层叠样式表
JavaScript编程
BOM浏览器对象模型
DOM文档对象模型
事件
jQuery类库

前端与后端简介

1.前端：针对用户展现给用户的界面

2.后端：不与用户打交道真正的核心逻辑运行层面

注：查看前端01

HTTP超文本传输协议

1.原因：浏览器需要兼容所有的服务器资源消耗过大因此规定了所有的服务器都要遵守一些协议如HTTP协议、HTTPS协议、FTP协议

2.HTTP四大特性：基于请求响应、基于TCP、IP协议之上、无响应、无状态

请求数据：请求体、请求首行、换行、请求体

响应数据：响应体(响应状态码)、响应首行、换行、响应体

3.响应状态码：1xx、2xx、3xx、4xx、5xx

注：查看前端01

HTML-超文本标记语言

1.HTML：所有浏览器都需要的语言

2.页面：浏览器展现的页面

3.注释语法：

4.语法结构：

<html>
     <head>
    </head>
    <body>
    </body>
</html>

5.标签

5.1 布局标签：div  p
5.2 基本标签：h1~h6  标题标签
            p	  段落标签
            span   行内标签
            hr		水平分割线
            br      换行符
            u      下划线
            i		斜体
            s		删除线
            b		加粗
5.3 符号标签：gt     大于号
            lt	   小于号
            &emsp   空格
            &amp	&
            &yen     ￥
            &reg		注册
            &copy   商标
5.3 列表标签
    无序列表：  ul  li
    有序列表：  ol  li
    段落        dl  dt  dd
5.4 表格标签：table thead tbody tr td tfoot 
5.5 form表单标签：input select option 
5.6 按钮标签：button submit reset
5.7 连接标签：a
5.8 图片标签：img
注标签分为：单标签<a>  双标签<p></p>

6.属性

6.1 通用属性：id  class 
6.2 表格属性：align cellpandding bgcolor
6.3 表单属性：onclick action method name target
6.4 表单input标签属性/label：text email password radio checkbox file hidden image button submit reset color date time value name
6.5 下拉框select标签属性：multiple size
6.6 option属性：disabled selected value
6.7 文本框灰色二次提醒属性：placeholder
6.8 radio、checkbox单选、多选默认值属性：selected
6.9 select下拉框默认值属性：selected

CSS-层叠样式表

1.简介：用来展示HTML等文件的样式

2.语法结构：

选择器{
   属性名1：属性值1   p{color:green}
}

3.注释语法

/*注释信息*/

4.编写方式：head标签style标签中、head标签link标签引入文件(需要创建css文件)、直接在标签内使用style属性编写

5.选择器：标签选择器、类选择器、属性选择器、id选择器、组合选择器、分组与嵌套、伪元素选择器、伪类选择器

6.选择器优先级：就近原则(标签内>id>class>标签)

7.字体操作：

7.1 高宽(height、width)
7.2 字体(颜色、粗细、对齐、大小、缩进、其他字体装饰操作)

8.盒子模型

本质：一个盒子

构成：边距margin、边框border、填充padding、内容content

9、背景操作-backgroud：颜色、图片

10.边框操作-border：高宽、样式、颜色(圆形边框：border-radius:50%)

11.元素隐藏-display：元素隐藏且不占任何空间

12.元素浮动：浮动与平面之上(float)

父标签塌陷解决办法：
.clearfix:after{
    content:"";
    display:block;
    clear:both
}

13.溢出属性：内容数据大于元素框

解决办法：hidden-内容被裁减 只剩元素框中的内容
        scroll-滑动元素框可见所有内容 没有超出时显示滚动条
        auto-如果被修剪 滑动元素框可见 没有超出不显示滚动条
        inherit-从父元素继承overflow属性的值

14.定位属性：无定位static、相对定位relative、绝对定位absolute、固定定位fixed

15.对象层叠顺序z-index：z-index值越大浮与越上(对象需要被确认)

JavaScript编程

1.简介：一门编程语言

html界面引入JS的方式：style标签scrip中直接写入 外部引入js文件
				   script标签对象.src = "文件路径
 注释：//  /*多行注释*/
编写JS代码的地方：pycharm 浏览器

2.变量与常量(let/var const)

3.数据类型：数值(number)、字符串(string)、布尔值(Boolean)、对象(数组、自定义对象)(object)

4.运算符：算数运算符(注：++ --位置)、比较运算符(注：=== !==)、逻辑运算符(&& || !)

5.流程控制：分支结构、循环结构、三元运算

6.函数：普通函数、匿名函数、箭头函数

7.名称空间与作用域

查找变量名：内部>局部>全局

8.内置对象：自定义、Date时间对象、JOSN序列化对象、RegExp正则对象、Math对象(内置函数)

BOM浏览器对象模型

1.BOM：通过JS代码与浏览器交互

2.浏览器页面操作

3.弹框操作(警告框-alert 确认框-confirm 提示框-prompt)

4.计时事件：在一定的时间间隔之后执行代码

DOM文档对象模型

1.DOM：是一套对文档的内容进行抽象和概念化的方法当页面被加载时浏览器会创建页面的文档对象模型

2.HTML DOM树：所有HTML中的标签形成的状态树进行标签查找及及节点操作以及JS属性样式等操作

3.标签查找

4.节点操作：创建节点、添加节点、删除节点、替换节点、属性节点

5.文本操作：添加文本

6.属性操作：删除类、添加类

7.样式操作：通过js对css中的样式操作

事件

1.可以理解为给HTML标签绑定一些额外的功能能够触发js代码的运行

2.分类：onclick、ondblcick......具体查看前端05

3.绑定方式：在标签内部指定创建函数(需要定义函数名)

查找标签点方法=function绑定

4.关键字this：当前操作的标签对象

jQuery类库

1.jQuery：兼容多浏览器的JavaScript编程

2.导入方法：本地导入、网络CDN操作

3.版本：1.x 2.x 3.x 最新版本(3.6.0)

4.对象：jQuery对象：使用$ 并且拥有jQuery所有方法

5.标签查找：选择器

id选择器、类选择器、组合选择器、属性选择器

6.标签操作：样式操作、位置操作、尺寸操作、文本操作

标签：浏览器,对象,标签,前端,操作,选择器,属性
来源： https://www.cnblogs.com/040714zq/p/16633553.html