python学习之简单前端

前端简介

前端与后端

前端：用户可见、与用户直接交互的操作界面都可以称为前端

后端：不直接与用户交互的内部真正执行核心业务逻辑的代码程序

前端核心基础

  • HTML：网页的骨架
  • CSS：网页的样式
  • JS：网页的动态

超文本传输协议

由于浏览器需要兼容许多服务端软件，为了实现无障碍沟通交流，需采用一些协议：

  • HTTP 协议
  • FTP 协议
  • HTTPS 协议

HTTP超文本传输协议

四大特性

  1. 基于请求响应

    服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应

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

    应用层协议：HTTP、HTTPS、FTP...

  3. 无状态

    协议对于事务处理没有记忆能力

  4. 无/短链接

    限制每次连接只处理一个请求

数据格式

  • 请求数据格式
    1. 请求首行
    2. 请求头
    3. 空行
    4. 请求数据
  • 响应数据格式
    1. 状态行
    2. 响应头
    3. 空行
    4. 响应体

响应状态码

利用数字来表示一些复杂的情况说明。

常见的 HTTP 状态码：

  • 200 - 请求成功
  • 301 - 资源（网页等）被永久转移到其它URL
  • 404 - 请求的资源（网页等）不存在
  • 500 - 内部服务器错误

HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型。

响应分为五类：

  1. 信息响应(100–199)
  2. 成功响应(200–299)
  3. 重定向(300–399)
  4. 客户端错误(400–499)
  5. 服务器错误 (500–599)
分类 描述
1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

注释语法

<!--注释内容-->

文件结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
  • < !DOCTYPE html> 声明为 HTML5 文档
  • < html> 元素是 HTML 页面的根元素
  • < head> 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
  • < title> 元素描述了文档的标题
  • < body> 元素包含了可见的页面内容，展示给用户看的内容

HTML标签

单标签和双标签

  1. 单标签(自闭和标签)

    <img/>

  2. 双标签

    <a></a>

块级标签与行内标签

  1. 块级标签 (block-level)：一个标签独占一行

    <div></div>
<h1></h1>
<p></p>
<hr>
...

  2. 行内标签(inline)：内部文本多大自身就占多大

    <span></span>
<i></i>
<b></b>
<br>
...

  1. 块儿级标签是可以通过CSS调整为不独占一行

  2. 标签之间很多时候可以嵌套

    块儿级可以嵌套任何类型的标签

    ​ p标签虽然是块儿级标签，但是不能嵌套块儿级标签

    行内标签只能嵌套行内标签

head内常见标签

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题，即浏览器标签页的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系，如引入外部CSS文件
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件，内部支持写js代码，也可通过src属性引入外部JS文件
<style> 定义了HTML文档的样式文件 
<meta name="keywords" content="定义文档关键词，用于搜索引擎">

<meta name="description" content="定义页面描述、简介">

<meta name="author" content="kwan，定义页面作者">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- http-equiv 属性可用于模拟一个 HTTP 响应头。 -->
<!-- X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页 -->
<!-- IE=edge简单的说，就是什么版本 IE 就用什么版本的标准模式渲染，网页兼容问题 -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport表示视口，不仅匹配PC端，也可匹配移动端 -->
<!-- width：可视区域的宽度，值可为数字或关键词 -->
<!-- device-width，设备屏幕的物理宽度 -->
<!-- height：同width -->
<!-- intial-scale:设置页面的初始缩放值，取值1.0则页面按实际尺寸显示，无任何缩放 -->
<!-- user-scalable：是否允许用户进行缩放 -->

body内基本标签（部分）

标签 描述
<h1> - <h6> 定义 HTML 标题
<p> 定义一个段落
<hr> 定义水平线
<br> 插入一个简单的换行符
<u> 定义下划线
<i> 定义斜体字
<s> 定义删除线
<b> 定义粗体文本

body内基本符号

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

body内布局标签

标签 描述
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)

body内常见标签

  • a 标签：链接标签

    <a href=""></a>
<a href="" target="_blank"></a>

    • href ：可以填写网址 点击自动跳转

      href 还可以填写其他标签的id值，实现锚点功能

    • target：可以控制是否新建页面跳转

      _self 在当前页跳转，不新建页面

      _blank 跳转到新链接页面

  • img标签：图片标签

    <img src="" alt="">

    • src：填写图片地址(网络地址 本地地址)

    • title：鼠标悬浮在图片上就会有提示信息

    • alt：图片加载失败提示的信息

    • height：调整图片的高度

    • width：调整图片的宽度

      上述两个调整一个另外一个等比例缩放

标签两大重要属性

下面的两个属性都是用来快速定位需要操作的标签：

  1. id属性(一对一管理)

    类似于身份证号 在同一个html页面上，id值不能重复

  2. class属性(批量管理)

    类似于分组 多个标签可以拥有相同的class值

列表标签

  • 无序列表

    <ul>
    <li>python</li>
    <li>golang</li>
    <li>linux</li>
</ul>

  • 有序列表

    <ol type="I" start="10">
    <li>第一项</li>
    <li>第二项</li>
    <li>第二项</li>
</ol>

  • 标题列表

    <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

表格标签

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>
</table>

表单标签

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

<form action="" method=""></form>
<!-- action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交 -->
<!-- method属性
用于控制请求的方式(get\post) -->

<form action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">双色球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="">北京</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="普通按钮">
    </form>

sasdsadas

posted @ 2022-08-22 21:30  梦想有双休  阅读(548)  评论(0)    收藏  举报