网页的简单结构_网页结构-优快云博客

本文介绍了如何使用谷歌浏览器的开发者工具分析网页结构，包括HTML元素如<div>、<ul>、<ol>、<li>、<h>、<a>、<p>、<span>和<img>的用法，以及如何通过PyCharm创建和编辑HTML文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页结构

1.查看网页源代码

这里要介绍的是一个谷歌浏览器自带的数据挖掘利器——开发者工具，它能直观的指示网页内容和源代码的对应关系，帮助我们更快捷的定位数据。

我们在谷歌浏览器中使用百度引擎搜索“豆瓣电影 Top 250”，然后按【F12】或按快捷键【Shift + Ctrl + I】，即可打开开发者工具，界面如图所示。
在这里插入图片描述

此时窗口上半部分显示的是网页，下半部分默认显示的是 “Elements” 选项卡，该选项中的内容就是网页的源代码。源代码中被 “<>” 括起来的文本称为 Elements 对象或网页元素，我们需要的数据就存放在这里面。
在这里插入图片描述

1.单击开发者工具左上角的元素选择工具，按钮的图标颜色变成蓝色，再将鼠标指针移动到窗口上半部分的任意网页元素上，该元素就会被突出显示。
2.单击元素
3.则窗口下半部分中的对应网页源代码就会被选中，同时元素选项工具的按钮图标颜色恢复灰色。上图就是所述操作。

2.网页结构的组成

先使用 PyCharm 编辑器创建一个 HTML 文档。启动 PyCharm ，点击新建，再点击 “HTML 文件" ，按【Enter】键，PyCharm 会自动补全文件的扩展名。

该 HTML 文档的内容并不是空白，而自动会生成一个网页源代码。
在这里插入图片描述

第一行：一个标准的网页声明，告诉浏览器用哪种规范来解读当前文档。

第二行：<html>标签，声明这是一个 HTML 文档。

第三行：<head>标签，定义文档的头部。

第四行：<meta>标签，描述文档的属性。

第五行：<title>标签，定义文档的标题。

第九行：<body>标签，定义文档的主体，包含文档的所有内容。

单击代码编辑区右方的浏览器图标，就能用对应的浏览器打开。

在这里插入图片描述

2.1 <div>标签

用于定义文档中的分隔区块或一个区域。它是一个块级元素，意味着它会在其前后创建新的行。<div>标签被广泛用于网页布局和样式设置。

在网页设计中，<div>标签经常被用来组织和格式化内容。例如，你可能有一个包含所有页面内容的<div>，然后在这个<div>内部，你可以创建更多的<div>来分隔出不同的区块，例如页眉、页脚、导航菜单等。

使用<div>标签的主要优势是它可以帮助你更好地控制和组织网页的结构。通过给<div>添加一个唯一的ID或类名，你可以使用CSS（级联样式表）来对特定的区块应用样式。此外，<div>还可以包含其他块级元素和行内元素，这使得它非常灵活和强大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<div id="header">
    
    <h1>这是一个一级标题</h1>
    
</div>
    
<div id="content">
    
    <p>这是一些示例文本</p>
    
</div>
</body>
</html>

会显示为：

这是一个一级标题

这是一些示例文本

当然我们还能输入很多这里就不一一说明了。

2.2 <ul>标签、<ol>标签和<li>标签

<ul>、<ol>和<li>是HTML中常用的标签，它们分别代表无序列表、有序列表和列表项。

1.<ul>标签：<ul>代表无序列表，其中的列表项通常使用<li>标签定义。无序列表的每个列表项前面通常会有一个小的点或者其它类型的标记。

<ul>  

  <li>苹果</li>  

  <li>香蕉</li>  

  <li>橘子</li>  

</ul>

会显示为：

苹果
香蕉
橘子

<ol>标签：<ol>代表有序列表，其中的列表项也通常使用<li>标签定义。有序列表的每个列表项前面通常会有一个数字或者字母等顺序标记。

<ol>  

  <li>苹果</li>  

  <li>香蕉</li>  

  <li>橘子</li>  

</ol>

会显示为：

苹果
香蕉
橘子

4.<li>标签：<li>标签定义了列表项，它通常被包含在<ul>或<ol>标签内。在HTML5中，<li>元素必须被包含在<ul>、<ol>或<menu>元素中，而不能单独使用。

<ul>  

  <li>苹果</li>  

  <li>香蕉</li>  

  <li>橘子</li>  

</ul>

苹果
香蕉
橘子

2.3 <h>标签

<h>标签是HTML语言里的一种标签，也是网页HTML中对文本标题所进行的着重强调的一种标签。从H1到H6，一共有六个级别的<h>标签，它们用于定义不同级别的标题。H1是最大的标题，通常用于主标题或者页面标题，而H6是最小的标题，通常用于细节或者次要信息。

<h1>这是一个一级标题</h1>

<h2>这是一个二级标题</h2>

<h3>这是一个三级标题</h3>

<h4>这是一个四级标题</h4>

<h5>这是一个五级标题</h5>

<h6>这是一个六级标题</h6>

会显示为：

这是一个一级标题

这是一个二级标题

这是一个三级标题

这是一个四级标题

这是一个五级标题

这是一个六级标题

2.4 <a>标签

标签是HTML中用于创建超链接的元素。超链接是网页之间以及网页与外部资源之间的链接关系，它允许用户从一个页面跳转到另一个页面，或者从页面跳转到外部资源，如PDF文件、图片或网站。

标签的基本语法是：

<a href="https://movie.douban.com/top250">豆瓣电影 Top 250</a>

会显示为：

豆瓣电影 Top 250

此时“豆瓣电影 Top 250”字样变为蓝色，点击一下即可跳转至 https://movie.douban.com/top250

其中，href属性指定了链接的目标地址，可以是网页的URL或相对路径。链接文本是用户在网页上看到的文本，当用户点击链接时，浏览器会跳转到指定的URL。

除了基本的href属性外，<a>标签还支持其他一些常用的属性，如：

target属性：用于指定链接在何处打开。默认情况下，链接在当前窗口打开，但可以通过设置target属性为_blank在新窗口打开链接。
rel属性：用于指定链接与当前文档之间的关系。常见的值包括noopener（打开没有opener的新窗口）、noreferrer（打开没有referrer的链接）等。
download属性：用于指示链接的资源应该被下载而不是被导航。当该属性存在时，浏览器会下载链接的资源而不是导航到它。

2.5 <p>标签

<p>标签是HTML中用于定义段落的元素。在网页中，<p>标签常用于将一段文本组织成段落。一个段落是由一个或多个完整的句子组成的文本块，通常会在视觉上与其他内容分开。

<p>这是第一段</p>

<p>这是第二段</p>

会显示为：

这是第一段

这是第二段

2.6 <span>标签

<span>标签是HTML中用于组合文档中的行内元素，以便使用样式来对它们进行格式化的元素。<span>标签本身并没有什么格式表现，需要对它应用样式才会有视觉上的变化。它通常不会引起换行，是一个容器，不会自动在页面上创建新的块级元素。

<span>这是第一个字段</span>

<span>这是第二个字段</span>

<span>这是第三个字段</span>

会显示为：

这是第一个字段这是第二个字段这是第三个字段

2.7 <img>标签

标签在HTML中用于插入图像。它是一个空元素，没有结束标签。标签有两个必需的属性：src和alt。src属性定义了图像的URL（即图像的位置），而alt属性用于提供图像的替代文本，以便在图像无法显示时呈现。

<img  alt="肖申克的救赎" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp" >

会显示为

在这里插入图片描述