这是我参与「第五届青训营 」笔记创作活动的第1天
本堂课重点内容
- 什么是前端？
- 前端技术栈
- 前端应该关注哪些方面？
- 前端的边界
- 开发环境
- HTML是什么?
- HTML语法
- 语义化是什么
- 谁在使用我们写的HTML
- 语义化的好处
- 如何做到语义化
什么是前端？
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web技术栈
前端技术栈
前端应该关注哪些方面
- 功能
- 美观
- 性能
- 无障碍
- 安全
- 兼容
前端的边界？
开发环境
- 浏览器
- IE/Edge
- Chrome
- Firefox
- Safari
- 编辑器
- VSCode
- Vim
- WebStorm
HTML是什么？
HyperText Markup Language----超文本标记语言
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
