1. 程式人生 > >HTML零基礎入門視訊課程——筆記

HTML零基礎入門視訊課程——筆記

視訊課程連結:http://edu.51cto.com/course/16023.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

​ 使用步驟:

  1. 新建檔案(Ctrl+N),然後儲存(Ctrl+S),指定字尾名為.html
  2. 編寫HTML程式碼
  3. 在瀏覽器中開啟檔案

​ 使用技巧:

  • 先儲存檔案再寫程式碼,否則沒有顏色提示

  • 建立一個資料夾,用於儲存所有網頁內容,並將資料夾拖放到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 頁面內的錨鏈接

​ 使用步驟:

  1. 定義錨點(標記)
<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列

​ 步驟:

  1. 在跨越的單元格中設定rowspan/colspan屬性

  2. 將被跨越的單元格刪除

注:必須要保證每行的實際列數是相同的,否則表格可能會出現錯亂

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 定義最佳值

​ 規則:

  1. 如果optimum大於high,則表示值越大越好

    當value大於high時為綠色

    當value在low和hight之間時為×××

    當value小於low時為紅色

  2. 如果optimum小於low,則表示值越小越好

    當value小於low時為綠色

    當value在low和high之間時為×××

    當value大於high時為紅色

  3. 如果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 在視訊載入前顯示的圖片