Prerequisites for learning web automation: manual testing (knowledge of various tests), learning programming language, learning Web basics, learning automated testing tools, learning automated testing framework, need to master some front-end knowledge, no matter learning language or front-end knowledge, It is all for the next script and framework to pave the way. This article introduces the basic knowledge of the front end
Web page foundation (HTML, CSS), web front-end three core technologies
- HTML: responsible for web page architecture
- CSS: responsible for the style of the web page, beautification
- JS: responsible for web page behavior
01. Common HTML tags
- HTML is a language for describing web pages
- HTML refers to hypertext language, not a programming language, but a markup language
- HTM uses tags to describe web pages
Case: txt text to html format
<h1>这是第一个段落文件</h1>
<h2>这是第二个段落文件</h2>
<img src= "C:\Users\ThinkPad\Documents\HBuilderProjects\web前置\l.png">HTML tags
标签是有尖角号包裹的关键词，通常成对出现
第一个标签开始标签，最后一个标签结束标签例:<p> </p>
HTML单标签和双标签
单标签书写：<br/>
双标签书写：<html></html>HTML attributes
HTML属性指的是标签属性
HTML的标签可以拥有多个属性
属性是以属性名称=属性值的格式出现
<input id="kw" name="wd" >1. HTML skeleton
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>华测教育</title>
</head>
<body>
华测教育
</body>
</html><!DOCTYPE html> is used to declare that the current document type is html
- html: is the largest tag in the web page, we call it the root tag
- head: It is called the head of the webpage, and its content is mainly used to define webpage tags and some information for the browser to view
- UTF-8: encoding standard used to define web pages, international encoding
- title: It is called the title tag of the webpage , and the content in it will be displayed on the tab page of the browser
- body: It is called the main body label of the webpage , and the content in it will be displayed in the white window area of the browser
2. Basic HTML tags
html title
<h1>一号标题</h1>
<h2>二号标题</h2>
<h6>六号标题</h6>
HTML paragraph
<p>这是一个段落</p>
<p>这是另一个段落</p>HTML hyperlink
<a href="https://kaiwu.lagou.com/"> 码同学</a>HTML image
<img src="lagou.png" title="码同学教育" alt='logo' with='110' height='150' />HTML spaces and carriage returns
<div> 我是一个块元素 </div>
<br />
<span>我是一个内联元素,存放文本容器</span>3. HTML form
Web page mobile phone user input data, including different types: text input box, radio box, check box, drop-down box, submit button
text input box
<body>
<form>
firstname: <input type="text" name="fristname">
<br>
lastname: <input type="text" name="lastname">
</form>password input box
<form>
Password: <input type="password" name="pwd">
</formsingle button
<form>
<input type='radio' name="sex" value="male" "/>男
<input type="radio" name='sex' value='female' />女
</form>check box
<form>
<input type="checkbox" name="hobby">读书
<input type="checkbox" name="hobby">听音乐
<input type="checkbox" name="hobby">看电影
</form>drop down box
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz" selected="selected">深圳</option>
</select>submit button
提交按钮：<input type="submit" value="提交按钮" />
现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：110685036
02. Familiar with CSS common selectors
CSS: Refers to Cascading Style Sheets
effect:
- Used to define how to display HTML elements (define the style of HTML elements), just like the font tags and color attributes in HTML
- .css file, we only need to edit a simple CSS document to change the layout and appearance of all pages
- Selector : It is used to specify the HTML element to change the style, each statement consists of an attribute and a value
- Attribute : Represents the style attribute to be set, each attribute has a value, and the attribute and value are separated by a colon
- CSS : The statement always ends with a semicolon (;), the statement is enclosed in curly braces ({}) in the HTML document, and the style can be defined in the label
In CSS, a selector is a pattern used to select elements that need to be styled
Commonly used CSS selectors are: id selector, class selector label selector, attribute selector, descendant selector, element selector
1. ID selector
The id selector is to select elements through the id attribute of the element
The id selector in CSS is defined with "#", for example: #test
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
/*这是一个关于样式注释*/
#test {color:blueviolet; text-align:center;}
</style>
</head>
<body>
<p id = 'test'>Hello World!</p>
</body>
</html>The id attribute must be unique throughout the HTML document
Note: HTML documents will not strictly verify whether the id attribute is unique, and id duplication will occur in non-standard HTML documents!
2. Class selector
The class selector selects elements through the class attribute of the element, also known as the class selector . When using the class selector, the element must have the class attribute
The class selector is used to describe the style of a group of elements. The class selector is different from the id selector. The class can be defined in multiple elements using the class selector in CSS with ".", for example: .center
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.center {text-align: center;}
.center {color: #8A2BE2;}
</style>
</head>
<body>
<p>居中</p>
</body>
</html>3. Label selector
The label selector is to select the element by the label name of the element, also known as the element selector
Label selectors in CSS are defined directly using label names, such as: h , input
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
h3 {text-align: center;} p {color:#8A2BE2
</style>
</head>
<body>
<h3>标题居中</h3>
<p>第二个段落</p>
</body>
</html>The following are supporting learning materials. For friends who do [software testing], it should be the most comprehensive and complete preparation warehouse. This warehouse also accompanied me through the most difficult journey. I hope it can help you too!
Software testing interview applet
The software test question bank maxed out by millions of people! ! ! Who is who knows! ! ! The most comprehensive quiz mini program on the whole network, you can use your mobile phone to do the quizzes, on the subway or on the bus, roll it up!
The following interview question sections are covered:
1. Basic theory of software testing, 2. web, app, interface function testing, 3. network, 4. database, 5. linux
6. web, app, interface automation, 7. performance testing, 8. programming basics, 9. hr interview questions, 10. open test questions, 11. security testing, 12. computer basics
Information acquisition method:
