整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
鳥學(xué)Python之七：使用input讀取輸入信息
大家好，我是@愛玩電腦，今天跟大家一起零基礎(chǔ)入門學(xué)習(xí)Python第七課，使用input讀取輸入信息，純粹零基礎(chǔ)入門，高手繞行。我的操作系統(tǒng)Windows7，Python是Python3.6 32位版本。
圖一 封面圖
概述：我們前面講過使用print輸出信息，但是如何接受用戶的輸入呢？既然輸出命令叫print，那么輸入命令是不是應(yīng)該叫input呢？閑話少說，直接上代碼吧。
一、一段簡單的代碼
圖二 一段小代碼
上述代碼，首先打印一條提示信息，等待用戶輸入，上圖中，輸入18并回車后，程序打印另外一條提示信息，然后等待用戶輸入，輸入身高并回車，程序?qū)⑽覀冚斎氲男畔R總打印出來。
ps:print輸出信息后會自動換行，所以我們輸入18都是在下一行輸入，如果要不換行，在提示信息的同一行進行輸入，需要使用這種寫法：
print("敢問小姐芳齡？",end="")
二、可以不用print輸出提示信息嗎
當(dāng)然是可以的，input自己也可以給出提示信息，用法如下：
圖三 又一段小程序
三、怎么將輸入的信息轉(zhuǎn)變?yōu)閿?shù)字
input接收的是字符串，不管你本意是輸入數(shù)字還是什么。要將輸入的字符串轉(zhuǎn)為數(shù)字大概有兩種方法：
1.使用eval（）函數(shù)
2.使用int（）函數(shù)
目前就知道有這么個用法就行了，不詳細介紹。我們寫點代碼來試試看。我們還是用第一段代碼，輸入的也是數(shù)字，把最后輸出語句的%s修改為數(shù)字的占位符%d試試：
圖三 修改下試試
可以看到程序報錯了，最后一行意思是%d的格式需要一個數(shù)字，而不是str格式的，這個說明我們輸入的18和170確實被當(dāng)做字符串來保存了。我們修改下代碼，就可以使用%d了：
圖四 成功了
好吧，《菜鳥學(xué)Python之七：使用input讀取輸入信息》就講到這里，大家一起多多練習(xí)吧。文章由@愛玩電腦創(chuàng)作，轉(zhuǎn)載請注明出處。
天我們繼續(xù)看看html的學(xué)習(xí)筆記。
將文本設(shè)置為標(biāo)題顯示的標(biāo)簽對。設(shè)定標(biāo)題字體大小，n=1（大）~6（小），標(biāo)題大小一共有6種，也就是從<h1>……</h1>到<h6>……</h6>
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鳥小白</h1>
<h2>你們的好朋友</h2>
<h3> 讓我們一起學(xué)習(xí)吧！！！</h3>
</body>
</html>
顯示效果如下：
對文字的格式做相應(yīng)的變化，如粗體、斜體、底線、上標(biāo)、下標(biāo)等。常用的字體修飾標(biāo)簽有以下幾種。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鳥小白呀</b>
我是菜鳥小白呀
</body>
</html>
顯示效果如下：
設(shè)置文檔的字體，改變其屬性，對文本進行不同的設(shè)置，包含字體、大小、顏色等
我們看看大小的對比區(qū)別
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鳥小白
<font size="20px">我是菜鳥小白呀</font>
</body>
</html>
顯示效果如下：
在不同文檔、同一個文檔的不同段落之前相互跳轉(zhuǎn)。html鏈接包含兩部分：錨標(biāo)和目標(biāo)點。錨標(biāo)就是鏈接的源點，當(dāng)鼠標(biāo)被移動到錨標(biāo)處時會變成小手狀。此時，用戶通過點擊鼠標(biāo)就可以到達鏈接的目標(biāo)點。目標(biāo)點可以是一張圖片、一個網(wǎng)絡(luò)文件、一個多媒體文件等。
用于設(shè)定鏈接地址，其鏈接地址必須是URL地址，必須給出具體的路徑。其中URL地址可以為下面內(nèi)容：
<a href="http://www.baidu.com">百度地址</a>
點擊頁面的百度地址可直接跳轉(zhuǎn)到百度頁面
<a href="cainiao-跳轉(zhuǎn)后頁面.html">跳轉(zhuǎn)</a>
跳轉(zhuǎn)前頁面
點擊跳轉(zhuǎn)后直接跳轉(zhuǎn)到新的本機頁面
<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屬性作為錨定位，可以實現(xiàn)文檔內(nèi)部的定位。這個需要我們在兩個<a>標(biāo)簽中，一個寫明name，作為一個錨點；另外一個寫明herf，用于指向錨點。如下面的示例，點擊“百度地址”會跳轉(zhuǎn)到“這是測試跳轉(zhuǎn)處”（當(dāng)頁面超過一頁長度時，測試效果更明顯）
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<a name=ceshi>這是測試跳轉(zhuǎn)</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">
創(chuàng)建一個表格，有屬性width（寬度）、height（高度）、border（邊框）、bordercolor（邊框顏色）、cellspacing、cellpadding
創(chuàng)建表格中的每一行，有屬性align、valign、bgcolor
創(chuàng)建表格的中每一列，有屬性
設(shè)置表頭
我們現(xiàn)在建造一個表
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</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>
顯示如下：
一個瀏覽器文檔窗口一般只能顯示一個網(wǎng)頁文件，但是使用框架標(biāo)簽就可以將一個瀏覽器文檔窗口分割成多個子窗口，每個子窗口中都可以顯示一個獨立的網(wǎng)頁文件。
多個框架組成了一個框架集（Frameset），定義了各個框架如何排列的。有屬性rows和cols，兩個屬性至少選擇一個，否則瀏覽器只顯示第一個定義的框架。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</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窗口展示出來了
主要用于采集和提交用戶輸入的信息，使網(wǎng)頁具有交互功能。有屬性：
這個標(biāo)簽必須放在<form>……</form>標(biāo)簽之間。有屬性type，具體參數(shù)值有：
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</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>復(fù)選框<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>
實現(xiàn)效果：
好了，今天的內(nèi)容就分享完了，如有什么意見和建議可以私信菜鳥小白哦，我們下期再會~
?因為最近需要使用到Vue，所以打算將Vue的學(xué)習(xí)資料詳細整理一份，感興趣的小伙伴可以一起來哦。
結(jié)構(gòu)圖
在這里插入圖片描述
MVVM是前端視圖層的分層開發(fā)思想，主要把每個頁面，分成了M，V和VM，其中VM是MVVM的思想核心：因為VM連接著M和V。
前端頁面中使用MVVM的思想，主要是為了讓我們開發(fā)MVVM提供了數(shù)據(jù)的雙向綁定，雙向綁定是由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. 導(dǎo)入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 將來 new 的Vue實例，會控制這個 元素中的所有內(nèi)容 -->
<!-- 3. Vue 實例所控制的這個元素區(qū)域，就是我們的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2. 創(chuàng)建一個Vue的實例
// 當(dāng)我們導(dǎo)入包之后，在瀏覽器的內(nèi)存中，就多了一個 Vue 構(gòu)造函數(shù)
// 注意：我們 new 出來的這個 vm 對象，就是我們 MVVM中的 VM調(diào)度者
var vm=new Vue({
el: '#app', // 表示，當(dāng)前我們 new 的這個 Vue 實例，要控制頁面上的哪個區(qū)域
// 這里的 data 就是 MVVM中的 M，專門用來保存 每個頁面的數(shù)據(jù)的
data: { // data 屬性中，存放的是 el 中要用到的數(shù)據(jù)
msg: '歡迎學(xué)習(xí)Vue' // 通過 Vue 提供的指令，很方便的就能把數(shù)據(jù)渲染到頁面上，程序員不再手動操作DOM元素了【前端的Vue之類的框架，不提倡我們?nèi)ナ謩硬僮鱀OM元素了】
}
})
</script>
</body>
</html>
注意代碼中的注釋！
訪問頁面
注意操作
在這里插入圖片描述
運行效果
在這里插入圖片描述
指令 | 描述 |
{{}} | 插值表達式 |
v-cloak | 解決 插值表達式閃爍的問題 |
v-text | 和插值一樣也是使用vue中的變量，但是默認沒有閃縮問題，但是會覆蓋原本的內(nèi)容，插值不會 |
v-html | 顯示HTML的內(nèi)容 |
v-bind | Vue提供的屬性綁定機制，縮寫是 ':' |
v-on | Vue提供的事件綁定機制，縮寫是:'@' |
??在HTML頁面中我們需要獲取Vue中的數(shù)據(jù)，這時我們可以通過插值表達式來獲取，如下
<div id="app">
<!-- 插值表達式獲取vue中的msg信息 -->
<p>{{ msg }}</p>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
msg: '歡迎學(xué)習(xí)Vue'
}
})
</script>
注意：插值表達式有閃縮的問題
我們以站點的方式啟動，Ctrl+shift+p ：在輸入中搜索 如下
快捷鍵
在這里插入圖片描述
注意標(biāo)注
在這里插入圖片描述
訪問地址：http://localhost/xxx.html
訪問效果
在這里插入圖片描述
效果查看
在這里插入圖片描述
加載完成就會變好！這就是插值閃爍的問題
??v-cloak指令可以解決上面插值閃爍的問題，如下：其實利用的就是當(dāng)插值沒有被加載出來的是通過 style屬性將內(nèi)容給隱藏了。
<!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默認是沒有閃爍問題的，但是會覆蓋掉原有的內(nèi)容，但是 插值表達式 只會替換自己的這個占位符，不會把 整個元素的內(nèi)容清空，如下
<!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>
運行結(jié)果
在這里插入圖片描述
??默認我們從Vue對象中獲取的信息如果含有HTML標(biāo)簽的話只會當(dāng)做普通字符串顯示，如果我們要顯示標(biāo)簽的語義，那么需要使用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>
運行結(jié)果
在這里插入圖片描述
??v-bind是 Vue中，提供的用于綁定屬性的指令,可簡寫為":",屬性中的內(nèi)容其實寫的是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小時內(nèi)與您取得聯(lián)系。
