Python爬虫基础——认识网页结构(各种标签的使用)

1、添加<div>标签的代码定义了两个区块的宽度和高度均为100px,边框的格式也相同,只是区块中显示的内容不同;

2、添加<ul>和<ol>标签分别用于定义无序列表和有序列表。<il>标签位于<ul>标签或<ol>标签之下,一个<li>标签表示列表中的一项。 无序列表中的<il>标签在网页中默认显示为小圆点格式的项目符号;有序列表中的<li>标签在网页中默认显示为数字符号;

3、<h>标签用于定义标题,它分为<h1>到<h6>共六个标签,<h1>字体号最大,<h6>字体号最小;

4、<a>标签:用于定义链接,在网页中单机链接,可以跳转到<a>标签中的href属性指定的页面地址;

5、<p>标签:用于定义段落,不设置样式时,一个<p>标签的内容在网页中显示为一行;

6、<span>标签:可以将网页元素放在一行中显示;

7、<img>标签:主要用于显示图片,scr属性指定图片的地址,alt属性指定图片无法正常加载是的替换文本。

python 复制代码
<!--
1、<!DOCTYPE html> 一个标准的网页声明,告诉浏览器用哪种规范来解读当前文档;
2、<html>标签,声明这是一个HTML文档
3、<head>标签,定义文档的头部
4、<meat>标签,描述文档的属性
5、<title>标签,定义文档的标题
6、<body>标签,定义文档主体,包含文档的所有内容
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
添加<div>标签的代码定义了两个区块的宽度和高度均为100px,边框的格式也相同,只是区块中显示的内容不同
-->
<div style="height: 100px;width: 100px;border: 5px solid #500">第一个div</div>
<div style="height: 100px;width: 100px;border: 5px solid #500">第二个div</div>
<!--
添加<ul>和<ol>标签分别用于定义无序列表和有序列表。<il>标签位于<ul>标签或<ol>标签之下,一个<li>标签表示列表中的一项。
无序列表中的<il>标签在网页中默认显示为小圆点格式的项目符号;有序列表中的<li>标签在网页中默认显示为数字符号
-->
<div>
    <ul>
        <li>第一条数据</li>
        <li>第二条数据</li>
        <li>第三条数据</li>
    </ul>
    <ol>
        <li>第一条数据</li>
        <li>第二条数据</li>
        <li>第三条数据</li>
    </ol>
</div>
<!--
<h>标签用于定义标题,它分为<h1>到<h6>共六个标签,<h1>字体号最大,<h6>字体号最小。
-->
    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
<!--
<a>标签:用于定义链接,在网页中单机链接,可以跳转到<a>标签中的href属性指定的页面地址。
-->
    <a href="https://www.baidu.com/">百度a标签</a>
<!--
<p>标签:用于定义段落,不设置样式时,一个<p>标签的内容在网页中显示为一行。
-->
    <p>这是第一个p标签</p>
    <p>这是第二个p标签</p>
<!--
<span>标签:可以将网页元素放在一行中显示。
-->
    <span>这是第一个span标签</span>
    <span>这是第二个span标签</span>
<!--
<img>标签:主要用于显示图片,scr属性指定图片的地址,alt属性指定图片无法正常加载是的替换文本。
-->
    <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="加载失败">
</body>
</html>

运行结果:

相关推荐
肥肠可耐的西西公主4 分钟前
前端(API)学习笔记(CLASS 4):进阶
笔记·学习
一只爱做笔记的码农5 分钟前
【Blazor】Blazor学习笔记
笔记·学习·c#·asp.net
胖胖胖胖胖虎14 分钟前
企业微信——智能表格学习
学习·企业微信
engchina15 分钟前
使用 `llama_index` 构建智能问答系统:多种文档切片方法的评估
python·openai·llama·代码优化·rag
跳河轻生的鱼36 分钟前
海思Linux-DEMO(1)-sample_venc(h265,h264)视频流文件的获取
linux·驱动开发·学习
回音谷1 小时前
【算法】克里金(Kriging)插值原理及Python应用
python·算法·插值
楠了个难1 小时前
以太网UDP协议栈实现(支持ARP、ICMP、UDP)--FPGA学习笔记26
学习·fpga开发·udp
迷路爸爸1801 小时前
深入理解 PyTorch 的 Dataset 和 DataLoader:构建高效数据管道
人工智能·pytorch·python
恸流失1 小时前
12.异常处理
开发语言·python
一弓虽1 小时前
java基础学习——java泛型
java·学习