個人網頁中利用表單實現跳轉B站和QQ音樂搜索（仿百度搜索）

HTML利用標籤接入B站搜索功能

最近在製作個人網頁的時候，想在網站中插入兩個搜索接口，一個用來對接B站**搜索視頻，另一個用來對接QQ音樂，搜索音樂。
搜索了一下後發現有使用百度進行搜索的例子：
利用HTML中的form標籤進行驗證，很是慚愧，HTML5並沒有認真仔細的學習完，也沒有上手做個不錯的項目，於是重新學習了一下這個標籤的用法，
實現了一個大概這樣的效果：


首先對於bilibili，因爲B站提供了專門的搜索網站：bilibili搜索
然後我們進入網站後，嘗試搜索一下：

可以看到當我們在輸入刺客567時，鏈接變成了這樣，也就是多了all?/keyword=搜索內容，於是我嘗試着直接在鏈接處修改＝之後的值，發現確實跳轉到了我們搜索內容所在的界面
這樣就好辦了，form標籤的作用就是將我們的輸入內容發送到其服務器：
代碼如下：

<form action="https://search.bilibili.com/all?" method="get" target="_blank">
			       
			        <input id="bfind" type="text" name="keyword" />
			        <input type="submit"  value="搜索MV" />

其中form標籤中的

1. action指定了我們提交的地址。
2. method指d定了我們所需要的進行的活動。
   method有get和post兩個選項，其中get和post的區別在於提交數據的方式
3. 用post提交的數據，表單的數據不會出現在URL中，比較安全
4. 而get則會以?name1=value1&name2=value2的形式將其數據附加到URL的後面，而這也正是我們所需要的，所以我們定義name屬性爲keyword，url就會變爲我們之前所測試的內容

而對於QQ音樂的搜索，則出現了一些岔子，因爲在QQ音樂中，沒有專門的搜索網站(有一個，但是好像已經失效了qq音樂搜索）
所以我們打開其官網QQ音樂
通過搜索框，我們看到：
其URL中爲如上圖中所顯示的結果，
在y.qq.com/之後跟着的有portal/search.html,顯然這是搜索功能所在的文件位置，
然後再看後面的部分，發現我們的輸入部分在最後，
由此可看出來，其中的page=1等屬性都是用來指定搜索範圍的，於是我們嘗試着將除了最後一句的w=大千世界以外的這些表單數據去掉，
也就是在瀏覽框輸入

發現搜索同樣成功，由此，我們就只需要向這個URL提交我們所需要的數據，就可以完成想要的搜索操作啦。
代碼如下：

<form action="https://y.qq.com/portal/search.html?" method="get" target="_blank">	        
			        <input type="text"  name="w"   /> 
			        <input type="submit" value="搜索音樂"  />
			</form>

這樣就完成了我們想要的操作結果。
感謝閱讀，
希望這篇文章能對您有所幫助。