題背景

如下是豆瓣的電影頁面，這次練習就是為了進行數據處理的beautifulsoup和pyquery的處理練習

本次練習主要是針對beautifulsoup和pyquery的兩個解析庫的使用，但在實際上的content獲取的時候就出錯了，在準備過程中，為了比較完整模擬瀏覽器獲取，所以構造了如下請求頭：

header = {
    'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
    'Accept-Encoding':'gzip, deflate, sdch, br',
    'Accept-Language':'zh-CN,zh;q=0.8',
    'User-Agent': 'Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3'
}

針對上面請求頭，進行代碼編輯如下：

from urllib import error
import requests
from loguru import logger


BASE_URL = 'https://movie.douban.com/'
requests.DEFAULT_RETRIES = 3
header = {
    'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
    'Accept-Encoding':'gzip, deflate, sdch, br',
    'Accept-Language':'zh-CN,zh;q=0.8',
    'User-Agent': 'Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3'
}


def scrapy_index():
    try:
        header['User-Agent'] = next(random_agent())
        logger.info(header)
        res = requests.get(BASE_URL, headers=header)
        if res.status_code == 200:
            logger.info(f'準備爬取豆瓣上正在上映電影信息：{res.url}')
            logger.info(res.reason)
            with open('content.html', 'wb') as f:
                f.write(res.content)
            with open('text.html', 'w') as f:
                f.write(res.text)
    except error.URLError as err:
        logger.error(err.reason)
    except error.HTTPError as err:
        logger.error(err.reason)
    except Exception as err:
        logger.error(traceback.print_exc())


if __name__ == '__main__':
    scrapy_index()

如上是簡單請求代碼，只針對請求后content和text的源碼保存，保存后源碼片段如下：

??@?_????z??,i?K?3~{,.????0??Ab??Cg!???
?Q?u?2F???????wUw?Ο?dV*B#%f).?a??d?<???:??1?m???z|??m?_???????Rp:g?
D??[
????C?s??????"??????????(?D???{????????XL??[?????????????????????oK?q?????????K7???8c????<?9?????Mw?a?f?
\?D?o5?Q?\???'*???"?Y????2?!?T??]????????Q??&.?????z??1|?Hz?????K????E??
3????/?aK?9N!?L??k???isO???+??T9??Y??????БJ???4?
i?

因為源碼較長，所以只是進行縮略版的展示，一開始還以為是wasm的一個支持，所以在瀏覽器上f12看了一下，但又不是這個類型的，回歸請求頭，一個一個字段進行注釋，然后請求來排除，比對結果，發現排除了Accept-Encoding的影響，結果就能得到往常需要的比較正經的html源碼了。

深入了解一下Accept-Encoding

Accept-Encoding是想瀏覽器的騎牛，表示客戶端支持的編碼類型，如下就有gzip, deflate, sdch, br幾種類型，這里的數據獲取，用的是requests，而請求后的響應response.content會自動解碼gzip和deflate類型為bytes類型數據，response.text會根據頭部編碼格式來解碼成str類型的數據，但，這里，不支持br類型?。?！

br是Brotli的加解密算法，要進行這個類型的頁面解析，需要使用brotli包，如下：

pip install brotli

然后修改一下，大致如下就行：

def scrapy_index():
    try:
        header['User-Agent'] = next(random_agent())
        logger.info(header)
        res = requests.get(BASE_URL, headers=header)
        if res.status_code == 200:
            logger.info(f'準備爬取豆瓣上正在上映電影信息：{res.url}')
            content, text = res.content, res.text
            if res.headers['Content-Encoding'] == 'br':
                content = brotli.decompress(content)
                text = brotli.decompress(text)
            with open('content.html', 'wb') as f:
                f.write(content)
            with open('text.html', 'w') as f:
                f.write(text)

嗯，理論上是這樣，然后就能實現解碼后的源碼獲取了，content和text都是一樣的源碼，只是數據類型不一樣而已，前者是bytes類型后者是str類型。不過意外的是，br后傳過來的content卻不是之前的加密后數據了，嗯，應該是筆者完整代碼中的user-Agent隨機生成的不一樣，所以得到的結果有點隨機。

另外的解決辦法

比較簡單，把br的編碼方式注釋掉就行。

、動態生成的html，樣式不生效

//html 布局
<view v-html="html">
  {{html}}
 </view>

//動態生成的元素
<view class="btngo" @tap="handleLink(`${ajaxlink}`)" >
  去報名
</view>	
//然后scoped的.btngo不生效，因為v-html創建的DOM內容不受作用域內的樣式影響，
//于是我們仍然可以通過深度作用選擇器來為他們設置樣式。
::v-deep {
  .btngo{
    display: inline-block;
    width: 200px;
    height: 44px;
    line-height: 44px;
    background-image: linear-gradient(180deg, #62AFFF 0%, #007BFF 100%);
  }
}

2、動態生成的html，點擊事件不生效

讓我醍醐灌頂的兩種解決方法，我選擇了第2種。

• 1、使用事件委托
• 2、綁定到外面不動態的元素上等著事件觸發

TML標簽

基本標簽

HTML頁面中內容是由HTML標簽組織起來的，如頁面中的文本、圖像、Flash視頻文件等都是通過HTML標簽合理地顯示在頁面的各個位置。

1 標題標簽<h1>～<h6>

標題標簽表示一段文字的標題（主題），并且支持多層次的內容結構。HTNL.共提供了6級標題，分別為<h1>～<h6>，并賦予了標題一定的外觀，所有標題字體加粗，其中山<h1>字號最大，<h6>字號最小.

2.圖像標簽<img>

在網頁中常用的圖像格式有4種，即JPG、GIF、BMP.PNG，其中使用比較多的是JPG、GIF和PNG，大多數瀏覽器都可以顯示這些圖像。

顯示圖像的語法：

< img src="ur1" alt="文本" width="x" height="y"/>

在語法中：

a、SrC屬性：表示顯示圖像的地址。

b、alt屬性：指定圖像的替代文本，當圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代顯示的文本，這樣，即使圖像無法顯示，用戶還可以看到網頁丟失的信息，所以為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有幫助的。

c、width屬性：表示圖像寬度.

d、height屬性：表示圖像高度。

3.段落標簽<p>

顧名思義，段落標簽表示將一段文字組成一系列段落內容，這樣做的目的是內容應用某些格式和布局，使各個段落的邏輯更清晰明了。在HTML文檔中，段落通過<p>標簽定義。段落標簽<p>表示段落的開始，</p >表示段落的結束。

4.換行標簽<br/>

在希望不產生一個新段落的情況下進行換行，則使用<br>標簽。<br>是一個空的HTML標簽，由于關閉標簽沒有任何意義，因此它沒有結束標簽。

注意：

使用<b>和<br>的結果一樣，在XHTML以及未來的HTML版本中，根據W3C規范，不允許使用沒有結束標簽的HTML元素，因此使用<br>頁面更規范，有更長遠的保障。

5.水平線標簽<hr/>

水平線標簽表示一條水平線，注意該標簽與<br>標簽一樣，沒有結束標簽，直接使用<hr/>表示標簽的開始和結束。

使用以上講解的基本標簽，就可以進行網頁內容排版了。