一、本堂课重点内容：
本次课程主要讲解了HTML基础知识，不仅包括传统的HTML标签及其属性以及使用场景，也介绍了一些HTML5标签的用法和特性，这些标签具有很多的使用场景，因此掌握它们是十分有必要的。
二、详细知识点介绍：
1、HTML中的概念
- HTML：HTML(超文本标记语言)，用于构建网⻚基本结构及其内容的标记语言。
- 超文本：文本中包含指向其他文本的链接。
- 标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML、XML、KML、Markdown等。
2、HTML结构元素
HTML文件是由若干个标签及标签中的内容组成的文档，每种标签都有不同的含义和用法。HTML元素标签不区分大小写。接下来介绍一些标签的功能和使用场景。
<!DOCTYPEhtml>：放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染⻚面；<html>：根元素，包含整个⻚面的内容；<head>：对用户不可⻅，其中包含例如面向搜索引擎的关键字、⻚面描述、字符编码声明、CSS样式等；<body>：该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等；<meta>: 该元素的属性定义了与文档相关联的名称/值对。其中：- charset属性定义了文档字符编码。
- http-equiv属性把 content 属性关联到 HTTP 头部，其属性值可以为expires、refresh、set-cookie等，分别表示网页到期时间、网页刷新间隔、发送请求时携带的cookie。
- content属性定义了与 http-equiv 或 name 属性相关的元信息。
- name属性定义一个 HTML文档的相关信息和一些性质，其属性值可以是keywords、description、viewport等，分别表示页面关键字、页面描述和网页显示区域等。
<link>: 该元素定义文档与外部资源的关系，其中：- href 规定被链接文档的位置
- rel 规定当前文档与被链接文档之间的关系
- type 规定被链接文档的 MIME 类型
<script>: 用于定义客户端脚本。需要说明的属性有两个- defer: 立即下载，下载时不影响HTML解析，但需要等HTML解析完毕后再加载js
- async: 立即下载，下载时不影响HTML解析，下载完毕后立即加载，加载过程中HTML会被打断
3、HTML语义化标签
HTML语义化标签的使用是为了根据内容结构，选择合适的标签，构建出便于开发者阅读的可维护性更高的代码，同时让机器更好地解析。
3.1 语义化区块标签
<header>: 展现介绍性信息。通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等，不能放在<footer>、<address>或者另一个<header>元素内部<nav>:在当前文档或其他文档中提供导航链接，如菜单、目录、索引等，常用来放置一些热⻔的链接。<article>:在当前文档或其他文档中提供导航链接，如菜单、目录、索引等，常用来放置一些热⻔的链接。<section>:按主题将内容分组，通常会有标题，通常出现在文档的大纲中<aside>:表示一个和其余⻚面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容，通常放在侧边栏，用于展示广告、tips、引用内容等。<footer>:表示最近一个章节的⻚脚•通常包含该章节作者、版权数据或者文档链接等信息•footer内的元素不属于章节内容，不包含在大纲中。<figure>/<figcaption>:<figure>包裹被独立引用的内容：图表、插图、代码等，通常会有一个标题<figcaption>表示与其相关联的图表的说明/标题，通常位于<figure>的第一个或最后一个
<blockquote>:块级引用元素，其中的<cite>属性表示该来源的url<dl>/<dt>/<dd>：用于描述一组键值对，通常用于元数据、术语定义等场景
3.2 语义化多媒体元素标签
<img>:为网页插入图片- src：图片路径
- alt：图像无法加载时所显示的提示性文字
- decoding：解码方式，主要有两种，同步和异步
- loading：图像是否延迟加载，若需要，则将其设置为
lazy
<picture>:为网页插入图片。与img不同的是，它通过包含零或多个<source>元素和一个<img>元素来为不同的显示/设备场景提供相应的图像版本。- media：依据的媒体条件渲染相应的图片，类似媒体查询
- type：MIME类型，根据浏览器支持性渲染相应的图片
<video>/<audio>:为网页插入视频/音频- src：嵌入视频文件路径
- controls：是否展示浏览器自带的控件，可以创建自定义控件
- autoplay：是否自动播放
- source：表示视频的可替代资源(不同格式、清晰度，读取失败或无法解码时可以依次尝试)
4、HTML解析
解析渲染该过程主要分为以下步骤：
- 解析HTML
- 构建DOM树
- DOM树与CSS样式进行附着构造呈现树
- 布局
- 绘制
三、实践练习例子：
第二部分的内容中，3.1中的<dl>/<dt>/<dd>使用方法需要注意
<dl>
<dt>我是键</dt>
<dd>我是值</dt>
</dl>
四、课后个人总结：
总的来说，这节课比较侧重于对HTML5知识的讲解，其实HTML5对于很多人来说并不是很难，只是需要我们记住很多语义化标签的使用场景和相关属性，需要记忆的东西比较多。本人之前也学习过一些HTML5的知识，但是在学习这门课之后，我还是对一些标签没什么印象，归根到底，学习HTML还是需要更多地去结合实际场景去体会，不能只是看完一遍觉得自己明白了就搁置一旁，而是要经常性地去巩固和使用。当然了，每次学完之后形成自己的感悟和笔记也是一种很好地学习方法。
