这是我参与「第五届青训营 」伴学笔记创作活动的第1天
1. 前端工作的定义
- 前端工程师是使用web技术栈解决多端用户的交互问题
2. 前端技术栈拆解与分析
2.1 前端技术栈拆解：
2.2前端应关注哪些方面：
- 功能
- 界面
- 无障碍（色盲，视力障碍等）
- 安全（数据，漏洞）
- 性能（流畅，体验）
- 兼容（电脑，手机，型号）
- 体验
2.3 前端的边界：
2.4 开发环境：
3. HTML
3.1 什么是HTML：
HyperText -> 图片/标题/连接/表格（超文本）
Markup Language -> (标签)
3.2 完整Html代码例子：
3.3 DOM树
每一个html可以转化成一个dom树，内部的标签对应着dom节点
3.4 HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input , meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required , readonly
3.5 标题：
3.5.1 h1-h6 标题依次变小
3.5.2 列表标题
- 有序列表（ol）
- 无序列表（ul）
- （dl）属性（dt）+属性值（dd）
3.6 链接
3.6.1 网站
- target=“blank” 新窗口打开
3.6.2 多媒体
- 图片（alt="Metal movable type" 加载失败时用文本替换）
- 音频（controls 基础控件）
- 视频（controls 基础控件）
3.7输入
3.7.1 输入
- 文本输入（placeholder 默认值）
- typy="range" 范围
- typy="number" 数字 min/max
- typy="date" 日期 min
- textarea 多行
3.7.2 选择
- type="checkbox" 多选
- type="radio" 单选
- select 下拉选择
- 提示输入
3.8 文本
- blockquote 快捷引用 （cite 来源）
- cite 短引用
- q 引用之前的内容，具体内容
- code 代码
- strong 强调（重要的内容）
- em 强调（语气，重读）
3.9 内容划分
- header 标题
- nav 导航
- main 主体
- article 内容
- aside 相关
- footer 页尾
4 HTML语义化
- HTML 中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
4.1 如何做到语义化
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键字、排序
- 屏幕阅读器-给盲人读页面
4.2 如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码！！！
