这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
- 什么是前端？
- 解决GUI人机交互问题
- 跨终端
-
- PC/移动浏览器
-
- 客户端小程序
-
- VR/AR等
- Web技术栈
前端技术栈：JS(行为)、CSS(样式)、HTML(内容)
前端关注的方面： 美观、功能、兼容、体验、性能、无障碍
前端的边界： node.js、ELECTRON、ReactNative、WebRTC、WebGL、WebASSEMBLY
开发环境： 浏览器：IE/Edge、Chrome、FireFox、Safari 编辑器：VSCode、Vim、WebStorm
HTML: HyperText（图片、标题、链接、表格） MarkupLanguage（编辑语言）
<!doctype html>浏览器渲染辨识版本的依据，没有这句就会以很古老的方式渲染，造成画面很奇怪- head 不需要直接呈现给用户的数据
- mate 页面所用编码
DOM树
- HTML语法
-
- ·标签和属性不区分大小写，推荐小写
-
- ·空标签可以不闭合，比如input、meta
-
- ·属性值推荐用双引号包裹
-
- ·某些属性值可以省略，比如required、 readonly
标题
h1~h6
列表 ol ul li
key-value 列表
链接
多媒体标签
- img audio video
- controls 显示控件属性
输入标签 input textarea
list属性 可辅助用户输入 便于快捷输入
文本类标签
长引用、短引用
pre标签 可以多行显示
strong与em标签的区别：strong内容上的强调，em语气上的强调
内容划分
用语义化方式书写HTML
-
谁在使用我们写的
-
- 开发者-修改、维护页面
-
- 浏览器-展示页面
-
- 搜索引擎-提取关键词、排序
-
- 屏幕阅读器-给盲人读页面内容
-
语义化的好处
-
- 代码可读性
-
- 可维护性
-
- 搜索引擎优化
-
- 提升无障碍性
- 如何做到语义化?
-
- 了解每个标签和属性的含义
-
- 思考什么标签最适合描述这个内容
-
- 不使用可视化工具生成代码
