Your browser doesn't support HTML5 video. Here is a link to the video instead.
抱歉，您的浏 览器不支持内嵌视频，不过不用担心，你可以 下载 并用你喜 欢 的 播 放 器 观 看 !<audio> ： 大部分同 <vedio>
controls：展示音频自带的控件
autoplay：音频马上自动播放
muted：是否静音
loop：音频结尾自动回到开始的地方
Your browser doesn't support HTML5 audio. Here is a link to the audio instead.
Your browser does not support the audio element.
type=“audio/ogg; codecs=opus”/>
： 通过 JavaScript 和 HTML 的 元素来绘制图形 //获取HTML
<canvas> 元素的引用const canvas = document.getElementById(‘canvas’);//获得一 个绘图上下文
const ctx = canvas.getContext(‘2d’);//让长方形变成绿色
ctx.fillStyle = ‘green’;//将 它的左上角放在(10, 10)，把它的大小设置成宽 150 高 100ctx.fillRect(10, 10, 150, 100);
3. meta viewport 是做什么用的，怎么写？
Step 1：使用目的 是为了在移动端不让用户缩放页面使用的
Step 2：怎么写 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
Step 3：解释每个单词的含义 with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度 maximum-scale=1 指定用户能够放大的最大比例 minimum-scale=1 指定用户能够缩小的最大比例
4.H5 是什么
简单粗暴：就是一种移动端页面
深入点：微信上的一种移动营销页面 总之不是 HTML5 5.label 标签的作用 label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签 相关的表单控件上。
<label for="Name">Number:</label><input type='text' name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>
6.行内元素有哪些？
块级元素有哪些？
空(void)元素有那 些？
首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性 值为“inline”，是“行内”元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、 <blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、 <code>
常用的内联块状元素有：
<img>、<input>
知名的空元素：
<br/> <hr/> <img/> <input/> <link/> <meta/> <br />
7.a 标签中 如何禁用 href 跳转页面 或 定位链接
e.preventDefault();href="javascript:void(0);
8. canvas 在标签上设置宽高和在 style 中设置宽高有什么区别
canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值 。
9.你做的页面在哪些流览器测试过？这些浏览器的内核分别 是什么?
IE: trident 内核 Firefox：gecko 内核 Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 GoogleChrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)
10.iframe 有哪些缺点?
iframe 是一种框架，也是一种很常见的网页嵌入方 iframe 的优点：
1.iframe 能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个 页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌 套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
iframe 的缺点：
1.会产生很多页面，不容易管理。
2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动 条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好 的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。 现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。
11.HTML5 新特性
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的 数据在浏览器关闭后自动删除; 新的技术 webworker, websocket, Geolocation;
12.HTML5 离线储存
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户 机器上的缓存文件。
原理： HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通 过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后 当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用： 页面头部像下面一样加入一个 manifest 的属性；
在 cache.manifest 文件的编写离线存储的资源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 在离线状态时，操作 window.applicationCache 进行需求实现。
13.浏览器是怎么对 HTML5 的离线储存资源进行管理和加 载的呢？
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第 一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面， 然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做 任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。
14.Doctype 作用? 严格模式与混杂模式如何区分？它们有 何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种 模式来渲染文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站 点无法工作。
（4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。复制代码 你知道多少种 Doctype 文档类型？ 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
15.HTML 与 XHTML——二者有什么区别
区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的 XML 标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“–”
8.图片必须有说明文字复制代码
1. 页面渲染时，dom 元素所采用的 布局模型,可通过 box-sizing 进行设置。根据计算宽高的区域可分为：
content-box (W3C 标准 盒模型 ) border-box (IE 盒模 型) padding-box (FireFox 曾经 支持 ) margin-box (浏览器未实现) Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；
2. ie 盒模型算上 border、padding 及自身（不算 margin）， 标准的只算上自身窗体的大小 css 设置方法
如下：
标准模型 :box-sizing:content-box;
IE 模型:box-sizing:border-box;
3.几种获得宽高的方式 :
dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。
dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取 到。但这种方式只有 IE 浏览器支持。 window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。
dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的 dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好的。
4.拓展各种获得宽高的方式 : 获取屏幕的高度和宽度（屏幕分辨率）：
window.screen.height/width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth 网页全文的高度和宽度： document.body.scrollHeight/Width 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth 网页可见 区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth
5.边距重叠解决方案(BFC) BFC 原理 :
内部的 box 会在垂直方向，一个接一个的放置 每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从做往右的格式化，否则相反） box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠 bfc 的区域不会与浮动区域的 box 重叠 bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面的也不 会影响外面的 计算 bfc 高度的时候，浮动元素也会参与计算 创建 bfc float 属性不为 none（脱离文档流） position 为 absolute 或 fixed display 为 inline-block,table-cell,table-caption,flex,inine-flex overflow 不为 visible 根元素 demo 上这块 margin-bottom:30px; 下这块 margin-top:50px;
1.请你谈谈 Cookie 的优缺点
优点：
极高的扩展性和可用性
-
数据持久性。
-
不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读取。 3) 可配置到期规则。 控制 cookie 的生命期，使之不会永远有效。偷盗者很可 能拿到一个过期的 cookie 。
-
简单性。 基于文本的轻量结构。
-
通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
-
通过加密和安全传输技术（ SSL ），减少 cookie 被破解的可能性。
-
只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。
缺点：
-
Cookie 数量和长度的限制 。 数量：每个域的 cookie 总数有限。 a) IE6 或更低版本最多 20 个 cookie b) IE7 和之后的版本最后可以有 50 个 cookie c) Firefox 最多 50 个 cookie d) chrome 和 Safari 没有做硬性限制 长度：每个 cookie 长度不超过 4KB （ 4096B ），否则会被截掉。
-
潜在的安全风险 。 Cookie 可能被拦截、篡改。如果 cookie 被拦截，就有 可能取得所有的 session 信息。
-
用户配置为禁用 。有些用户禁用了浏览器或客户端设备接受 cookie 的能 力，因此限制了这一功能。
-
有些状态不可能保存在客户端 。例如，为了防止重复提交表单，我们需要在 服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到 任何作用。
2.Array.prototype.slice.call(arr，2)方法的作用是：
利用 Array 原型上的 slice 方法，使用 call 函数的第一个参数，让这个方法中 的 this 指向 arr，并传递参数 2，实际上等于 arr.slice(2)，即从下标为 2 开 始截取到末尾。
3.以下代码执行后，控制台的输出是：
var a = 10; function a(){} console.log(typeof a)
A."number" B."object" C."function" D."undefined"
答案：C
函数提升优先级高于变量提升，所以代码等价于 function a(){} var a； a = 10; console.log(typeof a)
4、简单说一下浏览器本地存储是怎样的
总的来说，浏览器存储分为以下几种：
1、Cookie 存储，明文，大小限制 4k 等
2、localStorage，持久化存储方式之一，不用在两端之间传输，且限制大小为 10M
3、sessionStorage，会话级存储方式，浏览器关闭立即数据丢失
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
45644452)]
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
[外链图片转存中…(img-CSFg2HEu-1712945644453)]
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-J58oZ6y7-1712945644453)]
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
