HTML零基礎入門視頻課程——筆記
HTML,主講:湯小洋
一、HTML簡介
1. HTML是什麽
? HTML:Hyper Text Markup Language超文本標簽(標記)語言
? 由各種標簽組成,用來制作網頁,告訴瀏覽器該如何顯示頁面
2. 作用
- 制作網頁,控制網頁和內容的顯示
- 插入圖片、音樂、視頻、動畫等多媒體
- 通過鏈接檢索信息
- 使用表單獲取用戶信息,實現交互
3. 版本
? W3C:World Wide Web Consortium [k?n?s?:ti?m]萬維網聯盟,制定Web技術相關標準和規範的組織,HTML就是W3C制定的標準
? 兩個版本:HTML4.01、HTML5
? 官網:http://w3school.com.cn/
? 參考:離線文檔W3CSchool_new.chm 或 w3school.zip
4. 後綴名
? HTML文件以.html或.htm為後綴
二、HTML文檔結構
1. 基本結構
1.1 簡介
- HTML標簽是由尖括號包圍的關鍵詞,如
<html>
,通常都是成對出現,如<html> </html>
- 以
<html>
為根標簽,包含<head>
頭部和<body>
- 頭部提供關於網頁的相關信息,如標題、文檔類型、字符編碼、關鍵字等摘要信息
- 主體部分提供網頁的具體內容,真正顯示在頁面中
- 合理的進行縮進;標簽名不區分大小寫,但一般都習慣全小寫
1.2 開發工具
? 記事本notepad、Sublime、Dreamweaver
? 使用步驟:
- 新建文件(Ctrl+N),然後保存(Ctrl+S),指定後綴名為.html
- 編寫HTML代碼
- 在瀏覽器中打開文件
? 使用技巧:
-
先保存文件再寫代碼,否則沒有顏色提示
-
創建一個文件夾,用於保存所有網頁內容,並將文件夾拖放到Sublime中,便於管理
-
顯示/隱藏側邊欄
方式1:View ——> Side Bar ——> Show Side Bar、Hide Side Bar
方式2:先按Ctrl+K,然後緊接著按B
-
顯示多欄
方式1:View ——> Layout ——> Single、Columns:2
方式2:按Ctrl+Alt+2
-
設置縮進的大小
臨時:點擊右下角的Tab Size ——> Tab Width:2
永久:Preferences ——> Settings ——> 添加如下內容:"tab_size":2
1.3 瀏覽器
? 常見瀏覽器:IE微軟、Chrome谷歌、Firefox火狐、Safari蘋果
? 瀏覽器的作用是讀取HTML文件,並以網頁的形式顯示
? 瀏覽器不會直接顯示HTML標簽,而是使用標簽來解釋頁面的內容
2. 標簽組成
2.1 標簽組成
? 一個完整的HTML標簽的組成:
<標簽名 屬性名="屬性值">內容</標簽名>
? 屬性值要用引號引起來,一般使用雙引號
? 註:從標簽的開始到標簽的結束,包括中間的內容,稱為HTML元素
2.2 標簽分類
? 根據標簽是否關閉,可以分為:關閉型、非關閉型
-
關閉型,有結束標簽
<title></title> <body></body> <h1></h1>
-
非關閉型,沒有結束標簽
<br> <hr> <meta>
? 根據標簽是否獨占一行,可以分為:塊級標簽、行級標簽
-
塊級標簽:顯示為塊狀,獨自占一行
<h1></h1>
-
行級標簽:在行內顯示,可以與其他內容在同一行顯示
<span></span>
3. 註釋
? 註釋在瀏覽器中不會顯示,但通過查看源代碼可以看到
<!-- 註釋內容 -->
4. 實體字符
? 也稱為特殊字符,用於顯示一些特殊符號,如:<、>、&、空格等
? 語法:
&實體字符名稱;
? 常用實體字符:
```html?
< < 小於號 less than
> > 大於號 greater than
空格 space 對於連續的空白字符(包含空格、縮進、換行等),在瀏覽器中顯示時只會顯示為一個空格
& & 與
" " 雙引號
© ? 版權符號 copyright
® ? 註冊符號 register
× × 關閉符號
? 註:實體字符名稱區分大小寫,即大小寫敏感
### 5. 文檔類型
? 在HTML文檔的第一行,使用<!DOCTYPE>聲明HTML文檔的類型
? 用來告訴瀏覽器頁面的文檔類型,簡單來說,用來指定使用的HTML版本規範
? 目前基本上都是使用HTML5:`<!DOCTYPE html>`
? 註:HTML 4.01中<!DOCTYPE>需要引用DTD,有三種類型的DTD:strict嚴格、transitional過渡、frameset框架
? Sublime中可以輸入html:4s按tab鍵,即可創建出HTML4聲明的文檔結構(嚴格類型)
## 三、常用標簽
### 1. 基本標簽
| 標簽 | 含義 | 說明 |
| ------------ | ---------------- | ---------------------------------------------- |
| br | 換行標簽 | 非關閉型 |
| p | 段落標簽 | 關閉型,塊級標簽,前後有明顯的間隔 |
| h1、h2....h6 | 標題標簽 | 按照h1到h6逐漸變小,塊級標簽,加粗顯示 |
| pre | 預格式化文本標簽 | 保留編碼時的格式 |
| div | 分區標簽 | 常作為容器來使用,一般用在頁面布局中,塊級標簽 |
| span | 範圍標簽 | 默認沒有任何效果,一般用來設置行內的特殊樣式 |
| ol、li | 有序列表 | 有順序的項目列表 |
| ul、li | 無序列表 | 無順序的項目列表 |
| dl、dt、dd | 定義列表 | 對術語、圖片等進行描述定義的列表 |
| hr | 水平線標簽 | 非關閉型,塊級標簽 |
| img | 圖像標簽 | 非關閉型,行級標簽 |
#### 1.1 有序列表
? ol:ordered list
? li:list item
? 默認使用阿拉伯數字從1開始標記,可以通過屬性進行修改
- type屬性:設置列表前的符號標記,取值:數字1(默認值)、字母a或A、羅馬數字i或I
- start屬性:設置起始值,值必須是數字
#### 1.2 無序列表
? ul:unordered list
? li:list item
? 默認使用實心圓作為符號標記,可以通過屬性進行修改
- type屬性:設置列表前的符號標記,取值:disc實心圓(默認值)、circle空心圓、square正方形、none不顯示符號
#### 1.3 定義列表
? dl:definition list
? dt:definition title
? dd:definition description
#### 1.4 水平線標簽
? hr:horizontal
? 常用屬性:
- color 顏色
兩種寫法:
? 顏色名稱,如red、green、blue、white、black....
? 16進制的RGB:Red、Green、Blue,用法:#RRGGBB,每個顏色的範圍是0-255,轉換為16進制是00-FF
? 如#FF00000紅、#00FF00綠、#0000FF藍、#FFFFFF白、#000000黑、#CCCCCC灰色、#FF7300橙色
- size 粗細
- width 寬度
兩種寫法:
? 像素,絕對值(固定值)
? 百分比,相對值,相對於父容器的寬度百分比
- align 對齊
取值:center(默認值)、left、right
#### 1.5 圖像標簽
? img:image
? 常見圖片格式:.jpg .png .bmp .gif
? 常用屬性:
- src:source 指定圖片的路徑,必須有
如果圖片和html頁面在同一個文件夾中,可以直接寫圖片名稱
習慣上,我們會把多個圖片統一放到特定文件夾中,如images,此時需要在圖片名稱前添加文件夾的名稱images/
- alt 當圖片無法顯示時的提示信息
- title 當鼠標停留在圖片上時顯示的提示信息
- width/height 設置圖片的寬和高
默認按圖片原尺寸顯示
如果只設置其中一個,則另一個按比例縮放
如果同時設置寬和高,可能會導致圖片變形
兩種寫法:
? 像素,絕對值(固定值)
? 百分比,相對值,相對於**父容器**的寬度百分比
### 2. 其他標簽
| 標簽 | 含義 | 說明 |
| ------- | -------------------- | ---------------------------------------------------- |
| i | 斜體顯示 | italic |
| em | 強調的內容 | 在瀏覽器中顯示時一般為斜體 |
| address | 地址 | 在瀏覽器中顯示時一般為斜體,塊級標簽 |
| b | 加粗顯示 | bold |
| strong | 強調的內容 | 在瀏覽器中顯示時一般為粗體 |
| del | 刪除線 | delete |
| ins | 下劃線 | |
| small | 相對當前字號減小一號 | |
| big | 相當當前字號增加一號 | |
| sub | 下標 | |
| sup | 上標 | |
| bdo | 設置文本方向 | 通過屬性dir="rtl"設置文本從右到左顯示(right to left) |
| abbr | 設置文字縮寫 | 當鼠標停留在文字上時顯示的提示信息 |
註:為了更好的語義化
### 3. 頭部標簽
- meta 定義網頁的摘要信息,如字符編碼、關鍵字、描述、作者等
- title 定義網頁的標題
- style 定義內部CSS樣式
- link 引用外部CSS樣式文件
- script 定義或引用腳本
- base 定義基礎路徑,修改文件的相對路徑參照
默認以當前頁面所在位置為相對路徑的參照,使用base時則以base標簽的href屬性作為參照
### 4. 標簽嵌套
? 標簽不能瞎嵌套,如以下嵌套就是錯誤的,p標簽中不能嵌套div標簽
```html
<p>
<div>world</div>
</p>
? 瀏覽器渲染後顯示的頁面代碼與編碼時可能會有所不同
? Chrome瀏覽器的開發者工具
? 用來幫助開發人員查看和調試頁面,其它瀏覽器也有類似的工具,如Firefox的Firebug
? 如何打開:
- 在頁面中右擊——>檢查/查看元素/審查元素
- 按F12
? 常用工具:
- Elements:從瀏覽器的角度查看頁面,瀏覽器渲染頁面時的HTML、CSS、DOM等
- Console:控制臺,顯示各種警告和錯誤信息
- Network:查看網絡請求信息,瀏覽器向服務器請求了哪些資源、資源的大小以及加載資源花費的時間
四、超鏈接
1. 簡介
? 使用超鏈接可以從一個頁面跳轉到另一個頁面,實現頁面間的導航
? 當把鼠標移動到超鏈接上時,鼠標箭頭會變成一只小手
? 超鏈接的類型有三種:
- 普通鏈接/頁面間鏈接,跳轉到另一個頁面
- 錨鏈接,跳轉到錨點
- 功能性鏈接,實現特殊功能
2. 基本用法
? 使用a標簽創建超鏈接
? 語法:
<a href="鏈接地址" target="鏈接打開位置">鏈接文本或圖像</a>
? 常用屬性:
- href 鏈接地址/路徑,必須的
- target 鏈接打開的位置,取值:
_self(自身、當前,默認值)、_blank(空白、新的)、_parent(父層框架)、_top(頂層框架)、自定義
? 路徑分類:
-
相對路徑
相對於當前文件的路徑
如果鏈接目標和當前頁面文件在同一個文件夾,可以直接寫名稱
如果不在同一個文件夾中,則需要指定相對路徑
?
.
表示當前位置?
..
表示上一級位置 -
絕對路徑
以根開始的路徑
D:/software/dd.html
http://bbs.itany.com/forum.php?mod=viewthread&tid=2268
3. 錨鏈接
3.1 簡介
? 點擊鏈接後跳轉到指定的位置(錨點anchor)
? 錨鏈接的分類:
- 頁面內的錨鏈接
- 頁面間的錨鏈接
3.2 頁面內的錨鏈接
? 使用步驟:
- 定義錨點(標記)
<a name="錨點名稱">目標位置</a>
? 2. 鏈接錨點
<a href="#錨點名稱">當前位置</a>
3.3 頁面間的錨鏈接
<a href="目標頁面#錨點名稱">當前位置</a>
4 功能性鏈接
<a href="images/heihei.gif">點擊此處下載圖片</a>
<a href="mailto:[email protected]">聯系我們</a>
<a href="javascript:alert(‘膽子不小!‘)">點我試試</a>
5. URL
5.1 簡介
? URL:Uniform Resource Locator 統一資源定位符,用來定位資源所在位置,最常見的就是網址
http://bbs.itany.com/forum.php?mod=viewthread&tid=2266
ftp://ftp.itany.com/code/day02/day02.pdf
file://E:/Software
5.2 組成
http://www.baidu.com:8080/java/html/a.html?name=tom&age=21#abc
? 一個完整的URL由8個部分組成:
-
協議 protocol,如:
? http 超文本傳輸協議,用來訪問Web網站
? ftp 文件傳輸協議,用來訪問服務器上的文件,實現文件的上傳下載
? file 文件協議,用來訪問本地文件
-
主機名 hostname,服務器的地址,如:bbs.itany.com、ftp.itany.com
-
端口 port,位於主機名的後面,使用冒號:隔開
不同的協議有不同的默認端口,如:http 80、ftp 21
如果使用的是默認端口,則端口可以省略
如果使用的不是默認端口,則端口不能省略
-
路徑 path 目標文件所在的路徑結構,如:/java/html
-
資源 resource 要訪問的目標文件,如a.html
-
查詢字符串 query string,也稱為參數
在資源後面使用?開頭的一組名稱/值
名稱和值之間以=隔開,多個之間以&隔開,如:?name=tom&age=21
-
錨點 anchor,在資源後面使用#開頭的文本,如:#abc
- 身份認證 authentication,指定身份信息,如:ftp://wbs17083:[email protected]/
五、表格
1. 簡介
? 表格是一個規則的行列結構,每個表格由若幹行組成,每行由若幹單元格組成。
? table、row、column
2. 基本結構
2.1 table標簽
? 用來定義表格
? 常用屬性:
- border 邊框,默認為0
- width/height 寬度/高度
- align 水平對齊,取值:left、center、right
- bordercolor 邊框顏色
- bgcolor 背景顏色
- background 背景圖片
- cellspacing 間距,單元格與單元格之間的距離
- cellpadding 邊距,單元格內容與邊界之間的距離
2.2 tr標簽
? 用來定義行,table row
? 常用屬性:
- align 水平對齊,取值:left、center、right
- valign 垂直對齊,取值:top、middle、bottom
- bgcolor 背景顏色
- background 背景圖片
2.3 td標簽
? 用來定義單元格,table data
? 常用屬性:align、valign、bgcolor、background
? 註:表格必須由行組成,行必須由單元格組成,數據必須放到單元格td中
3. 合並單元格
? 也稱為表格的跨行跨列
? 兩個屬性:
-
rowspan
設置單元格所跨的行數,如rowspan=2,表示跨越2行
-
colspan
設置單元格所跨的列數,如 colspan=4,表示跨越4列
? 步驟:
-
在跨越的單元格中設置rowspan/colspan屬性
- 將被跨越的單元格刪除
? 註:必須要保證每行的實際列數是相同的,否則表格可能會出現錯亂
4. 高級標簽
4.1 caption標簽
? 表格的標題
4.2 thead標簽
? 表格的頭部 table head
4.3 tbody標簽
? 表格的主體 table body
? 註:瀏覽器會自動為表格添加tbody
4.4 tfoot標簽
? 表格的腳部 table foot
4.5 th標簽
? 表格的頭部標題 table head title
? 一般用在thead中,設置頭部的標題,替代td標簽,與td的區別在於:加粗和居中對齊
六、表單
1. 簡介
? 表單是一個包含若幹表單元素的區域,用於獲取不同類型的用戶信息
? 表單元素是允許用戶在表單中輸入信息的元素,如:文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2. 基本結構
2.1 表單語法
<form action="表單提交地址" method="提交方式">
多個表單元素
</form>
2.2 form標簽
? 用來定義表單,可以包含多個表單元素
? 常用屬性:
-
action 提交數據給誰處理,默認為當前頁面
-
method 提交數據的方式,取值:get (默認值)、post
get和post的區別:
? get:以查詢字符串形式提交、地址欄能看到、長度有限制、不安全
? post:以表單數據組形式提交、地址欄中看不到、長度無限制、安全
? 實際開發中,一般都使用post
- enctype 提交數據的編碼,默認為application/x-www-form-urlencoded,上傳文件時要改為multipart/form-data
3. 普通表單元素
? 大多數表單元素都是使用input標簽,通過type屬性設置表單元素的類型
<input type="表單元素類型">
表單元素類型 | 含義 | 說明 |
---|---|---|
text | 單行文本框 | 省略不時寫默認就是text |
password | 密碼框 | 輸入時以點號顯示,安全 |
radio | 單選按鈕 | 只能選擇其中的一個 |
checkbox | 復選框 | 可以同時選擇多個 |
submit | 提交按鈕 | 提交表單數據 |
reset | 重置按鈕 | 重置表單元素的初始值 |
image | 圖像按鈕 | 可以使用圖片作為按鈕,也具有提交的功能 |
button | 普通按鈕 | 默認無功能 |
file | 文件選擇器 | 選擇要上傳的文件 |
hidden | 隱藏域 | 在頁面上不顯示,但會提交,可以用來存儲數據 |
3.1 單行文本框
? 常用屬性:
-
name 名稱,很重要,如果沒有name,則該表單元素的數據不會被提交
-
value 初始值
-
size 寬度
-
maxlength 最大字符數,默認沒有限制
-
readonly 只讀,readonly="readonly",可簡寫為readonly,即只寫屬性名
-
disabled 禁用,完全不能用
註:readonly和disabled區別:readonly的數據會提交,而disabled的數據不會提交
表單元素被提交的兩個條件:1. 有name屬性 2.非disabled
3.2 單選按鈕
? 常用屬性:
- name 名稱,多個radio的name屬性值必須相同,才能實現單選(互斥)
- value 值
- checked 是否選中,兩種狀態:選中、未選中
3.3 復選框
? 常用屬性和radio類似
3.4 文件選擇器
? 常用屬性:
-
name 名稱
-
accept 設置可選的文件類型,用來限制上傳的文件類型
使用MIME格式字符串對資源類型進行限制
常用MIME類型:
? 純文本:text/html、text/xml、text/plain
? 格式文本:application/rtf、application/pdf、application/msword、application/json
? 圖像:image/jpeg、image/png、image/gif
? 音頻:audio/mpeg、audio/ogg、audio/x-wav
? 視頻:video/x-msvideo、video/mp4、video/quicktime
註:可以通過類似
image/*
來匹配所有圖像文件
4. 特殊表單元素
表單元素 | 含義 | 說明 |
---|---|---|
select | 下拉列表 | |
option | 列表選項 | |
optgroup | 選項組 | 用來對option進行分組 |
textarea | 文本域/多行文本框 | 用來創建多行文本框 |
4.1 下拉列表
? select常用屬性:
-
name 名稱
-
size 行數,同時顯示多個選項
-
multiple 允許同時選擇多個選項
- disabled 禁用
? option常用屬性:
-
value 選項值,如果省略value,則默認使用option的文本內容作為value
- selected 設置默認選中項
? optgroup常用屬性:
- label 分組的標題
4.2 文本域
? 常用屬性:
- name 名稱
- rows 行數
- cols 寬度
? 註:在textarea中會保留編碼時的格式
5. 其他表單元素
5.1 label標簽
? 為表單元素提供標簽,當選中label標簽中的文本內容時會自動將焦點切換到與之關聯的表單元素
? 常用屬性:
- for 必須將該屬性值設置為與關聯表單元素的id屬性相同
? 註:幾乎所有標簽都具有id屬性,且id值必須唯一
5.2 button標簽
? 也表示按鈕,與input的按鈕類似
? 語法:
<button type="按鈕類型">按鈕文本或圖像</button>
? 常用屬性:
- type 按鈕的類型,取值:submit(默認值)、reset、button
5.3 fieldset和legend標簽
? fieldset標簽,對表單元素進行分組
? legend標簽,為分組添加標題
七、內嵌框架
1. 簡介
? 使用iframe可以在一個頁面中引用另一個頁面,實現復用,靈活
? 註:框架集frameset在HTML5中已經不支持,了解
2. 基本用法
? 語法:
<iframe src="" width="" height=""></iframe>
? 常用屬性:
- src 引用的頁面
- width/height 寬度/高度,像素或百分比
- frameborder 是否顯示邊框,取值:yes(1)、no(0)
- scrolling 是否顯示滾動條,取值:yes、no、auto
- name 為框架定義名稱
3. 在框架中打開鏈接
<iframe name="itany"></iframe>
<a href="" target="itany"></a>
八、HTML5簡介
1. 概念
? W3C於1999.12發布 HTML4.01標準
? W3C於2014.10發布HTML5標準
2. 特點
- 取消了過時的標簽,如font、center等,它們僅用於展現外觀
- 增加了一些更具有語義化的標簽,如header、footer、aside等
- 增加了一些新功能標簽,如audio、video、canvas等
- 增加了一些表單控件,如email、date、time、url、search等
- 可以直接在瀏覽器中繪畫(canvas),無需flash
- 增加了本地存儲的支持
3. 兼容性
? 網站:http://caniuse.com/
? 提供了各瀏覽器版本對於HTML5和CSS3規範的支持度
九、HTML5新增內容
1. 結構相關標簽
? 用來進行頁面結構布局,本身無任何特殊樣式,需要使用CSS進行樣式設置
- article 定義一個獨立的內容,完整的文章
- section 定義文檔的章節、段落
- header 文章的頭部、頁眉或標題
- footer 文章的底部、頁腳或腳註
- aside 定義側邊欄
- figure 圖片區域
- figcaption為圖片區域定義標題
- nav 定義導航菜單
? 註:結構標簽只是表明各部分的角色,並無實際外面樣式,與普通的div類似
2. 語義相關標簽
2.1 mark標簽
? 標註,用來突出顯示文本,默認添加×××背景
2.2 time標簽
? 定義日期時間,便於搜索引擎智能查找
? 常用屬性:
- datetime 提供標準XML格式日期(yyyy-MM-ddTHH:mm:ss.SSS)
2.3 details和summary標簽
? 默認顯示summary中的內容,點擊後顯示details中的內容
? 註:並不是所有瀏覽器都兼容,Chrome、Opera支持,Firefox不支持
2.4 meter標簽
? 計數儀,表示度量
? 常用屬性:
- max 定義最大值,默認為1
- min 定義最小值,默認為0
- value 定義當前值
- high 定義限定為高的值
- low 定義限定為低的值
- optimum 定義最佳值
? 規則:
-
如果optimum大於high,則表示值越大越好
當value大於high時為綠色
當value在low和hight之間時為×××
當value小於low時為紅色
-
如果optimum小於low,則表示值越小越好
當value小於low時為綠色
當value在low和high之間時為×××
當value大於high時為紅色
-
如果optimum介於low和high之間,則表示值在low和high之間最好
當value在low和high之間時為綠色,否則為×××
2.5 progress標簽
? 進度條,表示運行中的進度
? 常用屬性:
- max 定義完成的值
- value 定義當前值
3. 表單相關
3.1 新增表單元素
? 新增以下type類型:
- email 接收email
- url 接收URL
- tel 接收電話號碼,目前僅在移動設備有效
- search 搜索文本框
- number/range 接收數字/數字滑塊,包含min、max、step屬性
- date/month/week/time/datetime/datetime-local 日期時間選擇器(兼容性不好)
- color 顏色拾取
? 作用:
- 具有格式校驗的功能
- 可以和移動設備的虛擬鍵盤類型相關聯(需要通過Web服務器訪問)
3.2 新增表單屬性
? 新增以下表單屬性,form標簽的屬性:
- autocomplete 是否啟用表單的自動完成功能,取值:on(默認值)、off
- novalidate 提交表單時不進行驗證,默認會進行表單驗證
3.3 新增表單元素屬性
? 新增以下表單元素屬性,input/select/textarea等標簽的屬性:
- placeholder 提示文字
- required 是否必填
- autocomplete 是否啟用該表單元素的自動完成功能
- autofocus 設置初始焦點元素
- pattern 使用正則表達式(RegExp,後面會詳細講解)進行數據驗證
- list 使文本元素具有下拉功能,需要配合datalist和option標簽一起使用
- form 可以將表單元素寫在form標簽外面,然後通過該屬性來關聯到指定的表單
- form重寫屬性,如formaction、frommethod等,可以重寫form標簽的屬性
4. 多媒體相關
4.1 audio標簽
? 在頁面中插入音頻,不同瀏覽器對音頻格式的支持不一樣
? audio標簽常用屬性:
-
src 音頻文件的來源
-
autoplay 是否自動播放,默認不自動播放
-
controls 是否顯示控制面板,默認不顯示
-
loop 是否循環播放
-
muted 是否靜音
-
preload 是否預加載,取值:none不預加載、auto預加載整個視頻(默認)、metadata只預加載元數據
如果設置了autoplay屬性,則該屬性無意義
? 可以結合source標簽使用,指定多個音頻文件,瀏覽器會檢測並使用第一個可用的音頻文件
? source標簽常用屬性:
- src 音頻文件的來源
- type 音頻文件的類型,如audio/mp3、audio/ogg等,可以省略
4.2 video標簽
? 在頁面中插入視頻,不同瀏覽器對視頻格式的支持不一樣
? 用法與audio標簽基本相同,增加屬性:
- width/height 視頻播放器的尺寸
- poster 在視頻加載前顯示的圖片
HTML零基礎入門視頻課程——筆記