自我总结35
前端
任何与用户这直接打交道的操作界面 都可以称之为前端
eg：电脑界面 手机...平板...
后端:真正的幕后操作者
为什么学?
技多不压身
全栈工程师（前后端都得会）
web服务的本质
请求 响应
浏览器输入网址，按下enter回车键
- 朝着指定的服务器地址发送请求
- 服务端接收请求 并处理
- 返回相应的响应
- 浏览器接收并渲染出好看的页面 给用户看
请求方式
1.get请求
朝服务器要资源
eg:敲www.baidu.com
2.post请求
朝服务器提交数据
eg:登录功能
如何用--总分总
HTML（---->内容）超文本标记语言
文件的后缀名 给用户看的，计算机只识别0和1 全是二进制
程序员自己定制的后缀名
**注释 ** 代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
我们在搭建页面的时候 通常会利用注释来划分区域
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->
css外观
js动作
http协议
超文本传输协议
-
基于TCP/IP作用与应用层之上的协议
-
基于请求响应 请求对应响应
-
无状态
不保存客户端状态
无论来多少次 都当你如初见
-
无连接
长连接 websocket 聊天室
数据格式
请求格式
请求首航（请求方式 协议版本）
请求头
请求体
响应格式
响应首航（请求方式 协议版本）
响应头
响应体
响应状态码
用数字表达一串文字需要表达的意思
1XX 服务端已经成功接收到了你的请求 正在处理 你可以继续提交其他数据
2XX 服务端成功响应了相应的数据(200)
3XX重定向 （例如淘宝购物，购买回跳到登录界面，不会跳到购买界面）
4XX （404请求资源不存在） （403你当前不符合某一些条件 无法正常访问）
5XX服务器内部错误(500)
HTML的文档结构
<html>
<head></head> 不是给人看的 给浏览器看的
<body></body> body内的代码才是给人看的
</html>
html标签
标签分类一
双标签
自闭合标签(img)
标签分类二
块标签 h1~h6 p br hr div
独自占一行
1.块儿级标签内可以嵌套其他块儿级和行内标签
2.注意:p标签虽然是快儿级标签 但是他的内部不能嵌套任何快儿级标签 只能嵌套行内标签(******)
行内标签 s i u b span
内部文本多大，就占多大
行内不能嵌套行内和块儿级
header
| 常用符号 | 意义 |
|---|---|
| title | 定义网页标题 |
| style | 内部支持写css代码 |
| link | 引入外部css样式文件 |
| script | 内部可以直接写js代码 也可以引入外部js文件 |
| meta | 定义网页源信息 |
body
| 常用符号 | 意 义 |
|---|---|
| h1~h6 | 文本标题 |
| p | 文本 |
| s | 删除线 |
| b | 加粗 |
| u | 下划线 |
| i | 斜体 |
| br | 换行 |
| hr | 一条横线 |
| 特殊符号 | 意 义 |
|---|---|
|   | 空 格 |
| & | & |
| ¥ | ￥ |
| > | > |
| < | < |
| © | © |
| ® | ® |
标签通常有三个属性
id 就类似于是身份证号 每一个标签 都应该有id值 并且在同一个html文档中 标签的id不能重复
class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式
重要标签
div /**span ** 一块区域 你可以往这块儿区域内填写任何内容
div和span是前期构建网页的基本骨架
| a | 链接/锚点 |
|---|---|
| img | 图片 |
a
跳转功能 href参数控制跳转地址
这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色
<!--<a href="https://www.sogo.com">点我点我</a>-->
a标签默认是在当前窗口跳转 target = "_self"
你可以指定 新建窗口打开 target = "_blank"
描点功能 给a标签设置id值，然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
<a href="" id="a1">文章开头</a>
<div style="background-color: red;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="" id="a2">文章中部</a>
<div style="background-color: black;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="#a1">回到顶部</a>
<a href="#a2">回到中部</a>
img
src
- 图片地址 网上的地址也可以是你的本地图片地址
- url(网址) 自动朝该网址发送get请求 获取图片资源
alt 当图片加载不出来的时候 展示的提示信息
title 鼠标悬浮上去之后展示的提示信息
height和weight
这两个参数 你只需要设置一个 就可以 默认是等比例缩放 两个都调整的话 图片就会失真
列表标签
无序列表
ul
li
type参数
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表(了解)
ol
li
type参数
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表(了解)
dl
dt 小标题
dd 小章节
表格标签
展示数据 一般都用到表格标签
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is_delete</th>
</tr> 一个tr就表示一行
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
</tbody>
</table>
