前端基础
前端
什么是前端
任何与用户直接打交道的操作界面，就是前端。如：电脑界面、手机界面、平板界面
什么是后端
真正的幕后操作者
为什么要学前端
1、技多不压身
2、全栈工程师（前后端都得会）
前端基础：
软件架构：c/s和b/s 两种。b/s本质也是c/s
web服务端本质: 请求和响应
服务端3点基本要求：
1、要有固定的IP和PORT，
2、24小时不间断提供服务
3、能支持高并发
浏览器输入网址，回车后发生的事情：
1、朝着指定的服务器地址发送请求
2、服务端接收请求并处理
3、返回响应的响应
4、浏览器接收并渲染出好看的页面给用户看
两种请求方式：
1、get请求： 输入网址就是get请求，朝服务器要资源
2、post请求： 如登录功能，朝服务器提交数据
HTTP协议：
是超文本传输协议，规定了服务端和客户端传输的数据的格式
四大特点：
1、基于TCP/IP：作用于应用层之上的协议
2、基于请求响应：请求对应响应
3、无状态：不保存客户端状态，无论来过多少次都当是第一次
4、无连接： 长连接 websocket 聊天室
数据格式：
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
请求体(敏感信息 密码 身份证号)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆k:v键值对)
响应体(给用户看的数据)
响应状态码：
是表示状态信息的一组数字
1XX:服务端已经成功接收到了你的请求 正在处理 你可以继续提交其他数据
2XX:服务端成功响应了相应的数据(200)
3XX:重定向
4XX:（404请求资源不存在） （403你当前不符合某一些条件 无法正常访问）
5XX:服务器内部错误(500)
HTML: 超文本标记语言
文件后缀名：
是认为定义来方便人区分文件的，对计算机来说无所谓，都是二进制
代码注释：
还有多行注释。用注释来划分区域
HTML的文档结构：
<html>
<head></head> 不是给人看的 给浏览器看的
<body></body> body内的代码才是给人看的
</html>
标签的分类1：
1.双标签
2、自闭合标签
body内重要的标签
div 一块区域 你可以往这块儿区域内填写任何内容
span
div和span是前期构建网页的基本骨架
head内常用标签
title 定义网页标题
style 内部支持写css代码
link 引入外部css样式文件
script 内部可以直接写js代码 也可以引入外部js文件
meta 定义网页源信息
body内常用标签
h1~h6 标题标签
p 段落标签 一个p就是一行内容
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 一条分割线
body内特殊符号
空格
& &
¥ ￥
> >
< <
© ©
® ®
标签的分类2：
1.块儿级标签 h1~h6 p br hr div
独占一行
1.块儿级标签内可以嵌套其他块儿级和行内标签
2.注意:p标签虽然是快儿级标签 但是他的内部不能嵌套任何快儿级标签 只能嵌套行内标签
标签有两个属性
id
就类似于是身份证号 每一个标签 都应该有id值 并且在同一个html文档中 标签的id不能重复
class
类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式
链接标签
1、跳转功能
href参数控制跳转的地址
这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色
<!--<a href="https://www.sogo.com">点我点我</a>-->
a标签默认是在当前窗口跳转
你可以指定 新建窗口打开
target = "_self"
target = "_blank"
2、锚点功能
给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="timg.jpg" alt="身材不错" title="这是你的前女友" width="400" height="500">
src
1.图片地址 网上的地址也可以是你的本地图片地址
2.url(网址) 自动朝该网址发送get请求 获取图片资源
alt
当图片加载不出来的时候 展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数 你只需要设置一个 就可以 默认是等比例缩放
两个都调整的话 图片就会失真
列表标签
无序标签 ul ， li
type参数
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序标签 ol， li
type参数
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表(了解)
dl
dt 小标题
dd 小章节
表格标签
展示数据 一般都用到表格标签
/
一个tr就表示一行
| username | password | hobby | is_delete |
|---|---|---|---|
| jason | 123 | study | 0 |
<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>
