【Web前端HTML5&CSS3】03-字元實體與語義標籤

VectorX發表於2021-05-16

筆記來源：尚矽谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

字元實體與語義標籤

1. 字元實體

有些時候，在HTML中不能直接書寫一些特殊符號，如：

多個連續的空格（在網頁中編寫的多個空格預設情況會自動被瀏覽器解析為一個空格）
比如字母兩側的大於小於號（可能會被認為是標籤並解析）

如果我們需要在網頁中書寫這些特殊的符號，則需要使用html中的實體（轉義字元）實體的語法：&實體的名字;，如：

實體名稱	顯示結果	描述
` `		空格
`>`	>	大於號
`<`	<	小於號
`&`	&	與
`©`	©	版權
`®`	®	註冊商標
`™`	™	商標
`×`	×	乘號
`÷`	÷	除號
`¿`	¿	倒問號

更多的字元實體，可參考：HTML 字元實體、HTML ISO-8859-1 參考手冊

2. meta標籤

以京東網站為例，右鍵單擊，選擇檢視網頁原始碼

<meta charset="utf8" version='1'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東"/>

meta主要用於設定網頁中的一些後設資料，後設資料並不是給使用者看的

charset ：指定網頁的字符集
name ：指定的資料的名稱
- keywords：表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開
- description：表示網站的描述資訊
content ：指定的資料的內容，會作為搜尋結果的超連結上的文字顯示

開啟Zeal手冊（前端開發準備中做過介紹）

發現除了charset、name、content之外，還有一個叫http-equiv的屬性

If the http-equiv attribute is set, the <meta> element is a pragma directive, providing information equivalent to what can be given by a similarly-named HTTP header.

如果設定了http-equiv屬性，<meta>元素就是一個pragma指令，提供的資訊相當於一個類似名稱的HTTP頭所能提供的資訊。

點選http-equiv的連結，檢視其更詳細資訊。

content-security-policy：允許頁面作者為當前頁面定義一個內容策略。內容策略主要指定允許的伺服器來源和指令碼端點，這有助於防範跨站指令碼攻擊。
content-type：宣告文件的MIME型別和字元編碼。如果指定，content屬性必須有 "text/html; charset=utf-8 "的值。這相當於一個指定了charset屬性的<meta>元素，並對文件中的位置有同樣的限制。注意：只能在使用text/html的文件中使用，不能在使用XML MIME型別的文件中使用。
default-style：設定預設的CSS樣式表集的名稱。
x-ua-compatible：如果指定，內容屬性必須有 "IE=edge "的值。使用者代理被要求忽略這個pragma。
refresh：該指令指定頁面重新載入及重定向的方式
- 直到頁面應該被重新載入的秒數--只有當content屬性包含一個正整數時。
- 直到頁面重定向到另一個頁面的秒數--只有當內容屬性包含一個正整數，後面跟著字串';url='，以及一個有效的URL。

其中我們直接將Examples中的示例程式碼加入Demo.html中

<meta charset="utf-8">
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

對refresh進行測試，發現過了3秒鐘之後自動跳轉到了指定的網站

sxx2l-rwqq5

3. 語義標籤

在網頁中HTML專門用來負責網頁的結構所以在使用html標籤時，應該關注的是標籤的語義，而不是它的樣式

這裡先介紹幾個基本的語義標籤，還有些常用的標籤放在後面具體講解

	標籤	作用	描述
塊元素 Block Element	`<h1>` `<h2>` `<h3>` `<h4>` `<h5>` `<h6>`	標題	一共有六級標題從`h1` ~ `h6`重要性遞減，`h1`最重要，`h6`最不重要 h1在網頁中的重要性僅次於`title`標籤一般情況下一個頁面中只會有一個`h1` 一般情況下標題標籤只會使用到`h1` ～ `h3`，`h4` ～ `h6`很少用
	`<hgroup>`	標題組	多層次的標題。它將一組`<h1>` ～ `<h6>`元素分組
	`<p>`	段落	頁面中的一個段落。由空行或第一行縮排將相鄰的文字塊分開
	`<blockquote>`	短引文	用縮排表示所包含文字。可以用`cite`屬性表示引文來源，用`<cite>`元素表示來源的文字表述
行內元素 Inline Element	`<q>`	長引文	用一個簡短的內聯引號包圍文字。大多數瀏覽器通過在文字週圍加上引號來實現。該元素用於不需要段落分隔的短引文；
	`<br>`	換行
	`<em>`	強調	表示強調作用。`<em>`元素可以巢狀，每一級巢狀表示更高的強調程度 `<i>`元素效果與它相同，不過`<i>`不屬於語義標籤
	`<strong>`	重要	表示重要性、嚴肅性或緊迫性。瀏覽器通常以粗體字呈現內容 `<b>`元素效果與它相同，不過`<b>`不屬於語義標籤

舉例

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

效果

HTML5 提供的新語義元素有

標籤	作用	描述
`<header>`	頁首	介紹性的內容
`<footer>`	頁尾	通常包含有關作者的資訊、版權或檔案連結
`<nav>`	導航連結	可以是當前文件內的，也可以是到其他文件的。常見例子是選單、目錄和索引
`<main>`	文件主內容	中心主題直接相關或擴充套件的內容
`<article>`	文章	自成一體，獨立分發，可重複使用
`<section>`	文件中的節	沒有一個更具體的語義元素來代表
`<aside>`	頁面內容以外的內容	其內容與文件的主要內容只有間接的關係。經常以邊欄或撥出框的形式出現
`<mark>`	重要或強調的文字	為參考或記事目的而被標記或突出的文字，表明其相關性和重要性
`<summary>`	`<details>` 標題	為`<details>`指定一個摘要、標題或圖例。點選`<summary>`可以切換`<details>`開啟和關閉
`<details>`	使用者能夠檢視或隱藏的額外細節	其中的資訊只有被切換到 "開啟 "狀態時才可見。必須使用`<summary>`提供一個摘要或標籤
`<figure>`	自包含內容	獨立的內容，用`<figcaption>`元素指定一個可選的標題。比如圖示、圖表、照片、程式碼清單等
`<figcaption>`	`<figure>` 的標題	描述其父元素其餘內容的標題或圖例
`<time>`	定義日期/時間	可能包括`datetime`屬性，將日期翻譯成機器可讀的格式，以便獲得更好的搜尋引擎結果或自定義功能。如提醒

這些新語義標籤在視覺效果上基本上沒有什麼區別

4. 塊元素與行內元素

塊元素（block element）

在網頁中一般通過塊元素來對頁面進行佈局

行內元素（inline element）

行內元素主要用來包裹文字
一般情況下會在塊元素中放行內元素，而不會在行內元素中放塊元素
- 如<p>元素中不能放任何的塊元素，不過

5. 內容修正

瀏覽器在解析網頁時，會自動對網頁中不符合規範的內容進行修正，比如：

標籤寫在了根元素的外部
<p>元素中巢狀了塊元素
根元素中出現了除head和body以外的子元素

這個通過瀏覽器中的檢視網頁原始碼並不能看到效果，但是使用F12進行開發者除錯時是能夠看到上述幾種情況被修正的結果。

不過雖然瀏覽器能夠對不規範的頁面內容進行修正，還是不建議編寫不規範的程式碼，因為這對後期程式碼維護或團隊程式碼協作將是非常不好的後果和體驗。

6. 佈局標籤

結構化語義標籤

header表示網頁的頭部（頁首）
main表示網頁的主體部分（一個頁面中只會有一個main）
footer表示網頁的底部（頁尾）
nav表示網頁中的導航
aside和主體相關的其他內容（側邊欄）
article表示一個獨立的文章
section表示一個獨立的區塊，上邊的標籤都不能表示時使用section

HTML5 語義元素

div 塊元素，沒有任何的語義，就用來表示一個區塊。目前來講，div還是主要的佈局元素
span 行內元素，沒有任何的語義，一般用於在網頁中選中文字

7. 列表

在html中可以建立列表，html列表一共有三種：

有序列表，使用ol標籤來建立無序列表，使用li表示列表項

<ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
</ol>

無序列表，使用ul標籤來建立無序列表，使用li表示列表項

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese
                <ul>
                    <li>Sweet blue cheese</li>
                    <li>Sour blue cheese</li>
                </ul>
            </li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

可以看出，列表元素之間是可以互相巢狀的

定義列表，使用dl標籤來建立定義列表，使用dt表示定義的內容，使用dd來對內容進行解釋說明

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

8. 超連結

超連結可以讓我們從一個頁面跳轉到其他頁面，或者是當前頁面的其他的位置

使用a標籤來定義超連結，href屬性指定跳轉的目標路徑，值可以是一個外部網站的地址，也可以寫一個內部頁面的地址

超連結是也是一個行內元素，在a標籤中可以巢狀除它自身外的任何元素

外部地址

Linking to an absolute URL：連結一個絕對路徑
Linking to an email address：連結一個email地址
Linking to telephone numbers：連結電話號碼
Using the download attribute to save a <canvas> as a PNG：下載圖片

<ul>
  <li><a href="https://www.baidu.com">Website</a></li>
  <li><a href="mailto:example@outlook.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

效果

動畫2021-5-15

內部地址

當我們需要跳轉一個伺服器內部的頁面時，一般我們都會使用相對路徑，會以./或../開頭

./ 表示當前檔案所在目錄，可以省略不寫
../表示當前檔案所在目錄的上一級目錄

<a href="./test1.html">超連結1</a><br><a href="../test2.html">超連結2</a><br><a href="./test3/test3.html">超連結3</a><br><a href="../test4/test4.html">超連結4</a>

效果

動畫2021-5-11

新建頁面

target屬性，用來指定超連結開啟的位置可選值：

_self在當前頁面中開啟超連結，預設值
_blank在新建頁面中開啟超連結

<a href="./test1.html">超連結1——預設</a><br><a href="./test1.html" target="_self">超連結1——當前頁面</a><br><a href="./test1.html" target="_blank">超連結1——新建頁面</a><br>

動畫2021-5-10

錨點跳轉

可以使用javascript:void(0);來作為href的屬性，此時點選這個超連結什麼也不會發生

可以將#作為超連結的路徑的佔位符使用。

可以直接將超連結的href屬性設定為#，這樣點選超連結以後頁面不會發生跳轉，而是轉到當前頁面的頂部的位置

可以跳轉到頁面的指定位置（錨點），只需將href屬性設定#目標元素的id屬性值（唯一不重複）

<p> 漢皇重色思傾國，御宇多年求不得。</p><p> 楊家有女初長成，養在深閨人未識。 </p><p> 天生麗質難自棄，一朝選在君王側。 </p><p><a id="Anchor1" href="#Anchor2"> 回眸一笑百媚生，六宮粉黛無顏色。</a></p><p> 春寒賜浴華清池，溫泉水滑洗凝脂。 </p><p> 侍兒扶起嬌無力，始是新承恩澤時。 </p><p> 雲鬢花顏金步搖，芙蓉帳暖度春宵。 </p><p> 春宵苦短日高起，從此君王不早朝。 </p><p> 承歡侍宴無閒暇，春從春遊夜專夜。 </p><p><a id="Anchor2" href="#Anchor3"> 後宮佳麗三千人，三千寵愛在一身。</a></p><p> 金屋妝成嬌侍夜，玉樓宴罷醉和春。 </p><p> 姊妹弟兄皆列土，可憐光彩生門戶。 </p><p> 遂令天下父母心，不重生男重生女。 </p><p> 驪宮高處入青雲，仙樂風飄處處聞。 </p><p> 緩歌慢舞凝絲竹，盡日君王看不足。 </p><p> 漁陽鼙鼓動地來，驚破霓裳羽衣曲。 </p><p> 九重城闕煙塵生，千乘萬騎西南行。 </p><p> 翠華搖搖行復止，西出都門百餘里。 </p><p> 六軍不發無奈何，宛轉蛾眉馬前死。 </p><p> 花鈿委地無人收，翠翹金雀玉搔頭。 </p><p> 君王掩面救不得，回看血淚相和流。 </p><p> 黃埃散漫風蕭索，雲棧縈紆登劍閣。 </p><p> 峨嵋山下少人行，旌旗無光日色薄。 </p><p> 蜀江水碧蜀山青，聖主朝朝暮暮情。 </p><p> 行宮見月傷心色，夜雨聞鈴腸斷聲。 </p><p> 天旋地轉回龍馭，到此躊躇不能去。 </p><p> 馬嵬坡下泥土中，不見玉顏空死處。 </p><p> 君臣相顧盡沾衣，東望都門信馬歸。 </p><p> 歸來池苑皆依舊，太液芙蓉未央柳。 </p><p> 芙蓉如面柳如眉，對此如何不淚垂。 </p><p> 春風桃李花開夜，秋雨梧桐葉落時。 </p><p> 西宮南苑多秋草，落葉滿階紅不掃。 </p><p> 梨園弟子白髮新，椒房阿監青娥老。 </p><p> 夕殿螢飛思悄然，孤燈挑盡未成眠。 </p><p><a id="Anchor3" href="#Anchor4"> 遲遲鐘鼓初長夜，耿耿星河欲曙天。 </a></p><p> 鴛鴦瓦冷霜華重，翡翠衾寒誰與共。 </p><p> 悠悠生死別經年，魂魄不曾來入夢。 </p><p> 臨邛道士鴻都客，能以精誠致魂魄。 </p><p> 為感君王輾轉思，遂教方士殷勤覓。 </p><p> 排空馭氣奔如電，昇天入地求之遍。 </p><p> 上窮碧落下黃泉，兩處茫茫皆不見。 </p><p> 忽聞海上有仙山，山在虛無縹渺間。 </p><p> 樓閣玲瓏五雲起，其中綽約多仙子。 </p><p> 中有一人字太真，雪膚花貌參差是。 </p><p> 金闕西廂叩玉扃，轉教小玉報雙成。 </p><p> 聞道漢家天子使，九華帳裡夢魂驚。 </p><p> 攬衣推枕起徘徊，珠箔銀屏迤邐開。 </p><p> 雲鬢半偏新睡覺，花冠不整下堂來。 </p><p><a id="Anchor4" href="#Anchor5"> 風吹仙袂飄颻舉，猶似霓裳羽衣舞。 </a></p><p> 玉容寂寞淚闌干，梨花一枝春帶雨。 </p><p> 含情凝睇謝君王，一別音容兩渺茫。 </p><p> 昭陽殿裡恩愛絕，蓬萊宮中日月長。 </p><p> 回頭下望人寰處，不見長安見塵霧。 </p><p> 惟將舊物表深情，鈿合金釵寄將去。 </p><p> 釵留一股合一扇，釵擘黃金合分鈿。 </p><p> 但令心似金鈿堅，天上人間會相見。 </p><p> 臨別殷勤重寄詞，詞中有誓兩心知。 </p><p> 七月七日長生殿，夜半無人私語時。 </p><p><a id="Anchor5" href="#Anchor6"> 在天願作比翼鳥，在地願為連理枝。 </a></p><p> 天長地久有時盡，此恨綿綿無絕期。 </p><!-- Heading to link to --><a href="#">回到頂部</a>

效果

動畫2021-5-14

9. 圖片

圖片標籤用於向當前頁面中引入一個外部圖片

img標籤是一個自結束標籤，這種元素屬於替換元素（塊和行內元素之間，具有兩種元素的特點）

屬性

src：屬性指定的是外部圖片的路徑（路徑規則和超連結是一樣的）
alt：圖片的描述，這個描述預設情況下不會顯示，有些瀏覽器會在圖片無法載入時顯示，搜尋引擎會根據alt中的內容來識別圖片
width：圖片的寬度（單位是畫素）
height ：圖片的高度（單位是畫素）
寬度和高度中如果只修改了一個，則另一個會等比例縮放

注意

一般情況在pc端，不建議修改圖片的大小，需要多大的圖片就裁多大
但是在移動端，經常需要對圖片進行縮放（大圖縮小）

舉例

<img src="https://gitee.com/vectorx/ImageCloud/raw/master/img/20210513002416.png" alt="蒂姆·伯納斯·李爵士，全球資訊網的發明人"><img src="https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210514233853.gif" alt="結構、表現、行為">

效果

圖片格式

jpeg（jpg）

支援的顏色比較豐富
不支援透明效果
不支援動圖
一般用來顯示照片

gif

支援的顏色比較單一
支援簡單透明
支援動圖

png

支援的顏色豐富
支援複雜透明
不支援動圖
專為網頁而生

webp

這種格式是谷歌新推出的專門用來表示網頁中的圖片的一種格式
具備其他圖片格式的所有優點，而且檔案還特別的小
缺點：相容性不好

base64

將圖片使用base64編碼，這樣可以將圖片轉換為字元，通過字元的形式來引入圖片

<img width="300" src="data:image/png;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAxVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zda/P9qhPz/mKr9/7bC/f/Fz/7/ydL+/8HM/v+tu/3/jaH9/156/P8zV/z/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/z9h/P+gsP3/8fP+/////////////////////////////////////////////////+ru/v+Zqv3/PV/8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P9lgPz/6+/+///////////////////////////////////////////////////////////////////////s7/7/Y378/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/aoT8//r6/v///////////////////////v7+/+Po/v/R2f7/y9T+/9rg/v/3+f7////////////////////////////j6P7/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/0Zm/P/w8/7/////////////////5+v+/4ab/f9AYvz/MVX8/zFV/P8xVfz/MVX8/zVY/P9kf/z/tsP9//39/v////////////T2/v8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/sL79/////////////////87W/v8/Yfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/ZYD8//L0/v//////n7D9/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/0Bh/P/6+/7////////////v8v7/QmP8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/TWz8/3GJ/P8yVvz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/e5L8/////////////////5qr/f8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P+mtv3/////////////////XHn8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/7/L/f////////////////87Xfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/ydL+////////////+/v+/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P/Ezv7////////////9/f7/M1b8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/7G//f////////////////9HZ/z/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/kqX9/////////////////22H/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P9kf/z/////////////////pbX9/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zRX/P/v8v7////////////s7/7/Nln8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/6Ky/f////////////////+Inf3/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/RWb8//f4/v////////////H0/v9Kafz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/PV/8/1Jw/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/kKT9/////////////////9vh/v9DZPz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/1Fv/P/m6/7//v7+/3aO/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8zVvz/xM79/////////////////+fr/v9viPz/MVX8/zFV/P8xVfz/MVX8/zRX/P+Emf3/8/X+////////////xc/+/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P87Xfz/ztf+///////////////////////i5/7/sL79/5+w/f+ywP3/6u3+//////////////////////+uvP3/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P83Wvz/sL79//7+/v//////////////////////////////////////////////////////3OL+/0Vl/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/aYP8/9Pb/v//////////////////////////////////////9fb+/5yu/f84W/z/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/1d0/P+Spf3/t8T9/8fR/v/Dzv7/qrn9/3uS/P88Xvz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" />

圖片格式的選擇

圖片效果一樣的，選檔案小的
圖片效果不一樣的，選圖片效果好的
儘可能的兼顧和平衡圖片效果和檔案大小

10. 內聯格式

內聯框架iframe，用於向當前頁面中引入一個其他頁面，

src指定要引入的網頁的路徑
frameborder指定內聯框架的邊框

舉例

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

效果

11. 音視訊

音訊

audio標籤用來向頁面中引入一個外部的音訊檔案

音視訊檔案引入時，預設情況下不允許使用者自己控制播放停止

屬性：

controls是否允許使用者控制播放
autoplay音訊檔案是否自動播放
- 如果設定了autoplay，則音樂在開啟頁面時會自動播放
- 但是目前來講大部分瀏覽器都不會自動對音樂進行播放
loop音樂是否迴圈播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

source

除了通過src屬性來指定外部檔案的路徑以外，還可以通過<source>元素來指定檔案的路徑

<audio controls autoplay loop>    對不起，您的瀏覽器不支援播放音訊！請升級瀏覽器！	<source src="./source/audio.mp3">	<source src="./source/audio.ogg"></audio>

IE11下，能夠正常播放

IE8下，出現我們自定義的提示資訊

embed

IE8下不支援audio元素，但是可以使用 <embed> 元素在文件中的指定位置嵌入外部內容。

這個內容是由外部應用程式或其他互動內容的來源提供的，如瀏覽器外掛。

<embed src="./source/audio.mp3">

視訊

使用video標籤來向網頁中引入一個視訊，使用方式和audio基本上是一樣的

<video controls>    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">    <embed src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"></video>