day 42

时间 2019-11-12

标签 day 繁體版

原文原文链接

前端

什么是前端

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

eg：电脑界面手机界面平板界面前端

什么是后端

真正的幕后操做者python

web服务的本质

请求响应程序员

浏览器输入网址回车发生了哪些事web

1.朝着指定的服务器地址发送请求后端

2.服务端接收请求并处理浏览器

3.返回相应的响应服务器

4.浏览器接收并渲染出好看的页面给用户看websocket

请求方式

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-h六、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>