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

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

前端技术栈

前端技术栈.png

HTML、CSS和JavaScript都运行在浏览器中，浏览器通过HTTP协议和服务器通信。

前端的关注点

前端的关注点.png

前端要解决的根本问题是图形用户界面下的人机交互问题，人机交互涉及到很多方面。前端工程师不仅要懂得技术，还要懂得其他的一些方面。前端关注的点包括功能、安全、美观、性能、兼容、体验、无障碍。

前端的边界

前端的边界.png

随着技术的发展，前端也逐渐涉及到更多的领域。

（1）Node.js开发服务器端的应用

（2）ELECTRON开发客户端的应用

（3）React Native开发客户端的应用

（4）WebRTC进行P2P在线传输，实现多人会议

（5）WebGL开发流程3D游戏

（6）WebASSEMBLY将C++、Rust等语言编译成浏览器可以执行的代码

开发环境

开发环境.png

HTML

HTML是什么

DOM树

DOM树.png

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input placeholder="请输入用户名" />
  <br /><br />
  <input type="range" />
  <br /><br />
  <input type="number" min="1" max="10" />
  <br /><br />
  <input type="date" min="2023-02-03" />
  <br /><br />
  <textarea>Hey</textarea>
</body>
</html>

<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

渲染结果如下图所示。

内容划分

内容划分.png

语义化

语义化是什么？

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

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化？

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

前端与HTML ｜ 青训营笔记