这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开。
1.前端工作的定义
解决GUI人机交互问题 使用web技术栈 网络协议解决人机交互问题 多端交互问题
2.前端技术栈
HTML（内容） CSS（样式） Javascript（行为） 前端三件套 通过网络协议和服务端
3.前端应该关注哪些方面的问题
人机交互问题 技术 功能 美观 无障碍（对于所有人） 安全（用户数据的安全）性能（用户体验，动画流畅……） 兼容性（移动端和PC端） 前端对于用户体验是最直观的
4.前端的边界
node.js ELECTRON React Native WebRTC …… 技术在不断更新 前端要不断学习
5.开发环境
编辑器VSC 浏览器Chrome 入门门槛低
6.HTML解析 （标签等）
HyperText Markup Language 超文本 标签语言
标签
!doctype html 标记使用的html的版本 使用哪个渲染模式
所有的标签都得写在html标签下
head：title body：写入的内容
浏览器拿到html后是会将代码解析成为dom树
document html head:meta title
body:h1 p…… 树形结构 dom节点
浏览器控制台监测
标签属性 推荐小写 原生html小写
空标签可以不闭合 不写结束标签 或者在开始标签后面写/
属性值推荐用双引号包裹 某些属性值可以省略...
标题
h1~h6
列表
有序列表 order list ol li
unorder list ul li
definition list dl dt：title dd：description
dt 对应 dd 多对多关系
链接
a：anchor href属性 超链接引用地址
target blank 新窗口打开
图片
img src绑定图片链接位置 alt属性 多媒体 降级表达
输入 input 表单类控件
placeholder占位符
type="range" type="number" min max
type="date" min
type="checkbox"
type="radio" name属性 互斥关系 统一只能选一个
select 下拉选择 option 选项
用户自由输入的值 input list属性 datalist（快捷输入方式） option
textarea 长文本输入 多行文字
输入处理是需要js去编写处理
文本内容
blockquote 快捷引用 cite属性 引用处
cite标签 短引用 引用作品
q 引用前段提及的 具体引用内容
code 代码 引用
pre 引用多行代码（字体有差异）
strong 强调 突出严重紧急 "风险投资" 事件紧急性强调
em 强调 突出语气强调 "are" 重读 强调
内容划分
header页头 nav
main(article...) 一般来说仅有一个main元素
aside内容相关的但并不直接属于main（广告...）
footer页脚 (备案信息等)
语义化是什么？
语言的特定含义 开发者需要遵循html的语言秩序
html用来表示页面的内容和结构 标签就是用来描述的作用
lang属性表示内容所使用的语言 使用正确的语言规范
谁在使用我们写的html？
团队维护代码规范：
开发者——修改 维护页面
浏览器——展示页面 图片加载慢（因流量等原因）——需要替代性内容
搜索引擎——提取关键词、排序 （抓取html：根据标题和内容权重）
屏幕阅读器——给盲人读页面内容
无障碍化的普及：正常人（特殊情况使用的考虑）
服务很多人 考虑用户体验
语义化的好处 代码可读性……
了解标签和属性的含义
思考标签的适配程度
不使用可视化工具生成代码（自己把控标签的使用，仅作为辅助使用）
传达内容，而不是样式！！（style的书写不如标签的选择）
