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`兩個屬性，如果不指定這兩個屬性，那么就是原圖大小現在我們知道了這兩個標簽，就知道如何從一堆網頁源碼中找到書籍/漫畫的鏈接和圖片地址