【2022-08-22】python前端开发(一)

高增發表於 2022-8-22 22:01:00

<h2 id="python前端开发一">python前端开发(一)</h2>
<h3 id="前端简介">前端简介</h3>
<pre><code class="language-py">前端与后端

前端
   与用户直接交互的操作界面都可以称之为是前端
后端
   不直接与用户交互，内部真正执行核心业务逻辑的代码程序

前端，也称web前端，通俗一点就是网页，运行在PC端和移动端等浏览器展示给用户的网页前端开发最基本（HTML,CSS,JavaScript)也是最核心,不管是做移动端前端还是PC前端三个都是必不可少的。

前端核心基础

HTML
网页的骨架
HTML是超文本标记语言也是制作网页的基础,是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源

CSS
网页的样式
css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTM 等文件样式的计算机语言。

JS
      网页的动态
      JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格

</code></pre>
<h3 id="http超文本传输协议">HTTP超文本传输协议</h3>
<pre><code class="language-py">HTTP超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

HTTP四大特性:

1.基于请求响应：基本的特性，由客户端发起请求，服务端响应
2.基于TCP/IP之上作用于应用层的协议
3.无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
4.无/短连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。

请求数据格式:

1.请求首行(请求方式:有很多种协议名称及版本)
2.请求头(一大堆K:V键值对)
3.换行
4.请求体(携带一些敏感的数据不是所有的请求都有请求体，比如GET请求，会返回一个空)

响应数据格式:

1.响应首行(响应状态码，利用数字来表示一些复杂的情况说明）
2.响应头(一大堆K:V键值对)
3.换行
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
</code></pre>
<h3 id="http协议状态码分类">HTTP协议状态码分类</h3>
<pre><code class="language-py">1xx：100-101 信息提示，服务端已经接收到你的请求正在处理你可以继续提交或者等待
2xx：200-206 成功
3xx：300-307 重定向
4xx：400-415 错误类信息，客户端错误
5xx：500-505 错误类信息，服务器端错误
</code></pre>
<h3 id="http协议常用的状态码">HTTP协议常用的状态码</h3>
<pre><code class="language-py">200：成功，请求数据通过响应报文的entity-body部分发送;OK
301：请求的URL指向的资源已经被删除；但在响应报文中通过首部Location指明了资源现在所处的新位置；Moved Permanently
302：响应报文Location指明资源临时新位置 Moved Temporarily
304：客户端发出了条件式请求，但服务器上的资源未曾发生改变，则通过响应此响应状态码通知客户端；Not Modified
307:浏览器内部重定向
401：需要输入账号和密码认证方能访问资源；Unauthorized
403：请求被禁止；Forbidden
404：服务器无法找到客户端请求的资源；Not Found
500：服务器内部错误；Internal Server Error
502：代理服务器从后端服务器收到了一条伪响应，如无法连接到网关；Bad Gateway
503：服务不可用，临时服务器维护或过载，服务器无法处理请求
504：网关超时
我们在公司中还会自己定义更多的状态码，一般情况下从10000开始
</code></pre>
<h3 id="html简介">HTML简介</h3>
<pre><code class="language-py">HTML是超文本标记语言也是制作网页的基础,是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。

浏览器展示的界面我们也称之为HTML页面存储HTML语言的文件后缀一般是.html

HTML注释语法
 # 单行注释换行就是多行注释

HTML文件结构
<html>    所有的代码都必须写在html标签内部
<head></head>head内的数据一般都不是给用户看的
   <body></body>body内的数据就是浏览器展示给用户看的
</html>

HTML标签的分类
1.单标签(自闭和标签，就是只有它自己)
<img/>
   2.双标签，有头有尾
<a></a>
</code></pre>
<h3 id="head内常见标签">head内常见标签</h3>
<pre><code class="language-py">title 控制标签页小标题
style 内部支持编写CSS
link 引入外部CSS文件
script 内部支持编写JS代码还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写关键字提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
</code></pre>
<h3 id="body内基本标签">body内基本标签</h3>
<pre><code class="language-py">h1~h6 标题标签
p    段落标签
hr 水平分割线
br 换行符
u 下换线
i 斜体
s 删除线
b 加粗
注意:有很多样式可能存在多种标签可以实现
</code></pre>
<h3 id="块级标签与行内标签">块级标签与行内标签</h3>
<pre><code class="language-py">1.块儿级标签标题系列：h1~h6 p hr br
一个标签独占一行
2.行内标签 u i s b
内部文本多大自身就占多大
</code></pre>
<h3 id="body内基本符号">body内基本符号</h3>
<pre><code class="language-py">&nbsp; 空格
&gt; 大于号
&lt; 小于号
&amp; &
&yen; ¥
&reg; 注册
&copy; 版权
</code></pre>
<h3 id="body内布局标签">body内布局标签</h3>
<pre><code class="language-py">div
块级标签
span
行内标签

1.块级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以嵌套
块级可以嵌套任何类型的标签
p标签虽然是块级标签但是不能嵌套块级标签
行内标签只能嵌套行内标签
</code></pre>
<h3 id="body内常见标签">body内常见标签</h3>
<pre><code class="language-py">1.a标签

超链接标签
href 可以填写网址点击自动跳转
href 还可以填写其他标签的id值实现锚点功能
target 可以控制是否新建页面跳转
_self 在原有的页面进行跳转
_blank 单独开个页面进行跳转，并保留原有的页面

<h1 id="d1">西游记</h1>
<div style="height: 1000px;background-color: aliceblue"></div>
<h1 id="d2">三国演义</h1>
<div style="height: 1000px;background-color: darkcyan"></div>
<h1 id="d3">红楼梦</h1>
<div style="height: 1000px;background-color: cadetblue"></div>
<h1 id="d4">水浒传</h1>
<div style="height: 1000px;background-color: orange"></div>

<a href="#d1">111</a>
<a href="#d2">999</a>
<a href="#d3">777</a>
<a href="#d4">666</a>

2.img标签

图片标签
src 填写图片地址(可以是网络地址或者本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height调整图片的高度，调整单位px
width 调整图片的宽度
上述两个调整一个，另外一个会等比例缩放

<img src="https://img1.baidu.com/it/u=1814112640,3805155152&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=e04ca4c94ca75c453571e74e645d582a" alt="加载失败，请充值查看付费内容" title="珍妮嘛黛劲" height="800px">

</code></pre>
<h3 id="标签两大重要属性">标签两大重要属性</h3>
<pre><code class="language-py">下面的两个属性都是用来快速定位需要操作的标签
1.id属性(一对一管理)
类似于IP地址，作为唯一的标识，在同一个html页面上 id值不能重复
2.class属性(批量管理)
类似于分组多个标签可以拥有相同的class值
</code></pre>
<h3 id="列表标签">列表标签</h3>
<pre><code class="language-py">无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>mysql</li>
<li>docker</li>
</ul>

页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表

有序列表

<ol type="I" start="10">
<li>python</li>
<li>Linux</li>
<li>mysql</li>
</ol>

标题列表

<d1>
<dt>人工智能</dt>
   <dd>数据类型</dd>
<dt>Linux</dt>
   <dd>文件读写权限</dd>
   <dd>yum源配置</dd>
</d1>
</code></pre>
<h3 id="表格标签">表格标签</h3>
<pre><code class="language-html"><table>
<thead>
   <tr>
         <th>序号</th>
         <th>主机名</th>
         <th>用户名</th>
         <th>密码</th>
   </tr>

</thead>
<tbody>
   <tr>
         <td>1</td>
         <td>hostname</td>
         <td>username</td>
         <td>password</td>
   </tr>
</tbody>

</table>
</code></pre>
<h3 id="表单标签">表单标签</h3>
<pre><code class="language-py">表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

<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>hobby:
   <input type="checkbox" name="hobby">跑步</p>
   <input type="checkbox" name="hobby">游泳</p>
   <input type="checkbox" name="hobby">唱K
</p>
<p>gender:
   <input type="radio" name="gender">男
   <input type="radio" name="gender">女
   <input type="radio" name="gender">其他
</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>
</code></pre><br><br>
来源：https://www.cnblogs.com/dy12138/p/16614429.html

頁: [1]

琼殿技术论坛's Archiver

【2022-08-22】python前端开发(一)