笔者在学习该课程后，对课程中的部分知识点进行总结梳理，给出自己的理解，并给他同学一些建议
前端
什么是前端：解决GUI人机交互问题
前端技术栈：HTML、CSS、JavaScript
需要关注问题：功能、美术、无障碍、安全、性能、兼容
前端是用户体验的重要保障
HTML
HTML：HyperText Markup Language（超文本标记语言）
超文本：图片、标题、链接、表格
标记语言：由标签（元素）组成的语言
标签举例：
<!DOCTYPE html> 指定渲染模式
<html lang="en"> </html> 根标签
<img src="1.jpg"> img标签 表示图片
src：属性名
"1.jpg"：属性值
语法要点：
标签和属性不区分大小写，推荐用小写（规范化）
空标签可以不闭合，如input
属性值推荐用双引号包裹
某些属性值可以省略，如required HTML被转化为DOM树
各类标签：
标题标签：h1-h6，对应一级标题-六级标题
<h2>二级标题</h2>
列表标签：
有序列表：列表项前默认带有序号
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
自定义列表
<dl>
<dt>1</dt>
<dd>1.1</dd>
<dd>1.2</dd>
<dt>2</dt>
<dd>2.1</dd>
<dd>2.2</dd>
</dl>
链接标签：
<a href="https://www.bytedance.com/" target="_blank">字节官网</a>
href：链接
target="_blank"：在新页面打开
字节官网：显示文字
多媒体标签：
img：图片
<img src="1.jpg" alt="">
audio：音频
<audio src="1.mp3" autoplay controls loop></audio>
video：视频
<video src="2.mp4" controls autoplay muted></video>
输入标签
<input type="range"> 输入范围
<textarea name="" id="" cols="30" rows="10"></textarea> 输入多行内容
单选标签：
<p>
<label>
<input type="radio" name="sport">1
</label>
<label>
<input type="radio" name="sport">2
</label>
</p>
下拉选择标签
<p>
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</p>
引用标签
块引用标签 blockquote
短引用标签 cite q
代码标签 code
强调标签 strong（重要） em（语气）
语义化
元素、属性、属性值都有含义
要求：开发者编写HTML时要遵循语义
如：有序列表用ol、无序列表用ul
lang属性表示内容的语言（浏览器自动翻译）
为什么要语义化：
- 开发者方便维护、修改页面；（代码可读性、可维护性）
- 浏览器展示页面；
- 搜索引擎提取关键词、排序（关键词出现在标题和正文的权重区别）；（搜索引擎优化）
- 屏幕阅读器，给盲人读页面内容（提升无障碍性）
引申思考：语义化可以提升AI工具（newbing）搜索时的准确性（道理与搜索引擎优化相同）
核心思想：传达内容，而不是样式
如何做到语义化：
- 了解标签和属性的含义；
- 思考哪个标签更适合描述这个内容；
- 不使用可视化工具生成代码
课程总结和建议
本课程介绍了前端的概念与HTML的相关内容，可以帮助入门的同学对自己将要学习的前端有一个清楚的认识，可以学习到HTML的部分内容，引导同学如何深入地学习HTML的其他内容
