测试技术贴【黑马软件测试培训】

更新时间:2019年07月30日 15时54分35秒来源:黑马程序员

前端主要分为三部分：html，css，js。
html：首先得了解标签的含义，用在哪里，常用的用多了就知道了。另外H5也要去了解，对于H5的学习可以自己动手做一个H5的动画场景。这里面涉及比较多的是css3样式以及canvas。
　　css: 关于css还是推荐看书系统的学下。单看网上的，你可能只知道怎么用，却不知道他这样用所隐藏的含义。还有就是容易产生混乱，所以还是建议看书系统学一学。有些概念还是要掌握的，不然面试很容易懵逼。
　　js: 这个是最复杂的。首先建议先看书了解基本语法。但是只看不动手是不行的。
关于CSS作用：
A.快速维护页面元素的样式属性,
B.弥补HTML元素的属性不足
CSS又被称作层叠样式表。
关于CSS的元素属性：
一：首先是长度单位：
A.宽度、高度用px(像素)，也可以用%(百分比)。建议使用固定值：<width:200px;height:200px>;
B.字体大小用pt(磅)表示
其次就是颜色单位：A.颜色的直译英文名称，如：red(红)、green(绿)、blue(蓝).....
B.十六进制表示法：#ff0000
C.简写十六进制：#f00
D.RGB表示法：rgb(255,0,0)
E.百分比RGB：rgb(100%,0%,0%)
二：
1.宽度和高度：
大部分元素都会用到这两个属性-------> width(设置宽度)、height(设置高度)
例：<width:200px;height:200px>;
2.边框：
border属性，设置边框的宽度、线性、颜色 ......都有线性这个属性，我们最多用到的无疑就是在和中了。表格(table)和盒子(div)因为看不到它的大小，我们一般都会用border设置显示出边框线
例：<border:2px solid red>;
这样我们可以看到一个2个像素的红色实线出现在你的表格中。这样就可以清晰的看到表格样式了。
在border中还可以给上下左右单独设置边框线：
border-top:宽度线型颜色;border-bottom:宽度线型颜色;
border-right:宽度线型颜色;border-left:宽度线型颜色;
线性我们有三种：none(无)|solid(实线)|dotted(点划线)
3.内边距
就是设置表格或者盒子内的边距，可以设置单独上下左右和边框相同，这里不列举。
例：padding-top:5px;上侧内边距
padding:5px;四个方向的内边距都是5px
padding:5px(上) 5px(左右) 5px(下);
padding:5px(上) 5px(右) 5px(下) 5px(左);
4.外边距
设置外部的边距，可单独设置上下左右。
例：margin-top:5px;上侧外边距
margin:0 auto;(让外边距为0，auto为网页自动计算居中)
margin:5px(上下) 5px(左右);
margin:5px(上) 5px(左右) 5px(下);
margin:5px(上) 5px(右) 5px(下) 5px(左);
5.控制元素的显示方式属性
可以控制元素不显示，或者以什么方式显示出来。如果不显示在此元素style中加入即可：
例：dispaly:none(不显示)|inline(内联对象)|block(块级对象);
HTML的标记种类为----->内联对象：不能自然换行
块级对象：可以自然换行
默认为块级对象：
6.背景样式
可以设置背景图片，背景颜色，图片的平铺方式，背景图片的位置
设置背景样式(哪个部分不需要可以忽略不用写)：
例：background:背景颜色背景图片平铺方式水平位置垂直位置
A.背景颜色就是color，上面有书写方式。
B.背景图片----> url(图片地址) 一定要写 url 然后括号中写上图片地址
C.平铺方式:no-repeat(不平铺)|repeat-x(x轴平铺)|repeat-y(y轴平铺)
D.水平位置(left|center|right)
E.垂直位置(top|center|bottom)
7.浮动样式
使表格或者盒子中的内容全部靠左或者全部靠右，一把导航页面都需要用到
例:<float:left|right>;
8.文本样式
line-height:5px;设置行高
text-indent:99px;设置首行缩进--------->首行缩进一般用于把按钮上的文本向后隐藏。
text-align:left|center|right;设置水平对齐方式
cursor:pointer;设置浏览器中鼠标形状
font-weight:normal|bold;设置文本加粗效果
text-decoration:none|underline;设置文本下划线样式----->一般用于把超链接的下划线取消
9.列表样式
list-style:样式 url(图片地址) 位置(inside|outside); 我们一般只设置一项，就是样式，其余可以忽略不写。例：list-style:none;把列表前面的实心圆或空心圆取消。用于ul,ol。

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	软件测试培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

测试技术贴【黑马软件测试培训】

相关阅读