前端与HTML | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天。今天是第一天上课，课程内容非常基础，刚刚开始听的时候有些不屑一顾，但是听着听着发现有一些很基础知识点自己居然遗忘了。在长期进行业务的开发过程中，有些基础知识由于不常使用，如果不是课上提到说不定自己压根就回忆不起来了。于是写下此篇笔记，方便将来自己翻查。
第一节课，老师主要讲了三点内容：
- 什么是前端
- 前端能做的事情
- 语义化标签
什么是前端
老师讲的第一个知识点：什么是前端？
这个知识点不禁让我想起来了以前一个幸福的男人，他在大早上问我的一个问题——什么是Java。"Java是一门面向对象的编程语言。嗯，它具有...... "Java的特性在我脑中闪现，千言万语在我嘴中汇聚，可最终只吐出了"Java就是......Java"这样很差劲的回答
什么是前端呢？3年前我刚刚开始学习前端的时候，那时候我以为前端就是写网页的，一个甚至不能称之为程序员的程序员；在今天上课之前我的答案是:"创造用户所能看到的一切的"；而上完今天的课后，我的答案是："前端工程师是使用web技术栈，解决多端图形用户界面交互的工程师"
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/程序
- VR/AR等
- web技术栈
前端能做的事情
做前端开发已经有一段时间了，写过web端的中台系统、H5端的宣传页面；做过微信小程序开发、APP开发,也使用web的技术栈开发过桌面客户端。但是今天听了课后才发现前端所能做的事情远远不止这些，在这里记录一下课上老师所提到的一部分内容，为自己继续学习奠定方向。
| 服务器端 | 客户端 | 点对点(Peer-to-Peer)视频会议 | webGL | WebAssembly |
|---|---|---|---|---|
| node.js | Electron | webRTC | 做比较流程的3D效果、游戏 | 把C++、C、JAVA等语言编写的代码编译成浏览器可以运行的代码 |
| react native |
语义化标签
在本人目前不长的开发生涯中，虽然知道语义化标签，但是却一直不重视，至少在写下这篇笔记之前，本人编码的习惯更多还是大量使用div，经常使用的语义化标签也大概只有这些header、footer、ul、ol、form。今天课后，本人开始明白语义化标签的使用不仅仅是方便其他团队成员阅读或接手我的代码。使用语义化标签能更加有利于浏览器渲染页面；正确的使用语义化标签能使搜索引擎更好的做关键字提取与排序；能使屏幕阅读器等设备来读取内容，例如使用屏幕阅读器给盲人读页面内容，使用语义化标签能够使得屏幕阅读器能够正确理解网页内容。
使用语义化的好处总结:
- 代码可读性、可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最合适描述这个内容
- 不适用可视化工具生成代码
| 元素 | 说明 |
|---|---|
| article | 定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等 |
| aside | 一般用于网页中的侧边栏或者文章内部的标注框 |
| header | 页面的头部区域，通常包括网站logo、链接导航、搜索框、banner |
| nav | 页面的导航链接区域 |
| main | 定义文档主要内容，一般来说，一个页面里只有一个main元素 |
| section | 定义文档的区域 |
| footer | 文档的页脚 |
| mark | 标记、突出显示文本 |
| ul | 无需列表 |
| ol | 有序列表 |
| form | 表单 |
| button | 定义按钮 |
| i | 用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体 |
| code | 代码块 |
| pre | 多行代码块一般会把code标签抱在pre标签中 |
| blockquote | 块级引用，里面可以方比较长的引用文字 |
| cite | 短引用，一般用来引用几个字，比如书名、章节 |
| q | 短引用，会自动把文字抱在“”里面 (效果展示:123) |
| strong | 强调,会突出显示包含的内容，文字会加粗,表示含义上的强调。 (效果展示:我是强调内容123) |
| em | 强调，更多的是语气强调,文字会是斜体，表示语气上的强调 (效果展示:我是强调内容123) |
