学习笔记系列开头惯例发布一些寻亲消息,感谢关注!
链接:https://baobeihuijia.com/bbhj/
-
关系
- 客户端:对连接访问到的前端代码进行解析和渲染,就是浏览器的内核
- 服务器端:按照规则编写前端界面代码
- 解析标准就是Web标准
- HTML:内容
- CSS:外观
- JavaScript:动态行为交互
- 解析标准就是Web标准
-
html:操作系统会将HTML文件默认被浏览器识别
<html> <head> <title>快速</title> </head> <body> <h1>photo</h1> <img src="img/1.jpg" width="300" height="200"> <a href="www.csdn/" target="_self">新浪政务</a> > 正文 # 水平分割线 <hr></hr> <span></span> 是没有语义的行组合标签 </body> </html>
-
表格
-
表单
-
属性
-
action: 后台接收的地址
-
get: url后边拼接,url有长度限制
-
post:在消息体中传递,参数不限大小
<body> <form action="" method="get"> name: age: </form> </body>
-
-
表单项
-
input:
-
select
-
textarea
-
-
-
-
CSS
-
格式
-
行内样式:写在标签的style属性中
-
<h1 style = "xxx:xxx;xxx:xxx;">
-
内嵌样式:写在html页面的head中
-
<style> h1{ xxx:xxx; } </style>
-
外联样式:写在单独的css文件,通过link引入
-
-
css选择器:(id>class>元素)
- 元素选择器 h1
- class选择器(html中的class可以重复) .class
- id选择器(html中的id不能重复) #id
-
-
JavaScript(探测页面行为,更好地动态交互体验)
-
js引入
-
内部脚本
<script> alert("hello js") </script>
-
外部脚本
<script src="js/demo.js"></script> alert("hello js")
-
-
JS基础
// 输出语句 window.alert(); 警告框 document.write(); HTML页面输出 console.log();浏览器控制台 // var定义的变量是全局变量 // var定义可以重复,会覆盖 <script> var a = 20; a = "张三"; alert(a) </script> // let定义是一个局部变量 // 不可以重复 <script> { let x=1 alert(x) } </script> // const声明只读常量,值不能更改
-
变量类型
number string boolean null undefined (变量没被赋值,自动为undefined) var a = 20; typeof(a); == 类型不同,值同就为true === 类型和值都相同为true // 函数可以传递任意数量的参数 // 函数定义一 function add(a,b){ return a+b; } var result = add(10,20); // 函数定义二 var add = function(a,b){ return a+b; } var result = add(10,20);
-
数据类型
-
Array
var arr = new Array(1,2,3,4);
arr[2] = 3;arr.length
foreach()仅遍历有值的元素
push(7.8.9)
// 从下标2开始删除两个
splice(2,2) -
String
var str = new String("");
var str = "";
str.length
str.charAt(3);// 获取索引位置为3的值
str.indexOf("lo");// 检索字符串的位置
var s = str.trim()//去除字符串左右空格
str.subString(start,end); // 含头不含尾 -
js自定义对象
var user = {
name:"Tom",
eat:function(){
alert("json");
}
sleep(){
alert("sleep");
}
};user.eat();
user.name; -
json
var stu = '{"name":"tom","age":20,"addr":["beijing","shanghai"]}';
// JSON转化为JS对象
var jsObject = JSON.parse(stu);
jsObject.name;//JS对象转为JSON字符串,即{"name":"tom","age":20,"addr":["beijing","shanghai"]}
var jsonStr = JSON.stringify(jsObject); -
BOM对象:与浏览器沟通
window对象
window.alert("xxxxx");//返回值是true和false var flag = window.confirm(); //定时器 setInterval setTimeout
location对象
location.href //获取地址栏的url信息
location.href = "www.baidu.com" // 会跳转到新的地址 -
DOM:将html语言各个组成部分封装为对象,从而实现页面修改
id获取对象
var img = document.getElementById('img');
标签获取对象
var divs = document.getElementsByTagName('div');
根据name属性获取对象
var ins = document.getElementsByName('hobby');
根据class属性获取对象
var ins = document.getElementsByClassName('cls');
举例,innerHTML可以识别html代码
var ins = document.getElementsByName('hobby');
for(let i=0;i<ins.length;i++){
ins[i].innerHTML += "very good"
}
-
-
事件绑定
-
-
js的高级框架Vue(view和model之间传递和渲染的方法)
1、链接到vue <script src="js/vue.js"></script> 2、创建vue对象,给出管控区域以及data new Vue({ el:"#app", data:{ url:"http://www.baidu.com" } }) new Vue({ el:"#app", data:{ }, methods:{ handle:function(){ alert("点出来了"); } } }) 3、 <div id="app"> # html组件绑定model中的数据用法 <a :href="url">链接1</a> <a v-bind:href="url">链接2</a> # 表单组件绑定model中的数据用法 <input type = "text" v-model = "url"> </div> <div id="app"> # 表单组件绑定model中的函数用法 <input type = "button" value="点击" v-on:click="handle()"> </div>
-
Ajax(前后端交互get/post)
- 数据交互:ajax可以给服务器发送请求,获得服务器响应的数据
- 异步交互:不刷新页面,与服务器交换数据并更新部分页面
- Axios(ajax的封装和简化)
-
Vue标准化开发环境 vue-cli需要下载,就会初始化一个前端框架
- main.js
- App.Vue(引用自己写的的vue)
- 自己的vue:三层架构:template/script/style
- Vue组件库Element:先找到布局确定整体大小,然后找组件直接赋值粘贴到自己的vue中即可
- 项目目录下安装axios,然后import axios就可以实现异步交互
- Vue可以通过route重定向
-
Nginx
-
- 反向代理
- 负载均衡
- 轮询法(默认方法)
- weight权重模式(加权轮询)
- ip_hash
- 动静分离
- 负载均衡
- 反向代理
-
Http协议
-
基于TCP协议:三次握手
-
一次请求一次响应,不同请求之间数据不共享
-
请求数据格式
- 请求行(请求方式、资源路径、协议以及版本号)
- 请求头:请求路径以及浏览器版本号
- 请求体:post的请求参数
-
get和post请求的区别:get参数会写在资源路径,没有请求体,post会写在请求体中
-
响应数据格式
- 响应行(协议、状态码、描述)200 OK
- 响应头:响应数据的类型;响应数据的长度;采用的压缩算法;客户端的缓存时间;cookie
- 响应体:响应数据给到前端
-
解析协议:按照字符串格式解析即可
-
-
Tomcat工作原理:搜下边这篇