这是我参与「第五届青训营 」伴学笔记创作活动的第一天。
一、本堂课重点内容：
本堂课围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，层层解析前端技术栈的构成，以及作为前端最为基础的技术 - HTML 基础语法和基本功能，在实际研发过程中如何做到 HTML 语义化。
二、详细知识点介绍：
1. 前端工作详解
前端解决的主要问题为图形界面下的人机交互。
其技术栈包括HTML（负责页面、结构和内容）、CSS（设置页面样式）和 JavaScript（定义网页的行为），通过网络协议与服务器进行通信。
2. HTML作用解析
HTML全称为HyperText Markup Language，即超文本标记语言。超文本主要指图片、标题、链接及表格。使用标记语言（成对出现的标签）表示不同格式。
3. HTML语义化
-
在标签中设置属性
表示一张图片：
<img src = "photo.jpg" />（标签内不用嵌套其他值，可省略结束标签） -
eg：
<!doctype html> //标记当前HTML文件的版本 <html> //文档根标签 <head> //放置页面的元数据，内容不会在浏览器中显示 <meta charset = "UTF-8"> <title>页面标题</title> </head> <body> <h1>一级标题</h1> <p>段落内容</p> </body> </html> -
DOM树
浏览器将代码解析为DOM树
4. HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可不写结束标签
- 属性值推荐用双引号包裹
- 某些属性值可省略，eg：required、readonly
5. 页面内容整体划分
6. HTML语义化
- HTML中的元素、属性及属性值都具有某种含义
- 开发者应遵循语义编写
- 了解每个标签和属性的含义
- 思考什么标签最适合所表达的内容
- 不使用可视化工具生成代码
三、实践练习例子：
-
有序列表
-
无序列表
-
定义列表
-
链接
-
多媒体
-
控件输入
四、课后个人总结：
本章首先介绍了HTML，我知晓到了其基本适用场景，对于前端也有了基本的了解。
而后我学习到了HTML的基本语法，知晓了在不同场景下HTML的使用规则。其用法繁多，仅上完课我尚未完全熟记并做到熟练运用，故今后我应当多在实践中学习，通过自己动手书写代码做到掌握其基本使用规则。
五、引用参考：
本篇文章代码均引用老师在掘金课堂中的示例。
