前端入门

目录

1|0一、前端

1|11. 前端简介

1|01. 什么是前端
  • 任何与用户直接打交道的操作界面，都可以称之为前端

1|02.什么是后端
  • 真正的幕后操作者

1|03. 为什么学前端
  • 技多不压身
  • 全栈工程师（前后端都得会）

1|22. 软件开发架构
  1. C/S
  2. B/S B/S本质也是C/S

  • 统一接口思想（***********************）

    虽然我们现在用的东西一眼看去基本都是C/S的，但在客户端内部正在一点点的向B/S方向转变。如微信的微信小程序。支付宝的各种小功能。其目的就是为了统一接口

1|33. web服务的本质

  • 关键就俩字： **请求 响应 **

  • 浏览器输入网址 回车发生了哪些事

    ​ 1.朝着指定的服务器地址发送请求
    ​ 2.服务端接收请求 并处理
    ​ 3.返回相应的响应
    ​ 4.浏览器接收并渲染出好看的页面 给用户看

  • 请求方式
    1. get请求
    朝服务器要资源
    eg: 输入一个网址再回车
    2. post请求
    朝服务器提交数据
    eg:登录功能

1|44.http协议

1|01. 什么是http协议

  • 它是一种超文本传输协议 ， 规定了服务端与浏览器数据传输的数据格式

  • http和tcp和tcp/ip之间的关系和区别
    TCP是底层通讯协议，定义的是数据传输和连接方式的规范（传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流或者说是流式的传输层通信协议）
    HTTP是应用层协议，定义的是传输数据的内容的规范
    HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP也就一定支持TCP
    HTTP支持的是www服务
    而TCP/IP是协议，它是Internet国际互联网络的基础。TCP/IP是网络中使用的基本的通信协议。
    TCP/IP实际上是一组协议，它包括上百个各种功能的协议，如：远程登录、文件传输和电子邮件等，而TCP协议和IP协议是保证数据完整传输的两个基本的重要协议。通常说TCP/IP是Internet协议族，而不单单是TCP和IP。（TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/网际协议）是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP协议不仅仅指的是TCP 和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇， 只是因为在TCP/IP协议中TCP协议和IP协议最具代表性，所以被称为TCP/IP协议。）

  • ip 简介

    • ip可以说是OSI五层协议的网络层或者IP层，又译为网际协议或互联网协议。它主要的作用是把数据包装起来后，指定了数据要发送的位置即目的地，另一个作用是规定了一次性传输的数据的最大长度和切分太长数据的方法。
    • 虽然IP协议保证了计算机之间可以发送和接收数据报，但它不负责解决数据报传达的可靠性等安全问题，这些安全因素主要由TCP协议负责完成
    • IP的主要目的是通过一个互联的网络传输数据报，涉及两个最基本的功能：寻址和切片。

  • ftp简介

FTP（File Transfer Protocol，文件传输协议） 是 TCP/IP 协议组中的协议之一。FTP协议包括两个组成部分，其一为FTP服务器，其二为FTP客户端。其中FTP服务器用来存储文件，用户可以使用FTP客户端通过FTP协议访问位于FTP服务器上的资源。在开发网站的时候，通常利用FTP协议把网页或程序传到Web服务器上。此外，由于FTP传输效率非常高，在网络上传输大的文件时，一般也采用该协议。
默认情况下FTP协议使用TCP端口中的 20和21这两个端口，其中20用于传输数据，21用于传输控制信息。但是，是否使用20作为传输数据的端口与FTP使用的传输模式有关，如果采用主动模式，那么数据传输端口就是20；如果采用被动模式，则具体最终使用哪个端口要服务器端和客户端协商决定。

1|02. http协议介绍

1|0（1）http协议的四大特性

  1. 基于TCP/IP作用于应用层之上的协议

  2. 基于请求响应

    请求对应响应

  3. 无状态

    无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后，服务器根据请求，会给我们发送数据过来，但是，发送完，不会记录任何信息。

  4. 无连接

    无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间

    但也有长连接，websocket支持长连接 ，聊天室等

1|0（2）数据格式

  1. 请求格式

    请求首行（请求方式 协议版本）

    请求头（一大堆键值对）

    /r/n （这里是换行符，后来有优化了直接是 /n 就是换行了，有些是直接/r）

    请求体（敏感信息 密码 身份证号）

  2. 响应格式

    响应首行（请求方式 协议版本）

    响应头（一大堆键值对）

    /r/n （这里是换行符，后来有优化了直接是 /n 就是换行了,有些是直接/r）

    响应体（给用户看的数据）

  3. 响应状态码（******网络状态码*******）

    用数字来表示一串文字信息

    • 1XX ：服务端已经成功接收了你的请求，正在处理，你可以继续提交其他数据
    • 2XX ：服务端成功响应了相应的数据（200）
    • 3XX ：重定向（即点击一个功能，突然发现你没有登陆，即跳转到登陆界面了）
    • 4XX ： 404：请求资源不存在 403：你当前不符合某一些条件，无法正常访问
    • 5XX ：服务器内部错误（500）

1|03. http和https的区别
  • HTTPS和HTTP的区别主要如下：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

2|0二、HTML

2|11. HTML介绍
  • 它是一种超文本标记语言
  • 浏览器上你所能看到的花里胡哨的页面 背后都是HTML代码而已

2|22. 文件的后缀名
  • 文件的后缀名是给人看的，对于计算机来说，全都是二进制
  • 之所以不同的后缀名有不同的功能，那是我们程序员自己人为定制的

2|33. HTML的注释

 
  • 格式：
单行注释： <!--注释内容-->
多行注释： <!--
		注释内容
		注释内容
	 	  -->
            
注释的作用：
	我们在搭建页面的时候，通常会利用注释来划分区域
    
eg：
<!--导航条开始-->
	
<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->

2|44. HTML的文档结构

 
<html>
	<head></head> 不是给人看的，是给浏览器看的
	<body></body> body内的代码才是给人看的
</html>

2|55. 标签的分类1
  • 分为两类
    1. 双标签 （如 h类标签 和 a标签）
    2. 自闭合标签（如 img）

1|01. head内常用的标签

 
	title  定义网页标题
	style  内部支持写css代码
	link   引入外部css样式文件
	script  内部可以直接写js代码  也可以引入外部js文件
	meta   定义网页源信息
		<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
		<meta name="description" content="老男孩教育Python学院">

1|02. body内常用的标签

 
	h1~h6  标题标签（h1到h6标题逐渐变小）
	p      段落标签  一个p就是一行内容
	s	   删除线
	b      加粗
	u      下划线
	i      斜体
	br     换行
	hr     一条分割线
    
p 标签的内容回合其相邻的上下两行的内容都有一个空行
h1~h6 标题标签也会与相邻的上下两行之间有一个空行
p 标签内不能嵌套块标签。

其他块标签与标签的内容不会有空行 ， 且单标签（如br ， hr）不能嵌套任何标签

1|03. body内的特殊符号

 
	&nbsp;   空格
    &amp;    &
    &yen;    ￥
    &gt;     >
    &lt;     <
    &copy;    ©  （网站版权），圆圈C
    &reg;     ®	 （注册商标），圆圈R

2|66. 标签的分类2

  • 共分为2类

    1. 块级标签 如：h1~h6 p br hr div
      • 独占一行
      • 块儿级标签内可以嵌套其他块儿级和行内标签
      • 注意：p标签虽然是块级标签，但是它的内部不能嵌套任何块级标签 只能嵌套行内标签(****************)
    2. 行内标签 s i u b span
      • 内部文本多大，就占多大
      • 行内不能嵌套行内和块级标签

  • **************************

标签通常应该有两个属性 ：
id就类似于是身份证号 每一个标签 都应该有id值 并且在同一个html文档中 标签的id不能重复
class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式

1|01. body 内重要的标签

 
1.	div  一块区域  你可以往这块儿区域内填写任何内容
2.	span
3.	div和span是前期构建网页的基本骨架
    
4.a  链接标签
		（1）跳转功能     href参数控制跳转的地址
			这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
			只要点过一次之后  之后颜色 都是紫色
			<!--<a href="https://www.sogo.com">点我点我</a>-->
			
			a标签默认是在当前窗口跳转
			target = "_self"
            
            你可以指定 新建窗口打开
			target = "_blank"
			
		 （2）锚点功能 （相当于是网页中的一些目录，点击后会定位到当前页面的某一行）
			给a标签设置id值
			然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
			<a href="" id="a1">文章开头</a>
			<div style="background-color: red;height: 1000px"></div>
			<div style="background-color: green;height: 1000px"></div>
			<div style="background-color: orange;height: 1000px"></div>
			<a href="" id="a2">文章中部</a>
			<div style="background-color: black;height: 1000px"></div>
			<div style="background-color: green;height: 1000px"></div>
			<div style="background-color: orange;height: 1000px"></div>
			<a href="#a1">回到顶部</a>
			<a href="#a2">回到中部</a>
            
            
            
5.img  图片标签
		src  
			1.图片地址  网上的地址也可以是你的本地图片地址
			2.url(网址)  自动朝该网址发送get请求 获取图片资源
		
		
		alt
			当图片加载不出来的时候 展示的提示信息
			
			
		title
			鼠标悬浮上去之后展示的提示信息
			
			
		width和height  
			这两个参数 你只需要任意设置一个 就可以，图片就会等比例缩放
			两个都调整的话 图片就会失真
            
            
6.排列标签
	无序列表
			ul
			li
		
		type参数
			disc（实心圆点，默认值）
			circle（空心圆圈）
			square（实心方块）
			none（无样式）
	
	
	有序列表(了解)
			ol
			li
		
		type参数

			1 数字列表，默认值
			A 大写字母
			a 小写字母
			Ⅰ大写罗马
			ⅰ小写罗马
	标题列表(了解)
			dl
			dt  小标题
			dd  小章节
	
7.表格标签
	展示数据 一般都用到表格标签
	<table>
		<thead>
			<tr>
				<th>username</th>
				<th>password</th>
				<th>hobby</th>
				<th>is_delete</th>
			</tr>  一个tr就表示一行
		</thead>
		<tbody>
			<tr>
				<td>jason</td>
				<td>123</td>
				<td>study</td>
				<td>0</td>
			</tr>
		</tbody>
	</table>

__EOF__

本文作者：BigSun丶
本文链接：https://www.cnblogs.com/Mcoming/p/11844565.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   BigSun丶  阅读(155)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示