前端初探：Day50的启示

发表时间: 2023-09-27 20:44

前端三剑客

HTML:架构

html（超文本标记语言）是一种用于创建和组织网页内容的标记语言。它由一系列的标签组成，这些标签定义了网页的结构和样式。

CSS：外观

CSS（层叠样式表）是一种用于定义网页样式和布局的样式表语言。通过使用CSS，可以对HTML文档中的元素进行样式设置，如字体、颜色、背景、边框等。CSS通过选择器指定要应用样式的元素，并使用属性值对其进行设置。CSS的样式规则可以直接写在HTML文件中的<style>标签内，也可以通过外部CSS文件进行引用。通过将HTML和CSS结合使用，可以实现更丰富和美观的网页设计效果。

JavaScript：动作

JavaScript是一种用于编写交互式网页的脚本语言。它可以在网页上实现动态效果、用户输入验证、数据处理等功能。JavaScript可以直接嵌入到HTML文件中，也可以作为外部脚本文件进行引用。通过JavaScript，可以操作HTML元素、响应用户事件、进行数据处理和网络通信等操作。它是一种基于对象和事件驱动的语言。

当我们在浏览器窗口输入网址并回车的时候会发生哪几件事？

1、浏览器朝服务端发送请求
2、服务端接收请求
3、服务端返回相应的响应
4、浏览器接收响应根据特定的规则渲染页面展示给用户看
# 任何的网络通信底层都是socket
之前所谈到过的程序开发的架构：
cs（Client--Sever）架构和bs（Browser--Server）架构，其实本质都是cs架构，bs架构只不过是把浏览器当成了客户端来和服务端做交互。

HTTP协议

HTTP（Hypertext Transfer Protocol）是一种用于客户端和服务器之间进行通信的协议。它是基于请求-响应模型的协议，用于在Web浏览器和Web服务器之间传输超文本（如HTML、CSS、JS）和其他资源。

四大特性：

四大特性：
1、基于请求响应
2、基于tcp/ip作用于应用层之上的协议
3、无状态（不保存用户的消息）
4、无连接、短连接：请求一次响应一次，之后就没连接关系了
长连接：建立连接之后默认不断开了。可以使用 websocket来建立长连接。

请求数据的格式：

1、请求行：包含请求方式、URL和HTTP协议版本。
2、请求头部：包含各种请求相关的元数据，如Accept、Content-Type、User-Agent等一大堆的k,v键值对。
3、空行：用于分隔请求头部和请求体(\r \n)。
4、请求体（可选）：一些请求方法用于传输数据（get没有请求体，post有，存放的是post请求提交的敏感数据）。

请求方式：

1、get请求：
朝服务端要数据
2、post请求：
朝服务端提交数据

响应数据格式：

状态行：包含响应状态码和状态描述，http协议版本。
响应头部：包含各种响应相关的元数据，如Content-Type、Content-Length、Server等一大堆k，v键值对。
空行：用于分隔响应头部和响应体(\r \n)。
响应体（可选）：服务器返回的实际数据，展示给用户看的数据。

响应状态码：

响应状态码是一个数字代码，用于表示HTTP请求的处理结果。它指示服务器是否成功处理了请求以及返回的响应的类型。常见的HTTP响应状态码包括：
1xx：信息性状态码，表示请求已被接收，继续处理。
2xx：成功状态码，表示请求已成功被服务器接收、理解和处理。
3xx：重定向状态码，表示需要进一步操作以完成请求，通常此时会跳转页面。
4xx：客户端错误状态码，表示服务器无法处理请求。
5xx：服务器错误状态码，表示服务器在处理请求过程中发生了错误。

url(Uniform Resource Locator)：统一资源定位符（网址）。

html语言

html就是书写网页的一套标准

注释方法：<!--单行注释--><!--多行注释多行注释-->

由于html代码非常的杂乱无章且多，所以我们习惯性的用注释来划定区域，方便后续的查找：

<!--导航条开始-->导航条所有的html代码<!--导航条结束-->

html的文档结构：

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>页面标题</title></head><body>  <!-- 页面内容 --></body></html>

上述模板包含了以下几个主要部分：
<!DOCTYPE html>：这是HTML5的文档类型声明，用于指定当前文档使用HTML5规范解析。
<html>：HTML文档的根元素，包含了整个HTML页面的内容。
<head>：头部元素，用于定义页面的元数据和引用外部资源。
<meta charset="UTF-8">：用于指定文档的字符编码，一般使用UTF-8。
<title>：用于定义页面的标题，显示在浏览器的标题栏或标签页上。
<body>：页面的主体内容，包含了要展示给用户的各种元素。

html的标签分类：

1、按照单标签（自闭和标签）分类和双标签分类。

2、按照块级标签和行内标签分类。

块级标签：独占一行。可以修改长宽。内部也可以嵌套任意的块级标签和行内标签（不能套p标签）。
行内标签：自身文本多大就占多大。不可以修改标签。不能嵌套块级，可以嵌套行内标签。

head内的常用标签：

<title>Tittle</title>		#网页标题<style> </style>		#css代码<script></script>		#写js代码，也可以引入外部js文件<link rel="stylesheet" href="">		#用来引入外部的css文件<meta>				#用来告诉浏览器你要干什么活

<meta>标签：

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  # 当name=''keywords''时，content里面表示的是：网页搜索的关键字，目的是为了优化搜索引擎对网页的搜索结果进行相关性排名。 <meta name="description" content="老男孩教育Python学院">   # 当name=description时，content里面表示的是网页的描述信息

body内常用标签：

<h1> 标题标签有1~6级标题</h1><b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><br> 			#换行<hr>			 #水平分割线

特殊符号：

 ；		 #空格标签>；		 		#大于号>< 						#小于号<& 			#&符¥ 			#￥符©		#©符，版权符® 			#®商标符

常用标签：

<div></div>				 #块级标签<span></span>	 #行内标签

上述的两个标签是在构造页面初期最常使用的。

页面的布局一般先用div和span占位，之后再去调整样式，尤其是div使用非常的频繁div你可以把它看成是一块区域，可以用div来提前规定所有的区域之后往该区域内部填写内容即可。

而普通的文本先用span标签占位。

img标签：

<img src="" alt="" title="">

src：
图片的路径。可以是本地的也可以是网上的
如果是网上的话则会自动朝该url发送get请求获取数据
alt：
当图片加载不出来的时候给图片的描述信息
title：
当鼠标悬浮到图片上后自动展示的提示信息
height：
调整高度
width：
调整宽度
#当你只修改一个时，另外一个参数会等比例缩放
#如果修改2个参数，且不考虑比例的话，那么图片会失真

a标签：

<a href="">点我</a>

连接标签
href：放url，用户点击就会跳转到该url页面，也可以放其他标签的id值。
target:默认a标签是在当前页面完成跳转 (_self),也可以修改为新建页面跳转(_blank)。

a标签的锚点功能：

点击一个文本标题，页面会自动跳转到标题对应的内容位置
标签具有的两个重要属性：
1、id值 #类似于标签的身份证号，在同一个html页面中不能重复。
2、class值 #该值类似于面向对象里的类的继承，一个标签可以继承多个class值。

标签内部可以写自定义的属性。

列表标签：

1、无序标签（使用较多）：

<ul type="square"><li>第一项</li><li>第二项</li><li>第二项</li><li>第二项</li></ul>可以使用type来修改样式

2、有序列表（了解）

<ol type="a"><li>1</li><li>2</li><li>3</li></ol>可以使用type来修改样式

3、标题列表

<dl><dt>标题1</dt><dd>内容1</dd></dl>

前端初探：Day50的启示

前端三剑客

HTTP协议

html语言

热门阅读

推荐阅读