前端与HTML｜ 青训营笔记
1 前端应该关注哪些方面：
功能、美观、无障碍、安全、性能、兼容、体验
2 前端的边界？
node \ electron \ React Native \ WebRTC \ WebGL \ WebAssembly
3 开发环境
- 浏览器
- 编辑器：
VSCode\Vim\WebStorm
4 HTML
HyperText Markup Language，超文本标记语言
<img src="photo.png" />
4.1 DOM树
4.2 HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如：required、readonly
4.3 示例
4.4 内容划分
4.5 语义化是什么？
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应遵循语义来编写HTML，如：
- 有序列表用
ol；无序列表用ul lang属性表示内容所使用的语言
- 有序列表用
4.6 谁在使用我们写的HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键字、排序
- 屏幕阅读器：给盲人读页面内容
4.7 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
4.8 传达内容，而不是样式
<p style="font-size: 32px">前端工程师的自我修养</p> // 没有体现语义化 ×
<h1>前端工程师的自我修养</h1> // 语义化 √
4.9 如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
