菜鸟学Python之七：使用input读取输入信息

鸟学Python之七：使用input读取输入信息

大家好，我是@爱玩电脑，今天跟大家一起零基础入门学习Python第七课，使用input读取输入信息，纯粹零基础入门，高手绕行。我的操作系统Windows7，Python是Python3.6 32位版本。

图一封面图

概述：我们前面讲过使用print输出信息，但是如何接受用户的输入呢？既然输出命令叫print，那么输入命令是不是应该叫input呢？闲话少说，直接上代码吧。

一、一段简单的代码

图二一段小代码

上述代码，首先打印一条提示信息，等待用户输入，上图中，输入18并回车后，程序打印另外一条提示信息，然后等待用户输入，输入身高并回车，程序将我们输入的信息汇总打印出来。

ps:print输出信息后会自动换行，所以我们输入18都是在下一行输入，如果要不换行，在提示信息的同一行进行输入，需要使用这种写法：

print("敢问小姐芳龄？",end="")

二、可以不用print输出提示信息吗

当然是可以的，input自己也可以给出提示信息，用法如下：

图三又一段小程序

三、怎么将输入的信息转变为数字

input接收的是字符串，不管你本意是输入数字还是什么。要将输入的字符串转为数字大概有两种方法：

1.使用eval（）函数

2.使用int（）函数

目前就知道有这么个用法就行了，不详细介绍。我们写点代码来试试看。我们还是用第一段代码，输入的也是数字，把最后输出语句的%s修改为数字的占位符%d试试：

图三修改下试试

可以看到程序报错了，最后一行意思是%d的格式需要一个数字，而不是str格式的，这个说明我们输入的18和170确实被当做字符串来保存了。我们修改下代码，就可以使用%d了：

图四成功了

好吧，《菜鸟学Python之七：使用input读取输入信息》就讲到这里，大家一起多多练习吧。文章由@爱玩电脑创作，转载请注明出处。

天我们继续看看html的学习笔记。

文本标签

标题标签<hn>

将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从<h1>……</h1>到<h6>……</h6>

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鸟小白</h1>
<h2>你们的好朋友</h2>
<h3>  让我们一起学习吧！！！</h3>
</body>
</html>

显示效果如下：

字体修饰标签

对文字的格式做相应的变化，如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。

<b>……</b>:指定文字为粗体字
<i>……</i>:指定文字为斜体字
<u>……</u>:指定文字为带有下划线
<tt>……</tt>:指定文字为打字机效果
<sup>……</sup>:指定文字为上标
<sub>……</sub>:指定文字为小标
<em>……</em>:对某段文字进行强调，通常用斜体字显示出来
<strong>……</strong>:对文本进行强调，通常用粗体字显示出来我们看下加粗前后对比，其它效果类似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鸟小白呀</b>
我是菜鸟小白呀
</body>
</html>

显示效果如下：

字体标签<font>

设置文档的字体，改变其属性，对文本进行不同的设置，包含字体、大小、颜色等

size
face
color

我们看看大小的对比区别

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鸟小白
<font size="20px">我是菜鸟小白呀</font>
</body>
</html>

显示效果如下：

超链接标签

超链接的定义

在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移动到锚标处时会变成小手状。此时，用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络文件、一个多媒体文件等。

属性href（hypertext reference）

用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。其中URL地址可以为下面内容：

网站：可以设置ip地址或者是网站的网址。

<a href="http://www.baidu.com">百度地址</a>

点击页面的百度地址可直接跳转到百度页面

网页：链接到本机的网页。

<a href="cainiao-跳转后页面.html">跳转</a>

跳转前页面

点击跳转后直接跳转到新的本机页面

可执行文件：当文件扩展名不是html、asp等时，会将链接到的文件下载到本地计算机或直接执行。如果是文本文件（如word格式），则在浏览器中打开文件并进行编辑。

<a href="index.txt">txt文件，打开进行编辑</a>
<a href="index.wav">播放声音</a>

网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间。

属性target

属性值分别为_blank、_self、_parent、_top。
target=_blank：在新的浏览器窗口中打开连接的文档，同时保持当前窗口不变
target=_self：将链接的文档载入链接所在的同一框架或窗口，默认设置为_self
target=_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。
target=_top：将链接的文档载入整个浏览器窗口，从而删除所有框架我们以“_blank”为例，可以按照如下方式编写：

<!--在新的窗口中打开百度首页-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

属性title

浏览器会以浮动提示的方式显示解释信息

<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>

实际效果展示：

属性name

利用name属性作为锚定位，可以实现文档内部的定位。这个需要我们在两个<a>标签中，一个写明name，作为一个锚点；另外一个写明herf，用于指向锚点。如下面的示例，点击“百度地址”会跳转到“这是测试跳转处”（当页面超过一页长度时，测试效果更明显）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<body bgcolor="11ffff" text="000000">
<a name=ceshi>这是测试跳转</a>
<a href="#ceshi" title="百度欢迎你">百度地址</a>
?
</body>
</html>

图像标签

图片标签<img 属性=“属性值”>

属性src：来定义图片的URL（统一资源定位符）地址，是图片必不可少的属性。用法形如：<img src="url">

<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

属性height和width：规定图片的大小。属性值都是数字，表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸

<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

属性align：设置图片对齐方式，垂直对齐（居上、居中和居下）和水平对齐（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

属性border：默认图片是没有边框的，可以利用border属性添加边框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格标签

表<table>

创建一个表格，有属性width（宽度）、height（高度）、border（边框）、bordercolor（边框颜色）、cellspacing、cellpadding

行<tr>

创建表格中的每一行，有属性align、valign、bgcolor

列<td>

创建表格的中每一列，有属性

表头<th>

设置表头

我们现在建造一个表

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
?
<table border>
<th>测试表头</th>
?
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
</table>

</body>
</html>

显示如下：

框架标签

框架<frame>

一个浏览器文档窗口一般只能显示一个网页文件，但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。

框架集<frameset>

多个框架组成了一个框架集（Frameset），定义了各个框架如何排列的。有属性rows和cols，两个属性至少选择一个，否则浏览器只显示第一个定义的框架。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
?
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
?
</html>

最终我们将三个页面在同一个web窗口展示出来了

表单标签

表单标签<form>

主要用于采集和提交用户输入的信息，使网页具有交互功能。有属性：

action（处理提交数据的页面）
method（提交方式（get、post、request））
target（）

用户输入区域标签<input type="">

这个标签必须放在<form>……</form>标签之间。有属性type，具体参数值有：

text（单行文本输入框）
textarea（多行输入框）
password（密码输入框）
radio（单选框）
checkbox（复选框）
select（下拉框）
submit（提交）
reset（重置）
image（图片提交）
file（上传文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
?
<body>
<p>用户名<input type="text"></input></p>
<p>多行输入框<textarea></textarea></p>
<p>密  码<input type="password"></input></p>
<p>单选框<input type="radio"></input></p>
<p>复选框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>图片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>
?
</body>
</html>

实现效果：

好了，今天的内容就分享完了，如有什么意见和建议可以私信菜鸟小白哦，我们下期再会~

?因为最近需要使用到Vue，所以打算将Vue的学习资料详细整理一份，感兴趣的小伙伴可以一起来哦。

一、Vue基础介绍

1.什么是Vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

2.为什么要学习流行框架

企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

3.Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
为什么有了MVC还要有MVVM

结构图

在这里插入图片描述

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V和VM，其中VM是MVVM的思想核心：因为VM连接着M和V。
前端页面中使用MVVM的思想，主要是为了让我们开发MVVM提供了数据的双向绑定，双向绑定是由VM提供的

二、Vue基本使用

??此次代码工具是Visual Studio Code,小伙伴可自行下载安装。

1.第一个案例

??代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- 3. Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm=new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
      msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>

</html>

注意代码中的注释！

访问页面

注意操作

在这里插入图片描述

运行效果

在这里插入图片描述

2.常用指令

指令	描述
{{}}	插值表达式
v-cloak	解决插值表达式闪烁的问题
v-text	和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会
v-html	显示HTML的内容
v-bind	Vue提供的属性绑定机制，缩写是 ':'
v-on	Vue提供的事件绑定机制，缩写是:'@'

2.1 插值表达式

??在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取，如下

  <div id="app">
      <!-- 插值表达式获取vue中的msg信息 -->
    <p>{{ msg }}</p>
  </div>

  <script>
    var vm=new Vue({
      el: '#app', 
      data: {
        msg: '欢迎学习Vue' 
      }
    })
</script>

注意：插值表达式有闪缩的问题
我们以站点的方式启动，Ctrl+shift+p ：在输入中搜索如下

快捷键

在这里插入图片描述

注意标注

在这里插入图片描述

访问地址：http://localhost/xxx.html

访问效果

在这里插入图片描述

效果查看

在这里插入图片描述

加载完成就会变好！这就是插值闪烁的问题

2.2 v-cloak

??v-cloak指令可以解决上面插值闪烁的问题，如下：其实利用的就是当插值没有被加载出来的是通过 style属性将内容给隐藏了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
       display: none; 
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>++++++++ {{ msg }} ----------</p>
  </div>
  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm=new Vue({
      el: '#app',
      data: {
        msg: 'hello',
      }
    })
  </script>
</body>

</html>

2.3 v-text

??和插值差不多，也可以从vue对象中获取信息，v-text默认是没有闪烁问题的，但是会覆盖掉原有的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>----{{msg}}=====</p>
        <p v-text="msg"></p>
        <p v-text="msg">*******</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        })
    </script>
</body>
</html>

运行结果

在这里插入图片描述

2.4 v-html

??默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示，如果我们要显示标签的语义，那么需要使用v-html指令如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>----{{msg}}=====</p>
        <p v-text="msg"></p>
        <p v-text="msg">*******</p>
        <p v-html="msg"></p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"<h3>hello vue</h3>"
            }
        })
    </script>
</body>
</html>

运行结果

在这里插入图片描述

2.5 v-bind

??v-bind是 Vue中，提供的用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式，可以做类似的处理，见代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="提交1" title="提交按钮"><br>
        <input type="button" value="提交2" v-bind:title="title">
        <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
        <input type="button" value="提交2" :title="title">
        <!-- v-bind 中，可以写合法的JS表达式-->
       <input type="button" value="提交2" :title="title + ' bbb'">
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                title:"title123"
            }
        })
    </script>
</body>
</html>

效果图

在这里插入图片描述

2.6 v-on

??Vue 中提供了 v-on: 事件绑定机制,具体使用如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" v-on:click="show">
        <!--还可以缩写为 @-->
        <input type="button" value="点击" @click="show">
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"<h3>hello vue</h3>"
            },
            methods:{
                show:function(){
                    alert('hello')
                }
            }
        })
    </script>
</body>
</html>

案例演示

在这里插入图片描述

好了~本文就先介绍到此，

在线咨询

上一篇：js-模拟支付宝的支付密码弹窗
下一篇：探索办公软件PDF编辑器PDF与HTML转换技巧，驾

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

菜鸟学Python之七：使用input读取输入信息

文本标签

标题标签<hn>

字体修饰标签

字体标签<font>

超链接标签

超链接的定义

属性href（hypertext reference）

属性target

属性title

属性name

图像标签

图片标签<img 属性=“属性值”>

表格标签

表<table>

行<tr>

列<td>

表头<th>

框架标签

框架<frame>

框架集<frameset>

表单标签

表单标签<form>

用户输入区域标签<input type="">

一、Vue基础介绍

1.什么是Vue.js

2.为什么要学习流行框架

3.Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别

二、Vue基本使用

1.第一个案例

2.常用指令

2.1 插值表达式

2.2 v-cloak

2.3 v-text

2.4 v-html

2.5 v-bind

2.6 v-on

您的项目需求

3.Node（后端）中的 MVC 与前端中的 MVVM 之间的区别