一 引入:
web服务的本质：
浏览器窗口输入一个网址敲回车发生了哪些事？
1.朝着指定的服务端发送请求
2.服务端接收相应的请求
3.服务端返回相应的响应
4.浏览器接收响应 按照特定的规则渲染页面展示给用户看
二、HTTP协议
超文本传输协议
规定了浏览器与服务端之间数据传输的格式
四大特性：
1.基于请求响应
一次请求对应一次响应
2.基于TCP/IP协议作用于传输层之上的协议
3.无状态
不保留客户端的状态
4.无连接
限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接
数据格式：
1.请求格式：
请求首行(请求方式 协议版本)
请求头(提前发送给服务端的它需要知道的信息，k,v键值对)
(空行）
请求体(携带的数据，有时候可能是空的 取决于你的请求方式)
请求格式 GET / HTTP/1.1 --- GET /clschao/articles/9230431.html?name=chao&age=18 HTTP/1.1 User-Agent:.... xx:xx 请求数据 get请求方法没有请求数据 post请求数据方法的请求数据放在这里
2.响应格式
响应首行(响应状态码)
响应头(k,v键值对)
(空行）
响应体(浏览器展示给用户看的数据)
响应格式 HTTP/1.1 200 ok kl:v1 k2:v2 响应数据
URL: https://www.cnblogs.com/clschao/articles/9230431.html 传送协议。 层级URL标记符号(为[//],固定不变) 服务器。（通常为域名，有时为IP地址） 端口号。（以数字方式表示，若为HTTP的默认值“:80”可省略） 路径。（以“/”字符区别路径中的每一个目录名称） /clschao/articles/9230431.html 查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题） https://www.cnblogs.com/clschao/articles/9230431.html?name=chao&age=18
响应状态码
用数字来表示一大堆提示信息
1XX:服务端已经成功接收到客户端的数据正在处理 你可以继续提交
2XX:200请求成功 服务端已经返回了你想要的数据
3XX:重定向(原本想访问A但是内部自动给你转到了B上面)
4XX:404请求资源不存在,403你当前不具备请求该资源的条件
5XX:500服务端内部错误
请求方式:
1.get请求
朝服务器要资源 (获取数据)
２.post请求
朝服务端提交数据(提交数据)
三 HTML
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，浏览器根据规则渲染我们写的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。
- 网页文件的扩展名：.html或.htm
HTML注释
注释是代码之母
单行注释:<!--单行-->
多行注释:<!--
多行注释1
多行注释2
-->
HTML文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 说明: <!DOCTYPE html>声明为HTML5文档。 <html>、</html>是文档的开始标记和结束的标记。在它们之间是文档的头部（head）和主体（body）。 <head>、</head>head内放的内容不是给用户看的 是给浏览器去识别做相应操作的 <title>、</title>定义了网页标题，在浏览器标题栏显示。 <body>、</body>之间的文本是可见的网页主体内容,是浏览器展示给用户看的.
标签应该具备的属性
- id属性:类似于身份证号，用来唯一标识当前html页面中的某一个标签
在同一个html页面中 id值不能重复 - class属性:类似于面向对象的继承
直接引用别的类的样式
标签的分类
第一种分类：
1.双标签
2.自闭和标签
第二种分类：
1.块级标签
独占一行 h1~h6 p br hr div
２.行内标签
u s i b span
注意：
-
通常块级标签内部可以嵌套任意的块级标签和行内标签
-
p虽然是块级标签,但是它的内部只能嵌套行内标签,不能嵌套块级标签.(如果嵌套了也没事,只是不符合html语法规范)
(一)head内常用标签:
<title></title> 定义网页标题 <script></script> 定义JS代码或引入外部JS文件 <link/> 引入外部的css文件 <style></style> 定义内部样式表,支持直接写css代码 1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码 <meta/> 定义网页原信息 Meta标签介绍： <meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。 <meta>标签位于文档的头部，不包含任何内容。 <meta>提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 <!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> 2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="牛逼网站">
注：这里的'keywrods"、'description'以及'content-type','refresh','x-ua-compatible'都是设定好的参数
(二)body内常用标签
基本标签（块级标签和内联标签）
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>独占一行</p>
<br> 换行
<hr> 分割线
<p>往事如烟   岁月无声</p> <p>a > b</p> <p>a < b</p> <p>a & b</p> <p>人民币 ¥10000</p> <p>版权识别 ©</p> <p>注册商标 ®</p>
div标签和span标签
- div 块级标签
- span 行内标签
这两个标签本身没有任何实际意义,是用来做前期的页面布局的
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高 (宽高两个属性只用一个会自动等比缩放)" > <img src="https://i5.meizitu.net/2019/09/10a01.jpg" alt="是美女" title="美女啊" width="500"> 注意:src 1.可以写一个网站图片地址 2.还可以写本地的图片地址 3.url(自动朝该url发送get请求要数据)
a标签：超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
URL：统一资源定位器,也被称为网页地址，是因特网上标准的资源的地址。
<a href="http://www.baidu.com" target="_blank">点我</a> href属性内放指定目标网页地址。该地址可以有几种类型： - 绝对URL - 指向另一个站点（比如 href="http://www.jd.com） - 相对URL - 指当前站点中确切的路径（href="index.htm"） - 锚URL - 指向页面中的锚（href="#top"） target：默认在当前页跳转 _blank表示在新标签页中打开目标网页 _self表示在当前标签页中打开目标网页
href 锚点功能
href不单单可以写url 也可以写另外一个a标签id值
点击就会跳转到该id值所对应的a标签所在的位置，不单单是标签，其他标签也可
<a href="" id="1">标题</a> <a href="#1">回到标题</a>
(三)列表标签
无序列表
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表
<ol start="2"> <li>第一项</li> <li>第二项</li> </ol> 注意: start:设置序号的起始位置 type属性： 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
标题列表
<d1>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</d1>
(四)表格标签
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table border="5"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td rowspan="2">小汪</td> <td>18</td> <td>篮球</td> </tr> <tr> <!-- <td>小包</td>--> <td>19</td> <td>足球</td> </tr> </tbody> </table> </body> </html> 注意: <table>:表格标签 <thead>:表格结构 <tbody>:表格数据 一个<tr>就是一行 <th>:加粗 <td>:不加粗 <border>: 表格边框. <rowspan>: 单元格竖跨多少行 <colspan>: 单元格横跨多少列（即合并单元格）
(五)表单标签
form标签:
获取用户输入（输入，选择，上传文件....）并且将数据打包发送给后端
action参数：用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法:
1.不写 默认朝当前该页面所在的地址提交数据
2.全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
method参数：控制提交方式
form表单默认是get请求 method = 'get'
你可以指定成post请求 method = 'post'
get请求和post都能够携带数据
区别:
get请求携带的数据都是直接拼接在url后面的，数据都是明文的，不能携带隐私信息
get请求携带的数据大小是有限制，post请求携带的数据是不可轻易看见
enctype参数:
控制的数据提交的编码格式
默认情况下form表单是不能够直接发送文件的
如果你要发送文件 必须将该参数有默认的urlencoded改成formdata
form表单上传文件需要注意：
1.method必须是post
2.enctype必须是formdata
input标签:
input标签用来获取用户输入,该标签是一个行内标签
type属性:
text 普通文本
password 密文
date 日期
radio 多选一
checkbox 多选多
checked 默认选中
reset 重置
button 普通按钮
submit 触发form表单提交动作
file 获取文件
#### input 小米商城 两个靠在一起的input标签要保证高度相等的话要记得字体设置同样大小 ```html type属性 text password date radio checkbox file submit reset button hidden name属性 分组,提交数据时的key,提交的数据value value属性 指定默认值 默认选中 checked属性 readonly 只读 disabled 禁用
注意:1.获取用户输入的标签是用value属性来存放用户的输入,获取用户输入的标签都应该有value属性, 就类似于是字典的key, value属性就类似于是字典的value
2.若想给input设置默认,可以直接给input标签加value
3.若想给input框设置提示信息
username:<input type="text" value="jason" placeholder="用户名">
label标签
label通常是配合input一起使用的
for用来填写对应的input标签id值
点击label标签内的内容 会自动让对应的input标签 (聚焦)
<form action=""> <label for="d1">用户名:</label> <input type="text" id="d1"> </form>
select标签:下拉框
默认是单选的，一个个选项就是一个个option标签
<form action=""> <select name="city" id="city" > <!--multiple可以变成多选--> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <!--selected 变成默认选项--> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
textarea:多行文本
<form action=""> <textarea name="demo" id="memo" cols="30" rows="10"> 默认内容 </textarea> </form>
能够触发form表单提交数据的按钮
<form action=""> <input type="submit"> <input type="submit" value="注册"> <!--可以通过value属性来指定按钮文本内容--> <button>点我</button> </form>
(六)练习:注册功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>注册功能</p> <form action=""> <p> <label for="d1">用户名:<input type="text" id="d1"></label> </p> <p> <label for="d2">密码:<input type="text" id="d2"></label> </p> <p>生日:<input type="date"></p> <p>性别： 男<input type="radio" name="gender"> 女<input type="radio" name="gender" checked> </p> <p> <input type="submit" value="注册"> <input type="reset" value="重置"> <input type="button" value="按钮"> <button>点我</button> </p> <p>爱好： 篮球 <input type="checkbox"> 足球 <input type="checkbox"> 乒乓球 <input type="checkbox"> </p> <p>省份： <select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> </select> </p> <p>前女友 <select name="" id="" multiple> <option value="">苍老师</option> <option value="">波老师</option> <option value="">小泽老师</option> </select> </p> <p>个人简介： <textarea name="" id="" cols="30" rows="10"></textarea> </p> <p>个人简历： <input type="file"> </p> </form> </body> </html>