前端基础-CSS-1

前两篇我们简单说了下html基本知识,从这篇开始我们谈一下css内容,这篇主要还是从最基本的内容说起,让大家对css有个初步认识,掌握了css,在后续理解bootstrap的样式就比较容易了,对于了解css的小伙伴来说可能知道怎么用,但为什么要有css?它的出现解决了什么问题?这个我想可能大多数人没有思考过,接下来我们就谈一下这个问题, 因为在最早期的网站中,网页的样式都写在Html页面里,这样的问题就是会让html页面特别复杂,在越来越堆积后,如果再改某个地方会非常困难,说白了就是自己写的代码都没法维护了,那这时候呢为解决这个问题,w3c就发明了css,让html只负责页面结构内容,所有的表现分离出来单独写到一个文件里,这个文件就是样式文件css,css全称是层叠样式表 (Cascading Style Sheets),它定义了如何显示html中的元素,比如居中、字体、背景颜色等,有了它我们就实现了内容和表现的分离,使我们的代码就简单清晰了。

以上就是css的来历,下面我们实际以代码为例看如何使用,首先我们需要让我们的html文件关联一个css文件,怎么实现呢,其实很简单,我们只需要在<head>元素中加入以下代码即可:

其中href就是你关联的css文件,这里只需要注意如果你的css文件跟html文件不在一个目录,就需要写你的引用路径即可。

添加了这行,我们就可以安心的在mycss.css文件中编写我们的样式了,首先我先来一个基本的Html代码:

这是一个基本的没有样式的html代码, 前面我们说过div和span的用途,在今天这个例子里我们就会看到这两个标签的用途,它们是为样式而生,这个用chome打开的后是这样的:

css1

接下来,我们开始编写css样式文件,开始前我先说一下css样式文件的基本编写语法,css语法规则是选择器选tag,然后一个大括号,里面是一个属性:值,格式如下:

以上就是表示html中h1元素的内容颜色是红色,那接下来我们来完成几个设置:

1、h1标题字体改变为红色

2、无序列表中<li>的内容变成绿色

3、<div>标签添加一个橙色背景色,加上边框,宽度是4px,边框是双线显示。

4、<span>文字背景色绿色

5、整个文件背景编程黑色

现在我们打开一个文件,命名问mycss.css,写入如下内容:

设置完成后,保存刷新刚才打开的页面,显示如下:

css2

可以看到我们的样式已经生效了,这样就完成了最基本的css样式的设置,因为背景调整成了黑色,所以黑色字体的显示不出来了,大家实际练习的时候可以给它一个样式把它显示出来,当然这个只是最基本的调整,后面我们会以实际的一个个比较完整的例子给大家深入介绍,喜欢的小伙伴别忘转发哟~

前端基础-HTML5-2

这篇继续我们html的学习之旅,这篇主要说一下表单,因为表单在web中很常见,比如我们常见的要登陆或注册某个站点,填写个人一些信息,这都需要表单来完成,表单主要就是用于搜集不同类型的用户输入,在后续的开发过程中不免我们要让用户通过输入某些数据来决定程序的执行或者基本的登陆等,假设我们现在有一个任务要完成一个网站用户的注册表单,需要用户提供用户名称,密码,性别,邮箱,如果是一个电商类网站可能还要有一个提供支付方式,那这段基本的HTML的代码看起来是这样的:

表单的元素是<form>,表单包含的元素有<input type=“text“> 如果是type是text表示文本的输入,如果type是password表示是密码,如果type是submit,表示一个提交的按钮,<form>有两个重要的属性action和method, action表示提交表单是执行的动作,method表示提交表单是用的http方法(get,post), 看我们代码我在action里写了thankyou.html, 这个页面里写一句“感谢您注册!”,那再我们提交表单后就会跳转到这个页面。

在性别这里,我们type等于raido,这表示是一个单选按钮。

支付方式这里select是表单控件,它在浏览器的表现是会产生一个下拉的列表框,用户可以进行选择。

把上面代码保存一个html文件,然后用浏览器打开(我用的chrome),截图如下:

form

姓名和邮箱这里我们看到有提示信息,是我们在表单里用到了placeholder属性,这个属性可以提示输入预期的值,另外邮箱我们的type是email, 表单会做一个简单的判断,如果用户输入的没有@字符,会告知邮箱格式不正确,如下:

form2

如果我们给出正确的邮件格式,点击注册会跳到我们的thankyou.thml页面,展示如下:

感谢您注册!

以上就是表单的基本用法,接下来我们简单说一下DIV和SPAN元素,因为这二个元素没有特定的含义,但这二个元素在后面用处非常的多,先说div元素,这个元素是块级元素,它里面可以包含其它html元素,它没有特定的含义,主要是为了后续跟css一起进行网页布局,而span是行内元素,主要是文字,比如一行文字中几个文字颜色是红色的,这个就可用span来做,下篇我们谈到CSS时来实际操练一下。

前端基础-HTML5-1

准备了一周,这周开工了,我们从基本的HTML说起,这部分内容我不会像html教程一样一个一个标签的讲解, 那样的话就html就写到明年了,所以这部分只说最有用的,把这部分快速的过一遍,主要精力还是集中放到后面的内容,那既然要介绍HTML5,我们先从基本概念开始,什么是HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

说白点html5就是html4的升级版,增加了很多特性,在移动设备上支持多媒体,html5出来的时候都很多人对它抱有很大希望的,很多人希望用它来媲美原生app的功能,不够到现在好像发展的比较慢,移动端还是原生app的天下呀,OK,html5背景知识就介绍到这里,接下来进入正式的内容学习部分。

html5比较有用的就是列表和表格了,用的也比较频繁,所以这篇我们主要介绍列表,表格,我们先看列表,列表分有序列表和无序列表,有序列表就是带数字标号的,例如,1,2,3等, 无序列表前面就是一个小黑点,不带数字,无序列表对应的标签是<ul></ul> , 有序列表的标签是<ol></ol>,列表项目用<li></li>来定义,我们来通过例子来看看,比如我们后续要学到Django, 那Django作为一个web框架有什么优势呢?我们要一一列出来,下面我们分别用无序列表和有序列表表示,代码如下:

浏览器打开如下:

list

除了展示内容,另一个最多的用途就是一般能看到的后台左侧菜单, 通过单击左侧的每个菜单进入不同的页面内容,简单代码如下:

这个就可以生成类似左侧菜单的效果,当然因为没有css和js,我们这个看起来非常普通:

caidan

以上就是列表的的介绍了,接下来说说表格,这个在日后用途非常的多,一般前端展示数据用表格用的最多,我们来看一个列子,就拿我们将要学习的内容制作一个表格,截图如下:

table

这就是一个表格典型应用,当然我为了简单,图标都统一用了一个,实现以上内容代码如下:

其中<thead>内容是表头,<tr>是行,<td>每一列,同时为了显示图片,我在<td>中用了<img>标签,这样一张图片就方到<td>中了,关于Html列表和表格的内容就到这里,下篇说下比较重要的表单。

关于Django学习的计划

各位小伙伴好,上周刚说到要开始我们的django学习之旅了,谁知上周公司业务调整,临时安排了很多工作,搞得天天加班到11点(夜里), 回到家累成狗,连按电脑开关的力气都没有了,  虽然上周身体比较累,但脑袋却没闲着,就构思了后续的学习计划, 因为吧写脚本跟写web平台差别还是非常大的,因为脚本都是单一性的任务或功能,但要做web运维平台它是一个综合性技术的体现,比如最基本的html你得懂,像html的基本的table, form、列表等在实际开发中用的非常的多,如果这个都不熟练,那越往后学难度会越大,在了解了html的基础上,css你要懂一点吧,不然列表菜单放左边还是放右边,站点导航栏怎么设置,页面背景用什么颜色,总不能一个站点就一个颜色吧,所以css可能不需要像专业前端一样,但最起码一些简单的设置你要必须懂,假设你这二项全部过关,你以为就OK了?NO,差的还很远, 因为我们不是专业设计,所以做出来的平台界面一定不美观,你懂的,现在做什么都讲究时尚炫酷(体现装逼的时刻),要想把自己的网站做的更专业一点,你怎能不去了解bootstrap?如果你已经能把bootstrap样式运用的炉火纯青,你这时候你就能完成一个看着比较专业的网站了,但是问题又来了,我需要在页面上加一些动态效果怎么办呢?那就得去学习javascript呀, 这玩意儿很厉害,js现在是搞前端的基本技能,不然都不好意思封自己为前端工程师,到这还没完,在实际开发中假设你数据库里已经存好了一些数据,你需要在前端页面实时把这些数据展现出来, 怎么办?那你得去学习AJAX呀,当然用JavaScript写一个完整的AJAX代码是可以的,但如果有更方便的做法,我们为没有理由不去选择,这时候就用到另一个东东了,它的名字就叫jquery了,写到这我们总结一下做一个web站点需要学习的内容: html,  css, bootstrap, javascript, jquery,   如果以上技术你都具备了,然后在加上我们的python + django,你基本就全能工程师了, 不,全能太俗了,他们的名字叫叫全栈工程师,英文名字是Full Stack developer,所以接下来我打算把这些内容逐步展开来写,但从哪个部分开始这个我可伤了脑筋,因为我不知道每个人的水平,苦想了半天,我还是觉得就从最基本的html说起吧,由浅入深逐步开始学习,这是正道儿,另外欢迎每个小伙伴给我留言探讨。

python基础17-并发编程(2)

上篇我们介绍了Python的多线程模式,也了解了在python中有GIL这么个东西,所以cpu密集型的程序在python中是无法实现真正并发的,因为实际执行的还的单个线程,可现在的服务器都至少是16核,那岂不浪费了, 所以如果我们想要重分利用cpu资源,我们就需要在Python中采用多进程模式,就是用进程的方式实现并发,在Python下实现多进行时用multiprocessing模块来实现,这个模块用法跟threading.Thread非常类似,但不同的时它没有GIL锁,可以在多核CPU机器上来实现真正的并发执行,关于进程线程概念就不多说了,上篇已经全部介绍了,这篇就直接就直接上代码了,代码是在上篇基础上进行的修改,如下:

从上面代码可以看到,在使用上真的非常像线程,而且大部分方法的功能也是一样的,这里是用Process创建进程对象,join()方法等待进程池中的全部进程,target我们给一个可调用对象,这是我认为最简答的方式,给了一个函数,函数内容还是上篇的内容我基本没动,一样运行没有任何问题。

上面这种方法我们已经实现了多进程,如果任务执行的对象不算太多是可以的,但如果任务时间比较长且操作对象比较多可能会出现进程占用系统资源过度造成服务器慢的情况,因为同时在机器上启动上百上千个进程,而且短时间任务执行不完,就会非常的耗系统资源,机器估计卡的用不了,怎么解决这种问题呢,这就需要用到我们的进程池了,使用Pool可以提供指定数量的进程,供用户调用,当有新的请求提交到pool中时,如果池还没有满,那么就会创建一个新的进程用来执行该请求;但如果池中的进程数已经达到规定最大值,那么该请求就会等待,进程池的大小可以参考机器CPU核数来指定,那么这样一来,我们的代码需要修改如下:

可以看到我们使用了进行池,代码逻辑反而简单了,这里map函数跟python中内置的map功能一样,它需要2个参数,一个是函数,一个是序列,不同的是它可以支持多进程,这里我设定了5个进程,就是最多可以跑5个进程,这样一来就解决了我们上面提到的问题。

关于并发编程的内容就写这2篇了,随着这篇的结束,我觉得python的基础部分就要告一段了,当然如果在基础部分还有想了解的内容,可以后台留言给我,我会穿插到后续的文章中,另外如果小伙伴是一路跟过来的话,我相信你已经能熟练运用python来实现工作中的一些需求了,  但我们python的学习之路远不止如此,因为随着各个公司业务的复杂度提升,对运维人员技能要求也越来越高,如何快速完成需求,如何把运维繁杂的任务简单化,这可能是大多数公司运维要解决的问题,要达到这条路我个人觉得离不开web运维自动化平台,通过平台使我们运维的一些工作通过平台点几下鼠标就可以完成,所以我认为这才是我们的学习目标, 但要实现这个目标,就要进入我们下一个阶段的学习了,下个阶段我们主要介绍python web框架Django技术, 还清小伙伴多多支持(请戳右上角)。