前端基础——前后端的概念、服务端搭建及客户端访问、超文本传输协议(HTTP)、超文本标记语言(HTML)
一、前端和后端的概念
前端
任何与用户直接打交道的操作界面 都可以称之为前端>>>:接待员
后端
不直接与用户打交道 主要负责内部真正的业务逻辑的执行>>>:幕后操作者
前端学习之路
专业的前端也需要培训至少六个月 而我们作为后端开发工程师 前端只学最基本最核心的一块 目的不是为了让你直接可以从事前端 而是给你以后的工作提供方便
1.防止别人蒙你
2.可以自己编写简易的页面
3.逼急了甚至也可以转前端
前端三剑客
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态
二、前端前戏
1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
三、HTTP协议
1.四大特性：
1、基于请求响应
客户端发送请求、服务端回应响应
2、基于TCP、IP作用于应用层之上的协议、该协议属于应用层
3、无状态
服务端不会保存客户端的状态
4、无\短连接
客户端与服务端不会长久保持连接
2.数据格式
1、请求格式
请求首行(请求方式（很多种）协议版本)
请求头(一大堆的K:V键值对)
换行
响应头(存放敏感信息 并不是所有的请求方式都有请求体)
2、响应格式
响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)
3.响应状态码
用数字来表达一些文字意义(类似于暗号)
1XX:服务端已经接收到了你的请求正在处理 客户端可以继续发送或者等待
2XX:200 OK 请求成功 服务端发送了对应的响应
3XX:302(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
4XX:403访问权限不够 404请求资源不存在
5XX:服务端内部错误
在公司中我们还会自定义更多的响应状态码 通常以10000起步
聚合数据
四、HTML简介
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象
超文本标记语言:所见即所得
五、HTML概览
1、HTML注释语法：
<!--注释内容-->
2、HTML文档结构
<html>
<head>
<!--主要放跟浏览器交互的配置-->
</head>
<body>
<!--主要放给用户查看的花里胡哨的内容-->
</body>
</html>
3、HTML标签分类
单表签（自闭的标签）
eg：
<img/>
双标签
eg：
<h1></h1>
标签的分类二
行内标签 u i s b
内部文本多大就占多大
块儿级标签 h系列 p
独占一行
六、预备知识
1.网页信息数据一般也会存放于文件中
.html
2.pycharm支持前端所有类型的文件编写
内置有自动补全的功能 我们只需要专注于标签名的编写即可
3.html文件的打开
内置有自动调用浏览器的功能
七、head中常见的标签
1、<title>网页小标题</title>
2、meta定义网页源信息（众多配置）
<meta name = "keywords" content="查询关键字"/>
<meta name = "description" content="网页简介"/>
3、style内部支持css代码
<style>
h1{
color:green;
}
</style>
4、link引入外部css文件
<link rel="stylesheet" href='css文件地址'>
5、script支持内部编写js代码、也可以引入外部的js文件
<script>
prompt('人生苦短'，'及时行乐')
</script>
<script>
<script src="js文件地址">
</script>
八、body内基本标签
1、标题系列标签
h1~h6
<h1></h1>
2、段落标签
<p></p>
3、其他标签
<u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<b>粗体</b>
ps:相同的效果可以由不同的标签实现
4、换行与分割线
<br/>
<hr/>
九、常见符号
1、空格
2、大于 >
3、小于 <
4、 & &
5、 ￥ ¥
6、 © ©
4、 ® ®
十、body内布局标签
块儿级标签
<div></div>
行内标签
<span></span>
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
十一、body内常用标签
标签括号内填写的 什么=什么 称之为的标签的属性
1.默认属性
标签自带的 编写的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
1、链接标签
<a></a>
href属性、具备跳转的功能、填写其他标签的id值具备锚点的功能
target属性、默认_self 原网页跳转、_blank新页面跳转
2、图片标签
<img/>
src属性、填写图片的地址
title属性、鼠标悬停图片上自动展示文本信息
alt属性、图片加载失败的时候提示的信息
width、height属性、图片的尺寸、两者调整一个即可、会等比例变化
十二、列表标签
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ps:页面上所有有规则排序的横向、竖向的数据、一般都是使用的无序列表
有序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
标题列表
<dl>
<dt></dt>
<dt></dt>
<dt></dt>
</dl>
十三、表格标签
1、先写基本骨架
<table>
<thead>表头</thead>
<tbody>表格数据</tbody>
</table>
2、再写表头及表单数据
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
十四、表单标签
可以获取到用户的数据并发送给服务端
form标签
actiop属性 控制数据的提交地址
method属性 控制数据的提交方法
input标签（功能极其强大的标签）
type属性：
text 普通文本
passwoed 密文展示
date 日期选项
email 校验邮箱格式
radio 单选框
check 复选框
file 文件
submit 提交按钮
reset 重置按钮
button 普通按钮
select标签 下拉框
option标签 一个个选项
<select>
<option></option>
</select>
textarea标签 获取大段文本
input标签应该有name属性
name属性相当于字典的键、input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端
浙公网安备 33010602011771号