前端学习之路–重学开始（一）

前端学习之路--重学开始（一）

今天是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)”策略的缘由所在。