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

什么是前端

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

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

前端技术栈

• HTML——页面结构和内容
• CSS——设置页面样式，比如大小颜色等
• JavaScript——定义页面行为

前端应该关注哪些方面

• 功能（有没有满足用户需求）
• 美观（界面好看否）
• 无障碍（accessibility，是否所有人都可以舒适用）
• 安全（要保证用户数据的安全）
• 性能（速度足够快否，用户体验是否足够好）
• 兼容性（网页是否能在各种设备正常使用）

前端的边界

• Node.js——开发服务器端的应用
• Electron&React Native——开发客户端的应用
• Web RTC——实现在线的传输，实现多人的会议
• Web GL——开发3D游戏
• Web Assembly——把C++等语言编译为浏览器可运行的代码

开发环境

HTML是什么

• HyperText Markup Language
  • Hyper:图片，标题，链接，表格
  • Markup:HTML标签

HTML语法

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

标题h1-h6

列表

• ol标签——有序列表
• ul标签——无序列表
• dl标签——定义列表；dt——列表标题；dd——列表值

链接

• a标签
• href属性
• target="_blank"——用新窗口打开页面

多媒体

• alt属性——在用户的浏览器无法加载文件时，用文字形式告诉用户文件是什么
• audio标签——音频
• video标签——视频
• controls——使用浏览器默认的播放控件

输入

• name属性——多个radio之间如果name相同，用户就只能选择一个
• datalist并不限制用户输入，只是为用户提供快捷的输入方式

引用

• blockquote标签——长引用（直接引用别人的一段话，可以在cite属性里标注来源）
• cite标签——短引用（作品名字或章节）
• q标签——短引用（具体的引用内容）
• code标签——表示代码
• pre标签——多行代码
• strong标签——加重语气，强调
• em标签——重音部分

内容划分

• header——页头
• nav——导航
• main——主体，主要内容
• article——放正文内容
• aside——推荐内容
• footer——参考链接，版权信息

语义化

• 清晰地表达内容与结构

谁在使用我们写的HTML

• 开发者——修改、维护页面
• 浏览器——展示页面
• 搜索引擎——提取关键词、排序
• 屏幕阅读器——给盲人读页面内容

语义化的好处

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

传达内容，而不是样式

如何做到语义化

• 了解每个标签和属性的含义——W3C/MDN上的HTML5的规范
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码——可以作为辅助，不建议直接生成