本Pandas教程中，我們將詳細介紹如何使用Pandas read_html方法從HTML中獲取數據。首先，在最簡單的示例中，我們將使用Pandas從一個字符串讀取HTML。其次，我們將通過幾個示例來使用Pandas read_html從Wikipedia表格中獲取數據。在之前的一篇文章(關于Python中的探索性數據分析)中，我們也使用了Pandas從HTML表格中讀取數據。

在Python中導入數據

在開始學習Python和Pandas時，為了進行數據分析和可視化，我們通常從實踐導入數據開始。在之前的文章中，我們已經了解到我們可以直接在Python中輸入值(例如，從Python字典創建Pandas dataframe)。然而,通過從可用的源導入數據來獲取數據當然更為常見。這通常是通過從CSV文件或Excel文件中讀取數據來完成的。例如，要從一個.csv文件導入數據，我們可以使用Pandas read_csv方法。這里有一個如何使用該方法的快速的例子，但一定要查看有關該主題的博客文章以獲得更多信息。

現在，上面的方法只有在我們已經有了合適格式的數據(如csv或JSON)時才有用(請參閱關于如何使用Python和Pandas解析JSON文件的文章)。

我們大多數人會使用Wikipedia來了解我們感興趣的主題信息。此外，這些Wikipedia文章通常包含HTML表格。

要使用pandas在Python中獲得這些表格，我們可以將其剪切并粘貼到一個電子表單中，然后，例如使用read_excel將它們讀入Python。現在，這個任務當然可以用更少的步驟來完成:我們可以通過web抓取來對它進行自動化。一定要查看一下什么是web抓取。

先決條件

當然，這個Pandas讀取HTML教程將要求我們安裝Pandas及其依賴項。例如，我們可以使用pip來安裝Python包，比如Pandas，或者安裝一個Python發行版(例如，Anaconda、ActivePython)。下面是如何使用pip安裝Pandas: pip install pandas。

注意，如果出現消息說有一個更新版本的pip可用，請查看這篇有關如何升級pip的文章。注意，我們還需要安裝lxml或BeautifulSoup4，當然，這些包也可以使用pip來安裝: pip install lxml。

Pandas read_html 語法

下面是如何使用Pandas read_html從HTML表格中抓取數據的最簡單的語法:

現在我們已經知道了使用Pandas讀取HTML表格的簡單語法，接下來我們可以查看一些read_html示例。

Pandas read_html 示例1:

第一個示例是關于如何使用Pandas read_html方法的，我們將從一個字符串讀取HTML表格。

現在，我們得到的結果不是一個Pandas DataFrame，而是一個Python列表。也就是說，如果我們使用type函數，我們可以看到:

如果我們想得到該表格，我們可以使用列表的第一個索引(0)

Pandas read_html 示例 2:

在第二個Pandas read_html示例中，我們將從Wikipedia抓取數據。實際上，我們將得到蟒科蛇(也稱為蟒蛇)的HTML表格。

現在，我們得到了一個包含7個表(len(df))的列表。如果我們去Wikipedia頁面，我們可以看到第一個表是右邊的那個。然而，在本例中，我們可能對第二個表更感興趣。

Pandas read_html 示例 3:

在第三個示例中，我們將從瑞典的covid-19病例中讀取HTML表。這里，我們將使用read_html方法的一些附加參數。具體來說，我們將使用match參數。在此之后，我們還需要清洗數據，最后，我們將進行一些簡單的數據可視化操作。

使用Pandas read_html和匹配參數抓取數據：

如上圖所示，該表格的標題為:“瑞典各郡新增COVID-19病例”。現在，我們可以使用match參數并將其作為一個字符串輸入：

通過這種方式，我們只得到這個表，但它仍然是一個dataframes列表。現在，如上圖所示，在底部，我們有三個需要刪除的行。因此，我們要刪除最后三行。

使用Pandas iloc刪除最后的行

現在，我們將使用Pandas iloc刪除最后3行。注意，我們使用-3作為第二個參數(請確保你查看了這個Panda iloc教程，以獲得更多信息)。最后，我們還創建了這個dataframe的一個副本。

在下一節中，我們將學習如何將多索引列名更改為單個索引。

將多索引更改為單個索引并刪除不需要的字符

現在，我們要去掉多索引列。也就是說，我們將把2列索引(名稱)變成唯一的列名。這里，我們將使用DataFrame.columns 和 DataFrame.columns,get_level_values:

最后，正如你在“date”列中所看到的，我們使用Pandas read_html從WikiPedia表格抓取了一些注釋。接下來，我們將使用str.replace方法和一個正則表達式來刪除它們:

使用Pandas set_index更改索引

現在，我們繼續使用Pandas set_index將日期列變成索引。這樣一來，我們稍后就可以很容易地創建一個時間序列圖。

現在，為了能夠繪制這個時間序列圖，我們需要用0填充缺失的值，并將這些列的數據類型更改為numeric。這里我們也使用了apply方法。最后，我們使用cumsum方法來獲得列中每個新值累加后的值:

來自HTML表格的時間序列圖

在最后一個示例中，我們使用Pandas read_html獲取我們抓取的數據，并創建了一個時間序列圖。現在，我們還導入了matplotlib，這樣我們就可以改變Pandas圖例的標題的位置:

結論: 如何將HTML讀取到一個 Pandas DataFrame

在這個Pandas教程中，我們學習了如何使用Pandas read_html方法從HTML中抓取數據。此外，我們使用來自一篇Wikipedia文章的數據來創建了一個時間序列圖。最后，我們也可以通過參數index_col來使用Pandas read_html將' Date '列設置為索引列。

英文原文：https://www.marsja.se/how-to-use-pandas-read_html-to-scrape-data-from-html-tables
譯者：一瞬

前端開發中，經常需要獲取用戶輸入框中的內容。本文將介紹幾種常用的JavaScript方法來獲取輸入框內容，幫助您輕松應對獲取輸入框內容的需求。

方法一：使用 value 屬性

let input = document.getElementById("myInput");
let content = input.value;
console.log(content);

通過 getElementById() 方法獲取輸入框的 DOM 元素。

使用 value 屬性獲取輸入框的文本內容。

方法二：使用 querySelector() 方法

let input = document.querySelector("#myInput");
let content = input.value;
console.log(content);

使用 querySelector() 方法獲取輸入框的 DOM 元素。

使用 value 屬性獲取輸入框的文本內容。

方法三：使用 onchange 事件

let input = document.getElementById("myInput");
input.onchange = function() {
 let content = input.value;
 console.log(content);
}

通過 onchange 事件在輸入框內容變化時觸發函數。

在事件處理函數中，使用 value 屬性獲取輸入框的新文本內容。

方法四：使用 oninput 事件

let input = document.getElementById("myInput");
input.oninput = function() {
 let content = input.value;
 console.log(content);
}

通過 oninput 事件實時獲取輸入框內容的變化。

在事件處理函數中，使用 value 屬性獲取輸入框的新文本內容。

以上是JavaScript獲取輸入框內容的幾種常用方法。您可以根據具體的需求和場景選擇適合的方法。在實際開發中，根據頁面結構和交互需求選擇最合適的方式獲取輸入框內容，以提升用戶體驗。

注意：

本文僅供參考，請根據實際情況進行使用。

在獲取輸入框內容時，可以通過驗證和過濾確保數據的安全性。

對于多個輸入框，可以使用不同的方法來獲取各自的內容。

有下拉列表的表單

題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。

開始學習吧！

前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。

帶有下拉列表的表單

我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：

寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：

<select><option></option></select>

這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type = "image" src = "img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！

下面我們為多選表單添加名稱，示例代碼如下：

請選擇省份<select><option></option></select>

下面我們添加不同選項，示例代碼如下：

請選擇省份
  <select >
  <option >河北</option>
  <option >山東</option>
  <option >河南</option>
  <option >海南</option>
  <option >江蘇</option>
  <option >安徽</option>
  </select>
  <br><br>

為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：

請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。

頁面效果如下：

這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。

如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。

示例代碼如下：

請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option>
 <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>

頁面效果如圖：

多行文字輸入表單

我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。

而是多行輸入框，如圖：

使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：

<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>

這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。

下面我們為這個多行輸入框添加一些提示和限制。

首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。

第二，我們限制一下字數，使用maxlength（最大長度）屬性。

第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。

下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性！）

<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>

頁面效果如圖：

如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！

數據集表單

數據集表單實際上就是一個將不同選項或信息打包上傳的設置。

當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）

這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。

第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。

第三就是我們之前學到的那些標簽了。

示例代碼如下：

<fliedset> <legend>信息打包</legend> </fliedset>

下面我們使用這段代碼把form2打包一下吧。示例代碼如下：

<form>
  <fieldset><!--開始-->
  <legend>信息打包</legend><br>
  <!--標題-->興趣愛好：<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>讀書
  <input type = "checkbox" name = "hobby" value = "film"/>電影
  <input type = "checkbox" name = "hobby" value = "painting"/>繪畫
  <input type = "checkbox" name = "hobby" value = "music"/>音樂
  <br>
  最高學歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  請簡要描述您的劇本的情節<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--結尾-->
  <input type = "image" src = "img/示例圖片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

頁面效果如下：

今天的內容結束了！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作