前端与后端的概念

前端

前端开发人员负责应用程序，浏览器或网站上看到的所有内容。前端设计人员负责网站的外观和感觉。前端的开发主要集中在一些人可能称之为开发“客户端”的方面JavaScript，超文本标记语言和CSS是前端语言。如果你想成为一名前端开发人员，那么就应该学习这些语言

后端

后端开发是指应用程序的服务器端以及数据库和浏览器之间的一切。后端开发人员代码为浏览器提供数据库数据。虽然用户不直接与网站的后端交互，但他们会通过前端应用程序间接地与这些开发人员处理的元素进行交互。后端开发处理存储和排列数据，同时确保前端正常运行

前端三剑客

游戏开发好学吗

HTML:像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。
CSS:而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的，也就是做到美化的效果。
JavaScript:与用户进行交互，将用户的行为提交到后台服务器等

前端前戏

编写服务端
浏览器充当客户端访问服务端
浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式

HTTP协议

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

四大特性

'''
http就是超文本协议 专门用于规范服务器端与客户端交互的格式
'''
1.基于请求响应
    客户端发送请求 服务端回应响应
2.基于TCP、IP作用于应用层之上的协议
 	该协议属于应用层
3.无状态
   	不保存用户的信息，每次过来都仿佛第一次看见
4.无\短连接
    请求一次回应一次，之后断开连接，
    长链接：双方建立链接后默认不断开，websocket

http的请求格式

#请求格式
   请求首行(http协议版本,当前请求的方式)
   请求头(一大堆k,v键值对)
   /r/n
   请求体(存放的是一些数据，并不是每种请求方式都有请求体，get没有请求体，post有)
   
#请求方式
   1.get:朝服务器索要数据
       eg：输入网址获得相应的数据
   2.post:向服务器提交数据
       eg:用户登录 输入用户名和密码后 提交到后端做身份校验
#响应格式
   响应首行(http协议版本,响应状态码)
   响应头(一大堆k,v键值对)
   /r/n
   响应体(返回给浏览器展示给用户看的数据)

        
3.响应状态码
	用数字来表达一些文字意义(类似于暗号)
    1XX:服务端已经接收到了你的请求正在处理 客户端可以继续发送或者等待
    2XX:200 OK 请求成功 服务端发送了对应的响应
    3XX:302(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
    4XX:403访问权限不够   404请求资源不存在
    5XX:服务端内部错误
	在公司中我们还会自定义更多的响应状态码 通常以10000起步
    	聚合数据

响应状态码

"""简单的说就是用一串数字来表示一些复杂的状态或者描述性信息"""
1xx:服务端已经接受到你的数据正在处理，客户端可以继续发送或者等待
2xx:服务器端成功响应你的数据(200)
3XX:302(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
4XX:403访问权限不够   404请求资源不存在
5xx:服务器端出现故障(500)
    
在公司中我们还会自定义更多的响应状态码 通常以10000起步
    	聚合数据

HTML简介

1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象

超文本标记语言:所见即所得(没有任何逻辑 是什么就是什么)

常见的HTML标签

HTML注释语法

<!--注释-->

HTML文档结构

<html>		固定格式 html包裹
       <head>主要放跟浏览器交互的配置</head>
       <body>主要放给用户查看的花里胡哨的内容	</body>
	</html>

HTML标签分类

单标签(自闭和标签)
    <img/>
双标签
    <h1></h1>

预备知识

1.网页信息数据一般也会存放于文件中
	.html
2.pycharm支持前端所有类型的文件编写
	内置有自动补全的功能 我们只需要专注于标签名的编写即可
3.html文件的打开
	内置有自动调用浏览器的功能

head内常见标签

1.title网页小标题
2.meta定义网页源信息(很多配置)
	<meta name="keywords" content="查询关键字">
	<meta name="description" content="网页简介">
3.style内部支持编写css代码
	<style>
            h1 {
                color: greenyellow;
            }
    </style>
4.link引入外部css文件
	<link rel="stylesheet" href="mycss.css">
5.script支持内部编写js代码也可以引入外部js文件
	<script>
            prompt('好好活着','不要浪费生命')
   </script>
	<script src="myjs.js"></script>
ps:了解每个标签大致的作用即可

body内基本标签

标题系列标签

<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>

段落标签

<p>
    彭于晏，1982年3月24日出生于台湾省澎湖县，毕业于不列颠哥伦比亚大学，加拿大籍华裔影视男演员、歌手。
    
2002年，    因出演个人首部电视剧《爱情白皮书》 ，从而进入演艺圈 [1]  。2005年，因在仙侠剧《仙剑奇侠传》中饰演唐钰一角而受到关注。2006年，主演剧情片《六号出口》。2007年，凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员，并为金马短片单元制作片头，完成了个人导演处女作 [2]  。2009年，发行个人首张EP《非爱不可》。
    2011年，彭于晏凭借励志片《翻滚吧！阿信》提名第48届台湾电影金马奖最佳男主角 [3]  。
</p>

展示结果:

格式化标签

加粗：strong标签和b标签
倾斜：em标签和i标签
删除线：del标签和s标签
下划线：u标签和ins标签

<strong>这是加粗</strong>
<b>这是加粗</b>
<em>这是斜体</em>
<i>这是斜体</i>
<u>这是下划线</u>
<ins>这是下划线</ins>
<del>这是删除线</del>
<s>这是删除线</s>

常见符号

这里写图片描述

body内布局标签

div		# 块级标签
	<div>div标签会独占一行</div>
span	# 行内标签
	<span>span标签不会独占一行，比如后面可以再写一个	 button</span>

超链接标签

外部链接

<a href="https://www.baidu.com/">百度一下</a>

内部链接

<a href="login.html">登录页面</a>

空链接

<a href="#">占位</a>

下载链接

<a href="test.txt">测试文件</a>

网页元素链接

<a href="https://www.baidu.com/">
    <img src="image/wallhaven-r7krmq.jpg" alt="">
</a>

锚点链接

<a href="#one">第一季</a>
<a href="#two">第二季</a>
<a href="#three">第三季</a>

<p id="one">第一季内容……</p>
<p id="two">第二季内容……</p>
<p id="three">第三季内容……</p>

target
    	默认_self原网页跳转
       _blank新建网页跳转

图片标签

图片标签：img标签。

这个标签必须带有src属性，表示图片的路径。

<img src="" alt="">

改标签可以设置以下常用的属性：

src图片的路径
alt如果图片加载失败，会显示alt里面的内容
title鼠标悬停在图片上面，会显示title里面的内容
height、width控制高度和宽度，一般只需要修改一个即可，浏览器会自动进行调整
border设置边框，参数就是边框宽度的像素，一般都是由CSS进行设置

列表标签

无序列表

<ul>
    <li>这是一个无序标签</li>
    <li>这是一个无序标签</li>
    <li>这是一个无序标签</li>
</ul>

有序标签

<ol>
    <li>这是一个有序标签</li>
    <li>这是一个有序标签</li>
    <li>这是一个有序标签</li>
</ol>

自定义标签

<dl>
    <dt>这是自定义标签的标题</dt>
    <dd>这是自定义标签</dd>
    <dd>这是自定义标签</dd>
    <dd>这是自定义标签</dd>
</dl>

表格标签

tabel标签：表示整个表格
tr标签：表示表格的一行
td标签：表示单元格，也就是表格的一列
th标签：表示表头单元格，会居中加粗字体
thead标签：表格的头部区域，就是表格的标题，比如“核酸检测报告表”。（注意与th区分，范围比th要大）
tbody标签：表格的主体区域

<table  width = "300px" cellspacing="0" border="1px" >
    <thead>核酸检测表</thead>
    <tbody>
        <!-- 这是第一行 -->
        <tr>
            <!-- th标签，首行标签，会加粗和居中字体 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>职位</th>
        </tr>
        <tr>
            <td>彭于晏</td>
            <td>39</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>胡歌</td>
            <td>39</td>
            <td>演员</td>
        </tr>
    </tbody>
</table>

表单标签

可以获取到用户的数据并发送给服务端

form标签

input标签

input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端这样才具有明确意义

select标签

标签：浏览器,请求,标签,前端,响应,HTML,讲解,部分,服务端
From： https://www.cnblogs.com/oiqwyig/p/16939534.html

前端(部分讲解)