前端day 01 html基础，http简介

5.11

前端

什么是前端

任何于用户直接打交道的页面都可以称之为前端，比如电脑界面，手机界面，网页
什么是后端

幕后操作者，不直接与用户打交道

学习历程

html：内容，网页的骨架
CSS：外观，添加样式
JavaScript：动作，网页的动态效果
bootstrap
jQuery
vue

浏览器窗口输入网站回车发生了几件事

1. 浏览器朝服务端发送请求
2. 服务端接收请求
3. 服务端返回响应的响应，返回网站
4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看

浏览器可以充当很多服务端的客户端，浏览器有一个，服务端有很多个，想要一个客户端与多个服务端交互：
1. 浏览器能够自动识别服务端做不同处理
2. 制定一个同一标准，所有服务端都要遵循一些规则：http协议

http协议

超文本传输协议，用来规定服务端与浏览器之间的数据交互格式，这样浏览器就能正常渲染服务端发送的内容

不用http协议也可以，只是就不能用浏览器，需要写一个app

以下的内容要求滚瓜烂熟

http协议四大特性

基于请求响应
基于TCP / IP作用于应用层之上的协议：协议上面的协议
无状态，不保存用户的信息，由于http这个特性，后来出现了一些专门用来技术用户状态的技术：cookie，session，token
无链接 / 短链接，请求来一次响应一次，之后没有任何联系

长链接：双方建立链接之后默认不断开：websocket

服务端与浏览器之间的数据交互格式

请求数据格式
响应数据格式

请求方式

get请求：朝服务端要数据

例：输入网址获取对应的内容
post请求：朝服务端提交数据

例：用户登陆，输入用户名和密码之后，提交到服务端做身份校验

请求数据格式

请求首行，请求头，/r/n，请求体

1. 请求首行：标识http版本，档期啊请求方式（get/post）
2. 请求头：一堆k:v键值对
3. 回车：/r/n
4. 请求体：get没有请求体，post请求体里面放敏感数据

响应数据格式

响应首行，响应头，/r/n，响应体

1. 响应首行（标识http协议版本，响应状态码）
2. 响应头
3. /r/n
4. 响应体

响应状态码：用一串数字标识一些复杂的状态或描述性信息，如200，500，404

主要有几类：
	1xx：服务端已经顺利接收了你的数据，正在处理，可以继续提交额外数据
	2xx：服务端成功响应了你的数据，200 request ok
	3xx：重定向：当你在访问一个需要登陆之后才能看的页面，页面会重定向到登陆页面
	4xx：请求错误：404：请求资源不存在，403：当前请求不合法或不符合访问资源的条件
	5xx：服务器内部错误，500：internal server error

url：统一资源定位符，标识资源的位置，也就是网址

让我们在python上写的服务端返回的数据能被浏览器识别：

conn.send(b'HTTP/11 200 OK 

')
conn.send(b'hello')
# 此时，在conn里可以发送html代码或文件，可以被浏览器识别

html

简介

超文本标记语言，不是编程语言。能够让浏览器渲染页面，我们现在看到的所有网站都是html代码

书写html

注释

<!--单行注释-->
<!--
多行注释
多行注释
-->
由于html比较杂乱，所以我们习惯性地用注释来划定区域方便后续的查找

<!--左侧菜单栏开始-->
...
<!--左侧菜单栏结束-->

<!--顶端导航栏开始-->
<!--顶端导航栏结束-->

html文档结构

<html>
    <head></head> head标签里的代码页面上显示不出来，是定义一些配置给浏览器看的
    <body>
        hello：用户能够看到的内容，给浏览器渲染
    </body>
</html>

文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加功能

新建html文件，会自动帮你生成一些标签；html没有任何格式，可以全部写在一行里面，只不过我们习惯了缩进来显示代码

两种打开html文件的方式

使用浏览器打开
在pycharm内部集成了自动调用浏览器的功能，前提是电脑上安装了对应的浏览器

<head>
    <title>标签名字</title>
    <style>
        h1{
            color:yellow,
        }
        写css代码
    </style>
    <script src='myjs.js'>
        写js代码或引入js文件
    </script>
    <link>
    	用来引入外部css文件
    </link>
	<meta>
		告诉浏览器干什么活
		meta name，meta keyword。。。
	</meta>
</head>

body里的标签

基本标签：

h1~h6 一级标签到六级标签
b：加粗标签
i：斜体
u：下划线
s：删除线
p：段落标签，一个p标签就是一行
br：换行：单标签
hr：水平分割线：单标签

<body>
    <h1>
        一级标签
    </h1>
    <h2>
        二级标签
    </h2>
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <p>
        文本标签，单独占一行
    </p>
    <br> 换行
    <hr> 水平分割线
</body>

标签的分类2

块级标签：独占一行
1. 块级标签可以修改长宽度
2. 可以嵌套任意的块级标签和行内标签
3. 特例：p标签是块级标签，但是只能嵌套行内标签，不能嵌套块级标签，如果嵌套了，自动会分隔开
行内标签：自身文本多大，就占多大
1. 不能修改宽高度，宽高度取决于文本大小
2. 可以嵌套行内标签，不能嵌套块级标签，但是一般行内标签不会用来嵌套

前端基本不会报错，只是显示的效果会有错误

特殊符号

空格：标签内空格只能有一个，要用多个空格要用  
1 > 2：大于号，防止与标签混淆，> 写作 > 小于号 < 写作 <
and 符号 &：&
￥羊角符号：¥
版权圆圈c：©
商标，圆圈r：®

&nbsp;&nbsp;&nbsp;&nbsp;
&lt;&lt;&gt;&gt;
&amp;&amp;&yen;&yen;&copy;&copy;&reg;

常用标签

div，span，在构造页面初期最常使用的，一般先用div和span占位，后期再去调整样式

img标签

div
块级标签，可以看作一块区域，也就意味着div用来提前规划位置

span
行内标签，普通的文本用span标签

img
<img src="" alt="" title="" height="" width="">
图片标签
 - src里放文件路径，可以是本地的也可以是网上的，如果是网上的，会自动发送get请求得到图片
 - alt里面放图片的描述信息，当图片加载失败的时候显示
 - title 图片的标题，鼠标悬停在图片上的时候显示
 - height，width：高度和宽度，默认模式下，只修改一个的时候另外一个参数会等比例缩放，如果修改两个参数，并且没有考虑比例的问题，图片会被拉伸
 
a标签
<a href="" target="_blank">描述信息</a>
点击之后跳转到内部关联的网址
 - herf里面放的是url网址，点击就会跳转
点之前是蓝色的，点过之后会变色
 - 可以放其他标签的id值，点击就会跳转到别的标签的位置

 - target默认参数_self，在当前页面跳转，换成_blank之后，在新页面打开

a标签锚点功能
点击一个文本，页面自动跳转到标题对应的内容区域

标签两个重要的属性

id，class

id：每个html页面唯一，相当于身份证号，通过直接找到这个标签

class：类似于面向对象的类的继承，一个标签可以继承多个

标签可以有默认的属性也可以有自定义的属性

列表标签

分为三类：有序列表，无序列表，标题列表

用最多的是无序列表

<body>
    <ul type="square">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
    </ul>
</body>

现在这样非常丑，以后写样式可以变得很好看

有序列表

简写，emmet插件
ol>li*3 按tab键，会自动帮你生成有序列表
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

标题列表

<dl>
	<dt>标题1<dt>
	<dd>内容1</dd>
	<dt>标题2<dt>
	<dd>内容2</dd>
</dl>

总结

前端没有逻辑，记忆就行，要花时间记

要记标签的用法，也要记标签的意思