自动化:web网页理解(Automation: Web page understanding)

一、网页成分

网页由以下三部分组成

HTML: HTML 教程 (w3school.com.cn)

1、标记语言,网页的主体,不会变化 

2、只会提示,不会报错

CSS:

1、标记语言,用来修饰HTML,例如颜色和字体大小

JavaScript:JavaScript 教程 (w3school.com.cn)

1、动态脚本语言

vue:前端框架

.vue:模板标记语言

二、对以上语言的简单说明

HTML

语言需要闭合,如:<tag /> 或者<tag > </tag>

可分为两种元素,以用户是否能在网页看到分类:可见元素和不可见元素

1、可见元素

如:输入框、按钮、文本内容、勾选框、下拉框这些

<input value="默认值" readonly=true disabled=true />

2)文本框:多行,和input标签闭合的方式不一样 ,可以有默认值,可以被禁用,可以只读

<textarea readonly=true disabled=true >默认值</textarea>

3)超连接: 可以点击

<a href="https://baidu.com">访问百度</a>

4)按钮

<button>访问谷歌</button> <!-- 点击按钮之后,触发回调,执行JS代码-->

5)无序和有序列表,无序列表就是每列前显示黑色圆点,,有序就是前面显示1,2,3

<ul> 
        <!-- ol: oder list 有序列表--> 
        <!-- ul: unoder list 无序列表-->
    <li>列表项1</li>   <!-- list itme 列表项-->
    <li>列表项2</li> 
    <li>列表项3</li> 
</ul>        

6)表格,像登录注册这些

<table border="1"> 
    <tr>
        <th>姓名</th>
        <th>性别</th> 
    </tr>     <!-- table row --> 
    <tr>
        <td>张三</td> 
        <td>男</td> 
    </tr> 
    <tr>    
        <td>王五</td> 
        <td>男</td> 
    </tr> 
</table>    

2、不可见元素

input { /* 选择所有的 input标签 */ 
    color: red; 
}    

2、属性选择器

input[value='默认值'] { 
    /* 选择属性value=默认值的 input标签 */ 
    color: red; 
}

属性id选择器带#号,属性class选择器带.号

#控制台中使用
#相当于document.querySelector(‘ ‘)使用
$('#assign-issue')  #id选择器id=assign-issue
$('.trigger-label')    #class选择器class=trigger-label

#HTML中使用

#id{ 
    color: red;
}
.x1{
    color: red; 
}
<script type="text/Javascript"> 
    alert("hello"); 
</script>

2、封装在js文件中,HTML网页通过script标签导入

<script src="aaa.js"> </script>

javascript对浏览器操作

#页面跳转
window.location.href = "https://baidu.com"

#打开新窗口
window.open("https://wap.baidu.com")

以及其他前进、后退、刷新等操作

JavaScript在DOM中操作

#创建元素
var ele = document.createElement("input") document.body.appendChild(ele)

#修改元素
ele.value="我也是默认值"

#删除元素
document.body.removeChild(ele)
————————

1、 Web page composition

The web page consists of the following three parts

HTML: HTML 教程 (w3school.com.cn)

1. Markup language, the main body of the web page, will not change

2. Will you only give a prompt

CSS:

1. Markup language that modifies HTML, such as color and font size

JavaScript:JavaScript 教程 (w3school.com.cn)

1. Dynamic scripting language

Vue: front end frame

. Vue: template markup language

2、 A brief description of the above language

HTML

The language needs to be closed, such as: & lt; tag /> Or & lt; tag > & lt;/ tag>

It can be divided into two elements to classify whether users can see them on the web page: visible elements and invisible elements

1. Visible element

Such as input box, button, text content, check box and drop-down box

<input value="默认值" readonly=true disabled=true />

2) Text box: multi line, which is different from the closing method of input tag. It can have default value, can be disabled, and can be read-only

<textarea readonly=true disabled=true >默认值</textarea>

3) Hyperlink: you can click

<a href="https://baidu.com">访问百度</a>

4) Push button

<button>访问谷歌</button> <!-- 点击按钮之后,触发回调,执行JS代码-->

5) Unordered and ordered lists. Unordered lists show black dots in front of each column, and ordered lists show 1, 2 and 3 in front

<ul> 
        <!-- ol: oder list 有序列表--> 
        <!-- ul: unoder list 无序列表-->
    <li>列表项1</li>   <!-- list itme 列表项-->
    <li>列表项2</li> 
    <li>列表项3</li> 
</ul>        

6) Forms like login and registration

<table border="1"> 
    <tr>
        <th>姓名</th>
        <th>性别</th> 
    </tr>     <!-- table row --> 
    <tr>
        <td>张三</td> 
        <td>男</td> 
    </tr> 
    <tr>    
        <td>王五</td> 
        <td>男</td> 
    </tr> 
</table>    

2. Invisible element

input { /* 选择所有的 input标签 */ 
    color: red; 
}    

2. Attribute selector

input[value='默认值'] { 
    /* 选择属性value=默认值的 input标签 */ 
    color: red; 
}

Attribute ID selector with # sign, attribute class selector with number

#控制台中使用
#相当于document.querySelector(‘ ‘)使用
$('#assign-issue')  #id选择器id=assign-issue
$('.trigger-label')    #class选择器class=trigger-label

#HTML中使用

#id{ 
    color: red;
}
.x1{
    color: red; 
}
<script type="text/Javascript"> 
    alert("hello"); 
</script>

2. Encapsulated in JS files, HTML web pages are imported through script tags

<script src="aaa.js"> </script>

JavaScript operation on Browser

#页面跳转
window.location.href = "https://baidu.com"

#打开新窗口
window.open("https://wap.baidu.com")

And other forward, backward, refresh and other operations

JavaScript在DOM中操作

#创建元素
var ele = document.createElement("input") document.body.appendChild(ele)

#修改元素
ele.value="我也是默认值"

#删除元素
document.body.removeChild(ele)