1.1 Html基础 · 多多猫插件开发指南

## 1.1.1 在开发多多猫插件之前，我们需要了解一些基础知识，现在我们从html网页开始，因为我们需要从网页提取感兴趣的内容，从而制作成为插件一个简单的网页是这样的： ```html <html> <head> <title>我是标题</title> </head> <body> 我是段落内容 </body> </html> ``` 新建一个 `test.html`文件，把上面的内容粘贴保存，双击打开，效果如下： ![](https://box.kancloud.cn/d4828163b03556e1c7f83014738a68cf_403x213.png) 这就是一个最简单的网页演示，其中 `<html>` `<head>`等元素我们称之为 “标签” ，而且这些标签都是成对出现的，代表内容的开始与结束，而网页就是由这样的一对一对的，功能不同的标签组成的层级结构。上面出现的几个标签是网页最基本的元素： |标签|介绍 | |-------|--------------------| |html |这个是最外层标签| |head|这个是头部标签，里面是一些当前网页的简单描述，比如简介，标题之类的 |title |这个是网页标题| |body|这个是网页主体内容了，我们后面寻找书籍/漫画的链接，图片等，一般都在这个里面| <br> ## 1.1.2 上面简单讲述了网页的大概结构，接下来我们通过一个稍微复杂点的页面来介绍一些常用的标签 ```html <html> <head> <title>我是标题</title> </head> <body> <p>我是书籍封面</p> <a href="http://www.biquge.tw/1_1558/"> <img src="http://www.biquge.tw/BookFiles/BookImages/futianshi.jpg" width="120" height="150" /> </a> <a href="http://www.biquge.tw/1_1558/">点我读书</a> </body> </html> ``` 然后我们保存为test.html,双击打开如下： ![](https://box.kancloud.cn/2fa6de6e7284ce5339e5e913a243cf99_342x282.png) 这个时候我们点击图片或者点击`点我读书`，就会跳转到 `http://www.biquge.tw/1_1558/` 这个书籍页面，通过这个示例我们需要了解以下`两个标签: 1. <a href="http://www.biquge.tw/1_1558/"> 这个a标签的作用是用来指定点击后的跳转网址，在一对a标签之间的内容则是点击的内容，网址就是 href 属性指向的地址（比如书籍/漫画地址） 2. <img src="http://www.biquge.tw/BookFiles/BookImages/futianshi.jpg" > 这个img标签则是插入一张图片，图片的地址就是 src 属性指向的网址（比如封面或者漫画正文图片）从这个网页示例，我们也知道了标签存在所谓的`属性`值，比如`img`标签，它代表图片，而图片有长宽属性，所以示例中有`with`和`height`两个属性，如果不指定这两个属性，那么就是原图大小现在我们知道了这两个标签，就知道如何从一堆网页源码中找到书籍/漫画的链接和图片地址