前端

什么是前端

任何与用户直接打交道的操作界面 都可以称之为前端

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内特殊符号

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

标签的分类2

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 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>

day 44的更多相关文章

  1. PYOJ 44. 【HNSDFZ2016 #6】可持久化线段树

    #44. [HNSDFZ2016 #6]可持久化线段树 统计 描述 提交 自定义测试 题目描述 现有一序列 AA.您需要写一棵可持久化线段树,以实现如下操作: A v p x:对于版本v的序列,给 A ...

  2. xwalk_core_library-15.44.384 .13.aar 百度云分享

    xwalk_core_library-15.44.384.13.aar 这玩意下载很慢 特意放到百度,需要的可以通过百度下载 http://pan.baidu.com/s/1nt0Cmbn 下完后放到 ...

  3. 云计算之路-阿里云上:13:43-13:44之间RDS故障影响了全站的正常访问

    抱歉!13:43-13:44之间,由于阿里云RDS(云数据库)出现2分钟突发故障,影响了全站的正常访问,给大家带来了麻烦,望大家谅解! 故障期间,应用程序日志中记录的错误信息如下: System.Da ...

  4. CentOS6.6安装virtualbox4.1.44

    本人用的是centos6.6,安装了virtualbox 4.1.44,启动后一直如上图报错,哪位前辈如果解决过这样的问题,麻烦指点指点,小弟在此先谢过了.

  5. 将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑

    将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑 /** * 根据传入字符串 * * @param str 传入的日期字符串 形如:Oct 8, 2016 5:29 ...

  6. (转)javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  7. 每天一个linux命令(44):top命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  8. javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  9. JACASCRIPT--的奇技技巧的44招

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  10. lambda的使用ret = filter(lambda x : x > 22 ,[11,22,33,44])

    #!/usr/bin/env python #def f1(x) : # return x > 22 ret = filter(lambda x : x > 22 ,[11,22,33,4 ...

随机推荐

  1. 以opencv320和vs2013为例说明 vs路径配置方法

    =========================================== 新方法 ======================= 新方法的配置过程,路径之类的设置都是一样. 区别在于,在 ...

  2. GAN与VAE

    经典算法·GAN与VAE Generative Adversarial Networks 及其变体 生成对抗网络是近几年最为经典的生成模型的代表工作,Goodfellow的经典工作.通过两个神经网络结 ...

  3. Maven的Scope区别笔记

    依赖的Scopescope定义了类包在项目的使用阶段.项目阶段包括: 编译,运行,测试和发布. 分类说明compile 默认scope为compile,表示为当前依赖参与项目的编译.测试和运行阶段,属 ...

  4. [LeetCode] 343. Integer Break 整数拆分

    Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...

  5. Windows的一些使用技巧/设置

    仅为个人记录,关闭与否还请读者斟酌 1,加速关机速度 运行gpedit.msc: 计算机管理,管理模块 - 系统 -关机选项 关闭会阻止或取消关机的应用程序的自动终止功能. 2,组策略关闭小娜后,只把 ...

  6. 官方入门教程和文档 | Visual Studio

    Visual Studio 2017 概述 | Microsoft Docs(直接教你用vs) https://docs.microsoft.com/zh-cn/visualstudio/ide/vi ...

  7. K8S 如何实现将git代码下拉到指定的容器路径中

    gitRepo 是 kubernetes Volume类型中的一种,gitRepo volume可以实现将git代码下拉到指定的容器路径中. 备注:实现此功能,Pod运行的节点都必需要安装git.换句 ...

  8. 通过Windows实现端口转发

    转自:月光博客<通过Windows实现端口转发> 这里介绍一个使用两台云服务器访问外网的方法,一台国内服务器,一台国外服务器,国内服务器通过端口转发来用于中转,中转的好处是,服务器对服务器 ...

  9. Github的初始设置

    设置姓名和邮箱地址 git config --global user.name "Firstname Lastname" git config --global user.emai ...

  10. AbstractExecutorService源码

    public class RunnableFutureTask { static FinalizableDelegatedExecutorService executorService = (Fina ...