前端

前端

前端与后端的概念

前端

任何与用户直接打交到的操作界面都可以称之为前端>>>:接待员

后端

不直接与用户打交道，主要负责内部真正的业务逻辑的执行>>>:幕后操作者

前端三剑客

HTML

像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。

CSS

而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的，也就是做到美化的效果。

JavaScript

与用户进行交互，将用户的行为提交到后台服务器等。

一.前端前戏

1.编写服务器

2.浏览器充当客户端访问服务端

3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)

4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式

二.HTTP协议

1.四大特性

1.基于请求响应
客户端发送请求，服务端回应响应
2.基于TCP、IP作用于应用层之上的协议
该协议属于应用层
3.无状态
服务端不会保存客户端的状态(记不住人)
4.无\短连接
客户端与服务端不会长久保持连接

2.数据格式

1).请求格式

请求首行(请求方式(有很多种) 协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息 并不是所有的请求方式都有请求体)

2).响应格式

响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)

3).响应状态码

(1).状态码大类

状态码分类	说明
1xx	响应中--临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它
2xx	成功--重定向到其它地方；它让客户端再发起一个请求以完成整个处理
3xx	重定向--重定向到其它地方；它让客户端发起一个请求以完成整个处理
4xx	客户端错误--处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等
5xx	服务端错误--处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等

(2).常见的响应状态码

状态码	英文描述	解释
200	OK	客户端请求成功，即处理成功，这是我们最想看到的状态码
302	Found	指示所请求的资源已移动到由Location响应头给定的URL,浏览器会自动重新访问到这个页面
304	Not Modified	告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向
400	Bad Request	客户端请求有语法错误，不能被服务器所理解
403	Forbidden	服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源
404	Not Found	请求资源不存在,一般是URL输入有误,或者网站资源被删除了
428	Precondition Required	服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头
429	Too Many Requests	太多请求,可以限制客户端请求某个资源的数量,配合Retry-After(多长时间后可以请求）响应头一起使用
431	Request Header Fields Too Larger	请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。
405	Method Not Allowed	请求方式有误,比如应该用GET请求方式的资源,用了POST
500	Internal Server Error	服务器发生不可预期的错误，服务器出异常了，赶紧看日志去吧
503	Service Unavailable	服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好
511	Nerwork Authentication Required	客户端需要进行身份验证才能获得网络访问权限

三.HTML

1.HTML简介

1.直接发送手写的数据

2.转为发送文件里面的数据

3.编写HTML出现特殊的现象

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

2.HTML概览

1.HTML注释语法
	<!--注释内容-->

2.HTML
	<html>		固定格式 html包裹
    	<head>主要放跟浏览器交互的配置</head>
        <body>主要放给用户查看的花里胡哨的内容</body>
    </html>
    
3.HTML标签分类
	单标签(自闭和标签)
    	<img/>
    双标签
    	<h1></h1>

3.预备知识

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

4.head内常见标签

1).title标签

title标签的作用就是定义网页的标题

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>这是一个网页标题</title>
	</head>
	<body>
		<p>内容</p>
	</body>
</html>

2).meta标签

meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息并不是给用户的，而是给搜索引擎看的。

meta标签有两个重要的属性：name和http-equiv

name属性的几个常用取值

属性值	说明
keywords	网页的关键字（可以多个）
description	网页的描述
author	网页的作者
copyright	版权信息

<!DOCTYPE html>
<html>
    <head>
        <title>这是一个网页标题</title>
        <meta name="keywords" content="CSDN，前端学习笔记，Kll"/>
        <meta name="description" content="这是CSDN的前端学习笔记"/>
        <meta name="author" content="Kll"/>
        <meta name="copyright" content="本站所有笔记均为书籍所学习摘抄，
        如有侵权，立即删除。"/>
    </head>
    <body>
        <p>内容</p>
    </body>
</html>

meta 标签的http-equiv属性只有两个重要作用：定义网页所使用的编码，定义网页自动刷新跳转。

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

这段代码告诉浏览器，该页面所使用的编码是utf-8，不过在HTML5标准中，代码简写为

<meta charset="utf-8"/>

如果你发现页面打开是乱码，很可能是没有加上这一句代码。在实际的开发中，我们必须在每一个页面中加上这句代码。

http-equiv的另一个作用是定义网页自动刷新跳转

<meta http-equiv="refresh" content="6;url=http://www.bilibili.com"/>

这段代码表示当前页面在6秒后会自动跳转到B站。

测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="6;url=http://www.bilibili.com"/>
 
    </head>
    <body>
        <p>等待6秒后自动跳转至B站</p>
    </body>
</html>

3).style标签

内部支持编写CSS代码

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            /*这里写CSS样式*/
        </style>
    </head>
    <body>
    </body>
</html>

4).link标签

link标签用于引入挖补样式文件(CSS文件)

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/index.css">
    </head>
    <body>
    </body>
</html>

5).script标签

script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件

<!DOCTYPE html>
<html>
    <head>
        <script>
            /*这里写JavaScript代码*/
        </script>
    </head>
    <body>
    </body>
</html>

6).base标签

base标签的作用是当超链接标签没有指定href和target的属性时会默认使用标签的内容

我们只需了解有这么一个标签即可

5.body内基本标签

1.标题系列标签
	h1~h6
2.段落标签
	p
3.其他标签
	u	下划线
    i	斜体
    s	删除线
    b	加粗
    '''相同效果可能是有不同的标签实现的，不是独一无二的'''
4.换行与分割线
	br	换行
    hr	分割线
    
"""
标签的分类二
	行内标签	u i s b
		内部文本多大就占多大
	块儿级标签	h系列 p
		独占一行
"""

6.常见符号

&nbsp;	空格
&gt;	大于
&lt;	小于
&amp;	&符
&yen	￥
&copy;	©
&reg;	®

7.body内局部标签

div
	块儿级标签
span
	行内标签
    
"""
标签之间可以相互嵌套，并且理论上可以无限套娃
	块儿级标签内部可以嵌套块儿级标签和行内标签
	p标签虽然是块儿级标签，但是它的内部不能嵌套块儿级标签
	行内标签内部只能嵌套行内标签
"""

8.body内常用标签

标签括号内填写的什么=什么称之为标签的属性
1.默认属性
标签自带的，编写的时候有自动提示
2.自定义属性
用户自定义，编写不会有提示甚至会飘颜色

a标签链接标签

href
    1.填写网址	具备跳转功能
		href='url'
    2.填写其他标签的id值	具备锚点功能
		href='#id'

img标签图片标签

src
	1.填写图片地址
    2.还有更多特性 目前没法讲
title
	鼠标悬浮在图片上自动展示的文本
alt	
	图片加载失败提示得到信息
width/height
	图片的尺寸，两者调整一个即可，等比例缩放

9.列表标签

无序列表

<ul>
    <li>数码</li>
    <li>装饰</li>
    <li>衣物</li>
</ul>

注意：页面上所有有规则排列的横向或者竖向的数据，一般使用的都是无序列表

有序列表

<ol type="I">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

还可以通过type竖向切换数字

标题列表

<d1>
	<dt>大标题</dt>
    	<dd>小标题1</dd>
    	<dd>小标题2</dd>
    <dt>大标题</dt>
    	<dd>小标题1</dd>
    	<dd>小标题2</dd>
    	<dd>小标题3</dd>
</d1>

10.表格标签

1.先写基本骨架
	<table>
        <thead></thead>
        <tbody></tbody>
    </table>
2.再写表头及表单数据
	 <tr>  一个tr标签就表示一行
        <th>编号</th>  th主要用于表头字段中 用来加粗显示
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    
    <tr>
        <td>1</td>  td主要用于表达数据中 
        <td>jason</td>
        <td>18</td>
    </tr>

实操

<table>
	<thead>
 		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
            </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>jason</td>
            <td>18</td>
         </tr>
     </tbody>
</table>

10.表单标签

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

form标签

action 控制数据的提交地址

method 控制数据的提交方法

input标签

类似于前端的变形金刚

input标签应该有那么属性

name属性相当于字典的键，input标签获取到的用户数据相当于字典的值

点击发送就会组织成字典的形式发送给服务端，这样才具有明确意义

type属性：

属性	介绍
text	普通文本
password	密文展示
date	日期选项
email	邮箱格式
radio	单选
checkbox	多选
file	文件
submit	触发提交动作
reset	重置表单内容
button	暂无任何功能

select标签

下拉框

option标签一个个选项

textarea标签

获取大段文本

标签：HTML,请求,标签,前端,初识,服务端,客户端
From： https://www.cnblogs.com/LZXSDM/p/16939616.html

初识前端

前端