这是我参与「第四届青训营 」笔记创作活动的的第1天，记录一下今天的上课内容。
一、本堂课重点内容
- 什么是前端，以及前端开发应该关注哪些方面
- 什么是HTML，HTML的基本语法以及常见标签
- 什么是语义化，语义化有什么好处以及如何语义化
二、详细知识点介绍
1. 什么是前端
使用Web技术栈解决跨终端场景下的人机交互问题
Web技术栈包括：
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
使用网络协议与服务器端进行通信
2. 前端开发的关注点
功能、性能、美观、兼容性、无障碍、安全...
3. 什么是HTML
HyperText Markup Language（超文本标记语言）
- 超文本：包含图片、标题、链接、表格等
- 标记语言：使用标签表示页面内容，如：
<img src="photo.jpg"/>，由标签名、属性名及属性值组成
HTML文件基本结构：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
浏览器会将HTML解析成DOM树
DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，因此对于HTML文档的处理也可以通过对DOM树的操作实现。利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
4. HTML语法
- 标签和属性名不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐使用双引号包裹
- 某些属性的属性值可以省略
5. 常见HTML标签
- 文本：
- 标题（
h1-h6）、段落（p） - 块引用（
blockquote）、短引用（cite）、代码（code） - 加粗文本（
strong）、斜体文本（em）
- 标题（
- 列表：
- 有序列表（
ol）和无序列表（ul），对应的列表项为li - 定义列表（
dl），列表项的标题为dt，描述内容为dd
- 有序列表（
- 链接：
a标签，通过href属性指定跳转地址，通过target属性指定跳转行为，为_blank时在新标签页中打开 - 媒体：
- 图片（
img） - 音频（
audio），可以通过指定controls属性显示控制器 - 视频（
video）
- 图片（
- 输入：
- 单行输入框（
input）：type="text"（默认）：文本框type="range"：滑块type="number"：数字type="date"：日期选择
- 输入多行文本（
textarea） - 选择：
input的type属性值为radio时为单选，为checkbox时为多选- 下拉选择框（
select），选项为option
- 单行输入框（
- 内容划分：
6. 什么是语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
7. 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化（SEO）
- 提升无障碍性
8. 如何语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 传达样式而不是样式，应尽量避免内联样式
三、课后个人总结
1. Vue框架如何实现SEO
- 服务端渲染（SSR）
- 预渲染：如果只是对少数营销页面进行SEO，只需要在构建时生成针对特定路由的静态HTML文件
