HTTP超文本传输协议以及HTML
前端简介
学习前端之前我们可以了解一下前端和后端的关系以及前端的构成
前端与后端
- 前端：与用户直接打交道的操作界面度可以称之为前端
- 后端(幕后工作者):不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
前端核心基础
- HTML：网页的骨架
- CSS：网页的样式
- JS：网页的动态
HTTP超文本传输协议
前戏
-
手写一个服务端程序，并使用浏览器充当客户端，但浏览器端却无法直接展示服务端的响应数据
-
原因是由于浏览器需要兼容很多服务器软件，为了实现无障碍沟通交流，有了一些协议，
HTTP协议、FTP协议、HTTPS协议，我们手写的服务端程序没有遵循这些协议，只有遵循这些协议服务端才能将响应数据展示到浏览器。
八股文
浏览器于服务端之间的应用层协议使用的就是HTTP协议，它要求建立在可靠传输协议基础上进行，通常使用TCP协议。
HTTP协议规定了客户端与服务端之间的通讯方式：一次请求一次响应，即客户端发送一个HTTP请求(request)给服务端，而服务端处理该请求后给客户端发送一个HTTP响应(response)。在这个通讯过程中不允许服务端主动发送内容给客户端。
四大特性
- 基于请求响应
- 基于TCP/IP之上作用于应用层的协议
- 无状态
- 无/短连接
数据格式
请求数据格式
- 请求首行：请求数据的第一行。其中GET表示请求方式，请求方式有很多种，/表示请求资源路径，HTTP/1.1表示现已版本
- 请求头：第二行开始，格式为 key:value形式
- 换行
- 请求体：携带一些敏感的数据，不是所有的请求都有请求体
响应数据格式
- 响应首行：响应状态码
- 响应头：一大堆k：v键值对
- 换行
- 响应体：一般情况下就是浏览器要展示给用户看的数据
响应状态码
利用数字来表示一些复杂情况说明，类似于暗号
- 1XX:服务端已经收到你的请求正在处理，你可以继续提交或者等待
- 2XX: 200 OK服务端给出了相关响应
- 3XX：重定向
- 4XX：403请求不符合条件，404请求资源不存在
- 5XX：服务端内部错误
我们在公司中还会自己定义更多的状态码，一般情况下从10000开始
HTML简介
定义
HTML也被称为超文本标记语言，是所有浏览器展示的页面必备的。浏览器展示的界面我们也称之为HTML页面，存储HTML语言的文件后缀一般是.html
HTML没有任何的逻辑，所见即所得
注释语法
<!--注释内容-->
文件结构
<html> <!-- 所有的代码都必须写在html标签内部-->
<head></head> <!-- head内数据一般都不是给用户看的-->
<body></body> <!-- boby内数据一般都是给用户看的-->
</html>
HTML标签的分类
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>
HTML代码是不讲究缩进的，我们只是习惯了python的缩进语法
head内常用标签
-
title：控制标签页小标题 -
style：内部支持编写CSS -
link：引入外部CSS文件 -
script：内部支持编写js代码，还可以通过src熟悉引入外部js文件 -
meta：通过内部属性的不同可以有很多功能<meta name="keywords" content="填写一些关键字，提升网页被搜索的概率"> <meta name="description" content="填写一些网页的简介">
body内基本标签
-
h1-h6：标题标签 -
p： 段落标签 -
hr：水平分割线 -
br：换行符 -
u：下划线 -
i：斜体 -
s：删除线 -
b：加粗
注意：有很对样式，可能存在多种标签可以实现
块儿级标签与行内标签
- 块儿级标签：
h1-h6,p,hr,br,一个标签独占一行 - 行内标签：
u,i,s,b，内部文本多大自身就占多大
body内基本符号
空格
> 大于号
< 小于号
& &
¥ ￥
® 注册
© 版权
body内布局标签
div：块儿级标签span：行内标签
- 块儿级标签是可以通过css调整为不独占一行
- 标签之间很多时候可以嵌套，块儿级可以嵌套任何类型的标签，但是不能嵌套块级标签，行内标签只能嵌套行内标签。
body内常见标签
a标签
# 链接标签
href --> 可以填写网址，点击自动跳转，还可以填写其他标签的id值，实现锚点功能
target --> 可以控制是否新建页面跳转
-self 不新建页面跳转
-black 新建页面跳转
img标签
# 图片标签
src:填写图片地址(网络地址，本地地址）
title：鼠标悬浮在图片上就会有提示信息
alt：图片加载失败提示的信息
height：调整图片的高度
width：调整图片的宽度
# 上诉两个调整一个，另外一个等比例缩放，可以避免失帧问题
标签的两大重要性
下面两个属性都是用来快速定位需要操作的标签
- id属性(一对一管理)：类似于身份证号，在同搞一个html页面上，id值不能重复
- class属性(批量管理)：类似于分组，多个标签可以拥有相同的class值
列表标签
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="1" start="3"> type是序号的种类，start是序号的起始值
<li></li>
<li></li>
<li></li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容1</dd>
</dl>
表格标签
<table>
<thead>
<tr>
<th>id</th>
<th>用户</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method="">
action属性： 用于控制数据的提交方式，不写的话就是朝当前页面所在的地址提交
method属性： 用于控制请求的方式(get/POST)
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password: <input type="password"></p>
<p>birthday: <input type="date"></p>
<p>email: <input type="email"></p>
<p>gender: <input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby: <input type="checkbox" name="hobby" checked>篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">羽毛球
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">南京</option>
<option value="">苏州</option>
</select>
</p>
<p>books:
<select name="" id="" multiple>
<option value="">挪威的森林</option>
<option value="">骆驼祥子</option>
<option value="">编程思想</option>
<option value="">数据结构</option>
</select>
</p>
<p>
info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<button type="button" value="普通按钮">
</form>
总结
1.radio框要想实现单选，得要将name属性都设置为相同
2.file与files的区别就是在标签内加multiple，就可以选择多个。select标签也是如此
