前端与HTML | 青训营笔记
今天重新回顾了一下前端最开始的HTML，一直都在使用浏览器，当得知他通过HTML进行编写的时候，还是颇为震惊，下面是今天上课的一些笔记。
课堂笔记
一、本堂课重点内容
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
二、详细知识点介绍
前端是使用Web技术栈来解决GUI人机交互问题，能实现的跨终端有PC/移动浏览器、客户端/小程序、VR/AR等。其开发环境是：浏览器+编辑器。
前端技术栈：JavaScript（行为）+CSS（样式）+HTML（内容）。
前端要关注美观、兼容、功能、性能、安全、无障碍、体验这些方面。
浏览器会将HTML代码解析成DOM树，例子：
下面是DOM树的生成。当然，在前端领域，需要了解的可多了，深入DOM树，去了解DOM树如何生成，生成之前又发生了什么，那才是有意思的，这里不做更多的赘述。
三、HTML 部分标签介绍
<!doctype html>标记当前使用的html文件是哪个html版本，便于浏览器决定使用哪一种渲染模式。
标题标签：h1~h6，举例<h1></h1>
列表标签：
- 有序列表
其关系是一对多。
html 代码解读复制代码<ol>
<li></li>
<li></li>
</ol>
- 无序列表
其关系是一对多。
html 代码解读复制代码<ul>
<li></li>
<li></li>
</ul>
- 自定义列表
其关系是多对多。
html 代码解读复制代码<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
超链接标签：<a></a>
图片标签：<img/>
音频标签：<audio></audio>
视频标签：<video></video>
四、HTML表格的基本结构
学生信息表
| 姓名 | 年龄 | 性别 | 城市 |
|---|---|---|---|
| 小明 | 20 | 男 | 北京 |
| 小红 | 19 | 女 | 上海 |
| 小刚 | 21 | 男 | 广州 |
<table>：定义表格。
<tr>：定义表格中的一行。
<th>：定义表头单元格，通常用于显示列标题，并且文本默认加粗并居中。
<td>：定义数据单元格，用于显示数据`
在上面的代码中，我还添加了一些基本的CSS样式来美化表格：
table { width: 50%; border-collapse: collapse; margin: 20px 0; }`：设置表格宽度为页面宽度的50%，边框合并，以及表格的外边距。
td { border: 1px solid #dddddd; text-align: left; padding: 8px; }`：为表头和数据单元格设置边框、左对齐文本以及内边距。
th { background-color: #f2f2f2; }`：为表头单元格设置背景颜色。`
四、课后个人总结
通过本次课程，更加深刻的了解了什么是前端。并且通过视频中对于HTML语义化的介绍，可以明白代码的规范化对于前端页面编写的重要性。HTML语义化的好处是增加代码可读性、可维护性、便于搜索引擎优化和提升无障碍性。其中代码可读性好可以使代码的维护成本在一定程度上降低，当程序员离职后或者对代码重构的时候，能通过阅读HTML代码了解该代码用于实现什么功能，从而进行修改。
