day 44 http html
01. 什么是前端
- 任何与用户直接叫互动操作界面，都可以称之为前端
02. 什么是后端
- 后端是真正的幕后操作者，一堆代码
03. 前段学习流程
- html，css，js
- 框架
04. web的本质
- 请求，响应
- 浏览器输入网址，回车发生了哪些事
- 朝着指定的服务器地址发送请求
- 服务端接收请求，并处理
- 返回相应的结果
- 浏览器接收并渲染出好看的页面，给用户看
- 请求方式
- get请求
- 朝服务器要资源
- eg：输入网址回车
- post请求
- 朝服务器提交数据
- eg：登录功能
- get请求
05. http协议
- 超文本传输协议
- 规定了服务端与浏览器客户端传输的数据格式
- 四大特性
- 基于tcp/id作用于应用层之上的协议
- 基于请求响应
- 请求对应相应
- 无状态
- 不保存客户端状态
- 无论来多少次，都当你如初见
- cookie session ；保存用户状态
- 无连接
- 每一次请求响应之后就断开
- 长连接 websocket ；用来做聊天室
- 数据格式
- 请求格式
- 请求首行（请求方式 协议版本）
- 请求头（一大堆k：v 键值对）
- 一个空行 /r /n
- 请求体（敏感信息；密码、身份证号）
- 响应格式
- 响应首行（请求方式 协议版本）
- 响应头（一大堆k：v 键值对）
- 一个空行 /r /n
- 响应体（给用户看的数据）
- 请求格式
- 相应状态码
- 用数字来表示一串字符串表达的意思
- 1XX；服务端已经接收到了你的情求，正在处理，你可以继续提交其他数据
- 2XX；服务端成功响应了相应的数据（200）
- 3XX；重定向
- 4XX；（404请求资源不存在）（403你当前不符合某一些条件，无法正常访问）
- 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
双标签(h1,a). ;
<h1>我是h1</h1>自闭合标签 (img) ;
<img src="http://img5.imgtn.bdimg.com/it/u=268421633,928848426&fm=26&gp=0.jpg"/>
标签的分类2
- 块极标签 h1~h6 p br hr div
- 独占一行
- 块级标签内可以嵌套其他块极标签和行内标签
- 注意；p标签虽然是块极标签但内部不能嵌套块极标签
- 行内标签 s i u b span
- 内部文本多大就占多大
- 行内标签不能嵌套行内和块级标签
- 块极标签 h1~h6 p br hr div
标签通常应该三个属性值
- id 每一个标签都应该有id值 并且在同一个html文档中 标签的id不能重复
- class 类属性 有点像面向对象的继承 class='c1 c2 c3' 这个标签就会拥有c1 c2 c3 的所有样式
- 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内特殊符号
空格 & & ¥ ¥ &jt; > < < © © ® ®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表单