前端与HTML | 青训营笔记

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

前言

这个系列文章是参与字节青训营学习课程时做的笔记记录，仅供参阅，对于复习和回顾还是有一定帮助的。第一篇内容不长，仅仅是对HTML和整个前端生态的的一些了解。

前端工作

前端技术栈

前端最基础的技术栈都归结为三个，本质是HTML（内容），CSS（样式）和JavaScript（行为）的组合。所有的工作都是在为这三层做一些铺垫，然后通过http或者https协议发送网络请求给服务端。然后服务端返回请求数据提供前端渲染。这种普遍的业务流程形成了业务核心之一。

其他的前端框架以及衍生的等等依赖大部分都是为前端的这个基础工作服务的，因此学好三剑客尤为重要。

前端关注面

• 产品而言：美观，功能，无障碍，安全，性能，兼容，体验这是前端最为关注的几个点，前端人员是面向用户的，直接和用户打交道的，因此在前端的工作中，对于前述几个点都需要有很好的把握和关注才能创造一个较为满意的前端产品。

• 学习而言：前端的技术栈相比后端更为繁杂，虽有体系但不完全一家，各种技术更新比较频繁，需要时刻关注前沿消息，学习新技术。现在主流的一些学习框架就是React，Vue，或者其他可视化的框架WebGL等，这里不一一列举。

• 开发而言：一个编辑器一个主流浏览器便可以进行前端开发工作，开发工作的前期准备较为简易。

HTML

HTML是什么？作为一种超文本标记语言，它的工作就是将各种资源连接起来形成一个整体，组成资源骨架。通过一系列的标签将不同区域的internet资源进行加载到一起这就是HTML的核心。因此学习HTML本质就是学习标签语法的过程。

DOM树

浏览器渲染时，页面首先对一个HTML的解析会渲染成上图这个DOM树结构，这是浏览器渲染的第一步。整个页面骨架就渲染成一个树形，通过节点包含的方式不断向下添加标签。

标签

标签语法

• 标签和属性不区分大小写，但推荐小写
• 空标签可以不闭合：input，meta
• 属性值最好使用双引号
• 部分属性值可以省略：disabled，required等
• 部分标签的属性必须存在：img中的alt

标签语义化

是什么

HTML中的元素、属性以及属性值都有自己的含义

如何做

网站一般分为头部、底部、导航、侧边栏、文章等几个模块，每个模块下内容又可以分为标题、段落、超链接、代码、地址、时间、英文缩写、拼音等，我们就可以根据不同的模块，模块下的内容不同的作用或者意义，进行拆分，使用不同语义的标签进行书写，从而达到语义化的目的。

有何用

HTML的标签语义化的作用：

• 增加代码可读性（开发者）

• 让搜索引擎更容易懂，利于 SEO（搜索引擎）

• 结构明确在没有CSS加载前也有较为明确的结构（浏览器）

• 方便其他阅读设备阅读（阅读器）

标签说明

• HTML标签分为行内和块级

  • 行内：span，img，vedio，audio等
  • 块级：div，p，title，session等

• 也可以从语义化角度区分

  • 语义化标签：blockquote，p，title，strong
  • 非语义化：div，span

总结

这是前端的入门学习，本人也只是入行前端一年半菜鸟，参加字节青训营不断充实技术，在基础方面更要打牢固，只有不断学习才能进步~