标签：Web 面试题 元素 浏览器 标签 WebGL Javascript HTML CSS

一、HTML基础
1.常见浏览器的内核
（1）IE: trident 内核

（2）Firefox：gecko 内核

（3）Safari: webkit 内核

（4）Opera: 以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核

（5）Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发 )

2.HTML 开头Doctype的作用
html网页声明，位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用
哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3.HTML5新特性
用于绘画canvas 元素。

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

地理位置：Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问

本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。

语意化更好的内容元素，比如 article、footer、header、nav、section。

表单控件，calendar、date、time、email、url、search。

4.对 WEB 标准以及 W3C 的理解与认识?
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

5.HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?
(1)行内元素

a - 锚点
img - 图片
input - 输入框
select - 项目选择
span - 常用内联容器，定义文本内区块
(2)块元素

div - 常用块级容易，也是 css layout 的主要标签
form - 交互表单
h1~h5 -标题
table - 表格
ul - 非排序列表
(3)空元素( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )

br 换行
hr 分隔线
input 文本框等
img 图片
link | meta 引入资源标签
6.什么是 WebGL,它有什么优点?
WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。
WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题：

第一，它通过 HTML 脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器 插件支持 ;

第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的 OpenGL 接口实现的。

通俗说 WebGL 是c基于anvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 、echarts等，这些库多数用于 HTML5 游戏开发。

7.cookies，sessionStorage 和localStorage 的区别?
1）Cookie

每个域名存储量比较小（各浏览器不同，大致 4K ）
所有域名的存储量有限制（各浏览器不同，大致 4K ）
有个数限制（各浏览器不同）
会随请求发送到服务器
2）LocalStorage

永久存储
单个域名存储量比较大（推荐 5MB ，各浏览器不同）
总体数量无限制
3）SessionStorage

只在 Session 内有效
存储量更大（推荐没有限制，但是实际上各浏览器也不同）
8.说说你对 HTML 语义化的理解?
(1)什么是 HTML 语义化？

<基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等 >
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

(2)为什么要语义化？

为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
用户体验：例如 title、 alt用于解释名词或解释图片信息、 label 标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循 W3C标准的团队都遵循这个标准，可以减少差异化。
(3) 语义化标签

 header、footer、nav、section、article、aslde、figure（媒体元素，比如一些视频，图片啊等等）
1
9.link 和@import 的区别?
区别 1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事 务； @import 属于 CSS范畴，只能加载 CSS 。
区别 2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
区别 3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
区别 4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支 持。
二、CSS基础
1.CSS 的盒子模型
标准的盒模型：width = content
IE 盒模型：width = content + padding + border + border
2.几种清除浮动的方法
父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义 伪类:after 和zoom（兼容ie6、7）
 #parent:after{
    content:" ";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}
1
2
3
4
5
6
7
父级 div 定义 overflow:hidden / overflow:auto
3.box-sizing 属性和用法
标准盒子模型：width +padding + border
怪异盒子模型（IE盒子模型）：width + border

4.BFC (是什么，如何产生，作用)
BFC是什么

BFC（Block Formatting Context）即“块级格式化上下文”

可以把 BFC 想象成一个大箱子，箱子外边的元素将不与箱子内的元素 产生作用

如何产生 BFC

当一个 HTML 元素满足下面条件的任何一点，都可以产生 Block Formatting
Context：
a、float 的值不为 none
b、overflow 的值不为 visible
c、display 的值为 table-cell, table-caption, inline-block 中的任何一个
d、position 的值不为 relative 和 static
CSS3 触发 BFC 方式则可以简单描述为：在元素定位非 static，relative 的情况下触发，float 也是一种定位方式。

BFC 的作用与特点

作用：不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖
特点：

float 的值不为 none。
overflow 的值不为 visible。
display 的值为 table-cell, table-caption, inline-block 中的任何一个。
position 的值不为 relative 和 static。
5.页面布局的方式有哪些?
多栏——bootstrap栅格系统
弹性——FlexBox
瀑布流
响应式布局
*流式
*双飞翼
三、js基础
JS 数据类型
基本类型：Number、Boolean、String、null、undefined、symbol（ES6 新增的），BigInt（ES2020）
引用类型：Object，对象子类型（Array，Function）

bigint
带符号的范围是-9223372036854775808到9223372036854775807。无符号的范围是0到18446744073709551615。
int 普通大小的整数。带符号的范围是-2147483648到2147483647。无符号的范围是0到4294967295。

就是值得范围的问题，如果需要大于int的范围，就用bigint.

事件流
事件流是网页元素接收事件的顺序，"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。
虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div>
        <p id="parEle">我是父元素    <span id="sonEle">我是子元素</span></p>
    </div>
</body>
</html>

标签：Web,面试题,元素,浏览器,标签,WebGL,Javascript,HTML,CSS
来源： https://blog.csdn.net/DamonSalvatore18/article/details/121951481

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。