web前端基础

最新推荐文章于 2023-07-05 21:29:09 发布

想飛の烏龜

最新推荐文章于 2023-07-05 21:29:09 发布

阅读量5.9k

点赞数

分类专栏：测试开发文章标签：测试类型软件测试

本文链接：https://blog.csdn.net/m0_58526159/article/details/123350675

版权

测试开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

web前端基础

常见浏览器

主流浏览器

浏览器	渲染引擎	JS引擎
IE	Trident	JScript->Chakra
Firefox	Gecko	Monkey系列
Chrome	Webkit ->Blink	V8
Safari	Webkit	SquirrelFish系列
Opera	Pristo->Blink	Carakan

渲染引擎：将css和HTML代码渲染成图形界面
js引擎：解析js代码
v8引擎为解析js代码最快的js引擎
其他浏览器：360安全浏览器、360极速浏览器、搜狗浏览器、UC浏览器、QQ浏览器、2345浏览器、edge浏览器等等

什么是前端、后端？

HTML格式：

网页格式：开头，一对尖括号包含，成对出现；顶层标签为html，由不可见的head和可见的body构成

HTML文档后缀名

.html

.htm

html基础标签

html
head
body
h1 这是标题1
h2 这是标题2
h3 这是标题3

p 这是段落

HTML元素

以HTML标签开始
以HTML标签结束

HTML标题

<html> <!-- 定义HTML文档 -->
<head> <!-- 这是头 -->
<body> <!-- 定义文档的主体 -->

<!-- 定义标题 -->
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>

<p>
    这是段落
</p>

<!-- 这是一段注释 -->
    
<hr>    <!-- 水平线 -->

HTML 不区分大小写的

(前端颜色库) [https://flatuicolors.com/]

接口请求方法

get

post

什么时候是用get方法，什么时候用post方法？

表单在被提交的时候是被动，而且没有敏感信息，可以get

表单正在更新数据，或者有敏感信息（如密码），可以post

get

http://localhost:63342/testdemo/test01/u=825057118,3516313570&fm=193&f=GIF.jpg?fname=zhangsan&lname=sss

http://localhost:63342/testdemo/test01/u=825057118,3516313570&fm=193&f=GIF.jpg?fname=zhangsan&password=123456

post

http://localhost:63342/img/u=2405382010,1555992666&fm=193&f=GIF.jpg

CSS基础知识

css：是层叠样式表
如何显示HTML元素
样式通常存储在样式表中

格式：使用 [属性:值 ]的方式定义样式

样式分类：

行内样式

内部样式

外部样式

css引用的方式，引用关键字

行内样式

内部样式 style标签 src

外部样式 link标签

国家/地区	语言代码
简体中文（中国大陆）	zh-CN
繁体中文（台湾地区）	zh-tw
繁体中文（香港）	zh-hk
简体中文（新加坡）	zh-SG
英文（美国）	en-us
英文（英国）	en-gb
英文（全球）	en-ww

css选择器

常用选择器

标签
类
ID
组合

输入网https://www.baidu.com址后，会发什么？

URL解析
- 判断你的网址是否合法URL（https://www）还是一个关键词，根据你的输入内容进行自动完成字符编码等操作。
- http/https 的解析
DNS查询
- 浏览器缓存-操作系统缓存-路由器缓存-ISP DNS缓存-根域名服务器
TCP连接
- tcp/ip 分四层：应用层、传输层、网络层、链路层
处理请求
- 服务器处理请求
  - 验证是否匹配虚拟主机
  - 验证虚拟主机是否接受此方法
  - 验证该用户可以使用该方法（ip地址、身份信息）
接受响应
- 浏览器接受响应
渲染页面
- 浏览器内核渲染

JavaScript基础学习

JavaScript简称js

JavaScript是什么？

是一种轻量级的编程语言。
是可插入HTML页面的编程代码。
插入HTML页面后，可由所有的现代浏览器执行。

JavaScript文档后缀

JavaScript是要区分大小写

编程语言

你知道的编程语言有哪些？

java/Android
c/C++
python
php
go
C#
.net
swift/Objective-C

（高级语言）

汇编（符号语言）

机器语言（二进制）

document.write("<h1>我想玩游戏</h1>")  //这是插入到body里面
console.log("你猜我快乐不快乐！");    //这是插到控制台里面
window.alert("请注意未满18周岁不要看，太吓人了");  //弹出警告
document.getElementById("demo").innerHTML = "开始你的表演";   //写入HTML中

<script></script>  <!--告诉浏览器这是脚本开始和结束的标签-->

<!--把一个JavaScript函数放置HTML页面的<head>标签里。在点击button按钮才会调用-->
<head>
    <meta charset="UTF-8">
    <title>这里学习js</title>
    <script>
    function m() {
        document.getElementById("demo").innerHTML="今天真的很适合学习";
    }
    </script>
</head>

JavaScript 语句

分号；

分号是用于分隔JavaScript语句。

通常我们在每条语句可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

JavaScript代码块

js可以分批次组合起来。

代码块是以左花括号开始，以右花括号结束。

代码块的作用是一并执行语句序列。

js数据类型
- 基本类型：字符类（string）、数字（Number）、布尔（boolean）、对空（Null）、未定义（Undefined）、Symbol
- 引用类型：对象（Object）、数组（Array）、函数（Function）
string（字符串）
```
    var ww="您好，世界！";
    var wa="hello wrold!";
    document.write(ww + "<br>")
    document.write(wa + "<br>")
```
js变量
- 变量是用于存储信息的容器。
注意：

变量必须字母开头

变量也能以$和__开头（不推荐）

变量名称对大小写敏感（y和Y是不同的）

JavaScript关键字

具体关键字自行百度

命名（变量名）不要跟关键字一致