字节前端基础青训营Day01-1.15

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

本堂课重点

本节课主要介绍了前端的概念、前端涉及到的内容，基础技术栈，以及现在前端的一些发展方向；此外本节课还介绍了HTML相关知识，主要介绍了HTML的一些标签与使用。

前端与HTML

1.前端

前端就是使用web技术栈解决多端（PC端/移动端）、图形用户界面交互。

前端技术主要分为3层：HTML，CSS和JavaScript。HTML负责页面结构与内容，相当于页面骨架；页面中，可以使用CSS样式，比如页面中内容的颜色，大小等信息；使用JS定义网页的行为，比如用户点击某个页面中某个按钮，页面该做出哪些具体的响应。

HTML、CSS与JS都是运行在浏览器中，而浏览器在通过HTTP网络协议与服务器进行通信。可通过HTTP网络协议从服务器获得网页代码，之后浏览器负责解析网页代码，进行渲染呈现。浏览器也可将用户在网页输入的内容或其他请求通过HTTP网络协议提交到服务器端。

故HTML、CSS、JS和HTTP网络协议就构成了最基础的前端技术栈。

前端关注点

前端最重要的方面体现在用户体验方面，此外也应该关注网页功能、美观程度、性能、兼容（跨端）、安全、无障碍等方面。 现在前端不再局限于之前的页面范畴，其能够基于NodeJS开发服务器端的一些应；，基于ELECTRON/RN开发客户端的应用；基于WebRTC实现在线传输，实现多人的会议；基于WebGL可在一些3D场景下进行开发，等等。

2.HTML

HTML(HyperText Makeup language)即超文本标记语言，超文本包括图片、表单、链接等，HTML其提供了诸多标签用于定义网页的内容结构，如img，a标签等。也可以在标签内通过标签属性设定属性值。

2.1HTML语法

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

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

（3）属性值推荐使用双引号包裹

（4）某些属性值可以省略，比如required、readonly等。(比如在input表单中某一栏写属性required，因为其属性值默认为true,那么我们只写一个required，即达到该栏必填的效果)

2.2HTML标签

除了上述提到的标签，还有列表标签、链接标签、

(1)列表

ol,ul表示有序列表和无序列表，此外还可以通过dl,dt,dd呈现列表。

(2)链接

用a标签表示。

(3)多媒体标签

如有img、audio、vedio表示图片、音频、视频等。

(4)其它标签

其它标签如输入input,文本框textarea，下拉列表select,段落标签p等等。

HTML除上面列举之外，还有很多标签，其在发展的过程中有删除、增加标签，但现在都在往语义化的方向发展。

语义化就是看到标签，知道其表示的含义。页面去掉样式（无CSS）或者加载失败的时候也能够让页面呈现出清晰的结构。例如：p—段落，h1—一号标题（之前学的全是语义化标签）。HTML5也新增了好多语义化的标签，例如：header、footer、nav、menu、section、article等等。在写页面的时候，我们可以直接引用这些标签，不需要再用没有任何含义的div标签了，对于机器可以识别，对于开发人员很容易明白。这就是HTML语义化。

语义化的好处：

1）代码结构清晰，更具可读性，方便团队开发与维护

2）有利于搜索引擎优化(SEO)：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别

3）有利于其他设备去读取或解析

(4)HTML标签的使用者

3.推荐

推荐去查看MDN文档、W3C标准去了解HTML中的标签。