本文為個人學習總結，如有謬誤歡迎指正。前端知識眾多，后續將繼續記錄其他知識點！
目錄
前言
一、框架標簽
作用：
語法：
屬性：
二、字符實體
作用：
三、html5新增標簽
語義化
狀態
列表
文本
表單控件
input的type屬性
多媒體與交互標簽
前言
例如：隨著人工智能的不斷發展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內容。隨著學習的深入，會遇到更多提升頁面功能與語義化的關鍵知識點 —— 比如能實現頁面內嵌與多內容切換的框架標簽，解決特殊字符顯示問題的字符實體，以及 HTML5 帶來的一系列增強型標簽。這些內容也是構建現代網頁的重要基石。本文將梳理框架標簽的用法、字符實體的作用，以及 HTML5 新增標簽在語義化、表單控件、多媒體交互等方面的應用。希望這份筆記能為同樣正在學習HTML的同學提供參考，也歡迎大家結合原課程視頻深入學習，共同進步。
網課鏈接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39
一、框架標簽
作用：
-
可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。
-
在網頁中嵌入廣告
- 與超鏈接或者表單的target配合（在本頁簽跳轉還是在新頁簽跳轉），展示不同內容
- 超鏈接—跳轉錨點；iframe使用name屬性與target屬性值相同
- 表單使用target屬性，iframe使用name屬性與target屬性值相同
語法：
<!-- 嵌入普通網頁，使用scr="網址" -->
<iframe scr="" width='' height='' frameborder=''></iframe>
<!-- 嵌入其他內容，使用scr="文件路徑" -->
<iframe scr="./..." width='' height='' frameborder=''></iframe>
<!-- 與超鏈接跳轉錨點（target）配合，在同一個網頁顯示跳轉的頁面 -->
<a href='https//www.taobao.com' target='taobao'>去淘寶</a>
<iframe name='taobao' frameborder='0' width='900' height='300'></iframe>
<!-- 與表單的target屬性配合， -->
<form action='#' target='container'><input type='text' name='keyword'>
</form>
<iframe name='container' frameboder='0' width='900' height='300' ></iframe>
屬性：
- name:框架名字，可以與target屬性配合
- width:框架的寬
- height:框架的高度
- frameborder：是否顯示邊框，值：0或者1.
注意：
iframe是塊級元素
二、字符實體
作用：
在 HTML 中，某些字符是預留的。如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）
- 例如在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。如需顯示小于號，我們必須這樣寫：< 或 <
- HTML 中的常用字符實體是不間斷空格( )。瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量，您需要使用 字符實體。
注意：
實體名稱對大小寫敏感！
三、html5新增標簽
語義化
狀態
列表
文本
表單控件
input的type屬性
email：郵箱輸入框，自帶格式驗證（必須包含?@）。tel：電話輸入框，移動端會彈出數字鍵盤。url：URL 輸入框，驗證需包含?http://?或?https://。number：數字輸入框，可通過?min/max?限制范圍，支持步進（step）。range：滑塊控件，通過?min/max/step?定義范圍。date/month/week：日期選擇控件（年 / 月 / 日、年月、年周）。color：顏色選擇器，返回十六進制顏色值。
<form><label for="email">郵箱：</label><input type="email" id="email" required><label for="age">年齡：</label><input type="number" id="age" min="0" max="120" step="1"><label for="volume">音量：</label><input type="range" id="volume" min="0" max="100" value="50"><label for="birthday">生日：</label><input type="date" id="birthday"><button type="submit">提交</button>
</form>
<datalist>：輸入建議列表
- 語義：為輸入框提供預設的建議選項，用戶輸入時會顯示匹配的選項。
- 用法：通過?
list?屬性將?<input>?與?<datalist>?關聯（list?值需與?<datalist>?的?id?一致）。
<label for="browser">選擇瀏覽器：</label>
<input type="text" id="browser" list="browsers"><datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari"><option value="Edge">
</datalist>
多媒體與交互標簽
HTML5 原生支持多媒體元素，無需依賴第三方插件（如 Flash），同時新增了提升用戶交互的標簽。
1.?<video>：視頻播放
- 語義：用于嵌入視頻內容，支持多種視頻格式（如 MP4、WebM）。
- 核心屬性：
src：視頻文件路徑；controls：顯示默認播放控件（播放 / 暫停、音量等）；autoplay：自動播放（部分瀏覽器需配合?muted?靜音）；loop：循環播放；poster：視頻加載前顯示的封面圖。
<video src="movie.mp4" controls poster="poster.jpg"width="600"
><!-- 瀏覽器不支持時顯示的文本 -->您的瀏覽器不支持視頻播放
</video><!-- 提供多種格式兼容不同瀏覽器 -->
<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm">您的瀏覽器不支持視頻播放
</video>
2.?<audio>：音頻播放
- 語義：用于嵌入音頻內容，支持 MP3、WAV、OGG 等格式。
- 核心屬性：與?
<video>?類似（src、controls、autoplay、loop?等）。
<audio src="music.mp3" controls loop>您的瀏覽器不支持音頻播放
</audio><!-- 多格式兼容 -->
<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg">您的瀏覽器不支持音頻播放
</audio>
3.?<canvas>：繪圖畫布
- 語義：提供一個矩形區域，可通過 JavaScript 動態繪制圖形（如線條、圖形、文本、圖像）。
- 應用場景：數據可視化（圖表）、小游戲、動態圖形生成等。
- 注意：本身不繪制內容，需通過?
getContext('2d')?獲取繪圖上下文后操作。
<canvas id="myCanvas" width="400" height="200"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 繪制一個紅色矩形ctx.fillStyle = 'red';ctx.fillRect(50, 50, 100, 80);// 繪制文本ctx.fillStyle = 'white';ctx.font = '20px Arial';ctx.fillText('Canvas', 70, 100);
</script>
