“这是我参与「第四届青训营 」笔记创作活动的第1天”

前端工程师的自我修养：传达内容，而不是样式

课程内容

前端

什么是前端

• 解决GUI人机交互问题
• 跨终端
  ·PC/移动浏览器
  ·客户端/小程序
  ·VR/AR等
• Web技术栈

前端技术栈

前端应该关注什么

• 功能
• 美观
• 无障碍
• 安全
• 性能
• 兼容
• 体验

HTML

HTML是什么

HTML的基本结构

HTML语法

• 标签和属性不区分大小写，推荐 小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐使用 双引号 包装
• 某些属性值可以省略，比如required、readonly

内容划分

语义化

语义化是什么

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

谁在使用我们写的HTML

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

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

如何做到语义化

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

总结及感悟

第一堂课主要是对前端和HTML进行一些简单的介绍，算是对青训营整个课程起到一个引入的作用，“传达内容，而不是样式”这一句话虽然简短，但也是所有前端工程师在进行代码编写时要坚持的原则。