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

前端和HTML

前端要解决的问题？

前端工程师使用web技术栈解决多端下的图形界面的人机交互问题。

前端技术栈分为三层：HTML、CSS、JavaScript

HTML：页面内容。

CSS：样式。

JavaScript：行为，作出响应。

通过HTTP协议和服务器进行通信。

前端应该关注哪些方面？

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

前端的边界？

node.js：开发服务器端应用。

ELECTRON、React Native：开发客户端应用。

WebRTC：通过Peer-to-Peer（点对点）进行多人的视频会议。

WebGL：可以制作流畅的3D效果或一些游戏。

WebASSEMBLY：可以把C++或者一些其他语言的代码编译成浏览器里边可以运行的代码。

HTML

HTML是什么？

HyperText Markup Language

超文本标记语言

超文本：图片、标题、链接、表格

HTML语法

1、标签和属性不区分大小写，推荐小写

2、空标签可以不闭合，比如 input、meta

3、属性值推荐用双引号包裹

4、某些属性值可以省略，比如required、readonly

语义化是什么？

1、HTML中的元素、属性及属性值都拥有某些含义

2、开发者应该遵循语义来编写HTML

谁在使用我们写的HTML

1、开发者-修改、维护页面

2、浏览器-展示页面

3、搜索引擎-提取关键词、排序

4、屏幕阅读器-给盲人读页面内容

语义化的好处

1、代码可读性

2、可维护性

3、搜索引擎优化

4、提升无障碍性

如何做到语义化？

1、了解每个标签和属性的含义

2、思考什么标签最适合描述这个内容

3、不使用可视化工具生成代码

传达内容，而不是样式！

补充

过时和弃用的HTML元素：
纯表现的元素：big、center、font、tt、strike等。
对可用性产生负面影响的元素：frame、frameset、nobr、noframes等。
参考：MDN Web Docs-HTML元素参考

关于WebRTC
WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。

WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript 标准API，目前是WebRTC 1.0版本，Draft状态；另外WebRTC还希望能够建立一个多互联网浏览器间健壮的实时通信的平台，形成开发者与浏览器厂商良好的生态环境。同时，Google也希望和致力于让WebRTC的技术成为HTML5标准之一，可见Google布局之深远。

WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。
引用：WebRTC - 百度百科

前端与HTML | 青训营笔记