鳥學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的學習筆記。
將文本設置為標題顯示的標簽對。設定標題字體大小,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>
顯示效果如下:
對文字的格式做相應的變化,如粗體、斜體、底線、上標、下標等。常用的字體修飾標簽有以下幾種。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鳥小白呀</b>
我是菜鳥小白呀
</body>
</html>
顯示效果如下:
設置文檔的字體,改變其屬性,對文本進行不同的設置,包含字體、大小、顏色等
我們看看大小的對比區別
<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鏈接包含兩部分:錨標和目標點。錨標就是鏈接的源點,當鼠標被移動到錨標處時會變成小手狀。此時,用戶通過點擊鼠標就可以到達鏈接的目標點。目標點可以是一張圖片、一個網絡文件、一個多媒體文件等。
用于設定鏈接地址,其鏈接地址必須是URL地址,必須給出具體的路徑。其中URL地址可以為下面內容:
<a href="http://www.baidu.com">百度地址</a>
點擊頁面的百度地址可直接跳轉到百度頁面
<a href="cainiao-跳轉后頁面.html">跳轉</a>
跳轉前頁面
點擊跳轉后直接跳轉到新的本機頁面
<a href="index.txt">txt文件,打開進行編輯</a>
<a href="index.wav">播放聲音</a>
<!--在新的窗口中打開百度首頁-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>
瀏覽器會以浮動提示的方式顯示解釋信息
<a href="http://www.baidu.com" target=_blank title="百度歡迎你">百度地址</a>
實際效果展示:
利用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="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
<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">
<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">
<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">
創建一個表格,有屬性width(寬度)、height(高度)、border(邊框)、bordercolor(邊框顏色)、cellspacing、cellpadding
創建表格中的每一行,有屬性align、valign、bgcolor
創建表格的中每一列,有屬性
設置表頭
我們現在建造一個表
<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>
顯示如下:
一個瀏覽器文檔窗口一般只能顯示一個網頁文件,但是使用框架標簽就可以將一個瀏覽器文檔窗口分割成多個子窗口,每個子窗口中都可以顯示一個獨立的網頁文件。
多個框架組成了一個框架集(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>……</form>標簽之間。有屬性type,具體參數值有:
<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的學習資料詳細整理一份,感興趣的小伙伴可以一起來哦。
結構圖
在這里插入圖片描述
MVVM是前端視圖層的分層開發思想,主要把每個頁面,分成了M,V和VM,其中VM是MVVM的思想核心:因為VM連接著M和V。
前端頁面中使用MVVM的思想,主要是為了讓我們開發MVVM提供了數據的雙向綁定,雙向綁定是由VM提供的
??此次代碼工具是Visual Studio Code,小伙伴可自行下載安裝。
??代碼如下:
<!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>
注意代碼中的注釋!
訪問頁面
注意操作
在這里插入圖片描述
運行效果
在這里插入圖片描述
指令 | 描述 |
{{}} | 插值表達式 |
v-cloak | 解決 插值表達式閃爍的問題 |
v-text | 和插值一樣也是使用vue中的變量,但是默認沒有閃縮問題,但是會覆蓋原本的內容,插值不會 |
v-html | 顯示HTML的內容 |
v-bind | Vue提供的屬性綁定機制,縮寫是 ':' |
v-on | Vue提供的事件綁定機制,縮寫是:'@' |
??在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
訪問效果
在這里插入圖片描述
效果查看
在這里插入圖片描述
加載完成就會變好!這就是插值閃爍的問題
??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>
??和插值差不多,也可以從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>
運行結果
在這里插入圖片描述
??默認我們從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>
運行結果
在這里插入圖片描述
??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>
效果圖
在這里插入圖片描述
??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>
案例演示
在這里插入圖片描述
好了~本文就先介紹到此,
*請認真填寫需求信息,我們會在24小時內與您取得聯系。