目录
一、前端介绍
1、什么是前端?
- 前端是任何与用户直接打交道的操作界面都可以称之为前端
能够用肉眼看到的都是前端
比如:PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容。
2、什么是后端?
- 就是一堆代码,用户不能够直接看到,不直接与用户打交道的都是后端。
常见的后端:Python、Java、Go等。
3、为什么要学前端?
- 看懂前端代码,能搭建简单的页面
4、什么是web前端技术?
- web前端技术是基于浏览器实现客户端的一套综合技术,包括了HTML、CSS、javascript等。
5、W3C标准
- w3c: 是一个公益基金组织,由互联网之父(博纳斯·李)牵头组织起来的。
- w3c(万维网联盟)专门去维护互联网相关技术的发展与规范的。
- w3c标准为了实现互联网网页制作的统一规范,所以设计了三大标准:
- 结构标准(HTML)
- 外观标准(CSS)
- 行为标准(JS)
web开发技术栈一共有3门语言,称为是前端的三剑客!分别是:
- HTML:网页的骨架,没有任何样式。
- 开发者要遵循结构标准,就需要使用HTML来开发网页的内容与结构,需要遵循HTML语法。
- CSS:给网页骨架添加样式
- 开发者要遵循外观标准,就需要使用CSS来设计或修改网页的外观效果,需要遵循CSS语法。
- javascript:简称js,html、css都是不能动的,静态的,js就是控制页面的动态效果。
- 开发者要遵循行为标准,就需要使用javascript来编写网页的动态特效以及数据交互能力,需要遵循javascript ECMA语法。
6、前端框架(库)
BOOTSTRAP/JQuery/Vue/React/Angular.js
- 提前封装好了很多操作,只需要按照固定的语法调用即可
前端基础
二、浏览器访问页面发生了哪些事
1. 客户端输入网址向服务端发起请求
2. 服务端收到客户端的请求,处理请求
3. 服务端要给客户端做出响应
4. 把服务端返回的内容渲染(显示)到浏览器页面中
浏览器就是一个万能的客户端,超级客户端。言外之意,它可以作为很多服务端的客户端。
三、HTTP协议
1、什么是HTTP协议
- 超文本传输协议
- 用来规定服务器和浏览器之间数据交互的格式
- 该协议可以不遵循,但是自己写的服务端不能被浏览器正常识别,只能单机使用
2、HTTP的四大特性
(1)基于请求响应(有请求,有响应)
(2)基于TCP/IP之上,作用域应用层之上的协议
(3)无状态
- 不保存用户的信息
- 由于HTTP协议是无状态的,所以后来出现了一些专门用来记录用户状态的技术
- cookie/session/token
(4)无/短链接
- 请求来一次,就响应一次,之后我们两个就没有任何联系了
- 长链接
- 双方建立连接之后默认不会断开链接
- websocket
- 双方建立连接之后默认不会断开链接
3、HTTP协议的格式
(1)请求数据格式
- 请求首行(请求方式、协议和版本号)
- 请求头(多组K:V键值对)
- 换行符(\r\n)
- 请求体(并不是所有的请求都有,get没有post有,存放的是post请求提交的敏感数据)
(2)响应数据格式
- 响应首行(响应状态码)
- 响应头(多组K:V键值对)
- 换行符(\r\n)
- 响应体(返回给浏览器,展示给用户看的数据)
(3)请求方式
- get请求
- 朝服务端要数据
- 输入网址获取对应的内容
- 朝服务端要数据
- post请求
- 朝服务端提交数据
- 用户登录,输入用户名密码之后提交到服务端后端做身份校验
- 朝服务端提交数据
(4)响应状态码
- 使用一个特殊的数字代表一串复杂的描述性信息
- 1xx:代表的是请求数据成功,但是这个时候还可以继续往服务端提交数据
- 2xx:代表的是请求成功(200 OK)
- 3xx:代表的是重定向(301 302)
- 4xx:代表的是资源找不到(404 Not Found)
- 5xx:服务器内部错误(出现网页打不开的情况)(500 502)
面试题:
get和post的区别?
1. get:
索要数据的时候使用
传参方式:在网址栏的问号后面:key=value的键值对方式
数据传递不安全
数据传递的时候,携带的数据量是有限制的,大概4KB左右的数据2.post:
提交数据的时候使用
在请求体里面
数据传递更加安全
数据传递没有限制,想传多少传多少
请说出常见的响应状态码(1xx 2xx 3xx 301 201)
(URL)
- 统一资源定位符(网址)
四、HTM简介
- 超文本标记语言
- 如果想要让浏览器能够渲染出写的页面,都必须遵从HTML语法
- 我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)
简单的页面
<h1>hellow Python</h1>
<a href="https://meizitu.com">click me!</a>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7" alt="my wifi">
- HTML就是书写页面的一套标准
五、HTML中的注释语法
- 由于HTML代码非常杂乱无章且非常多,所以我们习惯性的用注释来划分区域方便后续的查找
单行注释
<!-- 单行注释 -->
多行注释
<!--
多行注释1
多行注释2
多行注释3
-->
六、HTML的文档结构
<html>
<head></head>:head内的标签不是给用户看的,而是定义一些配置,主要是给浏览器看的
<body></body>:body内的标签,写什么浏览器就渲染什么,用户就能看到什么
</html>
注意:HTML代码是没有格式的,可以全部写在一行,只不过我们习惯了缩进来表示代码
- HTML的文档结构通常遵循以下基本结构:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
- 首先,<!DOCTYPE html> 声明定义了当前文件是一个 HTML 文件。
- 接下来是 <html> 标签,它是整个 HTML 文档的根元素。
- 在 <html> 标签之内,有两个主要的部分: <head> 和 <body>。
- <head> 用于定义文档的头部信息,其中可以包含一些重要的元素
- 例如 <title> 设置页面标题,<meta> 设置字符编码、关键词等。
- 这些元素通常不会展示在浏览器中,而是提供一些关于页面的描述和配置。
- <body> 则包含了整个页面的可见内容
- 例如段落、标题、图像、链接等。
- 这些元素将直接影响和呈现到用户所看到的页面上。
- 需要注意的是,HTML 的标签是有层级关系的,内部的标签必须位于外部标签的范围之内,无法单独存在。
七、head常用标签
【1】title
<title>Title</title>
- 标题标签
【2】style
<style></style>
- 内部用来书写CSS代码
【3】script
<script></script>
- 内部用来书写JS代码(可以引入外部JS文件)
【4】link
<link rel="stylesheet" href="">
- 引入外部CSS文件
八、body中常用的标签
基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p><h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4><h5>标题5</h5>
<h6>标题6</h6><!--换行-->
<br><!--水平线-->
<hr>
【小结】
在HTML中,标签是用来定义页面的主体内容的。它是HTML文档的必需标签之一,包围了展示在浏览器窗口中的实际内容。
特殊符号
【小结】
- 特殊符号是指在文本中使用的一些非常规字符,这些字符通常不直接出现在键盘上,需要通过特定的键盘组合或者字符实体来输入。