day 44

2024-03-22 23:27:04

day 44 http html

01. 什么是前端

任何与用户直接叫互动操作界面，都可以称之为前端

02. 什么是后端

后端是真正的幕后操作者，一堆代码

03. 前段学习流程

html，css，js
框架

04. web的本质

请求，响应
浏览器输入网址，回车发生了哪些事
1. 朝着指定的服务器地址发送请求
2. 服务端接收请求，并处理
3. 返回相应的结果
4. 浏览器接收并渲染出好看的页面，给用户看
请求方式
1. get请求
  1. 朝服务器要资源
  2. eg：输入网址回车
2. post请求
  1. 朝服务器提交数据
  2. eg：登录功能

05. http协议

超文本传输协议
规定了服务端与浏览器客户端传输的数据格式
四大特性
1. 基于tcp/id作用于应用层之上的协议
2. 基于请求响应
  1. 请求对应相应
3. 无状态
  1. 不保存客户端状态
  2. 无论来多少次，都当你如初见
  3. cookie session ；保存用户状态
4. 无连接
  1. 每一次请求响应之后就断开
  2. 长连接 websocket ；用来做聊天室
数据格式
1. 请求格式
  1. 请求首行（请求方式协议版本）
  2. 请求头（一大堆k：v 键值对）
  3. 一个空行 /r /n
  4. 请求体（敏感信息；密码、身份证号）
2. 响应格式
  1. 响应首行（请求方式协议版本）
  2. 响应头（一大堆k：v 键值对）
  3. 一个空行 /r /n
  4. 响应体（给用户看的数据）
相应状态码
1. 用数字来表示一串字符串表达的意思
2. 1XX；服务端已经接收到了你的情求，正在处理，你可以继续提交其他数据
3. 2XX；服务端成功响应了相应的数据（200）
4. 3XX；重定向
5. 4XX；（404请求资源不存在）（403你当前不符合某一些条件，无法正常访问）
6. 5XX；服务器内部错误（500）

06. html

超文本标记语言 ; 没有逻辑

html注释

单行
多行
```

```

在搭建页面时，通常会利用注释来划分区域

<!--导航条开始-->

<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->

html的文档结构

<!DOCTYPE html>
<html lang="en">
<head><!--给浏览器看的-->
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
             内部编写css样式 
    </style>
</head>
<body><!--给用户看的-->
     网页显示的内容
</body>
</html>

标签的分类1
1. 双标签(h1,a). ; <h1>我是h1</h1>
2. 自闭合标签 (img) ;
  
  <img src="http://img5.imgtn.bdimg.com/it/u=268421633,928848426&fm=26&gp=0.jpg"/>
标签的分类2
1. 块极标签 h1~h6 p br hr div
  1. 独占一行
  2. 块级标签内可以嵌套其他块极标签和行内标签
  3. 注意；p标签虽然是块极标签但内部不能嵌套块极标签
2. 行内标签 s i u b span
  1. 内部文本多大就占多大
  2. 行内标签不能嵌套行内和块级标签
标签通常应该三个属性值
1. id 每一个标签都应该有id值并且在同一个html文档中标签的id不能重复
2. class 类属性有点像面向对象的继承 class='c1 c2 c3' 这个标签就会拥有c1 c2 c3 的所有样式
3. style

head内常用标签

title        定义网页标题
style        内部编写css样式
link     引入外部css代码
script   内部编写js代码
meta         定义网页源信息，用户在搜索引擎上搜索的关键字
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
        h1 {
            color: green;
        }
    </style>
    <link rel="stylesheet" href="03%20我的第一个css文件.css">
    <script>
        alert('hello baby')
    </script>
    <script src="04%20我的第一个js文件.js"></script>
</head>
<body>
<h1>我最牛逼</h1>
</body>
</html>

body内常用标签0

h1>h2>h3>h4>h5>h6 标题大小 eg;<h1> 一级标题 </h1>
<s> 文本内容 </s>    删除线
<u> 文本内容 </u>    下划线
<i> 文本内容 </i>    斜体
<b> 文本内容 </b>    加粗
<p> 文本内容 </p>    段落标签，为一个段落
<br>                          空行
<hr>                              一条横线

body内特殊符号

&nbsp;   空格
&amp;    &
&yen;        ¥
&jt;     >
&lt;     <
&copy;   ©
&reg;        ®

body内重要标签；

div     一块区域，可以像div中添加任何元素，和span一起作为前期构建网页的基本骨架
span
a           超连接标签
<a href="https://www.sogo.com" target="_blank">点我点我</a>
            1.跳转功能；href参数控制跳转地址
        2.锚点功能；给a标签设定id值在href中制定id值就可以直接跳转到改标签的位置
        3.默认在当前窗口打开，通过target='_blank'指定打开一个新窗口
<a href="" id="a1">文章开头</a>
                 页面显示信息
<a href="" id="a2">文章中部</a>
                 页面显示信息
<a href="#a1">回到顶部</a>
<a href="#a2">回到中部</a>
img     图片标签
<img src="图片地址" alt="图片无法加载出显示" title="鼠标悬停到图片上显示" width="宽度值" height="高度值">
            src 图片地址 网上的地址也可以是本地图片的地址，url 自动朝网址发送get请求获取图片资源
        alt 当图片加载不出来时 展示的显示信息
        title 当鼠标悬停到图片上时显示
      width，height 只设置一个默认等比例缩放

列表标签

无序列表

ul套li
<ul type="none">
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ul>
type 参数
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

有序列表

ol套li
<ol type="a" start="26">
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ol>
type 参数
1 数字列表 默认
A 大写字母
a 小写字母
I 大写罗马数字
i 小写罗马数字

标题列表

dl套dt和dd
dt标题
dd内容
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>标题2</dt>
    <dd>内容3</dd>
    <dd>内容4</dd>
</dl>

表格标签

adminlte

一个tr表示一行，一个th表示一列
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<table border="1">
    <thead>
        <tr >
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
            <th>is_delete</th>
        </tr>
    </thead>  <!--表头-->
    <tbody>
        <tr >
            <td rowspan="2">jason</td>
            <td>123</td>
            <td>study</td>
            <td>0</td>
        </tr>
        <tr>
            <!--<td>tank</td>-->
            <td>444</td>
            <td>DBJ</td>
            <td>1</td>
        </tr>
        <tr>
            <td>echo</td>
            <td colspan="2">333</td>
            <!--<td>movie</td>-->
            <td>1</td>
        </tr>
    </tbody>  <!--表数据-->

form表单

码农公寓

day 44 http html

01. 什么是前端

02. 什么是后端

03. 前段学习流程

04. web的本质

05. http协议

06. html

相关文章