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