前端基础（一）：前端简介、HTTP协议介绍、HTML常用简单标签

下面是小凰凰的简介，看下吧！
💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。

文章目录

一、前端

1、什么是前端
2、前端学习历程

一、HTML介绍

1、Web服务本质
2、HTTP协议

（1）什么是HTTP协议？
（2）四大特性
（3）请求数据格式
（4）响应数据格式
（5）响应状态码
（6）请求方式

3、HTML是什么？
4、HTML注释
5、HTML文档结构
6、模拟浏览器给socket服务端请求数据

二、HTML常用标签

1、标签分类
2、head常用标签

（1）Meta标签介绍
（2） meta标签的http-equiv 属性
（3） meta标签的name属性

3、body常用标签

（1）特殊字符
（2）分块标签
（3）img标签
（4）a标签

一、前端

1、什么是前端

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

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

2、前端学习历程

1. HTML:网页的骨架 没有任何的样式 
2. CSS:给骨架添加各种样式 变得好看
3. Java Script:控制网页的动态效果4. 前端框架:BOOTSTRAP、JQuery、Vue提前给你封装好了很多操作 你只需要按照固定的语法调用即可

一、HTML介绍

1、Web服务本质

浏览器中敲入回车发生了几件事？

1. 浏览器朝服务端发送请求2. 服务端接收请求3. 服务端返回相应的请求4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看

详细过程：
浏览器发请求 -->DNS域名解析（获取目标ip+port）–>TCP三次握手建立连接–>基于 HTTP协议发起get请求 --> 服务端接收并处理请求 --> 服务端返回请求的数据 --> 浏览器得到数据后渲染页面

DNS域名解析流程：先查找浏览器缓存,若没有,再向操作系统的hosts文件查找，若没有，再向本地域名服务器进行递归查找，若没有，再去根服务器迭代查询

2、HTTP协议

（1）什么是HTTP协议？

HTTP协议是超文本传输协议

规定了浏览器与服务端之间消息传输的数据格式

（2）四大特性

1.基于请求响应2.基于TCP/IP之上的作用于应用层的协议3.无状态（服务端不保存用户的状态，也就相当于客户端访问之后没有记录）
eg:一个人来了一千次 你都记不住 每次都当他如初见
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
4.无连接（请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了）
请求来一次我响应一次 之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)

（3）请求数据格式

1.请求首行(标识HTTP协议版本,当前请求方式)2.请求头（许多k,v键值对）3.换行符（/r /n,此处应空着）4.请求体（携带一些敏感信息，如密码）

（4）响应数据格式

1.响应首行2.响应头3.换行符（/r/n，此处应空着）4.响应体(返回给浏览器页面的数据 通常响应体都是html页面)

（5）响应状态码

用一串简单的数字来表示一些复杂的状态或者提示信息

1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据2XX:服务端成功响应 你想要的数据(请求成功200)3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)5XX:服务器内部错误(500)

（6）请求方式

1.get请求朝服务端要资源（比如浏览器窗口输入www.baidu.com）2.post请求朝服务端提交数据（比如用户登录 提交用户名和密码）

URL:统一资源定位符（也就是网址）

3、HTML是什么？

HTML是一种超文本标记语言，是一种用于创建网页的标记语言

网页能正常显示出来，必须遵循html标记语法，所以浏览器显示出来的页面，内部都是html代码

它不是一种编程语言，HTML使用标签来描述网页

4、HTML注释

注释是代码之母<!--单行注释--><!--多行注释多行注释-->一般情况下html的注释都会按照下面这个方式来写<!--导航条样式开始--><!--导航条样式结束-->

5、HTML文档结构

<html><head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
<!--注意:
1. HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
在书写HTML代码的时候 
2. 你只需要写标签名 然后tab就能自动补全
-->

最基本的html文档

<!DOCTYPE html>
<html lang="en"> <!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析>
<head><meta charset="UTF-8"> <!--meta 为body里内容的编码的方式--><title>Title</title>  <!--网页的标题-->
</head>
<body>
</body>
</html>

<!DOCTYPE html>   声明为HTML文档。
<html>、</html>   是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。<head>、</head>   定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。<title>、</title> 定义了网页标题，在浏览器标题栏显示。<body>、</body>   之间的文本是可见的网页主体内容。注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">

6、模拟浏览器给socket服务端请求数据

# index.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>吴晋丞先生，您好!</h1>
</body>
</html>

import socket
server = socket.socket()
server.bind(('127.0.0.1',8082))
server.listen(5)
while True:conn,addr = server.accept()msg = conn.recv(1024)print(msg)conn.send(b'HTTP/1.1 200 ok\r\n\r\n') # http的传输数据的格式，相当于报头，这个必须要有，在请求首行里面with open('index.html','rb') as read_f:msg = read_f.read()conn.send(msg)conn.close()

在这里插入图片描述

二、HTML常用标签

1、标签分类

1. 双标签(例如：<h1></h1> <a></a>)2. 单标签(自闭和标签 例如：<img/>)3. 块级标签(独占浏览器一行,例如：<div> <p> <h>)块儿级标签可以修改长宽块儿级标签内部可以嵌套任意的块级标签但是p标签虽然是块儿级标签 ,但是他不能够嵌套其他块儿级标签,包括自身所以：只要是块儿级标签 都可以嵌套行内标签p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签4. 行内标签(自身文本多大就占多大，例如：<span> <b> <s> <i> <u>)# 其中div和span通常都是用来构建网页布局的

2、head常用标签

<title></title>:显示网页标题
-------------------------------------------------------
<style>h1 {color: greenyellow;}
</style>  内部用来书写css代码或引用css代码文件
-------------------------------------------------------
<script>alert(123)
</script>  内部用来书写js代码或引用js代码文件
-------------------------------------------------------
<link/>:专门用来引入外部的css文件或网站图标
css文件：<link rel="stylesheet" type="text/css"  href="style.css"></link>
网站图标：<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">

（1）Meta标签介绍

<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>提供的信息是用户不可见的。meta标签的组成：meta标签共有两个属性，它们分别'http-equiv 属性'和'name 属性'，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

（2） meta标签的http-equiv 属性

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset="UTF8">  
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

（3） meta标签的name属性

主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
# 定义搜索引擎搜索到本网站的关键字

<meta name="description" content="老男孩教育Python学院"> 
下面图中红框框部分的内容，就是写在description的content中的