day 44
前端
什么是前端
任何与用户直接打交道的操作界面 都可以称之为前端
eg:电脑界面 手机界面 平板界面
什么是后端
真正的幕后操作者
web服务的本质
请求 响应
浏览器输入网址 回车发生了哪些事
1.朝着指定的服务器地址发送请求
2.服务端接收请求 并处理
3.返回相应的响应
4.浏览器接收并渲染出好看的页面 给用户看
请求方式
1.get
请求
朝服务器要资源
eg:敲www.baidu.com
2.port
请求
朝服务器提交数据
eg:登录功能
HTTP协议
超文本传输协议
规定了服务端与浏览器数据传输的数据格式
1.四大特性
1.基于TCP/IP作用与应用层之上的协议
2.基于请求响应
请求对应响应
3.无状态
不保存客户端状态
无论来多少次 都当你如初见
cookie
session
4.无连接
长连接 websocket
聊天室
2.数据格式
请求格式
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
请求体(敏感信息 密码 身份证号)
响应格式
响应首行(请求方式 协议版本)
响应头(一大堆k:v键值对)
响应体(给用户看的数据)
响应状态码
用数字来表示一串文字需要表达的意思
1XX:服务端已经成功接收到你的请求 正在处理 你可以继续提交其他数据
2XX:服务端成功响应了相应的数据(200)
3XX:重定向
4XX:(404请求资源不存在) (403你当前不符合某一些条件 无法正常访问)
5XX:服务器内部错误(500)
HTML
超文本标记语言,是一种标识性的语言,包括一系列标签。
文件的后缀名
文件的后缀名是给人看的,对于计算机来说,全都是二进制;之所以不同的后缀名有不同的功能,是程序员人为定制的
HTML的注释
注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
在搭建页面的时候,通常会利用注释来划分区域
<!--导航条开始-->
<!--导航条结束-->
<!--侧边栏开始-->
<!--侧边栏结束-->
HTML的文档结构
<html>
<head></head> 不是给人看的 给浏览器看的
<body></body> body内的代码才是给人看的
</html>
<h1>
hello world
</h1>
<a href="https://www.baidu.com">click me</a>
<img src=src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566230133&di=590ab12707a1d494be7ec784801076d8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201207%2F04%2F20120704211148_3UWwd.jpeg"/>
标签的分类1
1.双标签(h1,a)
2.自闭合标签(img)
head内常用标签
title 定义网页标题
style 内部支持写css代码
link 引入外部css样式文件
script 内部可以直接写js代码,也可以引入外部js文件
meta 定义网页源信息
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩python学院">
浏览器上所看到的花里胡哨的页面,背后都是HTML代码而已
body内常用标签
h1-h6 标题标签
p 段落标签 一个p就是一行内容
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 一条分割线
body内特殊符号
空格
&; &
¥ ¥
> >
< <
© ©
® ®
标签的分类2
1.块级标签
h1-h6、p、br、hr、div
独占一行
- 块级标签内可以嵌套其他块儿级的行内标签
- 注意:
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 href="https://www.sogo.com">点我点我</a>-->
a标签默认是在当前窗口跳转
你可以指定,新建窗口打开
target = "_self"
target = "_blank"
2.锚点功能
给a标签设置id值
然后再href中书写对应的a标签id值,点击即可跳转到对应的位置
<a href="" id>文章开头</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>文章中部</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 小写字母
I 大写罗马
i 小写罗马
标题列表(了解)
dl
dt 小标题
dd 小章节
表格标签
展示数据 一般都用到表格标签
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is delete</th>
</tr>
</thead>
</table>
<tbody>
<tr>
<td>tank</td>
<td>886</td>
<td>love</td>
<td>DBJ</td>
</tr>
</tbody>
最新文章
- 等价类划分方法的应用(jsp)
- Shell下突破安全狗远程桌面守护
- IOS Alcatraz Xcode6.4安装指南
- ubuntu wubi非在线快速安装
- docker 源码分析 二(基于1.8.2版本),docker client与daemon交互
- Eclipse内置Tomcat的配置
- Solaris 安装JDK
- Java简单算法--求100以内素数
- BZOJ 2301 Problem b(莫比乌斯反演+分块优化)
- hdu 4117 GRE Words (ac自动机 线段树 dp)
- SQL server 表数据改变触发发送邮件
- nopCommerce 3.9 大波浪系列 之 微信公众平台登录插件
- 如何使用Python读取大文件
- 分享两个提高效率的AndroidStudio小技巧
- IZT复杂电磁环境记录回放和模拟系统
- sublime text3中文文件名显示为框框,怎么解决
- SELECT INTO创建临时表
- PAT甲题题解-1031. Hello World for U (20)-字符串处理,水
- 菜鸟学Java(十三)——将MyEclipse项目导入到Eclipse
- 前段开发-css-总结
热门文章
- opencv局限:cv::FileStorage读取中,xml文件的第一层节点不能超过4个
- tensorflow 待阅读的资料
- 5.Vue的组件
- isinstance 与 issubclass
- 支持TV远程控制的WIN10PEX64_17763网络版by双心
- [NOI2019]回家路线(最短路,斜率优化)
- IDEA 部署Tomcat教程(透彻理解操作)
- oracle--表空间故障
- [转载]3.5 UiPath对剪切板的介绍和使用
- 在开发中进入一个方法后想要到原来那行 ctrl+alt+左 回到上一步 ctrl+alt+右 回到下一步