2024年学HTML就看这篇呀（HTML详解），特殊渠道拿到阿里大厂面试真题

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

小牛马

HTML 样式实例 - 文本对齐

下面的标题“小牛马”相对于页面居中对齐。

实验楼

三、HTML 表格与 DIV 应用

====================================================================================

1.创建表格

---

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

我们先来创建一个简单的表格：

第一行第一列 第一行第二列 第二行第一列 第二行第二列

我们发现这个表格没有边框，接下来让我们为它添加一个 border 属性再来看看效果。

第一行第一列 第一行第二列 第二行第一列 第二行第二列

在浏览器显示效果为：

2.完善表格

---

caption 元素定义表格标题

表格一般都有标题，在 HTML 中表格标题通过 定义。

表格标题

第一行第一列 第一行第二列 第二行第一列 第二行第二列

给表格添加表头

表格的表头使用 标签进行定义，表头通常用于列名字。

支出表

支出 备注 32 买苹果 24 买饮料

表格与单元格的属性

表格的其他常用属性：

| 属性名 | 含义 | 常用属性值 |

| — | — | — |

| cellspacing | 设置单元格与单元格之间的距离 | 单位为px，像素值，默认为2px |

| cellpadding | 设置文字与单元格之间的距离 | 默认为1px |

| width | 设置表哥的宽度 | 单位为px |

| height | 设置表格高度 | 单位为px |

| bgcolor | 设置背景颜色 | red，green等 |

属性的使用和 border 类似，只需要在 table 标签中添加属性即可。

单元格跨行和跨列

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并列）和 rowspan（合并行）属性来帮助我们实现这一效果。

colspan 又称跨列，rowspan 又称跨行。

单元跨两列

姓名 电话 张三 344 22 112 211 32 123 李四 433 31 212 234 21 654

单元跨两行

姓名 张三 电话 344 22 112 234 21 654

3.div设置

---

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

语法：

div 和 table 的区别

div 布局：

小牛 小马

table 布局：

小牛 小马

两个布局最终效果相同：

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

table 元素布局：

• 优点

1.理解比较简单。  

2.不同的浏览器看到的效果一般相同。

• 缺点：

1.显示样式和数据绑定在一起。  

2.布局的时候灵活度不高。  

3.一个页面可能会有大量的 table 元素，代码冗余度高。  

4.增加带宽。  

5.搜索引擎不喜欢这样的布局。

div 元素布局：

• 优点：

1.符合 W3C 标准。  

2.搜索引擎更加友好。  

3.样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。  

4.节省代宽，代码冗余度低。  

5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

四、HTML 表单

============================================================================

1.创建表单

---

标签用于创建 HTML 表单，常见的表单格式为： ```c ```

• name：定义表单的名字。

• method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。

• action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action=“#”，则数据将被发送到包含表单的页面的 URL。

2.插入表单对象

---

网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等。

文字字段

在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本。 语法:

<input

type=“text”

name=“控件名称”

value=“文字字段的默认取值”

size=“控件的长度”

maxlength=“最长字符数”

/>

该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，可以自行选择。举栗子：

姓名：

年龄:

可以尝试给年龄输入值，如果文本字段长度超过了 3，就不能再输入了。

密码输入框

密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是“*”表示，保证周围人看不见输入的文本。

单选按钮

单选按钮可以使用户从选择列表中选择一个选项。

男

女

• 几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的。

• 同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。

• 可以尝试如果 name 不相同或者没有 name 会是什么情况。

复选框

复选框可以让用户从一个选项列表中选择超出一个的选项。

音乐

美术

数学

复选框可以拥有自己的名字，并不需要属于一个组。

按钮

HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用 元素或者 元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮（submit）

用于发送表单数据给服务器。

语法：

This a submit button

重置按钮（reset）

重置按钮用来清除用户在页面中输入的信息。

语法：

This a reset button

在文本框中输入内容，点击按钮即可清除。

匿名按钮（button）

没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果省略了 type 属性，那么这就是默认值。

语法：

This a anonymous button

This a anonymous button

不管使用的是 元素还是 元素，按钮的行为都是一样的。它们的不同点在于：

• 从前面的例子中也可以看出 元素允许使用 HTML 内容作为其标记内容，但 元素只接受纯文本内容。

• 使用 元素，可以有一个不同于按钮标签的值（通过将其设置为 value 属性）。（但是在 IE 8 之前的版本中是不行的）。

3.菜单和列表

---

菜单和列表主要是用来选择给定答案中的一种，这类选择中往往答案比较多。

下拉菜单

下拉菜单能够节省页面空间，正常状态下显示一个选项，单击展开所以选项。

成都 广州 四川 上海

下拉菜单的宽度是由 标记中包含的最长文本的宽度决定的。

列表项

在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有选项。

成都 广州 四川 上海

size=“2” 表示一次显示 2 条数据。

4.文本域

---

当用户想要填入多行文本时，就应该使用文本域而不是文本字段。文本域使用 标记。

留下您的联系方式：

五、HTML图像与框架

==============================================================================

1.插入图像

---

图像标签

在 HTML 中，图像由 标签定义。语法为：

• 是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，需要使用源属性（src）。src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

• alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容（一般不用设置）。

• 此外还可以通过设置 width 和 height 的值来设置图片的宽和高。

例子：

<img

src=“https://img0.baidu.com/it/u=394330416,3830680890&fm=253&fmt=auto&app=138&f=PNG?w=668&h=467”

alt=“小牛”

title=“你好啊”

width=“700px”

height=“600px”

/>

相对路径

这种路径是以引用文件的网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

• 图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，比如：

• 图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用/隔开，比如：

• 图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入…/ ，如果是上两级，则需要使用 …/ …/，以此类推，比如：

绝对路径

指当所有网页引用同一个文件时，所使用的路径都是一样的。比如D:\webStudy\https://blog.csdn.net/2401_84433570/article/details/xnm.png或者 https://img0.baidu.com/it/u=394330416,3830680890&fm=253&fmt=auto&app=138&f=PNG?w=668&h=467。

2.使用框架（iframe）

---

使用框架，可以在同一个浏览器窗口中显示不止一个页面。

语法：

iframe - 设置高度与宽度

属性默认以像素为单位,但是你可以指定其按比例显示(如：“60%”)。

iframe - 移除边框

frameborder 属性用于定义 iframe 表示是否显示边框。设置属性值为 “0” 移除 iframe 的边框:

src=“https://daohang.qq.com/?unc=Af31009”

width=“400”

height=“400”

frameborder=“0”

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性。

导航

因a 标签的 target 属性是名为 daohang 的 iframe 框架，所以在点击链接时页面会显示在 iframe 框架中。

需要保证 iframe 框架的 name 属性的名称与 a 标签的 target 属性名一致。

六、HTML5简介

============================================================================

1.HTML5代码规范

---

使用正确的文档类型

文档类型声明位于 HTML 文档的第一行：

可以省略 html 和 body 标签但不推荐

在标准 HTML5 中， 和 标签是可以省略的，比如下面的写法也是正确的：

我是标题

我是段落。

但是不推荐省略掉，建议还是写成下面这样：

我是标题

我是段落。

使用小写元素名

HTML5 元素名可以使用大写和小写字母，建议使用小写字母，会显得更加好看一点，千万不要使用大小写混写，那样会显得很不专业。建议的写法如下：

我是小牛马。

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如

元素)，但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错：

我是小牛。

我是小马。

建议写成下面这样：

我是小牛。

我是小马。

关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭,可以这样写：

建议的写法是还是关闭：

使用小写属性名

同样的 HTML5 属性名允许使用大写和小写字母。但是我们依然建议使用小写字母：

属性值

HTML5 属性值可以不用引号。但是属性值推荐使用引号，尤其是属性值有空格的话，一定要使用引号，不然不会起作用，属性的命名如果很长建议使用驼峰命名法：

图片属性

图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。建议定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。比如：

空格前后的等号

等号的前后可以使用空格，也可以不使用，推荐少用空格。

避免一行代码过长

使用 HTML 编辑器，一行代码过长时左右滚动代码来查看是不方便的。如果实在太长，建议分为几行来写。

空格和缩进

不要无缘无故的添加空行，一般一个模块或一个功能添加一个空行便于区分，缩进使用两个空格，不建议使用 Tab。

注释

快捷键为 Ctrl + /。首先要选中要注释的代码再使用快捷键。

2.HTML5 的改变

---

HTML5 是 HTML 最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年 所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5 添加了许多新的语法特征，其中包括 、 和 元素，同时集成了 SVG 内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如

、 、

和

----维基百科

3.新特性和新规则

---

新特性

• 语义特性：HTML5 新标准中添加了拥有具体含义的 HTML 标签比如： 、

• 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。

• 对本地离线存储的更好的支持。

• 用于媒介回放的 video 和 audio 元素。

• 用于绘画的 canvas 元素。

• 性能与集成特性：提供了非常显著的性能优化和更有效的计算机硬件使用。

• 设备兼容特性：能够处理各种输入和输出设备。

• CSS3 特性。

新规则

• 新特性应该基于 HTML、CSS、DOM、JavaScript。

• 减少对外部插件的需求，比如 Flash。

• HTML5 应该独立于设备

• 更多取代脚本的标记

• 更优秀的错误处理

4.新增的结构元素

---

HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。

首先来看一个普通的页面的布局方式：

以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。

而 HTML5 新标签带来的新的布局则是下面这种情况：

代码如下所示：

header

section

aside

section 标签

表示文档中的一个区域（或节）。比如章节、页眉、页脚或文档中的其他部分，一般来说会包含一个标题。

栗子：

section是什么？

一个新章节

article 标签

标签定义独立的内容。常常使用在论坛帖子，报纸文章，博客条目，用户评论等独立的内容项目之中。article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。

例子：

我是谁

一个小牛马

nav 标签

例子：

• HTML
• CSS
• JavaScript

• header 标签

  标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

  通常 header 标签至少包含一个标题标记（h1-h6），还可以包括 hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。

  例子：

  网站标题

  网站副标题

  footer 标签

  例子：

  Copyright ©1999-2022北京创新乐知网络技术有限公司

  aside 标签

  标签表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

  例子：

  作者简介

  一个小牛马

  5.废除的元素

  ---

  HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。

  纯表现元素

  纯表现元素指的是可以用 CSS 代替的元素。例如：basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 CSS 样式表中统一处理，所以将这些元素废除，用 CSS 样式进行替代。

  对可用性产生负面影响的元素

  对于 frameset 元素、frame 元素与 noframes 元素，由于 frame 框架对网页可用性存在负面影响，在 html5 中已不支持 frame 框架，只支持 iframe 框架，html5 中同时将 frameset、frame 和 noframes 这三个元素废除。

  只有部分浏览器支持的元素

  对于 applet、bgsound、blink、marquee 等元素，由于只有部分浏览器支持，特别是 bgsound 元素以及 marquee 元素，只被 IE 支持，所以在 html5 中被废除。其中 applet 元素可由 embed 元素或 object 元素替代，bgsound 元素可由 audio 元素替代，marquee 可以由 javascript 编程的方式替代。

  七、HTML5表单

  ============================================================================

  1.HTML5表单元素

  ---

  datalist 元素

  datalist 元素用于为文本框提供一个可供选择的列表，使用 datalist 元素来为表单小部件提供建议的、自动完成的值，并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 元素)。

  一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。

  栗子：

  What’s your favorite color?

  black blue green red white yellow

  也可以写成下面这样：

  What’s your favorite color?

  

  2.HTML5表单新增元素

  ---

  autocomplete 属性

  autocomplete 属性规定表单是否应该启用自动完成功能：

  自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。autocomplete 属性适用于 ，以及下面的 类型：text, search, https://blog.csdn.net/2401_84433570/article/details/url, telephone, email, password, datepickers, range 以及 color。

  例子：

  Name:
  

  E-mail:
  

  

  autofocus 属性

  autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有 标签的类型。

  例子：

  Name：
  

  运行效果为：

  

  form 属性

  form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 标签的类型。form 属性必须引用所属表单的 id。

  例子：

  First name:

  下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把

  first name 和 last name的值都提交。

  Last name:

  

  multiple 属性

  multiple 属性规定输入域中可选择多个值，适用于以下类型的 标签：email 和 file。

  例子：

  选择文件:

  novalidate 属性

  novalidate 属性规定在提交表单时不应该验证 form 或 input 域。适用于 ，以及下面的 类型：text, search, https://blog.csdn.net/2401_84433570/article/details/url, telephone, email, password, datepickers, range 以及 color。

  例子：

  E-mail:

  pattern 属性

  pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。pattern 属性适用于以下类型的 标签：text, search, https://blog.csdn.net/2401_84433570/article/details/url, telephone, email 以及 password。

  例子：

  Name:

  

  注：想要了解更多正则表达式的语法，请访问正则表达式手册。

  placeholder 属性

  placeholder 属性提供一种提示（hint），描述输入域所期待的值。适用于以下类型的 标签：text, search, https://blog.csdn.net/2401_84433570/article/details/url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。

  例子：

  

  required 属性

  required 属性规定必须在提交之前填写输入域（不能为空）。适用于以下类型的 标签：text, search, https://blog.csdn.net/2401_84433570/article/details/url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

  例子：

  

  3.HTML5输入类型

  ---

  HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

  Input 类型 - email

  email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

  例子：

  E-mail:
  

  

  Input 类型 - https://blog.csdn.net/2401_84433570/article/details/url

  https://blog.csdn.net/2401_84433570/article/details/url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 https://blog.csdn.net/2401_84433570/article/details/url 域的值。

  例子：

  Url:
  

  

  Input 类型 - number

  number 类型用于应该包含数值的输入域。属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。

  例子：

  number：<input

  type=“number”

  name=“points”

  min=“0”

  max=“10”

  step=“2”

  value=“2”

  />
  

  

  Input 类型 - range

  range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。

  例子：

  range:

  <input

  type=“range”

  name=“points”

  min=“1”

  max=“10”

  value=“2”

  step=“2”

  />
  

  

  Input 类型 - Date Pickers（日期选择器）

  HTML5 拥有多个可供选取日期和时间的新输入类型：

  • date - 选取日、月、年

  • month - 选取月、年

  • week - 选取周和年

  • time - 选取时间（小时和分钟）

  • datetime - 选取时间、日、月、年（UTC 时间）注意：此类型已被弃用，目前大多数浏览器都不再支持。

  • datetime-local - 选取时间、日、月、年（本地时间）

  例子：

  Date:
  

  
  
  

  Month:
  

  

  Input 类型 - color

  color 类型用于选择颜色。

  例子：

  运行效果为：

  

  八、HTML5 Canvas API

  =====================================================================================

  1.Canvas 元素

  ---

  canvas 元素的外观和 img 元素相似，但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性和 height 属性用来设置画布的宽和高，单位是 px。默认的画布的高度是 150px，宽度是 300px。

  <canvas

  id=“myCanvas”

  width=“200”

  height=“100”

  style=“border:2px solid #000000;”

  默认情况下 元素没有边框和内容，标签通常需要指定一个 id 属性 (脚本中经常引用)。

  2.绘制简单图形

  ---

  canvas 元素本身并不能实现图形绘制，所有的绘制工作必须要和 JavaScript 脚本结合起来。

  首先，给 canvas 元素添加一个 id 属性，这样能够让我们在 JavaScript 脚本中通过 id 属性找到对应的 canvas 元素。

  <canvas

  id=“myCanvas”

  width=“200”

  height=“100”

  style=“border:2px solid #000000;”

  添加了 id 属性后，找到对应的 canvas 元素：

  var myCanvas = document.getElementById(“myCanvas”);

  // 通过document.getElementById来找到id为myCanvas的元素

  然后通过 canvas 元素的 getContext()方法获取上下文，即创建 Context 对象，以获取允许进行绘制的 2D 环境。

  var ctx = myCanvas.getContext(“2d”);

  最后通过 Context 对象的相关方法完成绘制，比如：fillStyle()等。

  ctx.fillStyle = “red”;

  //设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）

  ctx.fillRect(0, 0, 100, 100);

  整体的代码：

  对不起，你的浏览器不支持canvas

  

  进行绘制时，需要指定确定的坐标位置，坐标原点(0,0)位于 canvas 的左上角，x 轴水平方向向右延伸，y 轴垂直向下延伸，如图：

  3.直线绘制

  ---

  • strokeStyle：设置或返回笔的颜色、渐变或模式。默认值为：#000000。

  • lineWidth：设置或返回当前的线条宽度 ，以像素计。

  • beginPath()：起始一条路径，或重置当前路径。

  • closePath()：创建从当前点回到起始点的路径。

  • moveTo()：把路径移动到画布中的指定点，不创建线条。

  • lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。

  • stroke()：绘制已定义的路径。

  绘制一条直线例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  绘制三角形例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  4.矩形绘制

  ---

  rect() 方法介绍

  使用 rect() 方法创建矩形。语法为：

  ctx.rect(x,y,width,height);

  参数说明：

  • x 表示矩形左上角的 x 坐标。

  • y 表示矩形左上角的 y 坐标。

  • width 表示矩形的宽度，以像素计。

  • height 表示矩形的高度，以像素计。

  注：使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

  栗子:

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  strokeRect() 方法介绍

  使用 strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。语法为：

  ctx.strokeRect(x, y, width, height);

  注：参数与 rect() 方法一致，唯一的区别是这里不需要再加一句 stroke() 或 fill() 方法。无法填色。

  前面绘制矩形的例子也可以这样写：

  对不起，你的浏览器不支持canvas

  fillRect() 方法介绍

  使用 fillRect() 方法创建实心矩形。语法为：

  ctx.fillRect(x, y, width, height);

  注：参数说明与前面一致，默认的填充颜色为黑色，可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

  栗子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  clearRect() 方法介绍

  使用 clearRect() 方法清空给定矩形内的指定像素。语法为：

  例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  5.圆和扇形的绘制

  ---

  使用 arc() 方法绘制圆或者椭圆。语法为：

  ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);

  参数说明：

  • x 表示圆的中心的 x 坐标。

  • y 表示圆的中心的 y 坐标。

  • r 表示圆的半径。

  • sAngle 表示起始角，以弧度计（特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度）。

  • eAngle 表示结束角，以弧度计。

  • counterclockwise 表示绘制圆的方向，值为 false 表示顺时针，为 true 表示逆时针。是一个可选值，默认值是 false。

  例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  绘制扇形也很简单，只需要给定角度值小于 2 * Math.PI 再闭合一下就可以了.

  栗子:

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  6.填充和渐变

  ---

  使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：

  ctx.fillStyle = color | gradient | pattern;

  参数说明：

  • color 表示绘图填充的颜色。默认值是 #000000。

  • gradient 表示用于填充绘图的渐变对象（线性或放射性）。

  • pattern 表示用于填充绘图的 pattern 对象。

  例子：

  绘制实心矩形，填充颜色为红色。

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  渐变

  使用 createLinearGradient() 方法创建线性渐变。语法为：

  ctx.createLinearGradient(x0, y0, x1, y1);

  参数说明：

  • x0 表示渐变开始点的 x 坐标。

  • y0 表示渐变开始点的 y 坐标。

  • x1 表示渐变结束点的 x 坐标。

  • y1 表示渐变结束点的 y 坐标。

  使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：

  gradient.addColorStop(stop, color);

  参数说明：

  • stop 表示渐变中开始与结束之间的位置。是介于 0.0 与 1.0 之间的值。

  • color 表示在结束位置显示的 CSS 颜色值。

  注：addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。我们可以多次调用 addColorStop() 方法来改变渐变。如果我们不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。

  例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  放射状/环形的渐变

  使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：

  ctx.createLinearGradient(x0, y0, x1, y1);

  参数说明：

  • x0 表示渐变的开始圆的 x 坐标。

  • y0 表示渐变的开始圆的 y 坐标。

  • r0 表示开始圆的半径。

  • x1 表示渐变的结束圆的 x 坐标。

  • y1 表示渐变的结束圆的 y 坐标。

  • r1 表示结束圆的半径。

  例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  fill() 方法

  使用 fill() 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。

  语法为：

  ctx.fill();

  注：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

  例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  7.文字绘制

  ---

  fillText() 方法

  使用 fillText() 方法在在画布上绘制实心文本。语法为：

  ctx.fillText(text, x, y, maxWidth);

  参数说明：

  • text 规定在画布上输出的文本。

  • x 表示开始绘制文本的 x 坐标位置（相对于画布）。

  • y 表示开始绘制文本的 y 坐标位置（相对于画布）。

  • maxWidth 表示允许的最大文本宽度，以像素计。可选。

  栗子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  strokeText() 方法

  使用 strokeText() 方法在画布上绘制空心文本。语法为：

  ctx.strokeText(text, x, y, maxWidth);

  注：参数说明与 fillText() 方法一致。

  例子：

  对不起，你的浏览器不支持canvas

  运行效果为：

  

  font 属性

  使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。

  textAlign 属性

  使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为：

  ctx.textAlign = “center|end|left|right|start”;

  参数说明：

  • start 默认值，表示文本在指定的位置开始。

  • center 表示文本的中心被放置在指定的位置。

  • end 表示文本在指定的位置结束。

  • left 表示文本左对齐。

  • right 表示文本右对齐。

  注：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本

  例子：

  对不起，你的浏览器不支持canvas

  计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

  • HTTP 常用的请求方式，区别和用途？

  • HTTPS 是什么？具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛？

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛？

  • HTTP 如何实现长连接？在什么时候会超时？

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的，UDP 为什么不可靠？

  

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法