首页 > 其他分享 >HTML认识前端

HTML认识前端

时间:2023-07-22 20:57:43浏览次数:25  
标签:协议 HTTP 请求 认识 标签 前端 HTML 服务端 客户端

前端

什么是前端?
	前端就是用户可以直接看得到的视图层就是前端
    
什么是后端?
	后端是和数据打交道的,在用户看不到的

前端学习的内容

"""前端三剑客"""
HTML:一个网页的骨架,没有任何样式
CSS:给一个网页添加样式,让其变得更加美观
JavaScript:让网页有动效

前端框架:
	jQuery、bootstrap、Vue----->中国人开发的(尤雨溪)、react、angluar等等

在浏览器中我们是如何拿到自己想要的想要的数据?

"""
	1、客户端(浏览器)向服务器发送请求
	2、服务端接受浏览器的请求
	3、服务器将处理好的前端要的数据进行返回
	4、把数据返回给前端---->在浏览器中,按照一定的规则把后端的数据展示给用户
"""
"""
	如果我们写一个服务端,让浏览器充当服务端的客户端,那么也可以写一个基于浏览器的项目,但是会发现当我们浏览这个网址的时候会显示无响应,这是因为如果我们返回的数据想要被浏览器识别,必须要遵循HTTP协议
"""

HTTP协议

HTTP协议又被称为"超文本传输协议",其作用就是规定了服务端与客户端(浏览器)之间的数据传输格式

常见的协议:"TCP协议、UDP协议、IP协议、以太网协议等"

HTTP协议的四大特性:
	1、是基于请求和响应的---->请求:客户端主动向服务端发送请求----->响应:服务端向客户端返回
    2、HTTP协议是基于TCP/IP协议之上的应用层协议
    	"HTTP协议是基于TCP协议写出来的"
    3、无状态:
    	"无法保存用户的信息"
    4、短连接/无连接
    	短连接:
        	当服务端和客户端要想传输数据就必须建立连接,正常情况。二次成功发送一次消息就断开连接,称之为"短连接"
        长连接:
        	二者成功发送一次消息之后,不会立马断开连接,而是中间隔一段时间,如果双方没有通信就会断开连接,称之为"长连接"
            
"""客户端向服务端发起请求会携带一些数据,就称之为请求数据"""
HTTP协议的请求数据格式:
	# 常用的版本号就是HTTP1.X版本
    请求首行(请求方式、协议/版本号)
    请求头
    \r\n
    请求体(不是什么请求方式都有请求体,GET请求方式就没有)
    
HTTP的相应数据格式:
	响应首行(响应状态码)
    响应头
    \r\n
    响应体
    
响应状态码:
	"""简单描述就是使用一个简单的数字代表一段复杂的描述性信息"""
    1xx:了解,服务端接收数据成功,客户端还可以继续提交
    2xx:掌握,200代表的是响应成功
    3xx:301、302代表的是重定向,代码内部帮助我们跳转到指定页面
    4xx:404,资源不存在,找不到,NO FOUND,404页面可以定制
    5xx:500,服务器内部错误
    
请求方式:"重要"
	GET请求:
    	"""向服务器要数据的时候一般使用GET"""
        https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=49055317_42_hao_pg&wd=%E7%BE%8E%E5%A5%B3
        协议://域名/后缀?参数k=v&k1=v1....
        URL:"同意资源定位符号(网址)"
    POST请求:
    	"""向服务器提交数据的时候,一般使用POST请求方式"""
        
****聊聊GET跟POST的请求区别:
	1、get请求数据不够安全,post请求数据更加安全
    2、get请求没有请求体,而post请求有请求体
    3、get请求能够携带的数据量没有post请求携带的多
    	get请求一般携带4kb大小
        post基本没有限制
import socket

server = socket.socket()
server.bind(('127.0.0.1', 8000))
server.listen(3)

while True:
    sock, addr = server.accept()
    data = sock.recv(1024)
    print(data)
    """TCP协议的流式协议特征"""
    sock.send(b'HTTP/1.1 200 OK \r\n\r\n')
	'按照http协议的规格传出就看拿到我们服务端反馈过去的信息了'
    # 给客户端返回服务端的数据
    sock.send(b'HelloKitty')
    sock.close()

HTML文档介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

head标签写的不是给用户看得
body标签:给网页做定制的,给用户看得
title标签:网页名称
<link rel="stylesheet" href="css/my.css">:引入外部CSS

body中常用的标签

基本标签:
	<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <b>这是粗体</b>
    <i>这是斜体</i>
    <u>这是下划线</u>
    <s>这是删除线</s>
    <p>段落标签1,<br> 换行,段落标签2</p>
    <p>段落标签2</p>
    <hr>这是水平线

块儿元素:
		<独自占据一行,不管自身的大小>
		像h1、p标签等等
行内元素:
        <自身文本有多大就占多大,不会独占一行>
        像<b></b> <i></i> <u></u>等等.
       
双标签:
       <h1> </h1> 等等
            
单标签:
       <br> <hr>
            
特殊字符:
            内容	对应代码
            空格	&nbsp;
            >	 &gt;
            <	 &lt;
            &	 &amp;
            ¥	 &yen;
            版权	&copy;
            注册	&reg;

dive标签和spend标签

div、spend没有实际意义只是为了布局使用

<div>块儿级元素,给页面占布局</div>
<spend>行内元素,用来给文本内容占布局</spend>

标签的嵌套

<div> <!--dive是p标签的父标签-->
    <p> <!--p是spend标签的父标签,是dive的子标签-->
        <spend><!--spend是品标签的子标签,是dive的孙标签-->
            
        </spend>
    </p>
<p><!--p标签是div的子标签是p标签的兄弟标签,也是下面那个spend的兄弟标签-->
    
    </p>
<spend></spend>
</div>

<!--
	块级儿级元素能够嵌套所有的行内元素,块儿级元素也能够嵌套所有的块儿级元素。
	行内元素不能够嵌套块儿级元素,但是可以嵌套所有的行内元素。
-->

标签:协议,HTTP,请求,认识,标签,前端,HTML,服务端,客户端
From: https://www.cnblogs.com/chao0308/p/17574210.html

相关文章

  • html标签
    img标签<!--主要是在网页显示图片-->标签的属性: 1、自带属性 2、自定义属性<imgsrc="preview.jpg"alt="动漫"width="200px">src: <!--写图片的地址:外链地址或者相对地址-->alt: <!--当图片加载失败时显示对图片的描述性信息-->widthandheight <!--对图片这是长......
  • 记录--关于前端的音频可视化-Web Audio
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助背景最近听音乐的时候,看到各种动效,突然好奇这些音频数据是如何获取并展示出来的,于是花了几天功夫去研究相关的内容,这里只是给大家一些代码实例,具体要看懂、看明白,还是建议大家大家结合相关API文档来阅读这篇文章......
  • html标签
    W3scholl: https://www.w3school.com.cn/html/index.asp本问只记录一下常用的标签,一些细致的属性等详细信息,请去上面的网站自行翻阅<body><!--全局常用属性id:id属性规定HTML元素的唯一的id。在HTML文档中必须是唯一的。id属性可用作链接锚(linkanchor),通......
  • html学习day02
    HITML学习Day02一、媒体属性视频属性<video></video>属性:src:资源路径controls:控制条autoplay:自动播放音频属性<audio></audio>属性src:资源路径controls:控制条autoplay:自动播放二、页面结构元素名描述header标记头部区域的内容(用......
  • 记录实现复制EXCEL数据到前端表单
     背景是用户需要把原本在Excel上填报的数据搬运到线上系统进行填报,在做了一个带输入框的表格之后用户提出希望能够实现将EXCEL上的数据复制黏贴到这个表格里的功能。 实现功能的整体思路是在input框上监听黏贴事件,获取到复制的数据。由于在Excel中\t表示换格,\n表示换行,所以......
  • 设计师必看的10个HTML5动画工具
    如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具。HTML5是设计师用来打造时尚网站的最流行的编程语言之一。在过去三年内,这种编程语言的使用人数急剧增长。开发人员可以使用这种语言来创建各种改进的内容并放到万维网上。......
  • html中的tr,td,th标签
       参考:https://blog.csdn.net/djydjy3333/article/details/122346408......
  • 前端实现浏览器端大文件分块上传
    ​  上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败。一开始以为是session过期或者文件大小受系统限制,导致的错误。查看了系统的配置文件没有看到文件大小限制,web.xml中seesiontimeout是30,我把它改成了120。但还是不行,有时候10分钟就崩了。同事说,可能是客户这......
  • 10个开源的前端低代码项目
    GOVIEWGoView是一个使用Vue3搭建的低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。它的技术栈为:Vue3+TypeScript4+Vite2+NaiveUI+ECharts5+Axios+Pinia2+PlopJS。Gitee:https://gitee.com/dromara/go-viewvlife企业级......
  • SAP UI5 应用启动时加载的 flpSandbox.html 文件有什么作用
    在SAPUI5应用程序的开发和测试阶段,我们经常会使用一个特殊的HTML文件,名为flpSandbox.html。这个文件主要用于在本地环境中模拟FioriLaunchpad的环境,以便于开发者在没有真实SAP系统支持的情况下进行开发和调试。这个文件的源代码可以在笔者这套教程里找到:SAPFioriEl......