前端基础之HTM引入

目录

一、前端介绍

二、浏览器访问页面发生了哪些事

三、HTTP协议

1、什么是HTTP协议

2、HTTP的四大特性

（1）基于请求响应(有请求，有响应)

（2）基于TCP/IP之上，作用域应用层之上的协议

（3）无状态

（4）无/短链接

3、HTTP协议的格式

（1）请求数据格式

（2）响应数据格式

（3）请求方式

（4）响应状态码

四、HTM简介

五、HTML中的注释语法

六、HTML的文档结构

七、head常用标签

八、body中常用的标签

基本标签

特殊符号

---

一、前端介绍

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代码)

简单的页面

hellow Python
click me!

• HTML就是书写页面的一套标准 

五、HTML中的注释语法

• 由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

单行注释

多行注释

六、HTML的文档结构

    ：head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    ：body内的标签，写什么浏览器就渲染什么，用户就能看到什么

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码 

• HTML的文档结构通常遵循以下基本结构：

• 首先， 声明定义了当前文件是一个 HTML 文件。
  • 接下来是 标签，它是整个 HTML 文档的根元素。
  • 在 标签之内，有两个主要的部分： 和 。
• 用于定义文档的头部信息，其中可以包含一些重要的元素
  • 例如
    • 标题标签

    【2】style

    • 内部用来书写CSS代码

    【3】script

    • 内部用来书写JS代码(可以引入外部JS文件)

    【4】link

    • 引入外部CSS文件

    八、body中常用的标签

    基本标签

    加粗
    斜体
    下划线
    删除

    
    

    段落标签

    标题1

    
    

    标题2

    
    

    标题3

    
    

    标题4

    标题5

    
    

    标题6

    
    
    

    ---

    【小结】

    在HTML中，标签是用来定义页面的主体内容的。它是HTML文档的必需标签之一，包围了展示在浏览器窗口中的实际内容。

    特殊符号

    

    【小结】

    • 特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。