今天是2022年第一天，站在2022年的开始回首整个2021年并没有发现自己有很大的进步。2022年一定要行动起来，丰富自己。
2022年给自己定几个目标：
- 重新学习前端之路
- 搭建一个自己的博客网站 ---每周发送一至两篇文章记录自己重新学习前端之路
- 培养自己一个爱好
- 减肥
- 带老婆出去旅游一趟
- 每月读一本书
重学之路从HTML开始
HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等 HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 ③HTML 3.2：1997年1月14日，W3C推荐标准。 ④HTML 4.0：1997年12月18日，W3C推荐标准。 ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持 `
HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签>
HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。
HTML基础结构
文档声明头
<!DOCTYPE html> 声明为 HTML5 文档页面的根元素
<html> 元素是 HTML 页面的根元素头部标记
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。浏览器标签名
<title> 元素描述了文档的标题，浏览器标签名，通常放到head里面页面主体
<body> 元素包含了可见的页面内容常见的标签
块级元素
块级元素只能出现在 <body> 元素内。
格式
默认情况下，块级元素会新起一行。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的流内容 (en-US)类别，而”行内“类别相当于 HTML5 中的措辞内容 (en-US)类别，不过除了这两个还有其他类别。
标签与描述
标签名 | 描述 |
address | 联系方式信息 |
article (HTML5) | 文章内容 |
aside (HTML5) | 伴随内容 |
blockquote | 块引用 |
dd | 定义列表中定义条目描述 |
div | 定义列表中定义条目描述 |
dl | 文章内容 |
fieldset | 表单元素分组 |
figcaption (HTML5) | 图文信息组标题 |
figure (HTML5) | 可附标题内容元素 |
footer (HTML5) | 区段尾或页尾 |
form | 表单 |
h1~h6 | 标题 |
header (HTML5) | 页头 |
hgroup (HTML5) | 标题组 |
hr | 分割线 |
nav (HTML5) | 导航 |
noframes | 针对不支持框架的用户的替代内容 |
noscript | 针对不支持客户端脚本的用户的替代内容 |
ol | 有序列表 |
p | 段落 |
section (HTML5) | 一个页面区段 |
table | 表格 |
tbody | 表格中的主体内容 |
td | 表格中的单元 |
tfoot | 表格中的表注内容（脚注） |
th | 表格中的表头单元格 |
thead | 表格中的表头内容 |
time | 日期/时间 |
tr | 表格中的行 |
ul | 无序列表 |
行内元素
一般情况下，行内元素只能包含数据和其他行内元素。
格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
标签与描述
标签名 | 描述 |
a | 锚 |
abbr | 缩写 |
acronym | 只取首字母的缩写 |
b | 粗体 |
bdo | 文字方向 |
big | 大号文本 |
br | 简单的折行 |
button | 按钮 (push button) |
cite | 引用(citation) |
code | 计算机代码文本 |
command | 命令按钮 |
dfn | 项目 |
del | 被删除文本 |
em | 强调文本 |
embed | 外部交互内容或插件 |
i | 斜体字 |
img | 图像 |
input | 输入控件 |
kbd | 键盘文本 |
label | input 元素的标注 |
map | 图像映射 |
mark | 有记号的文本 |
objec | 内嵌对象 |
progress | 任何类型的任务的进度 |
q | 短的引用 |
samp | 计算机代码样本 |
select | 选择列表（下拉列表） |
small | 小号文本 |
span | 文档中的节 |
strong | 强调文本 |
sub | 下标文本 |
sup | 上标文本 |
textarea | 多行的文本输入控件 |
time | 日期/时间 |
tt | 打字机文本 |
var | 文本的变量部分 |
video | 视频 |
wbr | 可能的换行符 |
行内块元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
格式 默认情况下，行内元素不会以新行开始，能够识别宽高
标签与描述
标签名 | 描述 |
img | 图片 |
input | 输入框 |
textarea | 多行文本 |
相互之间的转换
- 块级标签转换为行内标签：display:inline;
- 行内标签转换为块级标签：display:block;
- 转换为行内块标签：display：inline-block;
常?的meta标签
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
常用的meta标签：
- charset，用来描述HTML文档的编码类型：
<meta charset="UTF-8" >- keywords，页面关键词：
<meta name="keywords" content="关键词" />- description，页面描述：
<meta name="description" content="页面描述内容" />- refresh，页面重定向和刷新：
<meta http-equiv="refresh" content="0;url=" />- viewport，适配移动端，可以控制视口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">- 搜索引擎索引方式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">相关面试题
HTML5有哪些更新
- 新增语义化标签：nav、header、footer、aside、section、article
- 音频、视频标签：audio、video
- 数据存储：localStorage、sessionStorage
- canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
- input标签新增属性：placeholder、autocomplete、autofocus、required
- history API：go、forward、back、pushstate
移除的元素有
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
对HTML语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：
- 有利于SEO，有利于搜索引擎爬虫；
- 增强了可读性，结构更加清晰，便于团队的开发与维护。
常?的meta标签有哪些
参考上文
行内元素有哪些？块级元素有哪些？
参考上文
head 标签有什么作用，其中什么标签必不可少？
head 标签用于定义文档的头部，它是所有头部元素的容器。 head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分：base, link, meta, script, style, title 其中 title 定义文档的标题，它是 head 部分中唯一必需的元素。
DOCTYPE(?档类型) 的作?
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚? JavaScript 脚本的解析。它必须声明在HTML?档的第??。 浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：
- CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
- BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
src和href的区别
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加
Canvas和SVG的区别
- SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 其特点如下：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
- Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。 其特点如下：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。
渐进增强和优雅降级之间的区别
- 渐进增强（progressive enhancement): 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
- 优雅降级 (graceful degradation)： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
两者区别：
- 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
- 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。