本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！
目录
前言
一、框架标签
作用：
语法：
属性：
二、字符实体
作用：
三、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>
