这是我参与「第五届青训营 」笔记创作活动的第1天
一、什么是前端
前端技术栈分三层：HTML(内容)、CSS(样式)、JavaScript(行为)
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端小程序
- VRIAA等
- Web技术栈
二、前端应该关注哪些方面
美观、功能、无障碍、安全、性能、兼容性
三、前端的边界
node.js\ electron\React\WebRTC\WebGL\WebASSEMBLY\
四、HTML是什么
HyperText Markup Languge
标签上可设置属性 src 为属性名 “photo.jpg"为属性值。
html开头 表示该文本是什么样的html文本，不写会以老旧的html进行渲染。
五、DOM树
六、HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、 readonly
标题h1~h6
七、链接
<a href="https://www.bytedance.com/" target="_blank"> </a>
target="_blank"不是替换原有窗口而是从新窗口打开
八、多媒体标签
<img alt='' src=''/>
alt表示当突变加载失败可展示文字
<audio src='' controls></audio>
controls 默认显示浏览器播放控件
<video src='' controls></video>
九、输入
input输入框 type属性、placehodler、min、max
| 文字 | 进度条 | 数字 | 日期 | 选择框 |
|---|---|---|---|---|
| text | range | number | date | checkbox/radio |
可以辅助快速输入选择
案例：
<input list="countries" />
<datalist id="countries">
<option>Grece</option>
<option> United Kingdom</option>
<option>United States</option>
</datalist>
十、内容划分
页头：header 导航：nav 主要内容放在main中，aside旁边，footer页尾
十一、语义化是什么
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
十二、谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
十三、Html是传达内容，而不是样式
十四、如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
