当前位置：首页 > news >正文

python与selenium_基础篇_前端

news 来源：原创 2024/5/6 22:53:27

背景知识：前端三大基石：
HTML_总体脉络
CSS_皮肤组织
javascript_嵌入2者的神经组织

HTML
1、超文本标记语言

CSS
1、层叠样式表，定义了HTML元素的显示。组成：选择器、声明
2、注释：/这是一个CSS/
3、ID选择器、class选择器

Javascript
常用来给页面添加动态功能，如响应用户的各种操作，目的：让前端逻辑在客户端执行，增强用户交互性，减少服务端的压力

var domlist = document.getElementsByTagName("input")
	var checkboslist = [];
	var len = domlist.length;
	for (var i = 0; i < len; i++){
		if(domlist[i].type == "checkbox"){
			checkboslist.push(domlist)
		}
	}


html、css代码如下：
【test_001.html】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>焦腾飞</title>
</head>
<body>
<h1>This is heading</h1>
<h2>This is heading</h2>
<h3>This is heading</h3>
<h4>This is heading</h4>
<h5>This is heading</h5>
<h6>This is heading</h6>

<p>这里是一个段落paragraph</p>

<p>
    p代表一个段落
	<br>br代表着换行符号;
		</br>
	<b>b</b>代表把文本加粗,<i>I</i>代表文本斜体，
	<br>a代表超链接：<a href="https:www.baidu.com">百度搜索</a>
		a代表超链接：<a href="https:www.baidu.com" target="_blank">百度搜索</a>
		</br>
	</p>
</body>
</html>

【test_002.html】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张彤</title>
	<style>
		h1.title{text-align:center;}
		#p1{text-align:center;color:red;}
		p.class1{text-align:center;color:red;}
		#p3{text-align:center;}
		</style>
	</head>
<body>
<h1 class="title">h1代表1级标题</h1>
<p id="p1">
    第一、这里说的是基础_001
	p代表一个段落
	<br>br代表着换行符号;tr是table里面的换行
		</br>
	<b>b</b>代表把文本加粗,<i>I</i>代表文本斜体，
	<br>a代表超链接：<a href="https:www.baidu.com">百度搜索</a>
		a代表超链接：<a href="https:www.baidu.com" target="_blank">百度搜索</a>
		</br>
	</p>
<p class="class1">
	第二、下面是我制作的表格：
	<table>
		<tr>
		<td>td代表的是列1</td>
		<td>td代表的是列2</td>
			</tr>
			
		<tr>
		<td>第二行列1</td>
		<td>第二行列2</td>
			</tr>
		</table>
	</p>

<p id="p3">
	第三、这里是排序列表，无序的了解了就行：
	<ol>
		<li>这是第一行</li>
		<li>这是第二行</li>
		<li>这是第三行</li>
		</ol>
	</p>
</body>
</html>

【test_框架.html】
<frameset cols="40%,60%">
<frame src="./test_001.html">
<frame src="./test_002.html">
</frameset>