2.HTML页面组成

news2024/11/25 10:07:47

html页面组成

  • html简介-基础-元素
  • html属性-标题-段落
  • html链接-头部-图像
  • html表格-列表-区块
  • html表单-框架-颜色
  • html字符实体-url

前言: 在学习爬虫前,我们还需要了解HTML页面,学习它的组成部分以及各部分的意思和使用方法,代码我放在最后,需要自取。学习html,是为了后面爬虫做铺垫,因为我们需要解析页面数据,知己知彼方便百战百胜!
📝​📝​此专栏文章是专门针对Python零基础爬虫,欢迎免费订阅!
📝​📝第一篇文章获得全站热搜第一,python领域热搜第一,欢迎阅读!
🎈🎈欢迎大家一起学习,一起成长!!

html简介-基础-元素

html简介:

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

下面框起来部分就是HTML。
在这里插入图片描述

html属性-标题-段落

打开pycharm,点击文件夹,然后选择新建,再点击HTML文件,选择html5,点击创建。
在这里插入图片描述

我们得到一个这样的页面,也就是网页雏形!
在这里插入图片描述

html属性:属性就是变量,在HTML中位置
1.元素内 2.放在名称的后面3.在开始的标签里面

html元素:有头有尾即元素 元素可以嵌套

下面请看截图讲解:
在这里插入图片描述

红色方框包含代码和其对应的解析,便于理解HTML的内容。
在这里插入图片描述

文档的标题:
在这里插入图片描述
运行结果:
在这里插入图片描述

这便是我们的网页,背景在后面教大家怎么调
在这里插入图片描述

网页中是有文字介绍的,所以就有了段落,现在教大家怎么设置段落:
在这里插入图片描述
先设置一个标题,我们选择封神榜为我们的标题
然后段落就写在两个p里面,他就会自动生成段落和换行。
让我们来看一下结果:
在这里插入图片描述

html链接-头部-图像

html链接,也叫超链接
在元素中添加网址,在后面跟上网址名称,可以自定义在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

点击图中豆瓣电影,便会跳转到豆瓣电影主页

添加照片:

接下来教大家怎么添加照片,先在网上选择喜欢的照片,然后点击下载
接着把下载的照片拖到我们的文件夹里面,如图:在这里插入图片描述
在这里插入图片描述
如图所示,写入照片名字,alt用来做为预备文档,当照片出现损坏时,可以提示对应信息,方便我们更好的修改。width和height对应照片的宽和长,用于规定照片的大小。

效果如下:
在这里插入图片描述

html表格-列表-区块

表格:
在这里插入图片描述
在这里插入图片描述
列表:
在这里插入图片描述
在这里插入图片描述

区块:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

html表单-框架-颜色

表单:
在这里插入图片描述

在这里插入图片描述

框架:
在这里插入图片描述
在这里插入图片描述

html字符实体-url

在这里插入图片描述

背景:

背景和添加照片一样,选择一个喜欢的照片,然后下载,放进文件夹,如下操作,便可以设置背景:
在这里插入图片描述

在这里插入图片描述
代码如下:

<!DOCTYPE html>
<!--学习html页面,是为了后面爬虫做铺垫(需要解析页面数据),知己知彼才能百战不殆!!! -->
<!--声明为html5的文档-->
<!--标签对大小不敏感,最好使用小写-->
<!--id唯一 -->
<html lang="en">
<!--根元素-->
<head>
    <!--头部元素,设置和导入某些模块-->
    <meta name="keyword" content="HTML CSS JAVASCRIPT">
    <!--指定搜索引擎关键字-->
    <meta name="description" content="免费 web 编程">
    <!--描述-->
    <meta name="author" content="小明">
    <!--作者-->
    <meta http-equiv="refresh" content="30">
    <!--30秒刷新一次网页-->
    <!---->
    <meta charset="UTF-8">
    <!-- 指定网页的编码格式-->
    <title>Title</title>
    <!-- 定义一个标题-->
</head>
<!--有头有尾即元素 元素可以嵌套-->
<!--属性即变量,位置:1,元素内,2.放在名称的后面3.在开始的标签里面-->
<body id="abc" class="sss" background="bj.jpg" style="background-size:cover ">
<!--可见的页面内容-->
<!--文档的标题-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--段落:-->
<h4>封神榜:</h4>
<p>
    昆仑山玉虚宫掌阐教道法元始天尊因门下十二弟子犯了红尘之厄,杀罚临身,故此闭宫止讲;又因昊天上帝命仙首十二称臣,天庭无能人强将;再因人间正值商周交替之时,商朝气数将尽,周朝即将兴起,故三教并谈,乃阐教、截教、人道三等,共编成三百六十五位正神,又分八部:上四部雷、火、瘟、斗,下四部群星列宿、三山五岳、布雨兴云、善恶之神。
    [1]
</p>
<p>其中有忠臣义士上榜者;有不成仙道而成神道者;各有深浅厚薄,彼此缘分,故神有尊卑,死有先后,根行深者成其仙道;根行次者成其神道;根行浅者成其人道。此是天数,非同小可,况有弥封,只至死后方知端倪。 [2] </p>
<!--链接:link  -->
<p id=tips>这是第一个段落</p>

<a href="https://movie.douban.com">豆瓣电影</a>
<!--br标签的作用是换行-->
<br>
<a href="https://www.baidu.com">百度</a>
<a href="#tips">跳到tips段落</a>
<!--提示用的-->
<a href="https://movie.douban.com/#reviews">豆瓣电影最受欢迎的影评</a>
<!--alt 预备文档:当图片损坏时候,出现文字-->
<img src="IMG_20230309_193114.jpg" alt="桥与蓝河" width="200" height="100">
<img src="IMG_20230309_195138.jpg" alt="大海" width="200" height="100">
<table border="1">
    <!-- border:表格宽度-->
    <!-- tr决定行数-->
    <tr>
        <!-- td决定列数-->
        <td> 名称</td>
        <td> 年龄</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>20</td>
    </tr>
</table>
<!--列表:1.有序2.无序。3.自定义列表-->
<!--无序列表-->
<ul>
    <!--li里面写具体操作 -->
    <li> 列表数据1</li>
    <li> 列表数据2</li>
    <li> 列表数据3</li>
</ul>
<!--有序列表-->
<ol>
    <!--li里面写具体操作 -->
    <li> 列表数据1</li>
    <li> 列表数据2</li>
    <li> 列表数据3</li>
</ol>


<div>
    <!--自定义列表-->
    <dl>
        <dt> 数据</dt>  <!--主级标题-->
        <dd> -数据1</dd>  <!--次级标题-->
        <dd> -数据2</dd>  <!--次级标题-->
        <dd> -数据3</dd>  <!--次级标题-->
        <dd> -数据4</dd>  <!--次级标题-->
    </dl>
</div>
<!--区块-->
<!--本身没有任何意义,单纯的用来装东西(类似一个盒子)-->
<div></div>

<!--文本容器,也是一个盒子-->
<span>

</span>

<!--表单-->
<form action="" method="get" style="text-align: center; ">
    账号:<input name="user_name" type="text">
    <br>
    密码:<input name="password" type="text">
    <br>
    <input type="submit" value="登录">
</form>


<form action=" " method="get">
    <input name=" gender" value="1" type="radio"><br>
    <input name=" gender" value="0" type="radio"><br>
</form>


<!--框架,作用类似一个嵌套的东西-->
<!--src里面可以写其他链接-->
<!--把另外一个页面嵌套进来-->
<iframe src="https://movie.douban.com" width="1000" height="600">


</iframe>


</body>
</html>

悲索之人烈焰加身,堕落者不可饶恕。永恒燃烧的羽翼,带我脱离凡间的沉沦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/401423.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++回顾(十八)—— 文件操作

18.1 I/O流概念和流类库结构 1 概念 程序的输入指的是从输入文件将数据传送给程序&#xff0c;程序的输出指的是从程序将数据传送给输出文件。 C输入输出包含以下三个方面的内容&#xff1a; &#xff08;1&#xff09;对系统指定的标准设备的输入和输出。即从键盘输入数据&am…

前端初学者 sdk 的使用

目录结构&#xff1a; package.json {"name": "ivanfor666","version": "1.0.0","description": "","main": "dist/index.cjs.js","module": "dist/index.esm.js",&quo…

Kafka 分区机制

Kafka 分区机制分区策略轮询策略随机策略按消息键保序策略基于地理位置的分区策略主题 (Topic) &#xff1a;承载真实数据的逻辑容器&#xff0c;主题下还分 n 个分区 Kafka 消息的三级结构&#xff1a; 主题 - 分区 - 消息主题下的每条消息只会保存在某个分区中&#xff0c;…

案例06-复用思想的接口和SQL

目录 一&#xff1a;背景介绍 二&#xff1a;思路&方案 三&#xff1a;过程 1.Controller层接口的复用 2.Mapper层sql语句的复用 四&#xff1a;总结 一&#xff1a;背景介绍 我们在开发项目的过程中非常容易出现的一种现象就是用什么我就直接写什么&#xff0c;就像我…

VPC专有网络介绍

基本概念 VPC&#xff1a;专有网络&#xff0c;云上用户自定义的私有网络。 vSwitch&#xff1a;交换机&#xff0c;组成专有网络的基础网络设备&#xff0c;交换机可以连接不同的云资源&#xff0c;在专有网络内创建云资源时&#xff0c;必须指定云资源所在连接的交换机。 vR…

微服务与分布式——SpringCloud

前提&#xff1a; 当项目逐渐变得庞大起来&#xff0c;简单的 spring 框架可能就不够用了&#xff0c;所以就需要用到分布式架构&#xff0c;我们这里简单介绍一下 springcloud 以及 springcloud 需要依赖的一些组件 目录&#xff1a; 1、分布式简介 2、Eureka 注册中心 3、R…

什么样的人更适合创业?那类人创业更容易成功?

创业是一项充满风险和机遇的事业&#xff0c;成功的创业者需要具备一定的素质和能力。那么&#xff0c;什么样的人更适合创业&#xff1f;哪类人创业更容易成功呢&#xff1f;本文将为您介绍几个适合创业的人群和成功创业者的共同特点。 具有创新精神的人 创业需要不断创新&am…

产品大本营丨计讯物联智慧灯杆网关全系列

在随着智慧城市不断推进&#xff0c;数字信息基础设施已然成为重要驱动。面对新一轮的智慧城市建设&#xff0c;技术赋能结合机制创新&#xff0c;驱动着追城市中生产方式、生活方式、管理方式的变革以及生产要素的配置&#xff0c;全面提升城市的信息化水平。 在新型智慧城市的…

webpack指南(项目篇)——webpack在项目中的运用

系列文章目录 webpack指南&#xff08;基础篇&#xff09;——手把手教你配置webpack webpack指南&#xff08;优化篇&#xff09;——webpack项目优化 文章目录系列文章目录前言一、配置拆分二、修改启动命令三、定义环境变量四、配置路径别名总结前言 前面我们对webpack的基…

Baumer工业相机堡盟相机如何使用自动曝光功能(自动曝光优点和行业应用)(C++)

项目场景 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、计数和识别、运动分析和图像处理。 Baumer的万兆网相机拥有出色的图像处理性能&#xff0c;可以实时传输高分辨率图像。此外&#xff0c;该相机还具…

Microsoft Word RTF Font Table Heap Corruption - 漏洞解析(CVE-2023-21716)

写在最前 如果你是信息安全爱好者&#xff0c;如果你想考一些证书来提升自己的能力&#xff0c;那么欢迎大家来我的 Discord 频道 Northern Bay。邀请链接在这里&#xff1a; https://discord.gg/9XvvuFq9Wb我拥有 OSCP&#xff0c;OSEP&#xff0c;OSWE&#xff0c;OSED&…

每日学术速递3.10

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.RO 1.Diffusion Policy: Visuomotor Policy Learning via Action Diffusion 标题&#xff1a;扩散策略&#xff1a;通过动作扩散进行视觉运动策略学习 作者&#xff1a;Cheng Chi, Si…

一文解析ethtool 命令的使用

命令简介 ethtool命令用于查询和控制网络设备驱动程序和硬件设置&#xff0c;尤其是有线以太网设备&#xff0c;devname网卡的名称。网卡就像是交换机的一个端口&#xff0c;正常使用我们只是配置网卡IP地址等信息&#xff0c;网卡的速率、双工模式等我们并不关心。通过ethtoo…

3.7day05

二维数组&#xff1a;int arr[10] {1,2,3,5,6,7};{1,2,3,5,6,7};{1,2,3,5,6,7};{1,2,3,5,6,7};{1,2,3,5,6,7};定义语法&#xff1a;int arr[2][3] {{2, 5, 8},{7, 9 10}};int arr[3][5] {{2, 3, 54, 56, 7 }, {2, 67, 4, 35, 9}, {1, 4, 16, 3, 78}};打印&#xff1a;for(i …

【计算机体系结构-05】流水线冒险 (Pipeline Hazards)——控制冒险 (Control Hazards)

1. 流水线冒险 (Pipeline Hazards) 在流水线处理器中会有这样的情况&#xff0c;当前级流水线的指令可能会阻止下一条连续指令在流水线中预期的时钟周期内执行&#xff0c;这样的情况被称为流水线冒险 (Pipeline Hazards)。当发生流水线冒险后将会降低流水化所带来的理想加速比…

IDEA中自动书写setter插件

一般我们创建一个对象后&#xff0c;想要设置属性&#xff0c;是不是我们经常需要一个一个写&#xff0c;当属性很多的时候会非常麻烦&#xff0c;这个插件就可以解决这个问题&#xff1a;它可以一键生成该对象所有的setter方法 下载插件 选择需要设置属性的类名&#xff0c;a…

【Matlab】如何设置多个y轴

MTALAB提供了创建具有两个y轴的图&#xff0c;通过help yyaxis就能看到详细的使用方式。 但是如果要实现3个及以上y轴的图&#xff0c;就没有现成的公式使用了&#xff0c;如下图所示。 具体代码 % 数据准备 x10:0.01:10; y1sin(x1); x20:0.01:10; y2cos(x2); x30:0.01:10;…

C++:详解C++11 线程(一):MingGW 各版本区别及安装说明

MingGW 各版本区别一&#xff1a;MinGW、MinGW-w64 简介二&#xff1a;MinGW 各版本参数说明三&#xff1a;下载解压一&#xff1a;MinGW、MinGW-w64 简介 MinGW&#xff08;全称为 Minimalist GNU for Windows&#xff09;&#xff0c;它实际上是将经典的开源 C 语言编译器 G…

Serviceaccount

K8S鉴权 目录 K8S鉴权 什么是RBAC K8S中的RBAC 角色 角色绑定 主体&#xff08;subject&#xff09; 角色&#xff08;Role和ClusterRole&#xff09; 集群内置权限 cluster-admin admin edit view system开头的y用户 演示 参考 k8s集群相关所有的交互都通过apiserve…

Go 内置运算符 if for switch

算数运算符fmt.Println("103", 103) //103 13 fmt.Println("10-3", 10-3) //10-3 7 fmt.Println("10*3", 10*3) //10*3 30 //除法注意&#xff1a;如果运算的数都是整数&#xff0c;那么除后&#xff0c;去掉小数部分&#xff0c;保留整数部分 f…