目录
前端与后端简介
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 空格
& &
¥ ¥
® 注册
© 商标
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.标签操作:样式操作、位置操作、尺寸操作、文本操作
标签:浏览器,对象,标签,前端,操作,选择器,属性 From: https://www.cnblogs.com/040714zq/p/16633553.html