这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
课程中提到：前端工程师就是使用web技术栈解决多端图形用户界面交互问题的工程师。
前端技术栈
HTML（内容）
HyperText（超文本）Markup language（标记语言）
CSS（样式）
JavaScript（行为）
前端应该关注的方面
- 美观（界面美观度）
- 功能（满足用户需求、解决需要解决的问题）
- 无障碍（所有人群都能用，包括视障人群、听障人群等）
- 安全（保护用户数据安全）
- 性能（流畅性、兼容性）
- 体验（用户体验）
前端要解决的根本问题：图形界面下的人机交互问题。
前端的边界（不再仅限于页面的实现）
- node.js: 开发服务器端应用
- ELECTRON: 开发客户端应用
- React Native: P2P在线的传输（实现多人会议）
开发环境（一个浏览器+一个编辑器）
HTML
在浏览器收到html文件时，会把代码解析成DOM树，其中每个节点叫做DOM节点。
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如：
input；meta - 属性值推荐用
双引号包裹 - 部分属性值可以省略，比如：
required；readonly
课上几个没见过的标签
| 标签 | 含义 |
|---|---|
| label | 表示用户界面中某个元素的说明 |
| select | 下拉选择框 |
| option | 下拉选择框里的可供选择项 |
| datalist | 包含了一组 <option> 元素 |
| blockquote | 块级引用，有一个cite属性可以指向所引用的文字的来源 |
| cite | 短引用，引用作品名字或者章节名称等使用 |
| q | 之前提到过的内容再次提到时候用，也算是一个短引用 |
html的页面划分
- header： 存放logo、导航（navgation）……
- main：一般一个页面只有一个，内部通常是正文，是整个页面的主要内容。
- aside：书写一些和main板块内容相关的内容，比如：广告、热点内容……
- footer：页面尾部的书写参考链接、版权等信息。
语义化(传达内容而非样式)
- HTML中的元素、属性及属性值都拥有某些含义
- 应该遵循语义来编写HTML（比如：lang属性表示内容所使用的语言）
语义化的好处
- 代码可读性
- 可维护
- 搜索引擎优化
- 提升无障碍性
使用HTML的人：开发者（修改维护页面）、浏览器（展示页面）、搜索引擎（提取关键字、排序）、屏幕阅读器（盲人读页面内容）
