「技術筆記」 DOS基礎命令及HTML與CSS的基礎

．DOS基礎命令
（一）DOS命令
1.打開DOS命令的操作窗口：快捷方式：win r，輸入：cmd，確定。
（二）DOS基礎命令
time——顯示當前時間（注釋：需要手動退出才能執行下個命令）
ctrl c——退出當前執行命令
Shutdown /s /t 秒數——設置當前計算機定時關機（注釋：/s /t 左右都有空格）
shutdown /a——取消自動關機命令（注釋：/a 左側有空格）
ping 網址——檢查當前網址網絡是否連通（注釋：可以返回網址對應的ip和網絡狀態）
Ipconfig-all——顯示當前計算機所有網卡信息（注釋：包含本機ipv4地址與mac地址）
↑ ↓鍵——可以翻看最近使用過的命令（注釋：幫助我們快速找到某個執行過的命令）
盤符名稱——切換到某個盤符（注釋：盤符即C盤、D盤等）
Cd-目錄名——切換到當前某個子目錄下
Cd ..——返回上級目錄（注釋：..與cd之間存在空格）
Cd /——返回當前盤符根目錄（注釋：/與cd之間存在空格）
Dir——將某個目錄的內容以列表形式列出（顯示當前目錄下的目錄與文件）
Md 路徑/目錄——新建目錄
Echo“內容”>文件名稱——可以間接新建一個帶內容的文件（注釋：DOS中間接新建文件的方式）
Rd 路徑/目錄——刪除目錄（注釋：默認只能刪除空目錄）
Del 文件——刪除文件（注釋：只能用來刪除文件）
Rd 內容 /s——強制刪除非空目錄
Del 目錄——詢問是否刪除目錄里的所有文件（注釋：只刪除當前目錄下下的一級子目錄）
Copy 文件原路徑文件新路徑——將文件復制到其他地方（注釋：在復制的過程中可以修改名稱）
Move 文件原路徑文件新路徑——將文件剪切到其他地方（注釋：在剪切的過程中可以修改名稱）
二．HTML
前端三大組成：html（結構）、css（樣式）、js（行為）
Html屬于超文本標記語言
<html></html> 根標簽
<head></head> 網頁頭部
<meta charset=”utf-8”> 定義網頁的編碼標準
<title></title> 網頁標題標簽
<body></body> 網頁主體標簽
<br/>換行（快捷方式：shirt 回車鍵）
? 空格
<h1/h2/h3/h4/h5/h6><h/> 標題標簽
<p></p> 段落標簽
<strong></strong> 加粗（強調）
<del></del> 刪除線（強調）
<em></em> 傾斜（強調）
<div></div> 大盒子獨占一行
<span></span> 小盒子多行顯示
Ctrl ？注釋在項目上線前要刪除，因為會占網速
圖片標簽：<img src=”” width=”” height=”” title=”” alt=””/>
Src 插入圖片路徑
Width 設置寬度
Heigh 設置高度
Title 鼠標懸停時候的提示文字
Alt 圖片無法正常加載的時候顯示的文字
路徑分為絕對路徑和相對路徑，前端不推薦使用絕對路徑
超鏈接標簽：<a href=””>內容</a>
Href 完整的線上網址或者本地資源路徑
新窗口打開 target=”_blank”
表單作用：web網頁上用來收集用戶數據form，通過某種方式method，將數據提交到后臺程序action
表單標簽：<form action=”” method=””>表單域內容</form>
method有兩種方式：get-明文，post-密文
Form元素：<input type=”” name=”” id=””/>
點擊文字可以選中單選或者單選：<label for=””>內容</label>
Text 普通文本框
Password 密碼框
Radio 單選框
Checkbox 多選框
Button 普通按鈕
Reset 重置按鈕
Submit 提交按鈕
Placeholder 提示信息
下拉框：<select>
<option>選項1</option>
</select>
文本域：<textarea name="" id="" cols="" rows="" placeholder=""></textarea>
單選多選默認選項：checked=”checked”
下拉框默認選項：selected=”selected”
測試的關注點：1.傳輸方式，det是明文，post是密文，密碼等隱私不能用get
2.輸入框是否有文字提示
3.密碼輸入框是否支持加密隱藏
4.單選按鈕是否有互斥單選效果
5.復選框提高用戶體驗（點擊文字也能選中）
6.下拉菜單順序是否符合要求
7.文本域的兼容性，右下角拖曳是否去除
8.按鈕顯示，考慮兼容性
9.默認選中狀態（單選多選下拉）
列表標簽：有序標簽和無序標簽
有序標簽：<ol>
<li>內容</li>
</ol>
無序標簽:<ul>
<li>內容</li>
</ul>
三．CSS
Css稱為層疊樣式表、級聯樣式表--負責頁面的樣式，寫在head里。
語法結構：style
選擇器的作用：找到頁面元素--控制它的樣式
簡單選擇器三大類：標簽選擇器、id選擇器、類名選擇器。
標簽選擇器-標簽名{} 一般標簽重復，需要選中某些標簽時使用
Id選擇器-#id屬性值{} id屬性不允許重復，唯一選中標簽時使用，id名命名不可以數字開頭，id不推薦使用中文，id不允許使用符號除了-_ 見名知意。
類名選擇器-.類名{} 類名可以重復，class可以有多個類，選中屬于某個類的標簽時使用，class不允許數字開頭，class不推薦使用中文，class不允許出現符號除了-_，見名知意。
Css特性：繼承性（子承父業）、覆蓋性（權重相同的情況下，先寫的樣式會被后寫的所覆蓋）
復合選擇器其中兩種：后代選擇器、并列選擇器
后代選擇器用空格實現；
并列選擇器用逗號實現。

者：HelloGitHub-追夢人物

Hello Vue

既然是學習編程，那就遵循一下那個古老的傳統儀式。

首先我們新建一個 todos.html 文件，用任何一個你喜歡的文本編輯器或者 IDE 打開（例如 vscode、sublime、記事本、notepad++、webstorm 等等），然后寫上下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">{{ message }}</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app=new Vue({
el: '#app',
data: function () {
return {message: 'Hello Vue!'}
}
})
</script>
</html>

我們寫了一個簡單的 HTML 文件，使用 Script 標簽引入了 Vue，版本是 2.5.16。然后我們寫了幾行 js 代碼。在代碼中我們 new（創建）了一個 Vue 對象，并向這個對象傳遞了一些選項，例如告訴 Vue 掛載的元素（el，即elements 的縮寫）是 id 為 app 的那個 div，并且在 data 中綁定了一個名為 message 的變量，其值為 'Hello Vue!'，然后我們就可以在 HTML 文檔中引用這個 message 。Vue 在后面幫我們做么很多神奇的事情，它把 {{ message }} 替換成了 Vue 對象中對應的值。

保存代碼并用瀏覽器打開，可以看到瀏覽器顯示了 “Hello Vue!”，你也可以嘗試修改 message 的值，發現顯示的內容會跟著變化。

表單綁定

再來看一個神奇的例子，我們把代碼換成下面這樣：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">
<input type="text" v-model="value">
<input type="button" value="發送">
<div>value 的值是：{{ value }}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app=new Vue({
el: '#app',
data: function () {
return {value: ''}
}
})
</script>
</html>

這里要關注一下文檔的 input 標簽里 v-model="value" 這個東西。v-model 被稱為 Vue 的指令，指令可以用來做很多事，比如用于 if 條件判斷的 v-if，用于綁定值的 v-bind、用于綁定監聽事件的 v-on 等等，這在以后會接觸到。而這個 v-model 指令的作用是將 input 元素 value 屬性的值和我們創建的 Vue 對象中 value 的值進行綁定，我們知道 input 有一個 value 屬性，它的值會在瀏覽器顯示（例如后面那個 button 按鈕的發送），Vue 將這個值綁定后，在 input 中引起的 value 值變化就會實時反映到關聯的 Vue 對象，所以會看到下方引用的 {{ value }} 也會跟著變化。

打開瀏覽器，然后在文本框做一些輸入，試試效果！

加點方法

接下來我們在 Vue 對象中加點方法，還是上面的例子，只是在 Vue 對象中加了一個方法：

var app=new Vue({
el: '#app',
data: function () {
return {value: ''}
},
// 這是新增的方法
methods: {
send: function () {
alert('發送成功！');
this.value=''
}
}
})

方法聲明在 method 對象中，key 為方法名，值為對應的函數。我們想做的事情很簡單，就是點擊發送按鈕后顯示一個發送成功的消息，然后將 value 的值清空。

打開瀏覽器，發現怎么點都沒有效果！因為 Vue 并不知道我們點擊了按鈕，為了讓 Vue 監聽到我們點擊按鈕的事件，需要在被點擊的元素上綁定一個 click 事件，前面說過綁定事件用 v-on，因此在發送按鈕上加上相應的代碼：

<input type="button" value="發送" v-on:click="send"/>

在輸入框輸入一些文字，然后點擊發送按鈕試試。

計算屬性

Vue 還可以根據綁定的數據做一些計算，然后我們就可以引用計算的結果。假設我們想實時統計輸入的字數，我們可以在 Vue 對象里加上對 value 長度的計算值：

var app=new Vue({
el: '#app',
data: function () {
return {value: ''}
},
methods: {
// 省略...
},
// 這是新增的計算屬性
computed: {
count: function () {
return this.value.length
}
}
})

計算屬性申明到 computed 對象里，這個對象的鍵是計算的結果，值是計算函數，這里我們計算了 value 的長度。以后在 Vue 對象中就可以使用 this.count 引用計算結果，也可以在關聯的模板中直接引用，和綁定的數據 value 的用法非常類似。比如我們在文檔中引用這個 count：

<div id="app">
<input type="text" v-model="value">
<input type="button" value="發送" v-on:click="send"/>
<div>value 的值是：{{ value }}</div>

<div>字數：{{ count }}</div>
</div>

打開瀏覽器看看效果。

加點樣式

Vue 還可以動態地幫我們為元素綁定樣式（class 屬性），假設如果我們希望 input 中沒有任何值輸入，即 value 的值為空時，input 的邊框為紅色以提醒用戶沒有內容。首先我們寫一個簡單的樣式（這個樣式非常簡單，不需要有 CSS 基礎也看得懂），樣式通常寫到 head 標簽里，用 style 包裹：

<head>
<meta charset="UTF-8"><title>Vue Todo Tutorial</title>
<style>
.empty {
border-color: red;
}
</style>
.empty {
border-color: red;
}
</style>
</head>
然后將這個 empty 用于 input 的 class 屬性，瀏覽器就會渲染對應的樣式：
<div id="app">
<input type="text" class='empty' v-model="value">
...
</div>

當然現在無論 value 為何值邊框都是紅色的，因為 class 始終為 empty，現在讓 Vue 來幫我們。前面說了，綁定值用 v-bind 指令，我們修改一下代碼，為 input 的 class 綁定一個值：

<div id="app">
<input type="text"
v-bind:class='{empty: !count}'
v-model="value">
v-bind:class='{empty: !count}'
v-model="value">
...
</div>

Vue 會根據 empty 后的表達式 !count 的真假來判斷 class 的值是否為 empty，如果為真（即 count=0 的情況），則 class 的值為 empty，否則為空。

打開瀏覽器看看效果！

練習

我們通過這幾個循序漸進的例子體會了 Vue 的部分核心特性，這些特性對我們開發 Todo 應用非常有幫助。當然這個例子還有一點小瑕疵，就由你來作為練習改進一下。

練習一： 盡管我們在用戶沒有輸入時用紅色邊框提醒用戶內容為空，但是用戶點擊按鈕后仍然顯示提交成功的通知，這是不合理的。合理的情況應該是彈出通知提示用戶請輸入內容。修改示例的代碼，使其達到上述效果。（提示：修改 send 方法）

練習二： 即使內容為空，輸入框下方依然顯示 value 的值是：，這看起來很奇怪。我們希望只有用戶真正地輸入了內容后，才提示 value 的值，請參閱 Vue 關于指令的官方文檔，找到滿足我們需求的指令，修改示例代碼以達到上述效果。（提示：我們應該通過判斷 value 是否有值來決定是否顯示輸入框下邊的 div 元素。）

Vue 的指令文檔：https://cn.vuejs.org/v2/guide/conditional.html

接下來正式開始我們的 Todo 應用的開發吧！

自動化##Python#

遇到的需求是這樣的，需要頻繁將htm類型的數據轉為Excel表格，這是一個重復性的工作，極大程度上浪費時間和人力，所以我找到了一個解決方案。用Python開發一個桌面的自動化的小工具，雖然實現起來簡單，但是真心好用。今天特意寫篇文章分享給大家。希望你從獲得的是這個思路，里面的功能你可以換成你工作中重復的工作。

一、背景介紹

首先 htm 數據是如下這樣的，一個網址。內容在網頁中，這里需要寫爬蟲，獲取網頁中的信息，自動保存到excel ，并輸出excel格式的文件。

1、需求結果

2、解析htm里的內容，并保存到excel

from bs4 import BeautifulSoup
import pandas as pd


class htmToExcel(object):
    def __init__(self, file_name, file_path):
        self.file_name=file_name
        self.file_path=file_path


    def htm_to_excel(self):
        print(self.file_path)
        soup=BeautifulSoup(open(self.file_path), features='html.parser')
        table=soup.find("table")
        tr_list=table.find_all("tr")
        th=tr_list.pop(0)
        title=th.find_all("th")
        lis=[]
        for tr in tr_list:
            data={}
            td=tr.find_all("td")
            for i in range(len(td)):
                data[title[i].text]=td[i].text
            lis.append(data)
        df=pd.DataFrame(lis)
        df.to_excel('{}.xlsx'.format(str(self.file_name).split('.')[0]), index=False)
        return '轉換成功！'




if __name__=='__main__':
    file_name=input("請輸入文件名字：")
    path='C:/Users/cherich/Desktop/' + file_name
    pross=htmToExcel(file_name, path)
    print(pross.htm_to_excel())

二、設計窗口

創建桌面窗口，這里使用tkinter，它是Python 自帶的gui庫，安裝后即可使用。

1、安裝命令：

pip install tkinter

2、利用tkinter完成可視化窗口上傳文件功能：

from tkinter import Tk, Entry, Button, mainloop
import tkinter.filedialog
import htm_to_excel
from tkinter import messagebox



def Upload():
    try:
        selectFileName=tkinter.filedialog.askopenfilename(title='選擇文件')
        pross=htm_to_excel.htmToExcel(str(selectFileName).split('/')[-1], selectFileName)
        pross.htm_to_excel()
        messagebox.showinfo('Info', '轉換成功！')
        root.destroy()
    except Exception as e:
        print(e)
        messagebox.showinfo('Info', '轉換失敗！')




root=Tk()
root.title('HTM轉Excel小工具')
root.geometry('+500+300')


e1=Entry(root, width=50)
e1.grid(row=0, column=0)
btn1=Button(root, text=' 上傳 ', command=Upload).grid(row=1, column=0, pady=5)
mainloop()

三、打包exe

本功能打包成exe的好處是不需要將代碼部署到服務器，直接將打包好的exe發給對方，就能直接使用。對于這種小而輕的功能非常友好。

1、安裝命令：

pip install pyinstaller

2、打開DOS窗口并切換到demo.py文件的目錄，注意路徑不要有中文：

在當前目錄下,會生成兩個文件夾:build和dist。dist里面就是所有可執行exe文件，發送快捷方式到桌面，點擊demo.exe就能運行了。

3、pyinstaller指令的常見可選參數：

-i 給應用程序添加圖標
-F 指定打包后只生成一個exe格式的文件
-D –onedir 創建一個目錄，包含exe文件，但會依賴很多文件（默認選項）
-c –console, –nowindowed 使用控制臺，無界面(默認)
-w –windowed, –noconsole 使用窗口，無控制臺
-p 添加搜索路徑

四、該注意的坑！

如果生成exe之后，你發現你的程序異常的慢，請檢查你的導包代碼，盡量不要出現 from ··· import * ，否則每次啟動程序，都會導入大量函數占用大量時間，親測有效。

今天的文章寫到這里，如果你覺得對你有幫助，歡迎點贊哦~

在線咨詢

上一篇：實現快捷生成HTML代碼
下一篇：Mac黨必備非常棒的應用程序、軟件以及工具分享

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「技術筆記」 DOS基礎命令及HTML與CSS的基礎

Hello Vue

表單綁定

加點方法

計算屬性

加點樣式

練習

一、背景介紹

首先 htm 數據是如下這樣的，一個網址。內容在網頁中，這里需要寫爬蟲，獲取網頁中的信息，自動保存到excel ，并輸出excel格式的文件。

1、需求結果

2、解析htm里的內容，并保存到excel

二、設計窗口

創建桌面窗口，這里使用tkinter，它是Python 自帶的gui庫，安裝后即可使用。

1、安裝命令：

2、利用tkinter完成可視化窗口上傳文件功能：

三、打包exe

本功能打包成exe的好處是不需要將代碼部署到服務器，直接將打包好的exe發給對方，就能直接使用。對于這種小而輕的功能非常友好。

1、安裝命令：

2、 打開DOS窗口并切換到demo.py文件的目錄，注意路徑不要有中文：

3、pyinstaller指令的常見可選參數：

四、該注意的坑！

您的項目需求

2、打開DOS窗口并切換到demo.py文件的目錄，注意路徑不要有中文：