【目录】

一、前端开发工具简介

二、前端基础

1、什么是前端

2、前端学习历程

3、HTTP协议

三、HTML

1、HTML简介

2、HTML文档结构

3、HTML标签分类（一）

4、HTML标签分类（二）　

5、特殊符号

6、其他常用标签

一、前端开发工具简介

参考阅读：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669889.html

https://www.cnblogs.com/xiaoyuanqujing/articles/11669962.html

还推荐微软的 VScode，也是一款强大且免费的软件，亦支持前端开发。

二、前端基础

1、什么是前端——所见即所得

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

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

2、前端学习历程

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

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

3、HTTP协议

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

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

# 浏览器可以充当很多服务端的客户端
百度腾讯视频优酷视频....

# 如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
1.浏览器很牛逼能够自动识别不同服务端做不同处理
2.制定一个统一的标准如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
那么你就必须要遵循一些规则——因此诞生了 HTTP协议

"""

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

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

# 请求数据格式（请求头和请求体之间，是有一行空行的）
请求首行 \r\n　　(标识HTTP协议版本，当前请求方式)
请求头 \r\n　　(一大堆k,v键值对)
\r\n
请求体 \r\n　　(并不是所有的请求方式都有get没有post有存放的是post请求提交的敏感数据)

# 响应数据格式（响应头和响应体之间，是有一行空行的）

响应首行 \r\n　　(标识HTTP协议版本，响应状态码)
响应头 \r\n　　(一大堆k,v键值对)
\r\n
响应体 \r\n　　(返回给浏览器展示给用户看的数据)

# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息：

1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面你会发现会自动跳转到登陆页面)
4XX:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)

# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容

2.post请求
朝服务端提交数据
eg:用户登陆输入用户名和密码之后提交到服务端后端做身份校验

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

三、HTML

1、HTML简介

超文本标记语言——HTML （Hypertext Markup Language）

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

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

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

# 注释:注释是代码之母




由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：

导航条所有的html代码


左侧菜单栏的HTMl代码

2、HTML文档结构

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

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

注意:

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

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

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开

在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

3、HTML标签分类（一）——单标签和双标签

（1）分类

1 双标签

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

2 单标签(自闭和标签)

<img />

<br />

4、HTML标签分类（二）——块级标签 & 行内标签

# 1 块儿级标签:独占一行
h1~h6p div
1 块儿级标签可以修改长宽行内标签不可以修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签但是它只能嵌套行内标签不能嵌套块儿级标签
如果你套了问题也不大因为浏览器会自动帮你解开(浏览器是直接面向用户的不会轻易的报错哪怕有报错用户也基本感觉不出来)

总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）

# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签可以嵌套行内标签

HTML 常用标签汇总：

https://www.cnblogs.com/bigorangecc/p/12874484.html

参考阅读：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669913.html

【2020Python修炼记】前端开发之 前端基础和HTML入门

【目录】

一、前端开发工具简介

二、前端基础

1、什么是前端

2、前端学习历程

3、HTTP协议

三、HTML

1、HTML简介

2、HTML文档结构

3、HTML标签分类（一）

4、HTML标签分类（二）

5、特殊符号

6、其他常用标签

一、前端开发工具简介

还推荐微软的 VScode，也是一款强大且免费的软件，亦支持前端开发。

二、前端基础

1、什么是前端——所见即所得

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

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

2、前端学习历程

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

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

3、HTTP协议

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

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

"""

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

# 响应数据格式（响应头 和 响应体 之间，是有一行空行的）

响应首行 \r\n (标识HTTP协议版本，响应状态码) 响应头 \r\n (一大堆k,v键值对) \r\n 响应体 \r\n (返回给浏览器展示给用户看的数据) # 响应状态码 用一串简单的数字来表示一些复杂的状态或者描述性信息 ：

# 请求方式 1.get请求 朝服务端要数据 eg:输入网址获取对应的内容

2.post请求 朝服务端提交数据 eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

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

三、HTML

1、HTML简介

超文本标记语言——HTML （Hypertext Markup Language）

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

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

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

# 注释:注释是代码之母

由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：  导航条所有的html代码   左侧菜单栏的HTMl代码

2、HTML文档结构

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

注意:

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

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

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开

在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

3、HTML标签分类（一）——单标签 和 双标签

（1）分类

1 双标签

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

2 单标签(自闭和标签)

<img />

<br />

4、HTML标签分类（二）——块级标签 & 行内标签

# 2 行内标签:自身文本多大就占多大 i u s b span 行内标签不能嵌套块儿级标签 可以嵌套行内标签

HTML 常用标签汇总：

相关推荐

【2020Python修炼记】前端开发之前端基础和HTML入门

4、HTML标签分类（二）　

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

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

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

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

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

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

# 响应数据格式（响应头和响应体之间，是有一行空行的）

响应首行 \r\n　　(标识HTTP协议版本，响应状态码)
响应头 \r\n　　(一大堆k,v键值对)
\r\n
响应体 \r\n　　(返回给浏览器展示给用户看的数据)

# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息：

# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容

2.post请求
朝服务端提交数据
eg:用户登陆输入用户名和密码之后提交到服务端后端做身份校验

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

# 注释:注释是代码之母

由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：

导航条所有的html代码


左侧菜单栏的HTMl代码

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

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

3、HTML标签分类（一）——单标签和双标签

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

# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签可以嵌套行内标签