关于前端这件事

斐秋
113 阅读8分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前端（day50）

什么是前端

"""
任何与用户直接打交道的操作界面都可以称作前端
比如：电脑界面 手机界面 平板界面


后端类似与幕后操作者
不直接与用户打交道
"""

前端学习路径

HTML：网页的骨架 没有任何的样式
CSS：给骨架添加各种样式 变得好看
JavaScript：控制网页的动态效果

前端框架：BOOTSTRAP、 JQuery、 Vue
    提前给你封装好了很多操作、按照固定语法调用即可

软件开发架构

cs 客服端 服务端
bs 浏览器 服务端
ps: bs也是cs

##浏览器窗口输入网址回车发生了几件事

1 浏览器朝服务端发送请求
2 服务端接受请求（eg: 请求百度首页）
3 服务端返回相应的响应（eg返回一个百度首页）
4 浏览器接收响应 根据特定的规则渲染给用户看

浏览器可以充当很多服务端的客服端
    百度 腾讯视频 优酷视频
   
如何做到浏览器跟多个不同的客服端进行交互
    1、浏览器很牛逼 能够自动识别不同服务端做不同的处理
    2、指定一个统一的标准 如果想要让你写的服务端能够艮客服端做正常的数据交互
    那么你必须遵循一些规则

HTTP协议

超文本传输协议 用来规定服务端和浏览器之间的数据交互格式

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩你就自己写客服端 用户想要使用 就下载你专门的App即可。

# 四大特性
    1.基于请求响应
    2.基于TCP/IP作用于应用层上的协议
    3.无状态
        不保存用户的信息
        eg: 一个人来了一千次 你都记不住 每次都当他如初见
        由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术
            cookie session token
    4.无/短链接
        请求来一次我响应一次 之后我们就没有任何链接和关系了
            长链接：双方建立连接之后默认不断开 websocket
# 请求数据格式
    请求首行（标识HTTP协议版本，请求当前方式）
    请求头（一大堆k,v键值对）
    
    
    请求体（并不是所有的请求方式都有，get没有post有 存放的是post请求提交的敏感数据）
# 响应数据格式
    响应首行（标识HTTP协议版本，响应状态码）
    响应头（一大堆k,v键值对）
    
    响应体（返回给浏览器展示给用户看的数据）

# 响应状态码
    用一串简单的数字来表示一些复杂的状态或者描述信息 404：请求资源不存在
    1xx：服务端已经成功接收了你的数据正在处理，你可以继续提交额外的数据
    2xx：服务端成功响应了你想要的数据（200 OK请求成功）
    3xx：重定向（当你在访问一个需要登录之后才能看的页面 你会发现会自动跳转到登录页面）
    4xx：请求错误
        404：请求资源不存在
        403：当前请求不合法或者不符合访问资源的条件
         
    5xx：服务器内部错误（500）
    

# 请求方式
    1.get请求
        朝服务端要数据
        eg:输入网址获取对应的内容
    2.post请求
        朝服务端提供数据
        eg：用户登录 输入用户名和密码之后 提交到服务端后端做身份校验
# url:统一资源定位符（大白话：网址）

HTML简介

超文本标记语言 如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法 我们浏览器看到的页面，内部其实都是HTML代码（所有网站内部都是HTML代码）

<h1>hello big baby<h1>
<a href="https://www.mzitu.com/">click me! give you some color to see see! </a>
<img src="https://img0.baidu.com/it/u=3016130507,2300635274&fm=224&fmt=auto&gp=0.jpg">

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

# 注释：注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
由于HTML代码非常的杂乱并且很多，所以习惯性的用注释来划定区域方便后续的查找

<!--导航条开始-->
导航所有HTML代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
   <head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
   <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
<html>

PS:文件后缀名是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能 注意：HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

两种打开HTML文件的方式

  • 找到文件所在的位置右键选择浏览器打开
  • 在pycharm内部集成自动调用浏览器的功能，直接点击即可

标签的分类1

<h1></h1>
<a href = "www.baidu.com/"></a>
<img/>
1 双标签
2 单标签（自闭和标签）

head常用标签

<title>Title</title> 网页标题
<style>
        h1 {
            color: gold;
        }
</style> 内部用来写css代码
<script src = "myjs.js"></script> 引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name = "keywords" content="老男孩教育，python培训">当你在用浏览器只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝网,网上购物">
<meta name="description" content="淘宝网- 亚洲较大的网上交易平台">

body内常用标签

你肉眼在浏览器能看到的内部都是HTML代码 ##基本标签

<h1>我是h1</h1> 标题1-6级
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    
      <p>大梦初醒</p>
    <br> 换行
    <p>大梦初醒</p>
    <hr>水平分割线
    <p>大梦初醒</p>

标签的分类2

# 1.块级标签：独占一行
    h1~h6
    1 块级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块级标签可以嵌套任意的块级标签和行内标签
        但是p标签虽然是块级标签 但是他只能嵌套行内标签 不能嵌套块级标签
        如果套了 浏览器也会自动帮你解开（浏览器是面向用户的 不会轻易的报错 哪怕有错 用户也基本感觉不出来）
        总结：
            只要是块级标签都可以嵌套任意块级标签和行内标签
                        
# 2.行内标签：自身多大就占多大
 i u s b

特殊符号

&nbsb; 空格
&gt 大于号
&lt; 小于
&amp; &
&yen; ￥
&copy; 商标

#常用标签

div 块标签
span 行内标签
上述的两个标签是在构造页面初期常用的，页面布局一般先用div和span占位之后再去调整样式尤其是div使用的非常频繁
div你可以把他看成是一块区域 也就意味着用div来提前规定所有的区域之后望该区域填写内容即可

而普通的文本先用span即可

img标签

<img src="" alt="">

src 
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求
alt="" 当图片加载不出来时的描述

title=""
当图片悬浮在图片上自动展示的提示信息

height="" 高度
width=""宽度
高度和宽度当你只修改了另一个参数也会等比例缩放
如果修改了两个参数但并没考虑比例的问题图片就会失真

a 标签

<a href=""></a>
"""
当a标签指定的网址从来没有点击过 那么a标签的字体颜色是蓝色，如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
    1.放url,用户点击就会跳转到该url页面
target
    默认a标签是在当前页面完成跳转 _self
    你也可以修改为新建页面跳转 _blank
    
# a标签的锚点功能
"""
eg:点击一个文本标题 页面自动跳转到标题对应的内容区域

"""

标签具有的两个重要书写

1.id值
    类似于标签的身份证号 在同一个html页面上id值不能存重复
2.class值
 该值有点类似面向对象对象里的继承 一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

<p id="d1" class="c1" username="jason" password="123"></p>

列表标签

  • 无序列表（较多）
<u1>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
</u1>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
  • 有序列表（了解）
<ol> type=" " start="">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
  • 标题列表（了解）
<dl>
    <dt>标题1</dt>
    <dd>标题2</dd>
    <dt>标题1</dt>
    <dd>标题2</dd>
</dl>

总结

学习前端就是死记硬背 
学习HTML他是一门标记语言
在学习时就要记每一个标签到底表示什么意思


服务端.py
import socket

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

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    print(data)
    # 构造出符合HTTP协议格式的数据 无需掌握
    conn.send(b'HTTP/1/1 200 OK\r\n\r\n')
    # conn.send(b'hello baby')
    # conn.send(b'<h1>hello baby<h1>')
    # 读取文件内容再返回
    with open('a.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()
 
 a.txt
 <h1>hello big baby<h1>
<a href="https://www.meizitu.com/">click me! give you some color to see see! </a>
<img src="https://img0.baidu.com/it/u=3016130507,2300635274&fm=224&fmt=auto&gp=0.jpg">
<img src="https://img-home.csdnimg.cn/images/20211106034829.jpg">
avatar
文章
阅读
粉丝