这是我参与「第四届青训营 」笔记创作活动的第1天。 本次笔记的内容是前端与HTML课程。
一、前端概念
前端的目的是解决GUI下的人机交互问题。前端解决方案设计的问题是跨终端的，包括且不限于桌面与移动浏览器、客户端与小程序、VR/AR等场景。通常，前端技术对工程师的要求是整个web技术栈。
前端技术栈包括我们常说的前端三件套，即HTML、CSS、Javascript，以及与之相关的网络协议。前端技术的关注点在于功能、性能、兼容性、安全、美观、体验、无障碍。
前端开发环境相较其他技术显得尤其简单，只需要一个现代浏览器（Edge、Chrome、Firefox、Safari等）以及一个具有最简单的编辑功能的编辑器（Vim、VSCode、WebStorm等）。
二、HTML概念
HTML即HyperText Markup Language（超文本标记语言）。超文本指图片、标题、链接、表格等对象，标记语言即对应的一系列语法规则。一个HTML文档会被解析为一棵DOM树，通过这种方式描述一个网页。
三、HTML基本语法与标签
HTML语法的基本特征包括：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合（如input、meta）
- 属性值推荐用双引号包裹
- 某些属性值可以忽略（如required、readonly）
在此基础上，HTML包括诸多种类的标签：标题（h1~h6）、链接（a，img，audio，video）、输入（input），等等。
四、语义化的意义
HTML语义化，指的是HTML中的元素、属性及属性值都拥有某些含义，开发者应该遵循语义来编写HTML。使用HTML的不光有开发者和浏览器，还有搜索引擎和爬虫等应用，以及某些无障碍设备，如盲人读屏器。语义化可以带来诸多好处：提升代码可读性、可维护性，优化搜索引擎，提升无障碍性。在HTML的学习中我有过这样的疑惑：这标签的名称繁杂，不便记忆，且许多时候没有本质上的区别，为何要如此区分？这种类繁多的标签正是语义化思想的具体表现。
我们在写代码时如何做到语义化呢？这要求我们了解每个标签和属性的含义，思考什么标签最适合描述这个内容，以及避免使用可视化工具生成代码。
