这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

一、前言

今天做作业的一路还是挺顺畅的，就是 typescript 搭配 React上啄食有些难搞，等活动结束了在专门整整这两货。今天就去翻了一下前几天的课程，做做笔记。

二、内容

主要就是讲讲一些HTML5 中常用的新标签

1. 新的媒体标签

(1) audio

用于定义音频内容

<audio src="./music.mp3" type="media/mp3"></audio>

• 用于定义音频类的内容
• 需要闭合
• type 可省略

(2) video

用于定义视频内容

<video src="./movie.mp4" type="media/mp4"></video>

• 用于定义视频类的内容
• 需要闭合
• type 可省略

(3) source

用于定义多媒体资源（video 和 audio）

<video>
    <source src="./movie.mp4"></source>
    <source src="./movie.mkv"></source>
</video>
<audio>
    <source src="./music.mp3"></source>
    <source src="./music.xxx"></source>
</audio>

• 定义多个媒体资源时，会根据兼容性进行两者之间选择
• 需要闭合
• type属性可省略

2. 新的表单元素

(1) input list 与 datalist

<input list="browsers">
<datalist>
    <option value="Internet Explorer">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
    <option value="Firefox">
</datalist>

• 会在input处形成一个下拉列表供用户选择，下拉列表的内容在datalist中，每一option就是一个选项
• 下拉选项的值即为option的value属性
• datalist需要闭合，option不需要闭合

3. 新的语义标签

<article><article>  <!--定义页面独立内容区域-->
<aside></aside>  <!--定义页面侧边栏内容-->
<header></header>  <!--定义页面的头部区域-->
<footer></footer>  <!--定义页面的尾部区域-->
<mark></mark>  <!--定义带记号的文本-->
<nav></nav>  <!--定义页面的导航栏区域-->
<progress></progress>  <!--定义一个进度条-->
<ruby><ruby>  <!--定义ruby注释-->
<time></time>  <!--定义日期或时间-->

• 皆属于语义标签，且都需要闭合

4. Canvas

canvas是一种新的图像绘制方式，是h5新标签

<canvas id="myCanvas" width="200" height="200"></canvas>

• canvas需要闭合标签
• 绘制canvas图片需要使用js

有什么问题希望大家可以在评论区指出，我及时纠正。

新人上路，还请多多包含。
我是MoonLight，一个初出茅庐的小前端。