寮步网站建设seo关键词排名优化矩阵系统
目录
一、HTML是什么？
二、最简HTML文件结构
三、必须掌握的5个基础标签
四、标签的嵌套规则
五、爬虫关注的关键属性
动手练习：创建你的第一个网页
七、学习爬虫前的准备
八、常见问题解答
一、HTML是什么？
- 定义：HTML（HyperText Markup Language）是用于创建网页的标记语言。
- 核心特点：
- 由一系列**标签（Tags）**组成，例如
<p>表示段落。 - 浏览器会解析这些标签并渲染成你看到的网页。
- 由一系列**标签（Tags）**组成，例如
二、最简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>标签里。
八、常见问题解答
Q：为什么有些网页用浏览器看到的内容和爬虫抓取的不一样？ A：因为部分网页通过JavaScript动态加载数据，此时需用Selenium等工具模拟浏览器操作。
Q：爬虫需要学完所有HTML知识吗？ A：不需要！优先掌握标签、id/class属性、链接和数据的包裹规律即可。