三峡大学复杂数据预处理day01-day03

用户2225445

发布于 2023-10-15 09:14:09

1810

发布于 2023-10-15 09:14:09

文章被收录于专栏：IT从业者张某某IT从业者张某某

1.实习计划

1.1 引入

Python海量数据的生成与处理

海量数据处理-Python

2.前3天内容安排

2.1 安排计划

时间具体内容

第1天上午 1、实习计划安排说明+2、爬虫基础知识介绍第1天下午 1、数据采集第2天上午 1、基于selenium实现浏览器自动化采集数据第2天下午 1、Python实现疫情数据爬取第3天上午 1、Pandas实现疫情数据探索性分析第3天下午 1、Python实现疫情数据可视化分析

2.2 具体内容

2.2.1 day01

计划安排见：【腾讯文档】三峡大学文档资源

主要内容：WEB端三剑客HTML+CSS+JavaScript

实验网址：Java爬虫框架WebMagic

1.HTML基础：

<!DOCTYPE html>：声明此页面为html5，简称h5，h5是html的第5个版本
<html></html>：包裹着整个页面的所有标签，标志着这是一个html页面
<head></head>：头部，包含标题和页面元信息
<body></body>:身体部分，显示页面内容的标签

《一》常用标签：
    <h1> - <h6>：定义html标题，由h1~h6组成，<h1> 定义最大的标题。<h6> 定义最小的标题。
    <p></p>:定义段落。
    <a href=' ' target=' '></a>:定义html超链接，在href属性中指定链接的地址，超链接可以是一个字，一个词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手；使用 Target 属性，可以定义被链接的文档在何处显示。
    <!--3、超链接
target="_blank"表示在新的窗口打开超链接  
target="_self"表示在当前窗口打开超链接  
    -->  
    <img src=' ' alt=' '/>定义html页面中的图像，src(source) 指存储图像的位置，alt 属性用来为图像定义一串预备的可替换的文本。
    <br /> 表示换行。
    <!--  --> 可以将注释插入 HTML 代码中，这样可以提高其可读性。
    <hr /> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。

《二》列表：
HTML 支持有序、无序和自定义列表:
    无序列表是一个项目的列表，列表项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表使用 <ul> 标签，列表中的内容由<li>标签进行标记 。
    有序列表也是一列项目，列表项目使用数字进行标记，有序列表始于 <ol> 标签，每个列表项始于 <li> 标签。
    自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的内容定义以 <dd> 开始。

《三》表格：
表格由 <table> 标签来定义，每个表格均有若干行，由标签<tr></tr>定义，每行被分割为若干单元格，由<td></td>定义。常见的表格属性有：
    border表示表格的边框
    colspan="2"表格跨两列
    rowspan="2"表格跨两行
    cellpadding="10"设置单元格边距
    cellspacing="0"设置单元格间距

《四》表单：

表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容，
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

案例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Title</title>  
</head>  
<body>  
<fieldset style="width: 400px">  
<legend>个人注册</legend>  
<p><label>手机号码：</label><input type="text"value="使用手机号码登录微博" /></p>  
<p><label>设置密码：</label><input type="text"/></p>  
<p><label>昵称：</label><input type="text"/></p>  
<p><label>姓名：</label><input type="text"/></p>  
<p><label>身份证：</label><input type="text"/></p>  
<p><label>性别：</label>  
<input type="radio"value="man"  name="sex"/>男  
<input type="radio"value="women" name="sex" />女  
</p>  
<p><label>爱好：</label>  
<input type="checkbox"name="hobby"/>篮球  
<input type="checkbox"name="hobby" />乒乓球  
<input type="checkbox"name="hobby" />足球  
</p>  
<p><label>激活码：</label><input type="button"value="免费获取短信激活码" />  
<input type="text"/>  
</p>  
<p><input type="button"value="立即注册" /></p>  
<p><a href="#"><input type="checkbox"name="checkbox" id="checkbox" />微博服务使用协议</a></p>  
</fieldset>  
</body>  
</html>

2.CSS选择器：

概念:CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现HTML的计算机语言，样式定义如何显示 HTML 元素， CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。通常存储在外部样式表中，即CSS 文件中，外部样式表可以极大提高工作效率。

选择器通常是您需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成，属性是希望设置的样式，每个属性有一个值，属性和值用冒号分开。常用的选择器如下：

简单选择器（根据名称、id、类来选取元素）组合器选择器（根据它们之间的特定关系来选取元素）伪类选择器（根据特定状态选取元素）伪元素选择器（选取元素的一部分并设置其样式）属性选择器（根据属性或属性值来选取元素）

更多细节可参考w3c连接

插入样式表：将样式表插入html页面中有以下几种方式:

 外部样式表(External style sheet) ：每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 
 内部样式表(Internal style sheet) ：可以使用 <style> 标签在文档头部定义内部样式表
<style>
 p {color:sienna;}
</style>

 内联样式(Inline style)： 定义在html标签内，此时，style可以看做标签的属性
<p style="color:red;margin-left:20px">这是一个段落。</p>  

CSS 注释： 注释是用来解释代码的，浏览器会忽略它，CSS注释以 "/*" 开始, 以 "*/" 结束

参考图片

选择器生效规则

行内样式 > 内嵌样式 > 外部样式 ID选择器 > 类选择 > 标签选择器在同一选择器中，两条声明相同，后一条声明会覆盖前一条声明

3. CSS网页样式–常用样式

1.文本样式：

颜色：颜色属性被用来设置文字的颜色，通常有三种写法
    十六进制值 - 如: ＃FF0000 
    一个RGB值 - 如: RGB(255,0,0) 
    颜色的名称 - 如: red
对齐方式 ：文本排列属性是用来设置文本的水平对齐方式，文本可居中或对齐到左或右,两端对齐. 
    {text-align:center;} 文本居中
    {text-align:right;} 文本右对齐，left为左对齐
    {text-align:justify;}每一行被展开为宽度相等，左，右外边距是对齐

文本修饰：text-decoration 属性用来设置或删除文本的装饰。
    {text-decoration:overline;}
    {text-decoration:line-through;}
    {text-decoration:underline;}

文本缩进：文本缩进属性是用来指定文本的第一行的缩进。
    {text-indent:50px;}

2.文字样式

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细

3.链接样式：可以通过css装饰，超链接通常有以下四种状态

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

4.列表属性：

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

5.背景属性：

background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复

4.CSS网页样式–DIV盒子模型

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素，平面图如下所示:

参考博文连接

说明：

1.元素框的最内部分（element）是实际的内容，有宽（width）和高（height）两个属性，直接包围内容的是内边距（padding）。内边距呈现了元素的背景，内边距的边缘是边框（border），边框是可以有厚度的。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素

2.内边距、边框和外边距都是可选的，默认值是零。可以通过将元素的 margin 和 padding 设置为零来覆盖浏览器样式，可以分别进行，也可以使用全局选择器对所有元素进行设置：

* {  
  margin: 0;  
  padding: 0;  
}

3.盒子模型属性（margin、padding、border）顺时针分为：上右下左4个方向，3个属性都可以分别设置各个方向属性值，也可以同时设置4个方向属性值，3个属性都占据空间

《一》CSS 边框属性border
CSS允许指定一个元素边框的样式和颜色
    border-style属性用来定义边框的样式 。border-style 值:none: 默认无边框；dotted: 定义一个点线边框；dashed: 定义一个虚线边框；solid: 定义实线边框
    border-width 属性为边框指定宽度 。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
    border-color属性用于设置边框的颜色。可以设置的颜色：name - 指定颜色的名称，如 "red"；RGB - 指定 RGB 值，如 "rgb(252,450,9)"；Hex - 指定16进制值, 如 "#ff0000" 
    可以在一个属性中设置边框：border:5px solid red；
注意： border-color单独使用是不起作用的，必须先使用border-style来设置边框样式。

《二》CSS padding（内边距）和margin

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距
当然也可以简写：padding:25px 50px；表示上下填充为25px ，左右填充为50px

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style type="text/css">  
        *{  
            padding: 0;  
            margin: 0;  
        }  
        .box{  
            width: 800px;  
            height: 400px;  
            border: 5px solid red;  
        }  
        .box1{  
            /* 设置背景*/  
            background: pink;  
            /*设置padding*/  
            padding-top:25px;  
            padding-bottom:25px;  
            padding-right:50px;  
            padding-left:50px;  
            /*设置宽高*/  
            width: 200px;  
            height: 150px;  
            /*设置margin*/  
            margin-top:100px;  
            margin-bottom:100px;  
            margin-right:50px;  
            margin-left:50px;  
            /*让box1左浮动*/  
            float: left;  
        }  
  
        .box2{  
            /* 设置背景*/  
            background: deeppink;  
            /*设置padding,上下20px，左右20px*/  
            padding: 20px 20px;  
            /*设置宽高*/  
            width: 200px;  
            height: 150px;  
             /*设置margin*/  
            margin:100px 50px;  
             /*让box2左浮动，box2会浮动在box1的右边*/  
            float: left;  
        }  
  
    </style>  
</head>  
<body>  
<div class="box">  
    <div class="box1">  
        I am is box1  
    </div>  
    <div class="box2">  
         I am is box2  
    </div>  
</div>  
</body>  
</html>

5. JavaScript基础语法

概念:JavaScript 是世界上最流行的、轻量级的、脚本编程语言，可插入 HTML 页面，由浏览器执行。将这种脚本语言引入html，有三种方式：

<script> 与 </script> 标签，可被放置在 HTML 页面的 <body> 或者 <head> 部分中 

外部引入：<script src="myScript.js"></script>

在标签内部定义：<button onclick="javascipt:alert('hello.')">点击</button>

注释：JavaScript 不会执行注释，我们可以添加注释来对 JavaScript 进行解释，提高代码的可读性。

单行注释以 // 开头。 
多行注释以 /* 开始，以 */ 结尾。

变量：变量是存储信息的容器，变量命名要遵循一定的规则：必须以字母开头，也能以 $ 和 _ 符号开头（不过我们不推荐这么做），对大小写敏感（y 和 Y 是不同的变量）。在 JavaScript 中创建变量通常称为“声明”变量，我们使用 var 关键词来声明变量：var carname；如需向变量赋值，请使用等号：carname=“Volvo”；可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var name="Gates"，age=56， job="CEO"。

数据类型：

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型，大致可以分为以下几类：

字符串、数字、布尔、数组、对象、Null、Undefined

字符串可以是引号中的任意文本，可以使用单引号或双引号：var name = 'sam'
数字可以带小数点，也可以不带：var x1=34.00或者var x2=34
布尔（逻辑）只能有两个值：true 或 false
数组存储一组数据的集合，下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔： var person={name："Bill",age:43, id:5566}
Undefined 和 Null ：Undefined 这个值表示变量不含有值，可以将变量的值设置为 null 来清空变量。

可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

注意：JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象

函数：

函数是由事件驱动或者当它被调用时执行的可重复使用的代码块，定义语法如下所示：

function functionname() {

      这里是要执行的代码 

}

当调用该函数时，会执行函数内的代码。可在 JavaScript 的任何位置进行调用。

运算符:

运算符常用来对JavaScript中的变量进行运算，主要有以下几个方面

算术运算符：+、-、*、/、%、++、-- 
赋值运算符：= 
比较运算符：==、！=、>、<、>=、<= 
逻辑运算符: &&、||、！ 
条件运算符：variablename=(condition)?value1:value2

流程控制：

if（条件）else 语句：在条件为 true 时执行代码，在条件为 false 时执行其他代码 
===========================
for 循环：用来执行大量重复的代码 
for (语句 1; 语句 2; 语句 3){
  被执行的代码块
  }

===========================
while 循环：while 循环会在指定条件为真时循环执行代码块。 
do-while循环： 

do  { 
  需要执行的代码
  }
while (条件);

6.JavaScript HTML DOM和事件

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM 模型被构造为对象的树，下面为HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

    JavaScript 能够改变页面中的所有 HTML 元素
    JavaScript 能够改变页面中的所有 HTML 属性
    JavaScript 能够改变页面中的所有 CSS 样式
    JavaScript 能够对页面中的所有事件做出反应

1.查找 HTML 元素

为了做到通过 JavaScript来操作 HTML 元素这件事情，您必须首先找到该元素。有三种方法来做这件事： 

    通过 id 找到 HTML 元素 ：getElementById(）返回对拥有指定 id 的第一个对象的引用。
    通过标签名找到 HTML 元素 ：getElementsByName() 返回带有指定名称的对象集合。
    通过类名找到 HTML 元素 ：getElementsByClassName() 返回带有指定类名的对象集合。
    通过指定名称找到 HTML 元素：getElementsByName() 返回带有指定名称的对象集合。

2.设置HTML相关内容

    改变 HTML 元素的内容 (innerHTML) 
    改变 HTML 元素的样式 (CSS) 
    对 HTML DOM 事件对做出反应

3.常用事件

下面是一些常见的HTML事件的列表:

    onchange HTML 元素改变
    onclick 用户点击 HTML 元素
    onmouseover 用户在一个HTML元素上移动鼠标
    onmouseout 用户从一个HTML元素上移开鼠标
    onkeydown 用户按下键盘按键
    onload 浏览器已完成页面的加载

《一、DOM HTML》

DOM HTML主要是修改页面中html相关的信息，主要分为三个方面

    改变 HTML 输出流：document.write() 可用于直接向 HTML 输出流写内容。 
    改变 HTML 内容：document.getElementById(id).innerHTML=new HTML 
    改变 HTML 属性：document.getElementById(id).attribute=new value

《二、DOM CSS》

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式：document.getElementById(id).style.property=new style

《三、DOM 事件》

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

7.JavaScript–正则表达式

正则表达式是用于处理字符串的强大工具，其他编程语言中也有正则表达式的概念，区别只在于不同的编程语言实现支持的语法数量不同。它拥有自己独特的语法以及一个独立的处理引擎，在提供了正则表达式的语言里，正则表达式的语法都是一样的。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

正则表达式参考连接:

https://regexr-cn.com/

正则表达式 - 教程

案例

<!DOCTYPE html>  
   <html lang="en">  
   <head>  
       <meta charset="UTF-8">  
       <title>Title</title>  
  
   </head>  
   <body>  
   <form action="" method="get">  
       请输入：<input type="text" id="reg"> <br>  
       <input type="submit" value="验证" onclick="check()">  
   </form>  
   <script type="text/javascript">  
       function check() {  
           var regvalue=document.getElementById("reg").value  
           isTrue(regvalue)  
       }  
       /*是否带有小数*/  
       function isTrue(strValue )  {  
           //var  reg= /^\d+\.\d+$/;  
           // var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/  
           // var reg=/^[0-9]{8}$/;   /*定义验证表达式*/  
           //var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;  
           var reg=/^\w+@[a-zA-Z0-9]{2,10}(\.[a-z]{2,4}){1,3}$/;  
           // var reg = '1[3 5 8].[^1]{8}'  
           // /*."[^]"表示不匹配[^]中的内容。例如：我们定义的规则是匹配出以1开头，  
           // 第二位为3、5、8，第三位任意，第四位不能为1的电话号码。*/  
           if(reg.test(strValue)){  
               alert("验证通过")  
           }else{  
               alert("验证失败")  
               return  
           }  
       }  
   </script>  
   </body>  
   </html>

案例：

来源：

稀土掘金用户bliss河北小宝 1024程序员节快乐

稀土掘金用户：用户298266847556 文言文編程沁园春.雪

稀土掘金用户：橘子美梦「文言文編程」道路通行之術

JS 特效 Three.js粒子3d交互式动画

只用JS写的页面,代码参考：

https://blog.csdn.net/F_eve/article/details/111062039

http://www.yanhuangxueyuan.com/html5/javascript_html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯JS写页面</title>
</head>
<body>
    <!-- <div id="box"></div>-->
        <!-- 显示结果 -->
    
    <script>
        //这是数据
        var headDatas = ['姓名', '职业', '综合指数', '操作'];
        var datas = [{
                name: '石申',
                subject: '天文学家',
                score: 90
            },
            {
                name: '郭守敬',
                subject: '天文学家',
                score: 110
            },
            {
                name: '李白',
                subject: '诗人',
                score: 90
            },
            {
                name: '杜甫',
                subject: '诗人',
                score: 100
            },
            {
                name: '王阳明',
                subject: '心学大师',
                score: 90
            },
            {
                name: '杨辉',
                subject: '数学家',
                score: 70
            },
        ];
     
    </script>
	
	<script>
        /* 第一步：获取容器box */
		//    body里面插入div元素
		let box = document.createElement("div");
		box.style.width = "auto";
		box.style.margin = "100px auto";
		box.style.background = "#00B7FF";
		box.style.padding = "20px";
		document.body.appendChild(box);
        //var box = document.getElementById('box');
        /* 第二步：创建一个Table添加到box里面 */
        var table = document.createElement('table');  //创建的时候需要''号
        table.style.border = '1px solid black'; //添加样式
        table.style.width = '600px';
        box.appendChild(table); //添加的是子节点,不需要''号
        /* 第三步：创建thead,tbody添加到table里面 */
        /* var thead = document.createElement('thead');
        var tbody = document.createElement('tbody');
        table.appendChild(thead);
        table.appendChild(tbody); */
        var thead = table.createTHead('thead'); 
        var tbody = table.createTBody('tbody'); //这种写法也能达到效果,thead与tbody是table的固有属性.仅限于table
        /* 第四步: 存入thead的数据tr/th*array.length*/
        var tr = document.createElement('tr');
        tr.style.textAlign = 'center';
        tr.style.height = '40px';
        tr.style.backgroundColor = '#999';
        thead.appendChild(tr);
        for(var i = 0; i < headDatas.length; i++){ //遍历数组
            /* 利用循环创建th */
            var th = document.createElement('th');
            tr.appendChild(th);
            /* 数据的传入 */
            th.innerText = headDatas[i];
        }
        /* 第五步：存入tbody的数据tr/td 需要创建新的tr*/
        for(var i = 0; i < datas.length; i++){
            var tr = document.createElement('tr'); //需要创建的个数
            tbody.appendChild(tr);
            for(var key in datas[i]){
                var td = document.createElement('td');
                tr.style.textAlign = 'center';
                tr.appendChild(td);
                /* 数据的传入 */
                td.innerText = datas[i][key];  
            }
            /* 创建一个a标签用来删除 */
            var a = document.createElement('a');
            a.href = '#';
            a.innerText = '删除';
            tr.appendChild(a);
            /* 删除功能 点击事件 */
            a.onclick = function(){
                this.parentNode.parentNode.removeChild(this.parentNode); //parentNode当前节点的父亲节点,removeChild删除子节点
            }
        }
    </script>
</body>
</html>