[ 前端与 HTML | 青训营笔记]

语言: CN / TW / HK
时间 2023-01-22 03:15:25
主题:

theme: smartblue

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

什么是前端工程师？

在学习过程中老师用一句话总结就是：前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师。

前端技术栈

前端最基础的技术栈是由我们通常所说的前端三件套（HTML（内容）、CSS（样式）、JavaScript（行为））以及服务端构成，通过http等网络协议实现交互，由这些就构成了我们所说的前端最基础的技术栈。

image.png

在系统学习前端之前我并不清楚前端真正应该关注哪些方面，目前我所了解并学习的前端的技术栈，给我的感觉就是学习速度跟不上技术栈迭代更新的速度，虽然vue3推出来至今也有两年半的时间了，虽然目前大部分公司并没有普及，但是尤大大的团队依旧在持续更新，当然这些仅仅是技术栈上的关注点，而实际开发过程中我们需要考虑到的方面远不止这些。

网页开发的功能、美观、是否考虑视觉障碍、安全、性能、兼容性以及用户的体验，这些都是我们在开发过程中需要关注的地方。

HTML

说实话在在此之前，我只知道html是我们俗称的页面文件，网页最基础的部分，但是全称是什么呢？HyperText Markup Language

相信前端工程师大部分比较喜欢使用VSCode编辑器，不仅仅是轻巧便捷，同样有很多大佬发布的实用性很强的插件，相信我们不少同学在写HTML的页面模板都是！快捷键生成的，那么我们通常忽略了的第一行是什么意思呢？

```

```

其实这行代码是告诉浏览器html的版本根据这行代码去使用哪种渲染模式，如果不加上这一行浏览器会采用比较老旧的方式，会导致实际加载出来的画面可能与你的代码不符合。

image.png

  • 标签和属性不区分大小写，通常推荐小写（在Vue和React中自定义的组件我们通常会驼峰，大写开头）
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如 required、readonly

之前在使用a标签时都只知道当外链使用，但是如果加上target="_blank"这个属性，则会在浏览器新开一个页面打开这个外链，默认不加的情况是覆盖当前的url，直接在当前页面打开。

语义化

  • HTNL中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

使用HTML

  • 开发者 - 修改、维护页面
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键字、排序
  • 屏幕阅读器 - 给盲人读页面内容
「」