这是我参与「第五届青训营」伴学笔记创作活动的第1天。
一、课程重点
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML作用解析
- HTML语义化
二、个人笔记
前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师。
前端技术栈
HTML（内容）、CSS（样式）、JavaScript（行为）以及服务端，通过http等网络协议实现交互。
DOM树
HTML HyperText Markup Language
语法
- 标签和属性不区分大小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
标题
h1~h6
列表
- 有序列表ol
- 无序列表ul
- 定义列表dl 多对多关系, dt definition title, dd definition description
链接a
href=”” hyper reference
target=”” 实际页面
多媒体
img
audio
video
src source
alt alternative text图片不加载时显示的文字
controls默认需要播放控件
输入input
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
<label><input type="checkbox"></label> #选多个
<label><input type="radio"></label> #选1个
<select><option> #下拉选择
input list="" 提示
blockquote 引用一段话 cite短引用 作品名 q作品内容 code引用代码 strong强调 em语气强调
语义化
- HTML中元素、属性、属性值都拥有某些含义
- 遵循语义来编写 lang属性表示内容所使用的语言
原因（使用HTML）
- 开发者 修改、维护页面
- 浏览器 展示页面
- 搜索引擎 提取关键词、排序
- 屏幕阅读器 给盲人读页面内容
传达内容，而不是样式
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
