前端

最新推荐文章于 2024-09-05 16:15:02 发布

lwj_07

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量143

点赞数 1

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/lwj_07/article/details/121140977

版权

笔记专栏收录该内容

144 篇文章 18 订阅

订阅专栏

什么是前端

"""
因为我们是全栈开发工程师
	但是前端这一块我们不会学的很详细
	只要求做到能够看得懂基本的前端代码以及能够搭建一些简单的页面即可
	先打下前端的基础 为后续可能需要扩展做准备
"""

为什么学前端

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

什么是后端
	后端类似于幕后操作者(一堆让人头皮发麻的代码)
	不直接跟用户打交道
"""

前端学习历程

HTML:网页的骨架 没有任何的样式 （没有衣服的人）
CSS:给骨架添加各种样式 变得好看    （穿上衣服，化化妆）
JS:控制网页的动态效果                （ 跳钢杆舞 ）

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

软件开发架构

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

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

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

浏览器可以充当很多服务端的客户端
	百度 腾讯视频 优酷视频....
 
如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
	
     制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
  那么你就必须要遵循一些规则

服务端（后端）：

百度客户端（前端）：

原因：我的请求确确实实发送到了服务端并且服务端也给了我相应只不过在浏览器这边渲染不出来而已（浏览器看不出来不认识）因为每个人写的服务端都不一样因此需要遵循客户端（百度）一定的规则

规则：HTTP协议（背）

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

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""
# 四大特性
	1.基于请求响应
  2.基于TCP/IP作用于应用层之上的协议
  3.无状态
  	不保存用户的信息
    eg:一个人来了一千次 你都记不住 每次都当他如初见
    由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
    	cookie、session、token...
  4.无/短链接
  	请求来一次我响应一次 之后我们两个就没有任何链接和关系了
    	长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)

        
# 请求数据格式
  1 请求首行(标识HTTP协议版本，当前请求方式)
  2 请求头(一大堆k,v键值对)
  3 这里的\r\n千万不能省略！！！
  
  4 请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式
  1 响应首行(标识HTTP协议版本，响应状态码)
  2 响应头(一大堆k,v键值对)
  3 \r\n
  4 响应体(返回给浏览器展示给用户看的数据)
 
# 响应状态码
	用一串简单的数字来表示一些复杂的状态或者描述性信息  404:请求资源不存在
  1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据（1xx了解即可）
  2XX:服务端成功响应了你想要的数据(200 OK请求成功)
  3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
  4XX:请求错误
    	404:请求资源不存在
      403:当前请求不合法或者不符合访问资源的条件
  5XX:服务器内部错误(500) （了解即可）
  

# 请求方式
	1.get请求
  	朝服务端要数据
    eg:输入网址获取对应的内容
  2.post请求
  	朝服务端提交数据
    eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

# url:统一资源定位符(大白话 网址)

HTML简介

超文本标记语言

如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

a.txt>>>:

<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />

import socket

server = socket.socket()

server.bind(('127.0.0.1',8080))

server.listen(6)

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')
    # 读取文件内容再返回
    with open('a.txt','rb') as f:
        conn.send(f.read())
    conn.close()

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

# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

HTML文档结构

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

PS:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能

注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 推荐：直接全部使用谷歌浏览器

标签的分类1

<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img src=" "/>

1  双标签
2  单标签(自闭和标签)

head内常用标签

在书写HTML代码的时候你只需要写标签名然后tab就能自动补全

<title>Title</title>  网页标题
<style>
        h1 {
            color: greenyellow;
        }
</style>  内部用来书写css代码

<script>
        alert(123)
</script>  内部用来书写js代码
<script src="myjs.js"></script>  还可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件


了解：

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"
>  网页的描述性信息

body内常用标签

你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码

基本标签

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

标签的分类2

# 1 块儿级标签:独占一行
		h1~h6	p div
  	1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
    	但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
      	如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
       
    总结:
      	只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
		i u s b span
  	行内标签不能嵌套块儿级标签 可以嵌套行内标签

特殊符号

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&amp;  &
&yen;  ¥
&copy;		©
商标&reg;  ®

常用标签

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

lwj_07

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端

什么是前端"""因为我们是全栈开发工程师但是前端这一块我们不会学的很详细只要求做到能够看得懂基本的前端代码以及能够搭建一些简单的页面即可先打下前端的基础为后续可能需要扩展做准备"""为什么学前端"""任何与用户直接打交道的操作界面都可以称之为前端比如:电脑界面手机界面平板界面什么是后端后端类似于幕后操作者(一堆让人头皮发麻的代码) 不直接跟用户打交道"""前端学习历程HTML:网页的骨架没有任何的样式（没有衣服的人）CS...
复制链接

扫一扫

专栏目录