整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

「技术笔记」 DOS基础命令及HTML与CSS的基础

「技术笔记」 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>
<!-- 引用 count -->
<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小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 双清区 绩溪县 大丰市 德令哈市 松滋市 太谷县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服