Loading

Loading

html精通——读懂网页设计

本文章主要介绍 HTML语法 和 浏览器开发工具
可以帮助读者更好地理解爬虫。

只有读懂了HTML，我们才能看得懂网页结构，才有可能运用 Python 的其他模块去解析网页信息。

1.html的概念

HTML 语言是用来告知浏览器如何组织页面的标记语言。它不是一门编程语言，而是一种定义内容结构的语言。
HTML语言由HTML元素组成。
这些HTML元素可以使得不同的元素内容呈现出不同的网页显示效果。比如标题、段落、文本等不同形式，还可以显示为超链接，显示图片等。

2.html的元素

一个完整的 HTML 元素通常由：
①开始标签，
②元素内容，
③结束标签，
④属性（可选）构成。
eg:

<p>hello world!</p>

此处<p></p>的定义为paragraph，即段落。（开始标签与结束标签）

元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。如果写错不同标签之间的层次，html语言不会报错，但是显示效果会跟你预期不符或者失效。

以上就是元素基本构成方法：<开始标签>，元素内容，<结束标签>。

但除此之外，HTML还有一种特例的存在，因为并不是所有HTML元素都拥有开始标签和结束标签。

有一些元素它只有一个开始标签，我们管这种元素叫做空元素。

空元素典型：

<br>(换行)

这就是空元素，它不需要结束标签，也没有元素内容。一个开始标签就能定义一个空元素。

当一个HTML元素定义完成后，我们还可以给HTML元素设置附加信息 —— 属性。

  • 属性

    eg:<a>的超链接

    <a>元素的链接地址由href属性定义，属性的写法一般是以属性名=属性值成对出现：href="https://xxx"。（属性名=属性值）

    其中href为属性名，我们点击页面中元素内容所在位置就能跳转到 href 属性定义的链接。

来一段实例：

<html>
<head>
<meta charset="utf-8">
<title>Miya555的博客</title>
</head>
<body>
<h1>静夜思</h1>
<h2>李白 唐</h2>
<p>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</p>
</body>
</html>

上面的示例代码中，<meta>设置的是文本编码，<h1><h2>是大号标题，<title>是页面标签，<body>是文章主体。

同时<meta>元素也是一种空元素，所以只需要一个开始标签再配上属性就能完成定义。

  • 无序列表：<ul><li>

无序列表始于 <ul> 标签，无序列表中的每个列表项始于 <li>，每一个列表项都以</li>的结束标签收尾，最终列表结束时，也要为无序列表元素进行收尾</ul>。

  • 自定义列表 <dl><dt>

自定义列表以 <dl> 标签开始。

每个自定义列表项写进 <dt> 元素中。每个自定义列表项的注释则写进 <dd> 元素。

eg:

<dl>
<dt>李白</dt>
<dd>字太白，号青莲居士，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并 称为“李杜”。其人爽朗大方，爱饮酒作诗，喜交友。</dd>
<dt>杜甫</dt>
<dd>字子美，自号少陵野老，唐代伟大的现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。</dd>
</dl>

更多内容：

  • <div>元素

    <div>元素在HTML中其实没有特定含义，只是用来组合其它的 HTML 元素。

    HTML 文档的布局其实就像报纸期刊一样，也要有自己的内容布局

    在不使用 CSS 的情况下，它对内容或布局没有任何影响。

    我们可以通过设置id属性来区分不同的页面代码块

    像网站的页眉，我们就可将它的 id 命名为"header"；侧边栏的 id 命名为"nav"；主内容区域命名为"section"；页脚区域命名为"footer"。

    这样我们就可以通过 id 区分不同的<div>元素，更方便的查找、定位<div>元素，为<div>元素设置样式。

    除了 id属性 ， HTML 语言还提供了 class 属性允许我们为标签设定一个可以重复使用的标识。

    <div class="poems">
<h2>静夜思</h2>
<h3>李白（唐）</h3>
<p>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</p>
</div>
<div class="poems">
<h2>早发白帝城</h2>
<h3>李白（唐）</h3>
<p>朝辞白帝彩云间，千里江陵一日还。<br>两岸猿声啼不住，轻舟已过万重山。</p>
</div>
<div class="poems">
<h2>望庐山瀑布</h2>
<h3>李白（唐）</h3>
<p>日照香炉生紫烟，遥看瀑布挂前川。<br>飞流直下三千尺，疑是银河落九天。</p>
</div>

    运行结果如下：

image

不同之处在于，id属性用于标识唯一的元素，而class用于标识一系列的元素。

3. 浏览器开发工具

通过一行一行的检索 HTML 代码，定位网页元素，势必是一件耗时费力的事情。这时候我们就可以借助浏览器开发者工具的帮助。

大部分网络浏览器都包含一套强大的开发工具，这些工具可以轻松定位到当前加载的网页元素。

Windows用户可以在浏览器页面下按 Ctrl + Shift + I键唤出浏览器开发者工具，Mac 用户的快捷键为 Cmd + Opt + I。

如果浏览器没有反应的话可以试试 F12 键，这也是一个快捷键。

  • 如何使用指针定位元素

    我们以edge浏览器为例，打开浏览器开发工具，在右上角打开指针。

    8345cb23-e709-456b-833a-7a81d1e121cd

    然后鼠标移动到网页的各个位置，可以查看html源代码。

  • 搜索元素

    我们可以点击一下 Elements 栏，使用Ctrl+F（Windows系统）/Cmd+F(Mac系统)打开搜索框：

    然后输入页面内容，就可以定位到相应的源代码

    怎么样，是不是很简单？

posted @ 2025-08-11 12:41  Miya555  阅读(13)  评论(0)    收藏  举报