CSS基礎(chǔ)知識(shí)（五）CSS引入方式

、CSS引入方式（樣式表）

（一）內(nèi)部樣式表（嵌入式）

內(nèi)部樣式表是寫(xiě)到HTML頁(yè)面內(nèi)部的，將所有的CSS代碼抽離出來(lái)，單獨(dú)放到一個(gè)<style>標(biāo)簽
標(biāo)簽理論上可以放到HTML文檔的任何地方，但是一般會(huì)放在穩(wěn)當(dāng)?shù)?lt;head>標(biāo)簽中
此方式方便控制當(dāng)前整個(gè)頁(yè)面中的元素樣式設(shè)置
代碼結(jié)構(gòu)清晰，但并沒(méi)有實(shí)現(xiàn)結(jié)構(gòu)和樣式完全分離

（二）行內(nèi)樣式表（行內(nèi)式）

<div style="color:red font-size:12px;">

行內(nèi)樣式表是在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式，適用于修改簡(jiǎn)單的樣式
在雙引號(hào)中間，寫(xiě)法要符合CSS規(guī)范
可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
沒(méi)有體現(xiàn)出結(jié)構(gòu)與樣式相分離

（三）外部樣式表（鏈接式）

1.外部樣式表的核心是樣式單獨(dú)寫(xiě)到CSS文件中，之后把CSS文件引入到HTML頁(yè)面中使用
2.引入外部樣式表分為兩步：
a.新建一個(gè)后綴名為.css樣式文件，把所有css代碼都放到此文件中
b.在HTML頁(yè)面中，使用link標(biāo)簽引入這個(gè)標(biāo)簽

<link rel="stylesheet" href="css文件路徑">

家好，我是Python進(jìn)階者。

前言

前幾天雪球兄在Python交流群里分享了一個(gè)獲取B站視頻選集的Python代碼，小編覺(jué)得非常奈斯，這里整理成一篇小文章，分享給大家學(xué)習(xí)。

關(guān)于雪球兄，大家應(yīng)該都熟悉了，之前他寫(xiě)過(guò)Python實(shí)戰(zhàn)文章，好評(píng)如潮，沒(méi)來(lái)得及看的小伙伴，可以戳這里了：

盤(pán)點(diǎn)常用驗(yàn)證碼標(biāo)注和識(shí)別項(xiàng)目線上部署三種方式——VUE前端、Java后端和Python后端部署

Python項(xiàng)目實(shí)戰(zhàn)篇——常用驗(yàn)證碼標(biāo)注&識(shí)別(CNN神經(jīng)網(wǎng)絡(luò)模型訓(xùn)練/測(cè)試/部署)

Python項(xiàng)目實(shí)戰(zhàn)篇——常用驗(yàn)證碼標(biāo)注&識(shí)別(前端+后端實(shí)現(xiàn)高效率數(shù)據(jù)標(biāo)注)

Python項(xiàng)目實(shí)戰(zhàn)篇——常用驗(yàn)證碼標(biāo)注&識(shí)別(數(shù)據(jù)采集/預(yù)處理/字符圖切割）

Python項(xiàng)目實(shí)戰(zhàn)篇——常用驗(yàn)證碼標(biāo)注和識(shí)別(需求分析和實(shí)現(xiàn)思路)

之前也有給大家分享B站的一些文章，感興趣的話可以看看這個(gè)文章，Python網(wǎng)絡(luò)爬蟲(chóng)+數(shù)據(jù)分析：手把手教你用Python網(wǎng)絡(luò)爬蟲(chóng)獲取B站UP主10萬(wàn)條數(shù)據(jù)并用Pandas庫(kù)進(jìn)行趣味數(shù)據(jù)分析。

一、背景引入

一提到B站，第一印象就是視頻，相信很多小伙伴和我一樣，都想著去利用網(wǎng)絡(luò)爬蟲(chóng)技術(shù)獲取B站的視頻吧，但是B站視頻其實(shí)沒(méi)有那么好拿到的，關(guān)于B站的視頻獲取，之前有介紹通過(guò)you-get庫(kù)進(jìn)行實(shí)現(xiàn)，感興趣的小伙伴可以看這篇文章：You-Get 就是這么強(qiáng)勢(shì)！。

言歸正傳，經(jīng)常在B站上學(xué)習(xí)的小伙伴們可能經(jīng)常會(huì)遇到有的博主連載幾十個(gè)，甚至幾百個(gè)視頻，尤其像這種編程語(yǔ)言、課程、工具使用等連續(xù)的教程，就會(huì)出現(xiàn)選集系列，如下圖所示。

當(dāng)然這些選集的字段我們?nèi)庋垡彩强梢钥吹玫降摹Ｖ皇峭ㄟ^(guò)程序來(lái)實(shí)現(xiàn)的話，可能真沒(méi)有想象的那么簡(jiǎn)單。那么這篇文章的目標(biāo)呢，就是通過(guò)Python網(wǎng)絡(luò)爬蟲(chóng)技術(shù)，基于selenium庫(kù)，實(shí)現(xiàn)視頻選集的獲取。

二、具體實(shí)現(xiàn)

這篇文章我們用的庫(kù)是selenium，這個(gè)是一個(gè)用于模擬用戶登錄的庫(kù)，雖然給人的感覺(jué)是慢，但是在網(wǎng)絡(luò)爬蟲(chóng)領(lǐng)域，這個(gè)庫(kù)還是用的蠻多的，用它來(lái)模擬登錄、獲取數(shù)據(jù)屢試不爽。下面是實(shí)現(xiàn)視頻選集采集的所有代碼，歡迎大家親自動(dòng)手實(shí)踐。

# coding: utf-8
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait


class Item:
    page_num=""
    part=""
    duration=""


    def __init__(self, page_num, part, duration):
        self.page_num=page_num
        self.part=part
        self.duration=duration


    def get_second(self):
        str_list=self.duration.split(":")
        sum=0
        for i, item in enumerate(str_list):
            sum +=pow(60, len(str_list) - i - 1) * int(item)


        return sum


def get_bilili_page_items(url):
    options=webdriver.ChromeOptions()
    options.add_argument('--headless')  # 設(shè)置無(wú)界面
    options.add_experimental_option('excludeSwitches', ['enable-automation'])
    # options.add_experimental_option("prefs", {"profile.managed_default_content_settings.images": 2,
    #                                           "profile.managed_default_content_settings.flash": 0})


    browser=webdriver.Chrome(options=options)
    # browser=webdriver.PhantomJS()
    print("正在打開(kāi)網(wǎng)頁(yè)...")
    browser.get(url)


    print("等待網(wǎng)頁(yè)響應(yīng)...")
    # 需要等一下，直到頁(yè)面加載完成
    wait=WebDriverWait(browser, 10)
    wait.until(EC.visibility_of_element_located((By.XPATH, '//*[@class="list-box"]/li/a')))


    print("正在獲取網(wǎng)頁(yè)數(shù)據(jù)...")
    list=browser.find_elements_by_xpath('//*[@class="list-box"]/li')
    # print(list)
    itemList=[]


    second_sum=0


    # 2.循環(huán)遍歷出每一條搜索結(jié)果的標(biāo)題
    for t in list:
        # print("t text:",t.text)
        element=t.find_element_by_tag_name('a')
        # print("a text:",element.text)
        arr=element.text.split('\n')
        print(" ".join(arr))
        item=Item(arr[0], arr[1], arr[2])
        second_sum +=item.get_second()
        itemList.append(item)


    print("總數(shù)量:", len(itemList))
    # browser.page_source


    print("總時(shí)長(zhǎng)/分鐘:", round(second_sum / 60, 2))
    print("總時(shí)長(zhǎng)/小時(shí):", round(second_sum / 3600.0, 2))


    browser.close()


    return itemList




get_bilili_page_items("https://www.bilibili.com/video/BV1Eb411u7Fw")

這里用到的選擇器是xpath，利用視頻示例是B站的《高等數(shù)學(xué)》同濟(jì)版全程教學(xué)視頻（宋浩老師）視頻選集，大家如果想抓取其他視頻選集的話，只需要更改上述代碼的最后一行的URL鏈接即可。

三、常見(jiàn)問(wèn)題

在運(yùn)行過(guò)程中小伙伴們應(yīng)該會(huì)經(jīng)常遇到這個(gè)問(wèn)題，如下圖所示。

這個(gè)是因?yàn)楣雀栩?qū)動(dòng)版本問(wèn)題導(dǎo)致的，只需要根據(jù)提示，去下載對(duì)應(yīng)的驅(qū)動(dòng)版本即可，驅(qū)動(dòng)下載鏈接：

https://chromedriver.storage.googleapis.com/index.html

四、總結(jié)

我是Python進(jìn)階者。這篇文章主要給大家介紹了B站視頻選集內(nèi)容的獲取方法，基于網(wǎng)絡(luò)爬蟲(chóng)，通過(guò)selenium庫(kù)和xpath選擇器進(jìn)行實(shí)現(xiàn)，并且給大家例舉了常見(jiàn)問(wèn)題的處理方法。小伙伴們，快快用實(shí)踐一下吧！如果在學(xué)習(xí)過(guò)程中，有遇到任何問(wèn)題，歡迎加我好友，我拉你進(jìn)Python學(xué)習(xí)交流群共同探討學(xué)習(xí)。

在很多網(wǎng)站上都會(huì)使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標(biāo)簽。向網(wǎng)頁(yè)嵌入視頻可以使用 <video> 標(biāo)簽，而嵌入音頻可以使用 <audio> 標(biāo)簽。這兩個(gè)標(biāo)簽都是 HTML 5 中新增的標(biāo)簽，兩個(gè)標(biāo)簽中的屬性和方法也很類(lèi)似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂(lè)， video 元素用于定義視頻，如電影等。

向網(wǎng)頁(yè)中嵌入視頻

<video> 標(biāo)簽可以用于定義視頻，且提供了播放、暫停、音量控件來(lái)控制視頻。舉個(gè)例子，像我們俠課島網(wǎng)站上，課程視頻播放，就是通過(guò) <video> 標(biāo)簽來(lái)實(shí)現(xiàn)的。下面我們來(lái)看一下如何向網(wǎng)頁(yè)中嵌入一個(gè)視頻。

示例：

首先我們準(zhǔn)備一個(gè)視頻，例如一個(gè) test.mp4，然后使用 <video> 標(biāo)簽嵌入視頻，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在瀏覽器中的預(yù)覽效果：

從上圖中可以看到，我們通過(guò) <video> 標(biāo)簽成功向網(wǎng)頁(yè)中插入了一個(gè)視頻，其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯(cuò)誤，視頻是不能顯示的。然后我們通過(guò) width、height 屬性設(shè)置了視頻的寬度為 700px ，高度為 400px。

然后可以看到，視頻上還顯示了播放、調(diào)整音量等控件，當(dāng)我們點(diǎn)擊播放按鈕時(shí)，視頻就會(huì)開(kāi)始播放。這是因?yàn)槲覀冊(cè)O(shè)置了 controls 屬性，如果我們沒(méi)有設(shè)置這個(gè)屬性，視頻將會(huì)顯示一個(gè)靜止的畫(huà)面，并且不管怎么點(diǎn)擊都是沒(méi)有反應(yīng)的。大家可以試一下，不設(shè)置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。

video 元素中的常用屬性如下所示：

有些比較老的瀏覽器可能不支持 <video> 標(biāo)簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標(biāo)簽。

所以我們可以在 <video> 標(biāo)簽中放置文本內(nèi)容，這樣當(dāng)某個(gè)瀏覽器不支持此標(biāo)簽時(shí)，就可以顯示提示內(nèi)容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的瀏覽器不支持 video 標(biāo)簽
</video>

這樣用戶就會(huì)知道，是因?yàn)闉g覽器不支持所以加載視頻不成功，可以換一個(gè)瀏覽器。

視頻的格式

像我們平時(shí)看到的視頻格式有很多種，例如常見(jiàn)的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的視頻格式有下面三種：

這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標(biāo)簽。

source標(biāo)簽

<source> 標(biāo)簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。

例如 <video> 標(biāo)簽中可以包含多個(gè) <source> 標(biāo)簽，<source> 標(biāo)簽可以鏈接不同的視頻文件，瀏覽器將使用第一個(gè)可識(shí)別的格式。

示例：

例如我們插入的視頻播放器，帶有兩個(gè)源文件，瀏覽器會(huì)根據(jù)需要來(lái)選擇源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的瀏覽器不支持 video 標(biāo)簽
        </video>
    </body>
</html>

像上述代碼中，如果是 Safari 瀏覽器就會(huì)選擇第一個(gè)源文件，如果是 Firefox 瀏覽器則會(huì)選擇第二個(gè)源文件。

<source> 標(biāo)簽有三個(gè)屬性：

向網(wǎng)頁(yè)中嵌入音頻

向網(wǎng)頁(yè)中嵌入音頻可以使用 <audio> 標(biāo)簽，此標(biāo)簽的使用和 <video> 標(biāo)簽類(lèi)似。插入視頻是有畫(huà)面的，我們也可以調(diào)整視頻的寬和高等，而插入音頻是沒(méi)有畫(huà)面的。

audio 元素支持的格式和 video 元素也有一點(diǎn)區(qū)別：

示例：

例如我們插入一段音頻，在瀏覽器中可以看到，是沒(méi)有畫(huà)面的，只有聲音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的瀏覽器不支持 audio 標(biāo)簽
        </audio>
    </body>
</html>

在瀏覽器中的演示效果：

向網(wǎng)頁(yè)中嵌入音頻時(shí)，也可以通過(guò) <source> 標(biāo)簽來(lái)指定兩個(gè)源文件，<source> 標(biāo)簽允許規(guī)定兩個(gè)視頻或者音頻文件供瀏覽器根據(jù)它對(duì)媒體類(lèi)型或者編解碼器的支持進(jìn)行選擇。

audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒(méi)有 width、height 等屬性。

常用屬性如下所示：

總結(jié)

向網(wǎng)頁(yè)中嵌入視頻和音頻其實(shí)很簡(jiǎn)單，要注意 video 元素和 audio 元素支持的視頻、音頻格式類(lèi)型，如果插入的視頻格式不支持，則視頻或音頻不會(huì)顯示。

更多可以查看鏈接：https://www.9xkd.com/

在線咨詢

上一篇：TextArt圖片文字
下一篇：電信光貓超級(jí)用戶獲取改橋接模式+刪除TR69下發(fā)+屏

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS基礎(chǔ)知識(shí)（五）CSS引入方式

、CSS引入方式（樣式表）

（一）內(nèi)部樣式表（嵌入式）

（二）行內(nèi)樣式表（行內(nèi)式）

（三）外部樣式表（鏈接式）

家好，我是Python進(jìn)階者。

前言

前幾天雪球兄在Python交流群里分享了一個(gè)獲取B站視頻選集的Python代碼，小編覺(jué)得非常奈斯，這里整理成一篇小文章，分享給大家學(xué)習(xí)。

一、背景引入

二、具體實(shí)現(xiàn)

三、常見(jiàn)問(wèn)題

四、總結(jié)

向網(wǎng)頁(yè)中嵌入視頻

視頻的格式

source標(biāo)簽

向網(wǎng)頁(yè)中嵌入音頻

總結(jié)

您的項(xiàng)目需求