python爬虫入门（三）之HTML网页结构

一、什么是HTML

1、网页的三大技术要素：

HTML	定义网页的结构和信息（骨架血肉）
CSS	定义网页的样式（衣服）
JavaScript	定义用户和网页的交互逻辑（动作）

2、一个最简单的HTML：用<>包围HTML标签

<!DOCTYPE HTML> ：告知浏览器文件类型是HTML

<html>：起始标签，表示开始（HTML文档的根）

<body>：表示文档的主体内容

</html>：闭合标签，表示结束

一个网页demo：保存文件（后缀.html）后，把文件拖进浏览器，或者右键选择用浏览器打开

浏览器就会进行渲染

<!DOCTYPE HTML>
<html><body><h1>这是一个标题</h1><p>这是一段文字这是一段文字这是一段文字</p></body>
</html>

3、如何查看网页的HTML源码

（1）浏览器点击右键->显示网页源代码->可以看到当前网页的HTML源码

（2）右键->检查->窗口左上角的小箭头图标->点击页面上任意一个东西时，都可以看到它对应哪一个HTML元素

二、HTML常见标签

1、<!DOCTYPE html> 告知浏览器要渲染HTML，展示给用户
2、缩进一般是2个或者4个，通过缩进可以让层级关系更加清晰
3、head定义文档的头部，放关于网页本身的信息，eg: title（网页的标题：展示在浏览器选项卡上的标题）
4、最小是六级标题，七级标题就是正常的文本了
5、刷新后效果才能更新，也可以在编辑器上安装一些能实时更新的插件（不同编辑器的插件名称不同）
6、<p>一行</p> <p>另起一行</p> 从而实现换行或者用<br>(</br>)换行标签
7、<b>加粗字体</b>
8、<i>把文本变成斜体</i>
9、<u>给文字加下划线</u>
10、<img src=""> 给网页加图片，必填属性src，它的值（scr即source）是指向图片的链接或者路径图片比较大时，可以用width或者height属性去指定图片的宽度或者高度 px是像素 空格分开
11、<a href="">添加超链接</a> 必填属性href，它的值是要跳转的目标网页的URL地址一般在当前窗口打开，要想在新窗口打开网页，可以指定一个target属性，target="_blank"
12、div和span都可以当成其他元素的容器，div独占一块，一行只能放一个div；而span一行可以有多个整体缩进tab，取消缩进shift+tab
13、<ol></ol> 有序列表ordered list （1.2. ...）<li>列表里面每一项都用这个标签</li> list item<ul></ul> 无序列表unordered list （小圆点）
14、<table> </table> 定义了表格本身<thead></thead> 头部（可以省略）<tbody></tbody> 主体<tr>数据</tr> 表格的行，table row，每一行都写tr数据里面是单元格td，几个单元格就写几个td给表格加边框 给table加个border的属性，把值设为1（值越大，表格的边宽就越宽）
15、可以给任意元素加上class，来定义元素的类，类在结合CSS和Javascript的时候会很有用

三、实战演练

<!DOCTYPE html><html><head><title>这是一个网页的标题</title></head><body><div style="blackground-color: red;"> #把div里的HTML元素都加上一个红色的背景色<h1>我是一个一级标题</h1><h2>我是一个二级标题</h2><h6>我是一个六级标题</h6></div><p>这是一个文本段落这是<br>这是一个<i>文本段落</i>一个文本段落<br>这是<u>一个文本段落</u>这是一个文本段落</p><p>这是<span>一个段落文本这是</span>一个<b>文本</b>段落<span>这是一个段落文本</span>这是一个文本段落这是一个段落文本</p><a href="https://www.baidu.com" target="_blank">百度链接</a><img src="C:\Users\zzr\Desktop\img'\你的名字.jpg" width="500px"><ol><li>我是第一项</li><li>我是第二项</li></ol><uo><li>我是一项</li><li>我是另二项</li></uo><table border="1" class="data-table"><thead><tr><td>头部1</td><td>头部2</td><td>头部3</td></tr></thead><tbody><tr><td>111</td><td>111</td><td>111</td></tr><tr><td>111</td><td>111</td><td>111</td></tr><tr><td>111</td><td>111</td></tr></tbody></table></body></html>

代码所写的网页页面如下：