前端与HTML | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第 1 天。

课堂笔记

一、本堂课重点内容

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

二、详细知识点介绍

前端是使用Web技术栈来解决GUI人机交互问题，能实现的跨终端有PC/移动浏览器、客户端/小程序、VR/AR等。其开发环境是：浏览器+编辑器。

前端技术栈：JavaScript（行为）+CSS（样式）+HTML（内容）。

前端要关注美观、兼容、功能、性能、安全、无障碍、体验这些方面。

浏览器会将HTML代码解析成DOM树，例子：

三、HTML 部分标签介绍

<!doctype html>标记当前使用的html文件是哪个html版本，便于浏览器决定使用哪一种渲染模式。

标题标签：h1~h6，举例<h1></h1>。

列表标签：

有序列表

其关系是一对多。

<ol>
    <li></li>
    <li></li>
</ol>

无序列表

其关系是一对多。

<ul>
    <li></li>
    <li></li>
</ul>

自定义列表

其关系是多对多。

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

超链接标签：<a></a>

图片标签：<img/>

音频标签：<audio></audio>

视频标签：<video></video>

四、课后个人总结

通过本次课程，更加深刻的了解了什么是前端。并且通过视频中对于HTML语义化的介绍，可以明白代码的规范化对于前端页面编写的重要性。HTML语义化的好处是增加代码可读性、可维护性、便于搜索引擎优化和提升无障碍性。其中代码可读性好可以使代码的维护成本在一定程度上降低，当程序员离职后或者对代码重构的时候，能通过阅读HTML代码了解该代码用于实现什么功能，从而进行修改。

前端与HTML|青训营笔记