HTML学习

学习内容来自风变~尤其是图片！

基本格式

<开始标签>，元素内容，</结束标签>
</> 结束标签比开始标签多了一个/

一些元素只有开始标签，我们称之为空元素

HTML中的换行符< br >

< br > 元素的作用是在文本中换行，类似于python中的转义字符\n
它也是一个空元素

HTML中的 < a >

(这里吐槽一个<> 的题外话，原来在< 后加一个空格，就不是这里编辑中的引用了）

< a > 用于在HTML中创建超链接

< a >元素的链接地址由href属性定义，属性的写法一般是以属性名=属性值成对出现：href=“https://wp.forchange.cn/”

HTML 中的href 属性

href = "https://wp.forchange.cn/"
# href 是属性名，后边的网址是属性值
# hepertext referance 的缩写，一般href的属性值一般都是某个页面的URL

其他属性

属性target="_blank"的功能就是让链接点开后能在新的标签页中打开

元素分析

< html >元素，< head>元素，< title>元素，< body>元素，< h1>元素，< h2>元素，< p>元素。

以及空元素：< meta>元素，< br>元素。

（这个图也来自可爱的风变编程，不可商用！仅能学习使用！！！）

< meta>元素在这里定义了该 HTML 文档的编码格式，具体的编码格式写在了它的"charset"属性中。它是空元素。

< title>元素能够设置页面标题

爬虫提取的信息通常也都在 < body> 元素中
在body>元素中，首先出现的是 < h1>和< h2>元素。HTML 语言一共提供了六个级别的标题元素，分别是：< h1>, < h2>…< h6>，分别对应各个级别的标题，就像 word 文档里的标题一样。

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

在HTML语言中还有对应的有序列表< ol>元素，它的作用是为列表项添加编号。

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 < dl> 标签开始。每个自定义列表项写进 < dt> 元素中。每个自定义列表项的注释则写进 < dd> 元素。

（图片来自风变）

列表的总结

自定义列表以 < dl> 标签开始，以< / dl >结束
每个自定义列表项以 < dt> 开始，以 </ dt >结束
每个自定义列表项的注释以 < dd> 开始，以</ dd>结束

查HTML相关的元素

https://www.w3school.com.cn/tags/html_ref_byfunc.asp

HTML语言负责的只是网页中的内容，具体的布局样式是由另一种叫做 CSS 的语言控制。通过它了解CSS https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web

< head>元素中通过< link>元素链接了 HTML 文档的 CSS 文件，设置了样式。
< link> 元素里面的具体内容不是我们爬虫关注的，只要知道这里链接了 CSS 文件即可，即爬虫不关注link

方法一：开发者工具，用指针来找

就用鼠标在你想要的位置晃，你需要的HTML代码就呈现了

方法二：不用指针，在搜索框搜索

在search里输入，找不到seach的情况下，点开左边小圆圈的more tools

爬虫所关注的

id属性

在 HTML 语言中，id 属性规定 HTML 元素的唯一的身份标识，就相当于元素的身份证号。任何 HTML 元素都可以设置id属性

<div id = 'header'>
<div id = 'footer'>
<div id = 'nav'> # 侧边栏

class属性

< div class = ''>

id 属性用于识别唯一的元素
class属性用于标识一系列的属性

开发者工具

win：ctrl+shift+i
右键 检查
点elements一栏

开发者工具一般会默认隐藏大部分嵌套的元素，仅保留部分外层标签。因此我们常常会看到这里面有一些三角箭头来收缩一些内容。

红圈部分点击是指针工具
（原来是灰色，点后呈现蓝色）

最后的总结