[ 前端与 HTML | 青训营笔记]
theme: smartblue
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是前端工程师?
在学习过程中老师用一句话总结就是:前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师。
前端技术栈
前端最基础的技术栈是由我们通常所说的前端三件套(HTML(内容)、CSS(样式)、JavaScript(行为)
)以及服务端构成,通过http等网络协议实现交互,由这些就构成了我们所说的前端最基础的技术栈。
在系统学习前端之前我并不清楚前端真正应该关注哪些方面,目前我所了解并学习的前端的技术栈,给我的感觉就是学习速度跟不上技术栈迭代更新的速度,虽然vue3推出来至今也有两年半的时间了,虽然目前大部分公司并没有普及,但是尤大大的团队依旧在持续更新,当然这些仅仅是技术栈上的关注点,而实际开发过程中我们需要考虑到的方面远不止这些。
网页开发的功能、美观、是否考虑视觉障碍、安全、性能、兼容性以及用户的体验,这些都是我们在开发过程中需要关注的地方。
HTML
说实话在在此之前,我只知道html是我们俗称的页面文件,网页最基础的部分,但是全称是什么呢?HyperText Markup Language
相信前端工程师大部分比较喜欢使用VSCode编辑器,不仅仅是轻巧便捷,同样有很多大佬发布的实用性很强的插件,相信我们不少同学在写HTML的页面模板都是!快捷键生成的,那么我们通常忽略了的第一行是什么意思呢?
```
```
其实这行代码是告诉浏览器html的版本根据这行代码去使用哪种渲染模式,如果不加上这一行浏览器会采用比较老旧的方式,会导致实际加载出来的画面可能与你的代码不符合。
- 标签和属性不区分大小写,通常推荐小写(在Vue和React中自定义的组件我们通常会驼峰,大写开头)
- 空标签可以不闭合,比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以忽略,比如 required、readonly
之前在使用a标签时都只知道当外链使用,但是如果加上target="_blank"
这个属性,则会在浏览器新开一个页面打开这个外链,默认不加的情况是覆盖当前的url,直接在当前页面打开。
语义化
- HTNL中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循
语义
来编写HTML- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
使用HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键字、排序
- 屏幕阅读器 - 给盲人读页面内容