初始前端之HTML

最新推荐文章于 2024-07-30 23:06:43 发布

Felix.,

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量96

点赞数

文章标签：前端 html javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42702493/article/details/124939008

版权

今天开始我们来学习前端知识

什么是前端？

任何与操作系统打交道的界面都可以称之为前端：

手机界面(APP),电脑界面(软件),平板界面(r软件)

什么是后端？

不直接与用户打交道，控制核心逻辑的运行

而HTML则是构造网页的骨架>>>几乎所有的网站都是由HTML构造

那么什么是HTML?

超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则负责渲染我们的网页，对于不同的浏览器，对同一个标签可能会有不同的解释。(兼容性问题)

网页文件的扩展名：.html 或者 .htm

HTML不是什么？

HTML是一种标记语言(markuo language)，它不是一种编程语言，无逻辑。

HTML使用标签来描述网页

867021-20171206155335159-1559665689

前端的学习(必须掌握部分)

HTML >>> 内容 >>> 网页的骨架

CSS >>> 外观 >>> 网页的样式

JS >>> 动作 >>> 网页的动态效果

1342004-20190304094651211-645211400

B/S架构即浏览器和服务器架构模式

C/S架构即客户端和服务端结构模式

简易搭建搭建服务(浏览器访问)

服务端

import socket

server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen()

while True:
    sock,addr = server.accept()
    while True:
        data = sock.recv(1024)
        if data == 0:break
        print(data)
        sock.send(b'hello big baby')

客户端：浏览器

2608805-20220118225606188-1683688689

问题来咯，为什么浏览器访问服务端会报错？

原因在于每个人服务端数据的格式千差万别，浏览器无法自动识别没有按照浏览器固定的格式发送。

因为服务端没有按照浏览器固定的格式发送

解决方法

浏览器可以访问很多服务端如何做到无障碍的与这么多不同程序员开发的软件实现数据的交互？

1.浏览器自身功能强大自动识别并切换(太过消耗资源)

2.大家统一一个与浏览器交互的数据方式(统一思想) 统一标准就是:HTTP协议

统一标准：HTTP协议

何为协议：大家商量好的一个共同认可的结果

而HTTP协议就是规定了浏览器和服务端之间数据交互的方式以及其他事项

如果我们开发的时候不遵循该协议，那么浏览器就无法识别我们的网站

网站就需要自己编写一个客户端

HTTP的四大特性

基于请求响应：

服务端永远不会主动给客户端发消息，必须是客户端先发送请求

如果想让服务端主动给客户端发送消息，可以采用其他网络协议

基于TCP、IP作用于应用层之上的协议：

应用层(HTTP)、传输层、网络层、数据链路层、物理链接层

无状态

不保存客户端的状态信息，早期的网站不需要用户注册，所有人访问的网页数据都是一样的

无连接/短连接

两者请求响应之后立刻断绝关系

HTTPL数据格式

请求格式

浏览器给服务端发送数据(请求数据格式)
请求首行(网络请求的方法)
请求头(一堆k:v键值对)
(换行符不能省略)
请求体(并不是所有的请求方法都有)

响应格式

服务端给浏览器发送数据(响应数据格式)
响应首行(响应状态码)
响应头(一堆k:v键值对)
(换行符不能省略)
响应体(即将交给浏览器的数据)

响应状态码

用数字来表示一串中文意思

1XX：服务端已经接收到了数据正在处理，你可以继续发送数据也可以等待

2XX：200 请求成功，服务端返回了相应的数据

3XX：重定向(原本想访问A页面但是自动跳转到了B页面)

4XX：403没有权限访问 404请求资源不存在

5XX：服务器内部错误

2608805-20220118230117681-773892065

以上为常见状态码，进入公司以后一般为公司自定义状态码，一般以10000开头

示例：聚合数据状态码参考

后端写给前端的状态码，主要HTTP默认状态码不够使用，后期需要自定义

2608805-20220118230134254-436618986

查看服务端代码

代码体

import socket

 server = socket.socket()
 server.bind(('127.0.0.1',8080))
 server.listen()

 while True:
     sock,addr = server.accept()
     while True:
         data = sock.recv(1024)
         if data == 0:break
         print(data)
         sock.send(b'hello big baby')

"""
b'GET / HTTP/1.1\r\n
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n'
b''
b''
"""

修改为遵循HTTP响应格式

import socket

server = socket.socket()
server.bind(('127.0.0.1',8081))
server.listen()

while True:
    sock,addr = server.accept()
    while True:
        data = sock.recv(1024)
        if len(data) == 0:break
        print(data)
        # 遵循HTTP响应格式
        sock.send(b'HTTP/1.1 200 OK\r\n\r\nhello big baby')

重定向

import socket

server = socket.socket()
server.bind(('127.0.0.1',8081))
server.listen()

while True:
    sock,addr = server.accept()
    while True:
        data = sock.recv(1024)
        if len(data) == 0:break
        print(data)
        # 遵循HTTP  响应格式
        sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
        sock.send(b'<h1>hello world!<h1>')
        # 跳转百度
        sock.send(b'<a href="https://www.baidu.com">Look Look<a>')

也可以将图片展示

import socket

server = socket.socket()
server.bind(('127.0.0.1',8081))
server.listen()

while True:
    sock,addr = server.accept()
    while True:
        data = sock.recv(1024)
        if len(data) == 0:break
        print(data)
        # 遵循HTTP  响应格式
        sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
        sock.send(b'<h1>hello world!<h1>')
        sock.send(b'<a href="https://www.baidu.com">Look Look<a>')
        sock.send(b'<img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E6%90%9E%E7%AC%91%E7%AA%81%E5%8F%98&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=2129964180,2909716272&os=82684934,999422278&simid=4276478456,587750782&pn=2&rn=1&di=33880&ln=1558&fr=&fmq=1642601957657_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252F5b0988e595225.cdn.sohucs.com%252Fq_mini%252Cc_zoom%252Cw_640%252Fimages%252F20170705%252F711dc7667fe748869d3b71703fd02eec.jpg%26refer%3Dhttp%253A%252F%252F5b0988e595225.cdn.sohucs.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1645193957%26t%3D40b298a0073fe57398f54e1ab2c3c914&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwzLDIsNiw0LDUsMSw4LDcsOQ%3D%3D"/>')

浏览器通过我们在服务端编写的TML代码而展示出我们想要的样子

HTML就是个标签

Felix.,

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初始前端之HTML

今天开始我们来学习前端知识什么是前端？任何与操作系统打交道的界面都可以称之为前端：手机界面(APP),电脑界面(软件),平板界面(r软件)什么是后端？不直接与用户打交道，控制核心逻辑的运行而HTML则是构造网页的骨架>>>几乎所有的网站都是由HTML构造那么什么是HTML?超文本标记语言(Hypertext Markup Language, HTML)是一种用于...
复制链接

扫一扫