前端基础——前后端的概念、服务端搭建及客户端访问、超文本传输协议(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标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端
标签:HTTP,标签,前端,HTML,超文本,客户端,服务端,属性
From: https://www.cnblogs.com/HaiMan/p/16939459.html