这是我参与「第四届青训营 」笔记创作活动的第1天
认识前端
什么是前端？
前端，或者说Web前端，一开始指的是一个计算机Web应用（即网站）展现给用户浏览的前台页面。但随着前后端分离技术的出现、各种跨平台跨终端的Web应用的诞生，前端的概念也得到了进一步的延伸：从前台页面到管理后台、从PC浏览器到手机小程序，一切通过GUI与人进行交互来进行运作的Web应用都可以归为前端的一部分。
前端包括了哪些技术？
最经典的前端三大件，就是指的是大名鼎鼎的HTML、CSS、JavaScript三种语言了，他们分别从内容、样式、行为上对整个页面进行了精细化的定义和操纵，构建出了如今百花齐放的各种各样的网站。
到了如今，前端的技术栈更是在广度和深度都达到了浩如烟海的程度，从Vue、React、Angular等界面构建框架，到Element UI、iView等UI库，再到UNI-App、Taro等跨终端解决方案，各种各样的前端新技术每时每刻都在互联网上迸发。
前端应该关注什么？
既然前端的技术栈如此繁多，我们前端到底是为了什么而工作？我们要达到什么样的目的？我们应该关注什么呢？是页面的美观、功能的实用、数据的安全、优良的性能、良好的体验...事实上这些都是，但我们纵观前端的发展历程，可以窥见在不同的时代对于前端的关注点也是在不断变化的。
从最初的单纯追求美观与特效，到提升用户体验，前后端分离技术带来的效率提升需求，网页越来越多的功能对性能也做出了要求，组件化、模块化的概念让前端更加的工程化，到如今数据安全变成了用户关注的焦点，未来去中心化、Web3.0也有可能为前端带来更多的发展与机遇。
前端的边界在哪里
随着前端技术的发展，他所涵盖的内容也越来越多，今年也提出了类似“大前端”的概念，将所有与用户之间交互的UI层都统一为“大前端”。如Node.js，让JavaScript也能去编写服务端，Electron让前端三大件能够编写跨平台的应用程序。诸如这样的技术越来越多，让前端变得越来越“万能”，甚至有人鼓吹前端工程师都能进行全栈开发。可是前端不仅仅是简单的内容样式行为，后端也不是简单的收发请求操作数据库，他们各自领域的知识面和基本思维都是大相径庭的。前端归根结底就是基于UI编程，前端可以跨平台跨终端，但并不意味着前端就是真正万能的，我们要正确的去认识前端的边界。
HTML
初识HTML
HTML即Hyper Text Markup Language，超文本标记语言，它本质上是一种标记语言，通过一些列的标签将一些描述性文本进行标记，再通过浏览器处理渲染成页面上的文字、图形、动画、声音、视频、链接等等内容。 一个HTML标签有一个开始标签和结束标签，二者之间的所有代码构成了一个HTML元素：
<h1>一级标题<h1>
同时，HTML标签也可以进行嵌套：
<body>
<h1>一级标题<h1>
<p>段落内容<p>
<body>
渲染出来的网页元素可以用一颗DOM树来进行表示：
HTML语法
- 标签和属性对大小写不敏感，一般使用小写字母；
- 部分body没有内容的标签可以不写结束标签进行闭合，如input、meta、link等空标签；
- 属性值一般使用双引号包裹；
- 一些标志性的属性只要写上属性名就相对于设置了该属性，可以省略属性值，如readonly、required等。
页面结构
一个PC端的Web网页一般可以分为顶部Header、主体Main、侧边Aside、底部Footer四大部分，当然不同的网页可能也会出现不同的结构变化，如去掉侧边栏的三段式，去掉底部的无限滚动式等结构。
语义化
- 如前面提到的readonly、required等属性名，都是表达具体意义的英文单词，他们也对应着属性的含义，不仅如此HTML语言中的元素、属性值等都具备这样的特征，这就是HTML的语义化；
- 在开发的过程中，我们也应当遵循HTML语言设计的语义来进行编程，如ol（Ordered List）用于有序列表展示，ul（Unordered List）用于展示列表，h1~h6标签用于标题展示等；
- 语义化的好处，从程序员的角度出发，自然可以大大提高代码的可读性和项目的可维护性，从产品角度，有利于搜索引擎优化、同时还提高了无障碍性。
那么，我们该如何做到语义化呢？
- 首先，自然是要对HTML的基本标签和属性了解其具体的含义，正确的去使用他们；
- 在进行编程时，要思考每个内容的含义，适合使用什么样的标签来进行描述；
- 最后，就是亲力亲为，避免使用可视化工具生成的可读性差的代码应用到实际的生产过程中。
后记
HTML虽然看起来简单，尤其是Vue、React等构建框架流行的今天，很多人都不再重视最基础的HTM了。但是我们要知道如今丰富多彩的Web互联网，都是从当年一段普普通通的HTML代码开启的，学习和深入了解HTML，是我们学习前端的必经之路。
