海量数据预处理实战----HTML

最新推荐文章于 2023-02-21 22:02:04 发布
最新推荐文章于 2023-02-21 22:02:04 发布
阅读量377 收藏 3
点赞数
分类专栏： 海量数据预处理实训 文章标签： html 前端 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64139004/article/details/128102971
版权

目录

实验名称

实验目的

实验背景

一、常用标签

二、列表

三、表格

四、表单

实验总结

实验名称

HTML制作网页

实验目的

  1. 了解HTML作用

  2. 掌握HTML文本处理、图像和超链接

  3. 了解HTML表格搭建

  4. 掌握HTML表单处理

  5. 能够独立完成前端页面的搭建

实验背景

概念：HTML（HyperText Markup Language）超文本标记语言， “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 它通过标记符号（标签）来标记要显示的网页中的各个部分，这些语义化的标签可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等），浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，我们只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果

后缀：一个网页对应多个HTML文件，超文本标记语言文件以.htm或.html为扩展名,常用.html作为扩展名

结构：整个页面由html标记包含，包括head和body两部分

  • <html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头；而</html>，则表示该文件的结尾。

  • <head></head>，这2个标记符分别表示头部信息的开始和结尾。它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是<title>和<meta>标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，meta定义了HTML文档中的元数据。

  • <body></body>，网页中显示的实际内容均包含在这2个正文标记符之间。

    <!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 属性，可以定义被链接的文档在何处显示。

  • <img src=' ' alt=' '/>定义html页面中的图像，src(source) 指存储图像的位置，alt 属性用来为图像定义一串预备的可替换的文本。

  • <br /> 表示换行。

  • <!--  --> 可以将注释插入 HTML 代码中，这样可以提高其可读性。

  • <hr /> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。

<!DOCTYPE html> <!-- !DOCTYP表名此文件为h5版本-->  
<html lang="en">  
<head>  
<meta charset="UTF-8">   <!--  网页的编码-->  
<title>thisis my first html</title>  <!--网页的标题头-->  
</head>  
<body>  
<!--1、html标题-->  
<h1>This is ruiyi BigData</h1>  
<h2>This is ruiyi BigData</h2>  
<h3>This is ruiyi BigData</h3>  
<h4>This is ruiyi BigData</h4>  
<h5>This is ruiyi BigData</h5>  
<h6>This is ruiyi BigData</h6>  
<!--2、段落-->  
<p>This is a paragraph</p>  
<hr />  
<p>This is a paragraph</p>  
<hr />  
<p>This is a paragraph</p>  
<!--3、超链接
target="_blank"表示在新的窗口打开超链接  
target="_self"表示在当前窗口打开超链接  
-->  
<a href="http://www.baidu.com/"target="_self">VisitBaidu</a>  
<!-- 4、换行-->  
<br>   
<!-- 5、图片-->  
<img src="logo.png"alt="ruiyi">  
<!-- 也可以将图片当做超链接点击-->  
<a href="http://www.sugon.com/"><img src="logo.png"alt="ruiyi"></a>  
</body>  
</html>

点击first.html页面右上角的谷歌浏览器，浏览器会解析该html页面。

点击超链接 VisitBaidu，可以跳转到百度页面，点击第二个logo图片，可以跳转到网易云音乐首页。

 

 

二、列表

HTML 支持有序、无序和自定义列表:

  • 无序列表是一个项目的列表，列表项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表使用 <ul> 标签，列表中的内容由<li>标签进行标记 。

  • 有序列表也是一列项目，列表项目使用数字进行标记，有序列表始于 <ol> 标签，每个列表项始于 <li> 标签。

  • 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的内容定义以 <dd> 开始。

新建一个list.html文件

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>thisis list</title>  
</head>  
<body>  
<!-- 1、无序列表-->  
<h1>computer language</h1>  
<ul>  <!-- 标志着无序列表-->  
<li>Python</li>  
<li>HTML</li>  
<li>CSS</li>  
<li>JavaScript</li>  
<li>jQuery</li>  
<li>BootStrap</li>  
</ul>  
<!-- 2、有序列表-->  
<h1>Sales grade</h1>  
<ol>  <!-- 标志着有序列表-->  
<li>CHANEL</li>  
<li>Givenchy</li>  
<li>Valentino</li>  
<li>Kenzo</li>  
<li>Dior</li>  
</ol>  
<!-- 3、自定义列表-->  
<h1>Drink </h1>  
<dl>  <!-- 标志着自定义列表-->  
<dt>Coffee</dt>  
<dd>black hot drink</dd>  
<dt>Milk</dt>  
<dd>white cold drink</dd>  
</dl>  
</body>  
</html>

运行界面

三、表格

表格由 <table> 标签来定义，每个表格均有若干行，由标签<tr></tr>定义，每行被分割为若干单元格，由<td></td>定义。常见的表格属性有：

  • border表示表格的边框

  • colspan="2"表格跨两列

  • rowspan="2"表格跨两行

  • cellpadding="10"设置单元格边距

  • cellspacing="0"设置单元格间距

 新建一个table.html文件。首先编写一个table标签，在table标签里面输入 tr*11，然后按Tab键快速生成

<table>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
<tr></tr>  
</table>

接着在每一行tr标签中，输入td*9 ，按Tab键快速生成多个单元格

然后给table设置边框border="1px"，单元格间距设置为1，单元格边距设置为4，设置背景色为灰色

<table width="100%"border="1px"cellspacing="1" cellpadding="4" bgcolor="#d3d3d3">

设置第一行格式，让每个td格横跨两行，并设置宽度

<tr>  
<td width="8%"rowspan="2">讲师</td>  
<td width="10%"rowspan="2">讲课内容</td>  
<td colspan="2">课时安排</td>  
<td colspan="2">作业情况</td>  
<td colspan="3">讲师职位</td>  
</tr>

填充第二行内容，设置宽度

<tr>  
<td width="8%">时长</td>  
<td width="8%">完成时间</td>  
<td width="8%">作业数量</td>  
<td width="8%">检查助教</td>  
<td width="8%">级别</td>  
<td width="8%">薪资</td>  
<td width="8%">职位</td>  
</tr>

第三行内容如下：让“张三”横跨3行

<tr>  
<td rowspan="3">张三</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>

完整代码如下：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>实验小学</title>  
</head>  
<body>  
<h1 align="center">课程安排表</h1>  
<table width="100%"border="1px"cellspacing="1" cellpadding="4" bgcolor="#d3d3d3">  
<tr>  
<td width="8%"rowspan="2">讲师</td>  
<td width="10%"rowspan="2">讲课内容</td>  
<td colspan="2">课时安排</td>  
<td colspan="2">作业情况</td>  
<td colspan="3">讲师职位</td>  
</tr>  
<tr>  
<td width="8%">时长</td>  
<td width="8%">完成时间</td>  
<td width="8%">作业数量</td>  
<td width="8%">检查助教</td>  
<td width="8%">级别</td>  
<td width="8%">薪资</td>  
<td width="8%">职位</td>  
</tr>  
<tr>  
<td rowspan="3">张三</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td rowspan="3">李四</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td rowspan="3">王五</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
<td>&nbsp;</td>  
</tr>  
</table>  
</body>  
</html>

运行截图： 

 

四、表单

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

表单使用表单标签 <form> 来设置:

<form>  
input 元素
</form>

常用表单描述：

新建form.html

<!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>

 展示：

实验总结

了解了HTML作用，学习了HTML文本处理、图像、超链接表格搭建以及表单处理。

写在最后：本专题所有博客均记录本人实训期间的学习笔记，方便复习查看，内容并非本人原创，均为老师上课内容。

坞吾5雾
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
04.数据预处理——处理分类型数据.html
06-19
笔记
前端HTML网页之间传递数据多种办法，附代码案例
热门推荐
long_songs的博客
03-29 1万+
目前常用的有三种办法session传递，cookie传递，url传递url会暴露参数，其余的两个是保存在服务端和浏览器中，不会暴露在地址栏里面下面依次介绍。
通过html5展示流程图
containsoft123的专栏
05-27 2043
一直有个想法，在浏览器上很方便的展示流程图。这几天学习了一下html5，觉得里面的画图功能很好，正好可以用来尝试一下展示流程图。经过学习和借鉴，花了一下午的时间，在界面上终于可以有一个直观的画面展示了。现在还是一个很简单的模型，界面简单，和后台没数据交互。什么都不多说，先上个图和代码。一起学习交流。...
数据科学--处理HTML文件
ym18861512953的博客
05-05 418
HTML是一种通常在web上用于表示人类可读信息的标记语言。HTML包含了文本以及用于控制文本显示的预定义标签（包含在<>号中）。标签可以具有属性，下标表示了一些HTML标签及其属性： beautifulSoup模块可用于解析、访问以及修改HTML文档。可以使用一个标记字符串、一个标记文件或者一个标记文档的网址。来构建一个beautifulSoup对象： from bs4 import BeautifulSoup from urllib.request import urlopen #使用字
html实现数据分布,基于HTML5的数据分析建模系统设计与实现
weixin_42127369的博客
06-05 284
摘要：随着信息技术的不断发展,大量不同类型的数据呈现了更快速的增长趋势.但是快速收集,访问这些数据并不能产生价值,必须通过数据分析才能发现感兴趣数据间隐藏的有价值信息和关联规则,因此大量的数据分析平台应运而生.传统数据分析平台面向的用户几乎都是领域内的分析人员,他们必须具有熟练掌握数据分析相关专业知识的能力,才能正确的使用平台进行数据分析.同时,传统数据分析平台开发环境搭建困难,其基于单机运行的服...
Data-science:与数据科学有关的笔记和练习
05-15
数据科学是21世纪最为热门的领域之一，它结合了统计学、计算机科学以及领域专业知识，用于从海量数据中提取价值。在这个“Data-science:与数据科学有关的笔记和练习”压缩包中，我们可以期待找到一系列与数据科学...
web-scraping-challenge
04-01
6. **数据清洗与分析**：抓取的数据往往包含噪声，需要进行预处理，如去除HTML标签、处理缺失值、统一格式等。Pandas库提供了丰富的数据操作功能，可进行清洗、合并、过滤和统计分析。 7. **可视化展示**：完成数据...
社会科学-第7次人口普查-数据可视化-约750行（Pyecharts可视化、数据分析）.zip
04-21
6. **数据预处理**：在实际数据分析中，数据预处理是非常关键的步骤，包括缺失值处理、异常值检测、数据类型转换等。项目中可能涉及了这些操作，以确保数据质量。 7. **数据可视化最佳实践**：项目的可视化部分不仅...
项目二：戴师兄自学课程2.0之-弹幕内容分析
最新发布
05-27
4. 数据预处理：如去除停用词、词干提取、词形还原，以便进行后续的文本分析。 5. 分析与挖掘：可以进行词频统计、情感分析、主题模型等，了解弹幕的主要内容和情感倾向。 6. 结果展示：使用可视化工具展示分析结果...
Python网络爬虫数据采集数据分析
03-22
总之，Python网络爬虫、数据采集和数据分析是数据科学领域中的基石，掌握这些技能将使你有能力从海量的互联网数据中获取有价值的信息，为决策提供支持。这个资源包提供了一个全面的学习路径，无论是初学者还是有一定...
纯html数据怎么处理,使用纯HTML的通用数据管理和服务
weixin_29839415的博客
06-04 289
使用纯HTML的通用数据管理和服务。然而，为了收集数据，你需要一个数据储存库。要避免使用数据库服务器带来的很多问题，你可以在XML中收集这些数据。下面是我们的项目的基本结构：我最初将数据限制为first name，last name和middle。这个页面之后的基本思想是用户信息在这个页面中获得。在用户信息需求得到满足以后，流程必须被转到下一个逻辑收集步骤。为了使事情变得简单，我将把用户功能包装到...
html文件之间如何做表单数据传输和处理
hdxx2022的博客
02-21 1139
因为如下，是main.html中代码段中的一段，用来取得url地址中附带的表单数据，所以要用get方法，而post方法数据在url是不可见的，所以以下方法并不适用。二、准备两个html文件，在第一个html文件负责发送表单数据给第二个页面，第二个页面再接受进行数据处理。一、只有一个html文件，登录验证时发送表单数据给自身，由自身的js进行数据处理；后台提供登录验证的接口，但是要在前端html文件间完成。首先是默认的index.html，另一个是进行登录验证的main.html。
python 对网页文本的文本预处理
古月哲亭
08-02 226
网页文本的文本预处理。
在html中code的作用,html元素code标签的使用方法及作用
weixin_28767599的博客
06-25 2876
html元素标签是一个短语标签，用于定义计算机源代码文本的，有关该标签的具体使用方法及作用详解如下：标签的定义标签是一个短语标签，用来定义计算机源代码或其他机器可以读懂的源代码；标签定义的源代码，可以是各种编程语言的源代码，比如html的源代码、CSS源代码，php源代码等等；标签定义的源代码文本在浏览器中默认显示的是等宽字体；标签属于内联块级元素；浏览器支持情况 标签已被所有主流浏览器所支持；标...
第8章 综合案例—构建DVD租赁商店数据仓库
CC的博客
11-20 2758
第八章 综合案例—构建DVD租赁商店数据仓库
表格的跨行跨列 rowspan colspan
你好牛蛙！
09-23 862
表格的跨行跨列 跨列(即横着占两个或两个以上的单元格) colspan元素 <td colspan="2">1 1</td> 设置单元格跨横向两列 <td rowspan="2">2 1</td> 设置单元格跨横向两行 当引号中的数字设置为2 则会占两列挨着的单元格 数字为几则会占几格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <
html网页如何获取后台数据库的数据(html + ajax + php + mysql)
m0_67402236的博客
07-31 3546
HTML是无法读取数据库的，HTML是页面前端脚本语言，要想从HTML网页中获取SQL数据库里的数据，需要借助JSP或ASP或PHP或RUBY等语言来实现。 简单的关系可以这样理解： 数据库JSP或ASP或PHP或RUBY等语言HTML 这里我们选取php作为我们的后端语言。（主要是因为菜鸟教程里面是这样用的…） 这里可以参考一下：:PHP - AJAX 与 MySQL 其中的 showSite() 函数会执行以下操作：1、检查是否有网站被选择2、创建XMLHttpRequest对象3、创建在服...
HTML5的数据存储和数据处理的功能有,浅析 HTML5 数据存储的方法及应用
weixin_27219587的博客
06-04 377
原标题：浅析 HTML5 数据存储的方法及应用1 HTML5 本地存储简介中新增的功能之一是本地，使用本地数据 库可以在客户端本地建立一个数据库，该数据库以前是必须要 保存在服务器端数据库中的内容，现在可以直接保存在客户端 本地了，这大大减轻了服务器端的负担，同时也加快了访问数 据的速度。该技术在网页中把键值对存储浏览器客户端，这些 数据可以跨越浏览器的刷新以及关闭和重新打开。对于 HT⁃ML5 ...
HTML 表单处理
qq_46457076的博客
01-13 401
Go 语言中的 HTML 表单的处理！
python/java 预处理himawari-8数据
02-02
Python和Java都可以用来预处理Himawari-8数据。以下是关于如何使用这两种编程语言预处理Himawari-8数据的一些简单指导。 Python: 1. 导入所需的库，比如NumPy和Pandas，用于数据处理和分析。 2. 读取Himawari-8数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值