当前位置：首页 > news >正文

HTML的最基础入门知识，从零开始逐步讲解，适合为后续爬虫技术打基础：

news 来源：原创 2025/6/16 7:30:54

一、HTML是什么？

二、最简HTML文件结构

三、必须掌握的5个基础标签

四、标签的嵌套规则

五、爬虫关注的关键属性

动手练习：创建你的第一个网页

七、学习爬虫前的准备

八、常见问题解答

一、HTML是什么？

定义：HTML（HyperText Markup Language）是用于创建网页的标记语言。
核心特点：
- 由一系列**标签（Tags）**组成，例如 <p> 表示段落。
- 浏览器会解析这些标签并渲染成你看到的网页。

二、最简HTML文件结构

<!DOCTYPE html>  <!-- 声明文档类型为HTML5 -->
<html>           <!-- 根标签，包裹整个页面 -->
<head>           <!-- 头部：存放元信息（标题、字符编码等） --><meta charset="UTF-8">  <!-- 定义字符编码为中文 --><title>我的第一个网页</title>  <!-- 网页标题（显示在浏览器标签页） -->
</head>
<body>           <!-- 主体：显示在页面上的内容 --><h1>欢迎！</h1><p>这是一个段落。</p>
</body>
</html>

保存为.html文件并用浏览器打开即可看到效果。

三、必须掌握的5个基础标签

标题标签：<h1>到<h6>（重要性递减）

<h1>主标题</h1>  <!-- 通常一个页面只用一次 -->
<h2>次级标题</h2>

段落标签：<p>

<p>这是一个段落。</p>

链接标签：<a>

<a href="https://www.example.com">点击这里</a>  <!-- href属性指向链接地址 -->

图片标签：<img>

<img src="cat.jpg" alt="一只猫">  <!-- src是图片路径，alt是替代文本（图片无法显示时出现） -->

换行标签：<br>

第一行<br>第二行  <!-- 强制换行（不需要闭合标签） -->

四、标签的嵌套规则

正确嵌套：标签必须按顺序闭合，不能交叉。

<p><strong>加粗的文字</strong></p>  <!-- 正确 -->
<p><strong>错误的示范</p></strong>  <!-- 错误！ -->

五、爬虫关注的关键属性

id属性：唯一标识一个元素（用于精准定位）

<div id="main-content">主要内容区域</div>

class属性：定义元素的类名（可重复使用）

<p class="text-red">红色文字</p>

href/src属性：链接或资源的地址（爬虫重点抓取目标）

<a href="detail.html">详情页</a>
<img src="images/logo.png">

动手练习：创建你的第一个网页

用记事本或VS Code新建一个文件，命名为 test.html。

2. 粘贴以下代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>爬虫练习页</title>
</head>
<body><h1>热门电影</h1><ul><li class="movie"><a href="/movie/1">肖申克的救赎</a></li><li class="movie"><a href="/movie/2">阿甘正传</a></li></ul><img src="poster.jpg" alt="电影海报">
</body>
</html>

用浏览器打开，观察效果。按 F12 打开开发者工具，点击元素查看HTML结构。

七、学习爬虫前的准备

理解开发者工具：
- 按 F12 打开，点击 Elements 标签查看网页HTML源码。
- 按 Ctrl+Shift+C 选择页面上的元素，自动定位到对应代码。
观察规律：
- 爬虫需要的数据（如电影名称、链接）通常包裹在特定标签和class中。
- 例如：上述练习中的电影名都在 <li class="movie"> 下的 <a> 标签里。