资讯详情

Python总复习-下

目录

人工智能总目录网页链接

文章目录

9、Python-web前端

Day01-HTML-页面

1. Web

1. 什么是WEB
web就是基于B/S模式的应用程序 - 网页

WEB的典型的应用：

B/S : Browser / Server 浏览器与服务器交互模式
C/S : Client / Server 客户端与服务器交互模式
2. 组成
服务器 : 处理用户的请求(request)和响应(response)->提供数据支持
# 服务器的组成： 服务器，浏览器 和 通信协议组成
浏览器 : 代替用户向服务器发请求,解析数据->代替用户向服务器发送请求(User Agent)
通信协议 : 规范数据传输及打包的方式. - http
http : Hyper Text transfer protocal 超文本传输协议
3. Web 服务器
  1. 作用 :
1. 提供数据支持
2. 接收请求并响应
3. 提供数据安全功能
4. 产品 :
5. Apache
6. Tomcat
7. IIS - Internet Information Service
8. Nginx ...
9. 开发语言:
10. Java
11. PHP
12. ASP.net
13. Python (Django, flask...)
4. 浏览器
  1. 作用 :
1. 代替用户向服务器发送请求 接收响应数据并解析,以图形化界面展示给用户
2. 产品(主流) :
    1. Chrome - Google产品
    2. Safari - Apple产品
    3. IE - 微软产品
    4. Firefox - Mozilla 产品
    5. Opera - Opera产品 划分依据 :
6. 市场份额(决定每年排名)
7. 浏览器引擎(内核)不同
	渲染引擎:解析页面,控制渲染结果
JS引擎:解析脚本
1. 技术 : 前端开发 - 制作网页 
    HTML : 写页面结构 
    CSS : 写样式 
    JS : 写逻辑,实现用户交互 
    框架 : VUE Angular Node.js

2. HTML 概述

1.HyperText Markup Language
1. HyperText Markup Language
   超文本     标记  语言
   作用 : 通过标签的形式书写页面结构并且填充内容
   1. 超文本：具备特殊功能的文本就是超文本
      普通文本 a ：普通字符a
      超文本 a ：表示的是超链接功能

      普通文本 b ：普通字符b
      超文本 b ：表示文字加粗功能
   2. 标记：超文本的组成形式
      普通文本 a : a
      超文本 a : <a></a>
   3. 语言：语言有自己的语法规范
2. W3C：World Wide Web Consortium 万维网联盟
2. 标记
也叫标签或元素,标记页面结构和内容,配合CSS实现页面整体布局和美化
以<>为标志
3. 网页
在计算机中以.html 或 .htm 后缀标识 
网页文件的打开工具 - 浏览器 
开发工具 : 记事本, sublime,VSCode,editPlus,WebStorm,Hbuilder... 
调试工具 : 浏览器自带开发者工具,使用右键-'检查'打开,或者F12打开

3. HTML基础语法

1. 标签/标记
1. 所有的标签都以<>为标志,区分普通文本
2. 标签分类:
   1. 双标签 : 成对出现,有开始,有结束 语法 : <标签名> 标签内容(文本或其他标签) </标签名>
   2. 单标签 : 只有开始,没有结束,本身代表一定的意义或功能 
	语法 :
      <标签名>
         或
      <标签名/>
3. 标签嵌套
	在双标签中嵌套添加其他标签
4. 文档结构
   1. 网页文件以.html / .htm为后缀
   2. 添加双标签<html></html>
   3. 在<html>标签中嵌套一对<head></head>,嵌套<body></body>标签
5. 标签属性
   主要用来修饰当前你标签的显示效果,或者为元素及网页本身添加额外补充信息
   语法 :
   	<开始标签 属性名=属性值 属性名=值>
   注意 :
      1. 标签属性必须写在开始标签中
      2. 属性值必须使用引号引起来,单双引号都可以
      3. 多组属性之间使用空格隔开
6. HTML语法规范
   1. 标签名不区分大小写,建议统一使用小写
   2. 标签名不报错,如果缺少闭合标签,浏览器会自动添加闭合;
		标签名书写错误,不报错,只是丧失原有标签的效果及功能
      <meta>
      <label>
      <table>
   3. 注释 :
      <!-- 注释内容 -->
      注意 :
      注释不能嵌套
      <body <!-- -->> 错误
      <!-- <!-- --> --> 错误
   4. 代码中适当添加注释与缩进,提高可阅读性
2. HTML标签介绍
3. 完整的网页结构
1. HTML5 提供的文档类型声明,以便浏览器能正确解析网页中的标签,并且采用标准方式渲染页面
2. <html></html>
	表示网页文档的开始和结束
3. <head></head>嵌套在html标签中,表示网页的头部,可以书写网页标题,字符集,外部资源的引入,网页相关介绍,网
	页选项卡图标
4. <body></body>表示网页的主体,也是浏览器窗口显示区域
	一切有关页面的内容都写在body中
4. 网页头部设置
网页头部：<head></head>中可以嵌套其它标签,设置标题,选项卡图标,字符集等信息
1. 标题
	<title>百度一下,你就知道</title>
2. 字符集
	<meta charset="utf-8">
3. 选项卡小图标
	<link rel="shortcut icon" href="图片路径" type="image/x-icon">
	图片后缀 .ico
	<link>标签用于引入外部资源
   标签属性 :
      rel 设置资源类型
      href 设置资源路径
      type 声明文件类型和后缀
5. 网页主体内容
1. 文本标签
   1. 标题标签 n表示数字,取值1~6,总共六级标题.标题中的文本自带加粗效果,并且一级到六级,字号逐级
   	减小
   2. 段落标签
2. 普通文本标签
	给一段文本中的某一部分额外添加样式或者动态操作使用的标签
   1. 行分区
      <span></span>
      常与段落或者标题结合使用,为内容设置额外样式
   2. <label></label>
      在表单中使用,优化用户操作
   3. 格式标签
      加粗 : <b></b>或<label></label> H5推荐使用更有语义的标签
      斜体 : <i></i>
      删除线 : <s></s>
      下划线 : <u></u>
      上标 : <sup></sup>
      下标 : <sub></sub>
	4. 空格与换行
   开发过程中出于代码整理造成的空格和换行.在浏览器解析时,统统理解为一个空格
	换行标签 : 可以使用<br/>或<br>实现换行
	5. 水平线标签 : <hr/>
  	6. 字符实体
      由于HTML是标签语法,所以在某些情况下,特殊字符无法正常显示
      例:
      	<day01> 标签语法
      	如果内容为<day01>,浏览器会认为是HTML标签
         3. < : &lt;
         4. > : &gt;
         5. 空格 : &nbsp;
         6. 版权符号 : &copy;
         7. 人民币符号 : &
6. 列表标签
1. 列表是一种结构化标签,按照从上到下依次显示数据,每一条数据称为一个列表项,不同类型的列表,项目符
	号不同
2. 分类 :
   1. 有序列表(ordered list) 默认按照阿拉伯数字从1开始排列 
		语法 :
         1. List Item
         2. 列表项
	2. 无序列表(unordered list)
		语法 :
			列表项
			默认以实心原点标识列表项 
      练习 : 
         新建文件,在body中添加列表 
         无序列表显示四大名著 
         有序列表列出四种编程语言
7. 列表的标签属性
1. 有序列表 - ol
	1. type 设置项目符号的类型,默认以阿拉伯数字标识 
      可取 : 
         1 默认项目符号 
         a 按照小写字母排序 
         A 按照大写字母排列 
         i 按照希腊数字排列 
         I 大写希腊数字排列
	2. start 设置项目符号使用第几个字符开始标识 
		取值 : 无单位的数值,跟项目符号类型无关
2. 无序列表 - ul type :
      设置项目符号的类型
      取值 :
         disc 默认实心原点
         circle 空心圆
         square 实心方块
         none 取消项目符号
8. 列表的嵌套
在列表中嵌套使用另外一个列表实现多级结构
语法 :
    <ul>
        <li>
            Desktop
            <ul>
                <li>Python-web</li>
            </ul>
        </li>
        <li>C盘</li>
    </ul>
    <ul>
        <li>Desktop</li>
        <ul>
            <li>Python-web</li>
        </ul>
        <li>C盘</li>
    </ul>
练习 :
   使用列表显示四大名著,
   每本名著下显示三个主要人物
建议 :
	下拉菜单使用嵌套列表实现,建议采用父子关系嵌套
9. 标签的层级结构
1.出现标签嵌套时,外层标签称为父元素,内层标签称为子元素
2.多级嵌套时,外层标签称为祖先元素,内层所有标签都可以称为后代元素
3.平级的子元素之间称为兄弟关系,元素称为兄弟元素
例 :
   <html>
      undefined
   <head>
       <title></title>
   </head>
   <body>
       <h1>
           <span></span>
       </h1>
   </body>
   </html>
10. 图像与超链接标签

​ 1. 路径 (URL)

1. URL :
	统一资源定位符 Uniform Resource Locator 表示资源文件所在的位置
2. 组成 : 
	协议 域名 文件目录 文件名 
	例 : 
      http://www.baidu.com 
      https://ss0.bdstatic.com/community/010cf65652fd876ac7251c94c524cf.jpg 
      file:///C:/Users/Python/Desktop/Web/day1/03-list.html
3. 分类 :
	1. 绝对路径
      从根目录开始查找文件
      Windows操作系统上,根目录以盘符为标志
      其他操作系统,根目录使用/表示
   2. 相对路径
      从当前所在目录(文件夹)开始查找资源文件
      可以使用../表示回退上一级目录
      ./表示当前目录文件夹
      et :
         03-list.html
   注意 :
      1. 网络URL中不能出现中文
      文件及文件夹名称中禁止出现中文
      2. URL严格区分大小写

​ 2. 图片标签(img)

作用: 在网页中插入一张图片
语法 :
	<img src="资源路径">
标签属性 :
	1. src : 设置图片URL(必填)

Day02笔记

1. 图片与超链接

1. 图片
作用 : 在网页中插入一张图片
语法 : <img src="">
属性 :
    1. src : 设置图片URL,必填属性
    2. width : 设置图片宽度,取像素值
    3. height : 设置图片高度,取像素值
        注 : 默认情况下,图片会按照原始尺寸显示在网页中,宽高属性可以只写一个,另外一个方向会自动等比缩放
    4. title : 设置图片标题,鼠标悬停于图片时显示标题文本
    5. alt : 设置图片加载失败时的提示文本
2. 超链接
1. 作用 : 实现资源文件的跳转
2. 语法 :
		<a href="链接地址"></a>
3. 属性 :
   1. href : 设置资源文件的地址,必填
   	如果省略,超链接文本跟普通文本无差别
   2. target : 设置目标文件是否在当前窗口打开,默认值为 _self 表示在当前窗口打开新文件.可取 _blank 表示
   	新建窗口打开文件
4. 默认样式
   超链接自带两种状态:
      访问前 蓝色文本色,自带下划线
      访问后 紫色文本色,自带下划线
5. 锚点链接
   作用 : 链接到指定文件的指定位置
   语法 :
   1. 定义锚点
      <a name="1"></a>
      空标签添加name属性定义锚点名称
   2. 指定超链接的链接地址
      <a href="#1">1. 人物介绍</a>
      链接地址中使用#代表当前页面,后面跟上锚点名称,指定位置
6. 链接地址为空时的语法:
   1. href="" 跳转至当前页,包含刷新
   2. href="#" 跳转到当前页,没有刷新,会在当前url末尾添加上#
   3. href="javascript:void(0);"
   跳转至当前页,类似于href="",但是不会刷新页面

2. 表格标签

1. 结构化标签,采用行和列来显示数据
作用 : 在网页中插入一张图片
语法 : <img src="">
属性 :
    1. src : 设置图片URL,必填属性
    2. width : 设置图片宽度,取像素值
    3. height : 设置图片高度,取像素值
        注 : 默认情况下,图片会按照原始尺寸显示在网页中,宽高属性可以只写一个,另外一个方向会自动等比缩放
    4. title : 设置图片标题,鼠标悬停于图片时显示标题文本
    5. alt : 设置图片加载失败时的提示文本
2. 语法
1. 表格标签
2. 表格中嵌套行标签
	tr : table row
3. 行中嵌套单元格标签<td></td>
	td : table data
3. 标签属性
1. table 属性
   1. border : 为表格添加边框,取像素值
   2. bgcolor : 设置表格背景颜色,取颜色的英文单词
   3. align : 设置表格在父元素中的水平位置,取值 : left/center/right
   4. width : 设置表格宽度,取像素值
   5. height : 设置表格高度,取像素值 注 : 表格的默认尺寸由内容决定,手动设置宽高之后,会根据单元格
   内容的多少自动分配行和列的尺寸
   6. cellspacing : 设置表格边框与边框之间的距离,取像素值
   7. cellpadding : 设置单元格内容与边框之间的距离
   8. tr 属性
   9. bgcolor : 设置当前行的背景颜色
   10. align : 设置当前行内容的水平对齐方式,默认居左,可取值left/center/right
   11. valign : 设置当前行内容 的垂直对齐方式,默认垂直居中,可取值 top/middle/bottom
   12. td 属性
   13. bgcolor : 为单元格设置背景颜色
   14. align : 设置当前单元格内容的水平对齐方式
   15. valign : 设置单元格内容的垂直对齐方式
   16. width/height : 设置单元格的宽高尺寸
4. 单元格合并(表格结构调整)
1. 合并属性是单元格td独有的属性
2. 属性 :
   	colspan : collum-span 跨列合并
   横向合并单元格,取值为无单位的数值,表示包含当前单元格在内,合并几个单元格
   例:
      colspan="3"
      rowspan : 跨行合并,取无单位的数值,表示合并几个单元格
3. 注意 :
   不管是跨行还是跨列,都涉及表格结构调整,需要手动删除多余的单元格
   跨列合并 : 删除当前行中多余的单元格
   跨行合并 : 删除后面行中对应的单元格
5. 表格内部结构(行分组标签)
1.表头行分组
2. <tfoot></tfoot>
	表尾行分组
3. <tbody></tbody>
	表格主体,行分组标签可以省略不写,默认情况下,所有的行都自动加入tbody中
6. th标签
用法与td一致,表示单元格,自带文本加粗和居中效果,常用于表头

3. 表单元素

1. 作用
表单用于收集用户信息,并将数据发送给服务器
2. 组成
1. form 表单元素
2. 表单控件(输入框,按钮,文件选择...)
3. 语法
<form>
	表单控件
</form>
4. form标签属性
1. action : 指定数据的提交地址
2. method : 指定数据的提交方式
   默认为get,可取get/post
   1. get 
        标签： 1808zj圆形连接器omega压力变送器px5091407zj圆形连接器omega变送器os36somega压力变送器px602
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台