zoukankan      html  css  js  c++  java
  • 【2020Python修炼记】前端开发之 前端基础和HTML入门

    【目录】

    一、前端开发工具简介 

    二、前端基础

    1、什么是前端

    2、前端学习历程

    3、HTTP协议

    三、HTML

    1、HTML简介

    2、HTML文档结构

    3、HTML标签分类(一)

    4、HTML标签分类(二) 

    5、特殊符号

    6、其他常用标签

    一、前端开发工具简介

    参考阅读:

     https://www.cnblogs.com/xiaoyuanqujing/articles/11669889.html

    https://www.cnblogs.com/xiaoyuanqujing/articles/11669962.html

    还推荐微软的 VScode,也是一款强大且免费的软件,亦支持前端开发。

    二、前端基础

    1、什么是前端——所见即所得

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

    什么是后端
    后端类似于幕后操作者(一堆让人头皮发麻的代码)
    不直接跟用户打交道

    2、前端学习历程

    HTML:网页的骨架 没有任何的样式
    CSS:给骨架添加各种样式 变得好看
    Java Script:控制网页的动态效果

    前端框架:BOOTSTRAP、JQuery、Vue
        提前给你封装好了很多操作 你只需要按照固定的语法调用即可

    3、HTTP协议

    # 浏览器窗口输入网址回车发生了几件事:

    """
    1 浏览器朝服务端发送请求
    2 服务端接受请求   (eg:请求百度首页)
    3 服务端返回相应的响应  (eg:返回一个百度首页)
    4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
    """

    # 浏览器可以充当很多服务端的客户端
    百度 腾讯视频 优酷视频....

    # 如何做到浏览器能够跟多个不同的客户端之间进行数据交互?
    1.浏览器很牛逼 能够自动识别不同服务端做不同处理
    2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
    那么你就必须要遵循一些规则——因此诞生了 HTTP协议

    """

    HTTP协议,即 超文本传输协议 用来规定 服务端和浏览器之间的数据交互的格式...

    该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
    你就自己写客户端 用户想要使用 就下载你专门的app即可
    """
    # 四大特性
    1.基于请求响应
    2.基于TCP/IP 作用于应用层之上的协议
    3.无状态——不保存用户的信息
    eg:一个人来了一千次 你都记不住 每次都当他如初见
    由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
    cookie、session、token...
    4.无/短链接
    请求来一次我响应一次 之后我们两个就没有任何链接和关系了
    长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)


    # 请求数据格式 (请求头 和 请求体 之间,是有一行空行的)
    请求首行   (标识HTTP协议版本,当前请求方式)
    请求头   (一大堆k,v键值对)

    请求体   (并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)


    # 响应数据格式(响应头 和 响应体 之间,是有一行空行的)

    响应首行   (标识HTTP协议版本,响应状态码)
    响应头   (一大堆k,v键值对)

    响应体   (返回给浏览器展示给用户看的数据)

    # 响应状态码
    用一串简单的数字来表示一些复杂的状态或者描述性信息 :

    1XX:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
    2XX:服务端成功响应了你想要的数据(200 OK请求成功)
    3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
    4XX:请求错误
    404:请求资源不存在
    403:当前请求不合法或者不符合访问资源的条件
    5XX:服务器内部错误(500)

    # 请求方式
    1.get请求
    朝服务端要数据
    eg:输入网址获取对应的内容


    2.post请求
    朝服务端提交数据
    eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

    # url:统一资源定位符(大白话 网址)

    三、HTML

    1、HTML简介

    超文本标记语言——HTML (Hypertext Markup Language)

    如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

    我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)

    HTML就是书写网页的一套标准

    # 注释:注释是代码之母
    <!--单行注释-->


    <!--
    多行注释1
    多行注释2
    多行注释3
    -->


    由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找:
    <!--导航条开始-->
    导航条所有的html代码
    <!--导航条结束-->
    <!--左侧菜单栏开始-->
    左侧菜单栏的HTMl代码
    <!--左侧菜单栏结束-->

    2、HTML文档结构

    <html>
      <head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
      <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
    </html>

    PS:文件的后缀名其实是给用户看到的,只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能

    注意:

    HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码

    在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全

     

    两种打开HTML文件的方式

    • 找到文件所在的位置右键选择浏览器打开

    • 在pycharm内部,集成了自动调用浏览器的功能,直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

    3、HTML标签分类(一)——单标签 和 双标签

    (1)分类

    1 双标签

    <h1></h1>
    <a href="https://www.mzitu.com/"></a>

    2 单标签(自闭和标签)

    <img />

    <br />

    4、HTML标签分类(二)——块级标签 & 行内标签

    # 1 块儿级标签:独占一行
    h1~h6 p div
    1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
    但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
    如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)

    总结:
    只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
    但是p标签只能嵌套行内标签(HTML书写规范)


    # 2 行内标签:自身文本多大就占多大
    i u s b span
    行内标签不能嵌套块儿级标签 可以嵌套行内标签

    HTML 常用标签汇总:

    https://www.cnblogs.com/bigorangecc/p/12874484.html

    参考阅读:

    https://www.cnblogs.com/xiaoyuanqujing/articles/11669913.html

  • 相关阅读:
    SQL
    HTTP协议
    工具命令
    安全策略
    日志与审核
    python视频教程免费下载,百度云网盘资源,全套!
    《Python基础教程(第3版)》PDF电子版百度云网盘免费下载
    老男孩Python全栈开发视频教程全套完整版!免费分享!
    Pycharm激活码分享,2020最新Pycharm永久激活码~
    老男孩Python视频教程全套完整版!无偿分享~
  • 原文地址:https://www.cnblogs.com/bigorangecc/p/12867024.html
Copyright © 2011-2022 走看看