前端知识点

最新推荐文章于 2024-06-20 15:06:48 发布

一苇0527

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量1k

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/weixin_57552069/article/details/139095681

版权

前端

html是什么:超文本标记语言

1.简单的HTML页面架构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<- 网页信息->
		<title></title>         
	</head>
	<style>
	样式
	</style>
	<body>
	这里面是写标签
	</body>
</html>

2.HTML常见标签

1.标题标签

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>6</h6>
</br> 换行标签
<hr>换行线标签

2.文本属性

<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
<del></del> 删除线
<font></font> 规定字体属性

a标签

<a href="http://www.baidu.com" target="self">百度</a>默认。在相同的框架中打开被链接文档。
<a href="http://www.baidu.com" target="_blank">百度</a>在新窗口中打开被链接文档。
<a href="http://www.baidu.com" target="_parent">百度</a> 在父框架集中打开被链接文档。
<a href="http://www.baidu.com" target="_top">百度</a> 在整个窗口中打开被链接文档。

img 标签

<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.cn_mIqJN0Td_0Ono0xMEsQHaLL?rs=1&pid=ImgDetMain"  alt="maomi">
属性：
alt 规定图像的替代文本。
src  规定显示图像的url
width 规定图片的高度
height 规定图片的宽度

2.8.table 表格

<th>开头</th>
<tr>行</tr>
<td>表格</td>：
·······················································································
<table border="1">
    <caption>成绩单</caption>
  <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>数学</td>
    <td>90</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>英语</td>
    <td>85</td>
  </tr>
  <tr>
    <td>小华</td>
    <td>历史</td>
    <td>88</td>
  </tr>
</table>

2.9.列表标签

无序列表
<ul>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
</ul>
<ol type="1"> 
			<li>内容</li>
			<li>内容</li>
			<li>内容</li>
</ol>

form表单：

form表单 规定当提交表单时向何处发送表单数据
method 提交的方法有 get、post
规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值
		application/x-www-form-urlencoded
		multipart/form-data
		text/plain
input标签
name：同样是表示的该文本输入框名称。
size：输入框的长度大小。
maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值
readonly：表示该框中只能显示，不能添加修改。
input的类型
type=password  密码输入框
type=file 文件上传
type=hidden 隐藏域
button 按钮
checkbox 复选框
radio 单选框
type=submit 提交按钮
type=reset   重置按钮


·············································································
 <div class="login-box">
        <h2>登录</h2>
        <form action="/login" method="post">
            <div class="user-box">
                <input type="text" name="username" >
                <label>账号</label>
            </div>
            <div class="user-box">
                <input type="password" name="password">
                <label>密码</label>
            </div>
            <button type="submit">登录</button>
        </form>
        <div class="signup-link">
            <a href="#">忘记账户</a>
           <a href="#">忘记密码</a>
        </div>
    </div>

其他标签

<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
css样式：size 字体的大小
	             color 字体颜色
可以使用内联标签
<div style="size: 10px; color:aqua"></div>
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta name="viewport" >
<link > 标签定义文档与外部资源的关系。
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script>引入js文件
<script>js代码</script>

面试题

应用程序开发中的前端和后端之间有什么区别？

前端和后端是任何应用程序的两个关键方面。前端是用户所看到的，包括按钮、复选框、图形和文本消息等视觉元素。允许您的用户与您的应用程序进行交互。后端是使您的应用程序正常运行的数据和基础设施。为您的用户存储和处理应用程序数据。

应用程序前端的工作原理是什么？

前端_一词是指用户可以直接与之交互的图形用户界面（GUI），例如导航菜单、设计元素、按钮、图像和图表。采用技术术语，用户看到的带有多个 UI 组件的页面或屏幕称为_文档对象模型（DOM）。
三种主要的计算机语言会影响用户与前端的交互方式：

HTML 定义前端结构和不同的 DOM 元素
层叠样式表（CSS）定义 Web 应用程序的样式，包括布局、字体、颜色和视觉样式
JavaScript 通过操作 DOM 增加一层动态功能

JavaScript 可以触发页面上的更改并显示新信息。这意味着前端可以处理基本的用户交互（或请求），例如显示日历或检查用户是否输入有效的电子邮件地址。前端将更复杂的请求传递给后端。

应用程序后端的工作原理是什么？

应用程序的后端有时称为_服务器端_，用于管理 Web 应用程序的整体功能。当用户与前端交互时，此交互会以 HTTP 格式向后端发送请求。后端处理请求并返回响应。
后端处理请求时，它通常会与以下组件进行交互：

用于检索或修改相关数据的数据库服务器
执行用户所请求任务子集的微服务
用于收集额外信息或执行其他功能的第三方 API

后端使用多种通信协议和技术来完成请求。此外，后端还能同时处理数千个不同的请求。后端结合并发和并行技术，例如在多个服务器上分配请求、缓存和数据复制。

浏览器的主要功能：

是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置。

浏览器的主要组件包括：

1.用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2.浏览器引擎－用来查询及操作渲染引擎的接口。
3.渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5.UI后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6.JS解释器－用来解释执行JS代码。
数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

浏览器输入URL到显示页面发生了什么？

1.1 在浏览器中输入url

用户输入url，例如http://www.feng.com。其中http为协议，www.feng.com为网络地址，及指出需要的资源在哪台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，一串数字哦我们很容易会记错，但是为了让计算机理解这个地址还需要把它解析为IP地址。

扩展知识：

域名

是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）

域名的分类

二级域名分两种
在国际顶级域名下的二级域名
国际顶级域名下二级域名，二级域名一般是指域名注册人选择使用的网上名称，如“yahoo.com”；上网的商业组织通常使用自己的商标、商号或其他商业标志作为自己的网上名称，如“microsoft.com”。
国家顶级域名下二级域名
在国家顶级域名之下二级域名一般是指类似于国际顶级域名的表示注册人类别和功能的标志。例如，在“．com.cn”域名结构中，“.com”此时是置于国家顶级域名“.cn”下的二级域名，表示商业性组织，以此类推。
域名发现对于安全测试意义
可以给安全测试提供更多的测试点，方便获取更多相关信息

1.2 查看浏览器缓存

如果访问过该url，会先进入浏览器缓存中查询是否有要请求的文件（浏览器缓存是在本地保存资源副本）。
当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。如果缓存查找失败，就会进入网络请求过程了。
网络图片：

在network中会标注该请求是在服务器中请求的还是浏览器缓存中的。
一条域名的DNS记录会在本地有两种缓存：浏览器缓存和操作系统(OS)缓存。

1.2.1 浏览器缓存 –

浏览器会缓存DNS记录一段时间。一般是2分钟到30分钟不等。查找浏览器缓存时会按顺序查找: Service Worker–>Memory Cache–>Disk Cache–>Push Cache。

Service Worker：

是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

Memory Cache：

内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快，内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

Disk Cache：

存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。

Push Cache：

Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。
1.2.2系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用获得系统缓存中的记录（windows里是gethostbyname）。
1.2.3 路由器缓存** – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
1.2.4 ISP DNS 缓存** – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
1.2.5 递归搜索** – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

1.3 DNS域名解析

如果没有访问过该url，就会进行DNS域名解析了。
IP地址和域名一样都是用来做网络标识的，域名和 IP 地址是一一对应的映射关系。

DNS 是什么

DNS：Domain Name System域名系统（基于RFC规范解释），是万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

DNS解析过程：

1.3.1 用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端。
1.3.2 浏览器将接收到的url中抽取出域名字段，就是访问的主机名，比如www.feng.com, 并将这个主机名传送给DNS应用的客户端.
1.3.3 DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）。
1.3.4 该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址。
1.3.5 一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接。

1.4 获取端口号

可能域名下有多个端口号，对应着不同的网络功能，所以在DNS解析之后，浏览器还会获取端口号。

1.5 建立TCP连接

TCP连接，就是耳熟能详的三次握手好朋友，四次挥手是路人。

TCP连接过程：

1.5.1 服务端通过socket，bind和listen准备好接受外来的连接，此时服务端状态为Listen。
1.5.2 客户端通过调用connect来发起主动连接，导致客户端TCP发送一个SYN（同步）字节，告诉服务器客户将在（待建立的）连接中发送的数据的初始序列号，客户端状态为SYN_SENT。
1.5.3 服务器确认（ACK）客户的SYN，并自己也发送一个SYN，它包含服务器将在同一连接中发送数据的初始序列号。
1.5.4 客户端确认服务的ACK和SYN，向服务器发送ACK，客户端状态ESTABLISHED。
1.5.5 服务器接收ACK,服务器状态ESABLISHED。

1.6 HTTP请求

既然我们握手成功了，连接到了Web服务器，浏览器会根据解析到的IP地址和端口号发起HTTP请求。

详细的http请求

1.6.1 http协议向服务器发送请求，发送请求的过程中，浏览器会向Web服务器以Stream(流)的形式传输数据，告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源。
1.6.2 服务器接收到浏览器传输的数据后，开始解析接收到的数据，服务器解析请求里面的内容时知道客户端浏览器要访问的是应用里面的哪这个Web资源，然后服务器就去读取这个Web资源里面的内容，将读到的内容再以Stream(流)的形式传输给浏览器。

1.7 关闭TCP

网络图片：

TCP连接中止过程：

1.7.1 某端首先调用close，成为主动关闭端，向另一端发送FIN分节，表示数据发送完毕，此时主动关闭端状态FIN_WAIT_1；
1.7.2 接收到FIN的是被动关闭端，FIN由TCP确认，先向主动关闭端发送ACK，作为一个文件结束符传递给接收端应用进程（放在已排队等候该应用进程接收到的任何其他数据之后），因为FIN的接收意味着接收端应用进程在相应连接无额外数据可接收，接收端状态CLOSE_WAIT；主动关闭端接收到ACK状态变为FIN_WAIT_2；
1.7.3 一段时间后，接收端接收到这个文件结束符的应用进程调用close关闭套接字，向主动关闭端发送FIN，接收端状态为LAST_ACK；
1.7.4 主动关闭端确认FIN，状态变为TIME_WAIT，并向接收端发送ACK，接收端接收到ACK关闭TCP，而主动关闭端一段时间后也关闭TCP；

1.8 浏览器渲染

当浏览器获得一个html文件时，会自上而下的加载，并在加载过程中进行解析渲染。

解析过程：

1.浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2.将CSS解析成 CSS Rule Tree 。
3.根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5.再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

1.9 渲染过程

1.9.1 浏览器会解析HTML文件，生成DOM树，解析CSS文件，生成CSSOM树。
1.9.2 将DOM树和CSSOM树结合，生成渲染树。
1.9.3 根据渲染树进行布局（文档流、盒模型、计算大小和位置）。
1.9.4 把各个节点绘制到页面上。

一苇0527

关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
前端知识点

并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。1.6.2 服务器接收到浏览器传输的数据后，开始解析接收到的数据，服务器解析请求里面的内容时知道客户端浏览器要访问的是应用里面的哪这个Web资源，然后服务器就去读取这个Web资源里面的内容，将读到的内容再以Stream(流)的形式传输给浏览器。1.6.1 http协议向服务器发送请求，发送请求的过程中，浏览器会向Web服务器以Stream(流)的形式传输数据，告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源。
复制链接

扫一扫