前端day01
软件开发架构
c/s
b/s
b/s本质也是c/s
统一接口(**)
web服务的本质
请求 响应
浏览器输入网址,回车发生了哪些事
1 朝着指定的服务器地址发送请求
2 服务端接收请求,并处理
3 返回相应的响应
4 浏览器接收并渲染出好看的页面给用户看
请求方式
1.get请求
朝服务器要资源
eg:敲www.baidu.com
2.post请求
朝服务器提交数据
eg:登录功能
总分总
HTTP协议
超文本传输协议
规定了服务端与浏览器数据传输的数据格式
1四大特性
1 基于TCP/IP作用于应用层之上的协议
2 基于请求响应
请求对应响应
3 无状态
不保存客户状态
4 无连接
长连接 websocket 聊天室
2 数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆K:V键值对)
请求体(敏感信息 密码 身份证号)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆K:V键值对)
响应体(给用户看的数据)
3 响应状态码
用数字来表示一串文字需要表达的意思
1xx:服务端已经成功接收到了你的请求,正在处理,你可以继续提交其他数据
2xx:服务端成功响应了响应的数据(200)
3xx:重定向
4xx:(404请求资源不存在)(403 你当前不符合某一些条件,无法正常访问)
5xx:服务器内部错误(500)
HTML
超文本标记语言
文件的后缀名
文件的后缀名是给人看的,对于计算机来说,全都是二进制
之所以不同的后缀名有不同的功能,那是我们程序员自己认为的定制的
注释是代码之母
HTML的注释
<!---单行注释---->
<!----
多行注释
多行注释
多行注释
多行注释
多行注释
------->
我们在搭建页面的时候,通常会利用注释来划分区域
HTML的文档结构
<head><head>不是给人看的,给浏览器看的
<body><body>body内的代码才给人看的
<HTML>
标签的分类
1 双标签(h1 ,a)
2 自闭合标签(img)
head内常用的标签
title 定义网页标题
style 内部支持写css样式代码
link 引入外部css样式文件
script 内部可以直接写js代码,也可以引入外部js文件
meta 定义网页源信息
body内常用标签
h1~h6 标题标签
p 段落标签,一个p就是一行内容
s 删除线
b 加粗线
u 下划线
i 斜体
br 换行
hr 一条分割线
body内特殊符号
空格
& &
¥ ¥
< <
© ©
® ®
标签的分类
1 块级标签 h1~h6 p br hr div
独占一块
1.块级标签内可以嵌套其它块级和行内标签
2 注意:p标签虽然是块级标签,但是他的内部不能嵌套任何块级标签,只能嵌套行内标签(**)
2 行内标签 s i u b span
内部文本多大,就占多大
行内不能嵌套行内和块级
标签通常有两个属性
id 就类似于是身份证号,每一个标签都应该有id值,并且在同一个html文档中,标签的id不能重复
class 类属性,就有点类似于面向对象的继承 class= 'c1 c2 c3'你这个标签就会拥有c1,c2,c3的所有样式
body内重要的标签
div 一块区域,你可以往这块区域填写任何内容
span
div和span是前期构建网页的基本骨架
a 链接标签
1 跳转功能 href参数控制跳转的地址
这个地址如果在你的机器上如果没有被点击过那么默认就是蓝色
只要点过一次之后,之后的颜色都是紫色
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
1 图片地址,网上的地址也可以是你的本图片地址
2 url(网址) 自动朝该网址发送get请求,获取图片资源
alt
当图片加载不出来的时候,展示提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数,你只需要设置一个就可以默认就是等比例缩放
两个都调整的话,图片就会失真
列表标签
无序列表
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>