学习前端开发,一段心路历程,这个世界根本没

一,介绍

                             QQ交流群:585499566

  本文的目的是怎么使用Pyh+Bootstrap快速生成简约,大方,清新的Html页面,涉及到的技能:Python小白技能,Pyh会阅读中文文档,Html基础,Bootstrap能阅读懂中文文档

  Python:当然是Python3了...

  Pyh:是这位大神 https://code.google.com/p/pyh/wiki/UserManual  制作,需要连接代理才能查看哈,好在有人做了翻译:https://www.jianshu.com/p/dc2ddd8e80cc
在翻译连接里,有具体的使用描述,这里不做介绍了哈

功能介绍:

  • 自动格式化HTML标签
  • 高度可定制
  • 完全识别CSS和Javascript
  • 自动闭合标签
  • 面向对象的HTML编写方式

*  *Html:能够找到这篇文章,肯定是懂得使用HTML代码的,为了防止“小白”看到这篇文章不知所措,就贴上公认的HTML参考网站w3school:http://www.w3school.com.cn/tags/tag_html.asp

  Bootstrap:是css,js框架,可以美化的页面,将“丑八怪”变成“美少女”,哈哈... 这是中文使用地址,建议用3:https://v3.bootcss.com/

  这里让你们看下“丑八怪”与“美少女”的对比:

金沙官网线上 1金沙官网线上 2

  是不是变的美了很多啊,啊,你说还不太美,想变成“西施”,那就需要你再帮帮它化下妆了......这好像证明了:天下了没有丑女人,只有懒女人

标记对:HTML5新加的具有数据提交功能的按钮。

二、实操

  说的再多,却不贴代码,就是耍流氓,耽误阅读者的时间,浪费别人的青春

 1 #!/usr/bin/env python
 2 # -*- coding:utf-8 -*-
 3 
 4 from pyh import *
 5 
 6 page = PyH('接口测试报告')                   #第一步:需要先生成含标题的HTML模板
 7 page.addCSS('https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css')  #第二步:需要加载我们要使用的Bootstrap模板css文件,需要的话还可以加载js
 8 Container = page << body(id='Body', cl='bg-warning') << div(id="container",cl="container") #第三步:通过移位符“<<”,来生成所属标签;“<<”左侧最终必须是page
 9 
10 # 报告标题 start
11 Headrow = Container << div(id="Headrow", cl="row")
12 Headrow << h1(id="HeadH1",align="center") << strong("API_AutoTest_Report  ",id="HeadTxt") + small("Sonny.zhang", id="author")
13 Headrow << br()
14 # 报告标题 end
15 
16 # 数据统计 start
17 Totalrow = Container << div(id="Totalrow", cl="Totalrow") << div(cl="jumbotron")
18 # --测试使用时间,测试用例总数--
19 test_time_txt = ["测试总耗时:", "0:00:04.307585"]
20 case_num = ["用例总数:", "7"]
21 UTimerow = Totalrow << div(id="UTimerow", cl="row")
22 UTimerow << div(cl="col-xs-12 col-md-6") << p(role="presentation") << span(test_time_txt[0]) << span(test_time_txt[1], cl="label label-default")
23 UTimerow << div(cl="col-xs-12 col-md-6") << p(role="presentation") << span(case_num[0]) << span(case_num[1],cl="label label-primary")
24 # --用例失败成功统计--
25 Num1_txt = ["成功用例数(Pass):", "3"]
26 Num2_txt = ["失败用例数(Fail):", "2"]
27 Num3_txt = ["出错用例数(Error):", "2"]
28 Num4_txt = ["未执行用例数(Block):", "1"]
29 Amountrow = Totalrow << div(id="Amountrow", cl="row")
30 Num1 = Amountrow << div(id="Num1", cl="col-xs-12 col-md-3") << p(role="presentation") << span() << small(Num1_txt[0]) << span(Num1_txt[1], cl="label label-success")
31 Num2 = Amountrow << div(id="Num2", cl="col-xs-12 col-md-3") << p(role="presentation") << span() << small(Num2_txt[0]) << span(Num2_txt[1], cl="label label-danger")
32 Num3 = Amountrow << div(id="Num3", cl="col-xs-12 col-md-3") << p(role="presentation") << span() << small(Num3_txt[0]) << span(Num3_txt[1], cl="label label-warning")
33 Num4 = Amountrow << div(id="Num4", cl="col-xs-12 col-md-3") << p(role="presentation") << span() << small(Num4_txt[0]) << span(Num4_txt[1], cl="label label-default")
34 # 数据统计 end
35 
36 # 测试计划 start
37 Plans = Container << div(id="plans", cl="row")
38 # --栏目标题--
39 plans_title = "测试用例摘要"
40 PlansTitle = Plans << div(id="plans-title", cl="panel panel-primary") << div(cl="panel-heading") << strong() << center(plans_title, cl="text-uppercase")
41 
42 # --一个测试计划-- start
43 Plan1 = Plans << div(id="plan1", cl="col-xs-12 col-md-12") << table(cl="table table-striped")
44 # ---一个标题--
45 plan1_title = "测试计划【项目名称:APItest, 计划名称:user_operation】"
46 Plan1 << center() << caption(plan1_title)
47 # --一个列表--
48 # 表头
49 thead1 = ["ID", "执行编号", "用例ID", "用例外部ID", "用例名称", "用例套件", "执行结果", "运行时间"]
50 Thead1 = Plan1 << thead()
51 Thead1 << tr() << th(thead1[0]) + th(thead1[1]) + th(thead1[2]) + th(thead1[3]) + th(thead1[4]) + th(thead1[5]) + th(thead1[6]) + th(thead1[7])
52 # 表体
53 tbody1 = ["151", "20180804110924", "1079", "APItest-1", "获取token", "获取token", "Pass", "2018-08-04 11:09:24"]
54 Error = "Error"
55 Tbody1 = Plan1 << tbody()
56 Tbody1 << tr() << th(tbody1[0], scope="row") + td(tbody1[1]) + td(tbody1[2]) + td(tbody1[3]) + td(tbody1[4]) + td(tbody1[5]) + td(tbody1[6]) + td(tbody1[7])
57 Tbody1 << tr() << th(tbody1[0], scope="row") + td(tbody1[1]) + td(tbody1[2]) + td(tbody1[3]) + td(tbody1[4]) + td(tbody1[5]) + td(p(Error, cl="label label-danger")) + td(tbody1[7])
58 # --一个测试计划-- end
59 # 测试计划 end
60 
61 # 测试用例 start
62 Cases = Container << div(cl="row")
63 # --栏目标题--
64 cases_title = "用例执行明细"
65 CasesTitle = Cases << div(cl="panel panel-primary") << div(cl="panel-heading") << strong(center(cases_title, cl="text-uppercase"))
66 # --一个测试用例-- start
67 Case1 = Cases << div(cl="col-xs-12 col-md-12") << table(cl="table table-striped")
68 # ---一个标题--
69 Case1_title = "测试计划【项目名称:APItest, 计划名称:user_operation】"
70 Case1 << center() << caption(plan1_title)
71 # --一个列表--
72 # 表头
73 thead1 = ["ID", "执行编号", "用例ID", "用例外部ID", "用例名称", "用例套件", "执行结果", "运行时间"]
74 Case1Thead1 = Case1 << thead()
75 Case1Thead1 << tr() << th(thead1[0]) + th(thead1[1]) + th(thead1[2]) + th(thead1[3]) + th(thead1[4]) + th(thead1[5]) + th(thead1[6]) + th(thead1[7])
76 # 表体
77 tbody1 = ["151", "20180804110924", "1079", "APItest-1", "获取token", "获取token", "Pass", "2018-08-04 11:09:24"]
78 Error = "Error"
79 Case1Tbody1 = Case1 << tbody()
80 Case1Tbody1 << tr() << th(tbody1[0], scope="row") + td(tbody1[1]) + td(tbody1[2]) + td(tbody1[3]) + td(tbody1[4]) + td(tbody1[5]) + td(tbody1[6]) + td(tbody1[7])
81 Case1Tbody1 << tr() << th(tbody1[0], scope="row") + td(tbody1[1]) + td(tbody1[2]) + td(tbody1[3]) + td(tbody1[4]) + td(tbody1[5]) + td(p(Error, cl="label label-danger")) + td(tbody1[7])
82 # --一个测试计划-- end
83 # 测试计划 end
84 
85 page.printOut('Pyh_Template.html')

  在代码中我已经注释了Pyh的使用要点:“<<”,还有任何问题,可以加群进行解答,交流

 

 

 

web前端学习交流群:250777811

这种布局模式对于PC端页面的设计是非常有帮助的,同时对于后面将会遇到的“圣杯布局”、“双飞翼布局”、“移动端布局”、“响应式布局”等,这种布局方式都具有一定的指导意义。

你会用CSS技术的使用技巧解决下列问题吗?

当然还有许多HTML5新加的内容,需要广大初学者更多地接触并掌握。

这里,小编为大家推荐几本前端开发领域的经典著作,真的希望你也能拿起教材,从第一页读到最后一页,你一定会受益匪浅。

:用于表单中盛放表单元素的文本提示,被称为“标签”标记对。

金沙官网线上 3

delete运算符都能删除哪些内容?

:用于表示地址的语义标签。

通过表达式来系统阐述“==”和“===”这两个运算符的区别。

金沙官网线上,3、CSS+div布局模式:这是许多布局模式的基础,也是大部分前端开发人员接触到的第一种布局方式。

文章预告

:HTML5的音频技术,该标记对结合脚本语言对应一套完整的API,可以开发有关音频的项目。

如今互联网渗入到了我们学习和工作的方方面面,与其天天拿着手机刷微博、聊微信,何不拿起互联网这个工具,多多学习一些有关前端开发的知识,积累一些前人总结出来的经验,丰富自己的羽翼。

金沙官网线上 4

金沙官网线上 5

前端开发本身就是需要实战经验非常强的一门学科。学习和工作过程中,不断地、反复地、大量地尝试和上机操作,是学好前端开发唯一不变的方法。

(2)同时,还有许多较为生僻的标记,大家看一看,你认识下列标记对吗?

“读书”永远是掌握技术的一种有效方法,无论什么技术。读书的过程不仅能够让我们了解作者的意图,更能训练我们的阅读速度,提高自身的自学能力。这正是一个合格的前端开发工程师应该具备的业务素质。

第二条:重视脚本学习,将JavaScript作为前端学习的重点。

如何去掉容器中图片下方自动产生的距离。

看来,CSS的属性及其取值只是CSS技术的第一层面,更多的使用技巧等待大家去挖掘。

:预格式化文本,在该标记对内部文本中的空格和换行都会在页面中起作用。

这里,为大家推荐几个学习前端开发的网站,希望大家可以多多浏览,利用好互联网资源。

:HTML5的画布技术,该标记对结合脚本语言对应一套完整的API,可以实现页面矢量图的绘制。

web前端学习交流群:250777811

金沙官网线上 6

全栈式开发所使用的node.js、AngularJS等第三方框架,也都是在JavaScript的基础上编写的。

这门神一般的语言,我个人认为是务必要认真学习的,不仅要学习JavaScript的语法知识,还要学习利用它实现DOM元素的使用,学会面向对象的编程思想。甚至还要掌握该门语言的细节特点。

非常适合初学Node.js的学生阅读的书

会使用这两个属性吗:contentEditable、isContentEditable。

金沙官网线上 7

第五条:利用网络资源,多学习前辈好的实现方法。

由于篇幅问题,本篇文章先为大家阐述前五条,下一篇文章会为大家分享后五条。

JavaScript已经发展成为了Web开发的唯一的脚本语言。它从早期的基于对象的语言变为了面向对象的语言,现代JavaScript为前端开发带来了不可替代的技术革新。

第一条:学好基础知识,做一个有扎实基本功的开发者。

web前端学习交流群:250777811

通过哪个函数可以判断从文本框中获取的内容是不是数字?

小海老师尤为反对这种方式,特别是对于还处在学习阶段的同学们和初次使用Bootstrap框架的从业者。首先不可否认,Bootstrap为前端开发人员带来了大量的类名和属性之间的搭配关系,每一个组件和插件的使用都用脑子记下来,确实有很大的困难。但是在学习阶段,我非常提倡对官网的示例代码进行钻研和分析,阅读bootstrap.css文件和bootstrap.js文件,从原理上理解这个框架是如何利用简单的类名和属性名来实现复杂的脚本功能的。我在日常的教学过程中也是这么带领学生一起学习的。

Bootstrap开发的经典教材

HTML5中的许多API都是基于JavaScript进行开发和设计的。

如果大家也有好的学习网站,希望也推荐给我哦。

1、HTML超文本标记性语言:尽量掌握尽可能多的标记或标记对。

系统学习过JavaScript的同学们,你看看下列问题你能准确的找到答案吗?

前端开发是当今社会上比较有发展潜力的一个行业,该行业主要以Web开发、移动端开发、全栈式开发等为主要内容。在社会上有较为广泛的应用领域,从业者有较为丰厚的薪资待遇。那么对于一个前端开发从业者来说,如何学习前端开发的相关知识,如何将自己打造为一个强大的前端开发设计师呢?小海老师从事多年的一线教学工作,深入挖掘学生在学习阶段的特点,总结了以下十条学习心得,愿意与大家一同分享。

本文由金沙官网线上发布于编程,转载请注明出处:学习前端开发,一段心路历程,这个世界根本没

您可能还会对下面的文章感兴趣: