前端之HTML篇
HTTP协议：
超文本传输协议，用来规定服务端和浏览器之间的数据交互格式
四大特性：
基于请求响应
基于TCP/IP作用于应用层之上的协议
无状态：不会保存用户信息跟状态
cookie、session、token...这些出现就是为了弥补无状态这个特性，可以用来记录用户的状态
无/短链接：请求后得到响应后，就没有任何链接和关系了
请求格式：（请求首行 + 请求头 + \r\n + 请求体）
请求首行（标识http协议版本，当前请求方式）
请求头（一大推k,v键值对）
\r\n
请求体（只用post请求才有，存放post请求提交的敏感数据）
注意：如果请求头没有，则要用\r\n 代替，也就是无论请求首行、请求头还是请球体缺失，都要用\r\n补上）
响应数据格式：
响应首行 （标识http协议版本，响应状态码）
响应头 （一大推k,v键值对）
\r\n
响应体 （返回给浏览器展示给用户看的数据）
请求方式：
get请求：跟服务端要数据
post请求：向服务端提交数据
响应状态码：用一串简单的数字来表示一些复杂的状态或者描述性信息，主要有五个系列
1xx:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据
3xx:重定向（当你在访问一个需要登陆后才能看到的页面，会自动跳转到登陆页面）
4xx:请求错误
5xx:服务器内部错误。
url：统一资源定位符
HTML
HTML：超文本标记语言，是一种用于创建网页的标记语言，文件扩展名：.htm或.htm
HTML文档结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> #设置编码 <title>Title</title> #设置标题 </head> <body>
</body> </html>
#注释 <!--单行注释-->
<!-- 1 多行注释 2 3 -->
HTML标签分类及语法：
- 单标签：<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
- 双标签：<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
HTML三个重要属性：
- id：定义标签的唯一ID，HTML文档树中唯一
- class：css样式类名，作用于html元素
- style：规定元素的行内样式（css样式）
HTML常用标签
head内常用标签：
- <title></title> 定义网页标题
- <style>内部样式内容（css代码) </style> 定义内部样式表
Meta标签
组成：http-equiv属性和name属性组成
- http-equiv属性：相当于http的文件头作用，主要向浏览器传回一些有用的信息，以帮助正确的显示网页
- name属性：主要用于描述网页，属性值content的内容主要是便于搜索引擎机器的查找
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--name属性--> <meta name="keywords" content="战争，战争片、战争电影"> <!-- 当你用浏览器搜索的时候，只要输入kwywords后面指定的关键字，比如战争等，那么该网页就有可能被百度搜索出来展示给用户 --> <meta name="description" content="NQ31">
body内常用标签
基本标签：
<h1>标题标签</h1> <!--1~6级标题--> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <!--换行--> <br> <!--水平分割线--> <hr>
特殊符号：
- 空格
- > 大于号
- < 小于号
- & &
- ¥ ￥
- $copy; ©
- ® ®（商标）
常用标签
- div标签：块儿级标签，用来定义一个块级元素，独占一行
- span标签：行内标签，用来定义内联（行内）元素
块儿级标签：独占一行（h1-h6、p、div这些都是块儿级标签）
行内标签：自身文本多大就占多大（i、u、s、b、span 这几个都是行内标签）
总结：只要是块儿级标签都可以嵌套任意块儿级标签和行内标签
但是p标签只能嵌套行内标签
块儿级标签可以修改长宽，行内标签不可以。
img标签及参数：
<img src="" alt="" title=""/>
src：图片路径，也可以是图片的url
alt: 当图片加载不出来的时候，给图片的描述性信息
title: 当鼠标悬浮在图片上之后，自动展示的提示信息
height\width：图片的高度和宽度
注意：当高度和宽度只修改一个的时候，另一个参数会等比例缩放
两个同时修改，没有考虑比例时，图片会失真。
a标签
<a href=""></a> href：放url，当用户点击就会跳转到该url页面 放其他a标签的id值 也叫锚点跳转 例如：<a href="#id值"></a> target: 默认a标签是在当前页面完成跳转 _self <a href="www.baidu.com" target="_self"></a> 新建页面跳转 _blank <a href="www.baidu.com" target="_blank"></a>
列表标签
1、无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> <!--type属性：--> disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式）
2、有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> <!-- type属性--> 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马 <!--start属性：表示起始位置-->
3、标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
表格的基本结构：
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan='2'>Egon</td> <td colspan='2'>杠娘</td> </tr> </tbody> </table> <!-- <thead>表示表格头，用来放表格标题也就是表格的列名 <th>表格的列名 <tbody>用来放表格数据的身体部分 <tr>表示行 <td>表示行里面的每一列 --> <!--table属性--> border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽）
<!-- td的属性--> rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）
表单标签
form 标签
<form action=""></form> 在该form标签内部书写的、获取用户的数据都会被form标签提交到后端 action属性：控制数据提交的后端路径（给哪个服务端提交数据） 1、什么都不写，默认就是朝当前页面所在的url提交数据 2、写全路径，比如：https://www.baidu.com 这样就是朝百度服务端提交数据 3、只写路径后缀 action=“/index/" 自动识别出当前服务端的ip和port拼接到前面。比如：host:port/index/
accept-charset: 规定在被提交表单中使用的字符集（默认：页面字符集）
autocomplete: 规定浏览器应该自动完成表单（默认：开启）
enctype: 规定被提交数据的编码（默认：url-encoded）。
method: 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name: 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate: 规定浏览器不验证表单。
target:规定 action 属性中地址的目标（默认：_self）
label标签
<label for="d1">第一种，直接将input写在label内 username：<input type="text" id="d1"> </label> <label fro="d2"> 第二种，通过id连接即可，不用嵌套在label内 password: </label> <input type="passwor" id="d2"> <!---注意：label和input都是行内标签，input可以不跟label关联-->
input标签
input属性：
- name：表单提交时的键，类似于参数
- value：表单提交时对应项的值
- checked：radion和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用。
type属性：
text：普通文本 password：密文 date：日期 submit：用来触发form表单提交数据的动作 button：一个普通按钮，没有任何功能，可以给它自定义各种功能 <!--能够触发form表单提交数据的按钮有 <input type="submit" value="注册”> <button>点击</button> --> reset：重置内容 radio: 单选 <!--默认选中要加checked="checked"--> <input type="radio" name="gender" checked="checked">男 <!--当标签的属性名跟属性值一样的时候可以简写--> <input type="radio" name="gender" checked>男 checkbox：多选 <input type="checkbox" checked>肠粉 file: 获取文件 也可以一次性获取多个文件 <input type="file" multiple>
注意：form表单提交文件需要注意
1、method必须是post
2、enctype="multipart/form-data"
enctype类似与数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据。
select 标签 默认是单选 可以mutiple参数变多选，默认选中是selected="selected"简写为selected
<select name="" id="" multiple> <option value="" selected>航母</option> <option value="" selected>战斗机</option> <option value="">坦克</option> </select>
textarea标签：获取大段文本
<p>个性签名： <textarea name="" id="" cols="30" rows="10"></textarea> </p>
name:名称
cols:列数
rows:行数
disable:禁用
注意：所有获取用户输入的标签，都应该有name属性：
name就类似于字典的关键字key
用户输入的数据就类似于字典的值value
<p>gendeer: <input type="radion" name="gender">男 <input type="radion" name="gender">女 </p>
