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

前端

什么是前端？

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

一句话总结：前端工程师就是使用Web技术栈解决多段图形用户界面交互的工程师

前端技术栈

由HTML（内容）、CSS（样式）、JavaScript（行为）组成，这三者运行在浏览器中，而浏览器是通过Http协议和服务器进行通信，加以渲染。

前端应该关注哪些方面？

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

HTML

什么是HTML？

HTML -- HyperText Markup Language

HyperText -- 超文本，包括图片，标题，链接，表格等 Markup Language -- 标记语言，使用一对成对出现的标签

浏览器拿到一个HTML会对其进行解析，将其解析成一个DOM树 ，每个标签就是一个DOM节点

HTML语法

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

HTML标签

• 标题标签：h1-h6
• 列表标签：有序列表ol-li，无序列表ul-li，key-value列表dl-dt-dd
• 链接标签：a
• 多媒体标签：图片标签img，音频标签audio，视频标签video
• 输入标签：input，多文本标签textarea
• 选项标签：input标签type：radio单选，select-option，datalist-option

语义化是什么？

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

语义化的好处

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

如何做到语义化

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