菜鳥學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 之間的區別