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

一、什么是前端

1. 解决GUI人机交互问题
2. 跨终端
   • PC/移动浏览器
   • 客户端/小程序
   • VR/AR

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

二、前端技术栈

1. HTML：页面，结构，内容
2. CSS：样式，颜色
3. JavaScript：行为，响应

浏览器利用HTTP协议与服务器通信，得到代码后渲染成我们看到的页面，浏览器也将用户填写的内容、行为，通过HTTP协议发送到服务端

三、前端要解决的问题

1. 功能实现
2. 美观
3. 无障碍
4. 安全
5. 性能
6. 兼容性

解决人机交互，对用户体验是十分重要的

四、前端的边界

技术发展快，更新快

1. Node.js：开发服务器端应用
2. ELECTRON/RN：开发客户端应用
3. WebRTC：在线传输、多人会议
4. WebGL：编写小游戏
5. WebASSEMBLY：使其他的语言编写的代码在浏览器运行

五、HTML

1. 是什么：HyperText Markup Language 超文本标记语言
2. DOM树：将代码转化为树形结构，包含各种DOM节点，便于检索检查

六、写法

1. 标签属性不区分大小写，推荐自定义组件大写，原生的标签小写
2. 空标签可以不闭合，如input、meta
3. 属性值推荐用双引号包裹，若属性为true可以省略

七、实例与标签

1. 基本结构
   • !doctype：标记以何种模式来渲染页面
   • html：根标签，所有标签都写在根标签里面
   • head：放置页面的元数据，如标题、编码，不用直接呈现给用户
   • body：呈现给用户的内容
2. 标题h1~h6
   • 共有六个等级，字体逐渐变小
3. 列表
   • li：列表元素
   • ol：有序列表
   • dt：列表小标题
   • dd：小标题具体描述
   • dt、dd可以多对多
4. 链接
   • 以a开头
   • 引号内写要跳转的网站
   • target="_blank"在新窗口打开
5. 多媒体
   • 图片：img
   • 音频：audio
   • 视频：video
   • 属性alt：表示可替代的文本，若图片加载失败则显示该文字
   • 属性src：写相关文件的url
   • 属性controls：显示浏览器默认播放按钮
6. 输入
   • input：单行文本框，表单类控件
   • textarea：多行文本框
   • 属性placeholde：占位符。用于用户没有输入时的默认显示
   • 属性range：显示一个滑动块
   • 属性type=number：填入数字，可设置数值的最大值max和最小值min
   • 属性type=data：填入日期，可设置最小日期
7. 选择
   • checkbox：多项选择
   • radio：单项选择，以name属性来分类互斥
   • select：下拉选择
   • option：放置选择的选项
   • datalist：用于定义数据列表
   • 属性list：给用户的搜索以引用数据列表

八、语义化

1. HTML中的元素、属性及属性值都有某些含义，不应该被误用
2. 开发者应该遵循语义来编写HTML
3. 好处
   • 可读性高，便于修改，维护
   • 利于优化搜索引擎
   • 提升无障碍性