☆前端☆---前端的基础 HTTP协议 HTML的基础

什么是前端?

任何与用户直接打交道的操作界面都可以称之为前端  比如:电脑界面, 手机界面 , 平板界面 等.

那什么是后端呢?: 可以暂时理解成 幕后的操作者 不能与用户直接打交道的!

软件开发架构的复习

  客户端 client -------------------服务端 server  c/s 架构

  浏览器 browser -------------------服务端 server  b/s 架构

  web 服务器的本质:

    (在 浏览器中输入网址敲入回车发生了几件事?)

    1. 浏览器 向 服务端 发送请求 

    2 服务端 接受 请求

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

    4.浏览器 接受 响应 根据特定的规则来渲染界面展示给用户看

HTTP协议

http协议 又称之为 超文本传输协议  规定了浏览器 与 服务端 之间传输数据的格式

http的四大特性: 1 基于请求响应 

         2 基于TCP/IP 之上的作用于 应用层的协议

         3 无状态(服务器 无法保存用户的状态 例如: 一个用户来了一千次 他都不记得)

         4 无连接(请求来一次 响应一次 之后立马断开连接 两者之间没有任何的关系了)

 

         ps: websocket 相当于是HTTP协议的一个大补丁 他支持长连接  就像 QQ 微信

         因为 http是 无状态的 所以产生了 session 和 cookie       

cookies
位于用户的计算机上,用来维护用户计算机中的信息,直到用户删除。比如我们在网页上登录某个软件时输入用户名及密码时如果保存为cookie,则每次我们访问的时候就不需要登录网站了。我们可以在浏览器上保存任何文本,而且我们还可以随时随地的去阻止它或者删除。我们同样也可以禁用或者编辑cookie,但是有一点需要注意不要使用cookie来存储一些隐私数据,以防隐私泄露

session
session称为会话信息,位于web服务器上,主要负责访问者与网站之间的交互,当访问浏览器请求http地址时,将传递到web服务器上并与访问信息进行匹配, 当关闭网站时就表示会话已经结束,网站无法访问该信息了,所以它无法保存永久数据,我们无法访问以及禁用网站
简单描述 session 和 cookies

http的请求数据格式: 

    请求首行(标识HTTP协议版本 和 请求方式)

    请求头 (一堆的 k,v 键值对)

    /r/n         (这也是一行 重点)

    请求体(携带的是一些敏感的信息如 密码 身份证)

http响应数据的格式:

    响应首行(标识HTTP协议版本 响应状态码)

    响应头(一大堆k,v键值对)

    /r/n         (这也是一行 重点)

    响应体(返回给浏览器页面的数据 通常响应体都是html界面)

 

  补充  响应状态码:
    用一串简单的数字来表示一些复杂的状态或者提示信息
    1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
    2XX:服务端成功响应 你想要的数据(请求成功200)
    3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)
    4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
    5XX:服务器内部错误(500)

  补充 请求方式
    1.get请求
       朝服务端要资源(比如浏览器窗口输入www.baidu.com)
    2.post请求
       朝服务端提交数据(比如用户登录 提交用户名和密码)

URL:统一资源定位符(大白话 就是网址)

HTML

超文本标记语言

要想让你的界面能够正常的别浏览器显示出来 你所写的界面就必须遵循HTML 标记语法 也就意味着所有都能够被浏览器显示出来的页面 内部都是HTML代码

ps : 浏览器 只认识 html css javaScript    

  文件(后缀名是.html结尾的文件,也就意味着 只要看到.html结尾文件 那么它就是一个前端页面文件)
  文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据

HTML 注释---注释是代码之母

<!-- 这是一个注释 -->

<!-- 
这是一个多行注释 
这是一个多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
    <!--导航条样式开始-->
    <!--导航条样式结束-->

HTML文档结构

<html>
<head></head>:head内的标签 不是用来展示给用户看的  而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>

 

head内常用标签
   title用来显示网页标题
     style用来控制样式的 内部支持写css代码
   script内部支持写js代码 也支持导入外界的js文件  js代码中默认结束符号 ;
   link专门用来引入外部的css文件

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址,注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

 

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  keywords 关键字
<meta name="description" content="老男孩教育Python学院">   description 描述  搜索后得到的信息

 

 

 

 

标签的两种分类

分类1: 单标签 和 双标签

   单标签(自闭和标签 <img/>)

   双标签(<h1></h1> <a></a>) 

分类1: 块级标签 和 行内标签

 

   1.块儿级标签(独占浏览器一行)  div  p  h  
        1.块儿级标签可以修改长宽
      2.块儿级标签内部可以嵌套任意的块级标签
        但是p标签虽然是块儿级标签 但是他不能够嵌套其他块儿级标签 包括自身
        可以嵌套行内标签

        如果套了 他不会 报错 他会自动分开
      总结:
        只要是块儿级标签 都可以嵌套行内标签
        p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
   2.行内标签(自身文本多大就占多大)
      span b s i u
div和span通常都是用来构建网页布局的

吧 

body内常用的标签

基本标签

<h></h> 标签:标题标签

<p></p> 标签: 段落标签

 

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

 

 

 符号标签

  

 

 常用标签

div    div和span通常都是用来构建网页布局的

 

 span 不占空间 不独占一行(行内标签)

img标签  (单标签)

  src存放的是图片的路径(该路径可以是本地的也可以是网上的)
    1.也可以放url(会自动请求该url获取相应数据)  URL:统一资源定位符(大白话 就是网址)
    2.也可以直接放图片的二进制数据 会自动转换成图片 

     alt当图片加载不出来的时候 显示的提示信息

  title当鼠标悬浮在图片上 提示的信息

  height,width 当你只指定一个参数的时候 另外一个会等比例缩放

 

 

 

 a标签

   href后面存放url的时候 点击跳转到该url
    如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
   target 默认是_self当前页面跳转  _blank新建页面跳转
   锚点功能(回到顶部)
   href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签

 

 

 

每一个标签都应该有三个比较重要的属性

   1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
   2.class值 该值就类似于面向对象里面的继承 可以写多个
   3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
   补充 任何标签都支持自定义属性!!!

 列表标签

有序列表和无序列表

 

 标题列表: 

表格标签(*****)

            <table>
                <thead></thead>
                <tbody></tbody>
            </table>

 

 

 

 table 后加 border = ' 1'  设置表格

  tr表示一行
   thtd都是文本
  建议在thead内用th
  tbody内用td

colspan表示的水平方向
rowspan表示的竖直方向

 一定要 先写好 表头和表体

cellpadding

 

cellspacing

 

 

提交方式
        get  获取资源
            get请求也可以携带数据
            跟在url的后面
                ip:port?xxx=yyy&zzz=qqq
                1.get能够携带的参数大小有限制
                2.数据是直接可见
        post 提交数据
            跟在请求体中的
form表单
        能够获取用户输入并提交给后端
        action:控制数据提交的地址
            1.不写的情况下,默认就往当前页面所在的url提交
            2.全写 指名道姓提交
            3.后缀/index/  补全你本网站的ip和port
        method:提交的方式
            form表单默认是get请求
            
        enctype:控制前后端提交数据的编码格式
            form表单默认是urlencode格式
            如果想让form表单提交文件
            需要改成formdata

 

 

补充

posted @ 2019-09-03 21:54  LD_Dragon  阅读(293)  评论(1编辑  收藏  举报