前端之HTML
前端
前端与后端的概念
前端
任何与用户直接打交到的操作界面都可以称之为前端>>>:接待员
后端
不直接与用户打交道，主要负责内部真正的业务逻辑的执行>>>:幕后操作者
前端三剑客
HTML
像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。
CSS
而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的，也就是做到美化的效果。
JavaScript
与用户进行交互，将用户的行为提交到后台服务器等。
一.前端前戏
1.编写服务器
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
二.HTTP协议
1.四大特性
1.基于请求响应
客户端发送请求，服务端回应响应
2.基于TCP、IP作用于应用层之上的协议
该协议属于应用层
3.无状态
服务端不会保存客户端的状态(记不住人)
4.无\短连接
客户端与服务端不会长久保持连接
2.数据格式
1).请求格式
请求首行(请求方式(有很多种) 协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
2).响应格式
响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)
3).响应状态码
(1).状态码大类
| 状态码分类 | 说明 |
|---|---|
| 1xx | 响应中--临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它 |
| 2xx | 成功--重定向到其它地方；它让客户端再发起一个请求以完成整个处理 |
| 3xx | 重定向--重定向到其它地方；它让客户端发起一个请求以完成整个处理 |
| 4xx | 客户端错误--处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等 |
| 5xx | 服务端错误--处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等 |
(2).常见的响应状态码
| 状态码 | 英文描述 | 解释 |
|---|---|---|
| 200 | OK | 客户端请求成功，即处理成功，这是我们最想看到的状态码 |
| 302 | Found | 指示所请求的资源已移动到由Location响应头给定的URL,浏览器会自动重新访问到这个页面 |
| 304 | Not Modified | 告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向 |
| 400 | Bad Request | 客户端请求有语法错误，不能被服务器所理解 |
| 403 | Forbidden | 服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源 |
| 404 | Not Found | 请求资源不存在,一般是URL输入有误,或者网站资源被删除了 |
| 428 | Precondition Required | 服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头 |
| 429 | Too Many Requests | 太多请求,可以限制客户端请求某个资源的数量,配合Retry-After(多长时间后可以请求）响应头一起使用 |
| 431 | Request Header Fields Too Larger | 请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。 |
| 405 | Method Not Allowed | 请求方式有误,比如应该用GET请求方式的资源,用了POST |
| 500 | Internal Server Error | 服务器发生不可预期的错误，服务器出异常了，赶紧看日志去吧 |
| 503 | Service Unavailable | 服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好 |
| 511 | Nerwork Authentication Required | 客户端需要进行身份验证才能获得网络访问权限 |
三.HTML
1.HTML简介
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象
ps:超文本标记语言：所见即所得(没有任何逻辑，是什么就是什么)
2.HTML概览
1.HTML注释语法
<!--注释内容-->
2.HTML
<html> 固定格式 html包裹
<head>主要放跟浏览器交互的配置</head>
<body>主要放给用户查看的花里胡哨的内容</body>
</html>
3.HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
3.预备知识
1.网页信息数据一般也会存放于文件中
.html
2.pycharm支持前端所有类型的文件编写
内置有自动补全的功能，我们只需要专注于标签名的编写即可
3.html文件的打开
内置有自动调用浏览器的功能
4.head内常见标签
1).title标签
title标签的作用就是定义网页的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网页标题</title>
</head>
<body>
<p>内容</p>
</body>
</html>
2).meta标签
meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息并不是给用户的，而是给搜索引擎看的。
meta标签有两个重要的属性：name和http-equiv
name属性的几个常用取值
| 属性值 | 说明 |
|---|---|
| keywords | 网页的关键字（可以多个） |
| description | 网页的描述 |
| author | 网页的作者 |
| copyright | 版权信息 |
<!DOCTYPE html>
<html>
<head>
<title>这是一个网页标题</title>
<meta name="keywords" content="CSDN，前端学习笔记，Kll"/>
<meta name="description" content="这是CSDN的前端学习笔记"/>
<meta name="author" content="Kll"/>
<meta name="copyright" content="本站所有笔记均为书籍所学习摘抄，
如有侵权，立即删除。"/>
</head>
<body>
<p>内容</p>
</body>
</html>
meta 标签的http-equiv属性只有两个重要作用：定义网页所使用的编码，定义网页自动刷新跳转。
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
这段代码告诉浏览器，该页面所使用的编码是utf-8，不过在HTML5标准中，代码简写为
<meta charset="utf-8"/>
如果你发现页面打开是乱码，很可能是没有加上这一句代码。在实际的开发中，我们必须在每一个页面中加上这句代码。
http-equiv的另一个作用是定义网页自动刷新跳转
<meta http-equiv="refresh" content="6;url=http://www.bilibili.com"/>
这段代码表示当前页面在6秒后会自动跳转到B站。
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="6;url=http://www.bilibili.com"/>
</head>
<body>
<p>等待6秒后自动跳转至B站</p>
</body>
</html>
3).style标签
内部支持编写CSS代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*这里写CSS样式*/
</style>
</head>
<body>
</body>
</html>
4).link标签
link标签用于引入外部样式文件(CSS文件)
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>
5).script标签
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
<!DOCTYPE html>
<html>
<head>
<script>
/*这里写JavaScript代码*/
</script>
</head>
<body>
</body>
</html>
6).base标签
base标签的作用是当超链接标签<a>没有指定href和target的属性时会默认使用<base>标签的内容
我们只需了解有这么一个标签即可
5.body内基本标签
1.标题系列标签
h1~h6
2.段落标签
p
3.其他标签
u 下划线
i 斜体
s 删除线
b 加粗
'''相同效果可能是有不同的标签实现的，不是独一无二的'''
4.换行与分割线
br 换行
hr 分割线
"""
标签的分类二
行内标签 u i s b
内部文本多大就占多大
块儿级标签 h系列 p
独占一行
"""
6.常见符号
空格
> 大于
< 小于
& &符
¥ ￥
© ©
® ®
7.body内局部标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套，并且理论上可以无限套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签，但是它的内部不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
8.body内常用标签
标签括号内填写的 什么=什么 称之为标签的属性
1.默认属性
标签自带的，编写的时候有自动提示
2.自定义属性
用户自定义，编写不会有提示甚至会飘颜色
a标签 链接标签
href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
img标签 图片标签
src
1.填写图片地址
2.还有更多特性 目前没法讲
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示得到信息
width/height
图片的尺寸，两者调整一个即可，等比例缩放
9.列表标签
无序列表
<ul>
<li>数码</li>
<li>装饰</li>
<li>衣物</li>
</ul>
注意：页面上所有有规则排列的横向或者竖向的数据，一般使用的都是无序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
还可以通过type竖向切换数字
标题列表
<d1>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</d1>
10.表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
实操
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
10.表单标签
可以获取到用户的数据并发送给服务端
form标签
action 控制数据的提交地址
method 控制数据的提交方法
input标签
类似于前端的变形金刚
input标签应该有name属性
name属性相当于字典的键，input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端，这样才具有明确意义
type属性：
| 属性 | 介绍 |
|---|---|
| text | 普通文本 |
| password | 密文展示 |
| date | 日期选项 |
| 邮箱格式 | |
| radio | 单选 |
| checkbox | 多选 |
| file | 文件 |
| submit | 触发提交动作 |
| reset | 重置表单内容 |
| button | 暂无任何功能 |
select标签
下拉框
option标签 一个个选项
textarea标签
获取大段文本
11.表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2.如果不需要用户填写数据，只需要选择，那么我们需要 自己填写value
<input type="radio" name="gender" value="male">
ps:没有name属性的标签，form表单会直接忽略，不会发送
3.针对input标签理论上应该配一个label标签绑定，但是也可以不写
<label for="d1">username:
<input type="text" id="d1">
</label>
<label for="d1">username:</label>
<input type="text" id="d1">
4.标签的属性如果和属性值相等，那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked="checked">
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value="" selected="selected">222</option>
<option value="" selected>222</option>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
</select>
