什么是前端？

含义：

前端需要解决GUI人机交互问题
跨终端：PC/移动浏览器、客户端/小程序、VR/AR等
Web技术栈

前端工程师是Web技术栈解决多端图形用户界面交互问题的工程师。

前端的技术栈：

前端三件套 HTML（内容）、CSS（样式）、JavaScript（行为）通过网络协议和服务器端构成一个基本的技术栈。

前端应该关注哪些方面？

前端是解决各种人机交互的问题，人机交互涉及到以下等方面。

功能

开发出来的产品有哪些功能，可以解决什么问题，是否满足用户的需求。

美观

产品界面是否好看、美观。

无障碍

开发出的网站是否对所有人都适用。

安全

网站是否能保证所有用户的数据的安全，是否存在一些漏洞。

性能

网站的运行速度是否足够快、动画流畅，用户体验好不好。

兼容性

网页能否在各种各样的设备上使用。

体验

用户对网页的直观感受、使用体验如何。

前端的边界？

随着技术的发展，前端不只是对页面的开发。

nodejs 可以开发服务器端的应用
ELECTRON、React Native 等可以开发客户端的应用
Web RTC 进行在线传输、实现多人会议
Web GL 开发出一些流畅的 3D 游戏
WebASSEMBLY 把 C++ 或其他语言编写的代码编译为可以在浏览器直接运行的代码

前端的开发环境

浏览器： IE/Edge、Chrome、Firefox、Safari等
编辑器： VSCode、Vim、WebStorm等

HTML 是什么？

HyperText Markup Language，超文本标题语言。

其中 < !doctype html> 标签标记了当前使用的 HTML 的版本，方便浏览器更好的渲染。

DOM树

HTML 代码转化的一个树形结构

HTML 语法

标签和属性不区分大小写，但是推荐小写。（一些自定义的组件一般大写，原生的小写）
空标签可以不闭合，比如 input、meta。（因为一般这种标签里面不再有其他内容）
属性值推荐用双引号包裹
某些属性值可以省略，比如 required、readonly

语义化是什么？

HTML 中的元素、属性及属性值都拥有某些含义。
开发者应该遵循语义来编写 HTML。（比如 ol 代表有序列表、lang 属性表示内容所使用的语言）

如何做到语义化：

了解每个标签和属性的含义
思考什么标签最适合描述的内容
不使用可视化工具生成代码

总之需要匹配，标签和内容相匹配。

前端与 HTML ｜ 青训营