前端小白的学习之路(HTML5 一)

提示：一些HTML5新增的标签:语义化标签，,

目录

一、HTML5简介

二、语义化标签

1)新增语义化标签

2)示例

三、多媒体标签

1)图片标签

图片加载问题

1.当图片路径预设好时可以直接获取图片的信息

2.当在JS中设置图片时会因为图片还未加载而无法获取到图片

3.FileReader 对象   

         2)视频标签

1.属性

2.使用案例

3）音频标签 

1.属性

2.使用示例

---

一、HTML5简介

HTML5 是 HTML 的第五个主要版本，是用于构建网页和网页应用程序的标准。它是 Web 技术的一部分，旨在改善和增强现有的 HTML、CSS 和 JavaScript 技术，以满足当今 Web 应用程序的需求。

HTML5 的一些主要特性和改进包括：

1. 语义化标记：引入了更多的语义化元素（如

   、

2. 多媒体支持：引入了

3. 表单增强：引入了新的表单控件和属性，如、、等，使得表单的构建和验证更加简单和可靠。

4. 本地存储：引入了 Web 存储 API，使得网页应用程序可以在客户端存储数据，而不需要依赖于服务器。

5. Web Workers 和 WebSocket：引入了 Web Workers API，使得网页应用程序可以在后台执行多线程任务，从而提高了性能。另外，引入了 WebSocket API，使得网页应用程序可以实现实时双向通信，例如实时聊天和在线游戏。

6. 响应式设计：HTML5 促进了响应式 Web 设计的发展，使得网页可以在不同的设备和屏幕尺寸上提供一致的用户体验

      7. HTML5 仍处于完善之中

二、语义化标签

HTML5语义化标签指的是HTML5中新增的一些具有特定含义的标签，这些标签能够更清晰地描述文档的结构和内容，使得网页的结构对机器和开发者更加友好，也更有利于搜索引擎优化和可访问性。

1)新增语义化标签

1. ：用于定义文档或节的页眉，通常包含导航、logo 或标题等内容。

4. ：用于表示一个独立的、完整的文章或内容块。

5. ：用于定义文档中的节或区域，通常表示一个主题或相关内容的集合。

6. ：用于表示与页面内容相关但不是主要内容的部分，通常包含侧边栏、广告等内容。

7. ：用于表示文档的主要内容区域，通常包含页面的核心内容。

8. 和

2)示例

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

三、多媒体标签

1)图片标签

图片加载问题

1.当图片路径预设好时可以直接获取图片的信息

2.当在JS中设置图片时会因为图片还未加载而无法获取到图片

3.FileReader 对象

FileReader 对象是 JavaScript 中的一个内置对象，用于读取文件内容。它通常与文件输入元素 结合使用，允许用户选择本地文件，并在客户端对文件内容进行读取和处理

使用FileReader对象做一个图片预加载功能，可以实现异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容 。

代码：

FileReader 对象的文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

2)视频标签

1.属性

1.controls属性:使视频可以控制,如播放,暂停,下载等

2.muted属性:使视频默认静音

3.autoplay属性:使视频自动播放,前提是视频处于静音状态muted(媒体参与度高的情况下也可以有声音自动播放)

4.loop属性:循环播放

5.poster属性:视频封面，视频初始暂停状态时显示的图片，视频不能自动播放autoplay

6.preload属性:视频预加载模式,auto:浏览器自动加载;none:不进行任何的预加载;metadate:加载视频的基本信息，如视频时长;使用autoplay则忽略该属性

2.使用案例

        00:00:00
            
             / 
            
                00:00:00  
  
  

3）音频标签 

1.属性

1.controls属性:使音频可以控制,如播放,暂停,下载等

2.muted属性:使音频默认静音

3.autoplay属性:媒体参与度(一段事件内点击媒体的次数)高的情况下可以自动播放(一般不用)

4.loop属性:循环播放

5.preload属性:音频预加载模式,auto:浏览器自动加载;none:不进行任何的预加载;metadate:加载音频的基本信息，如音频时长

2.使用示例

          点击播放 暂停   00:00:00
        
        
            00:00:00