1-4天面试题
第一天
[html]页面页面导入样式时，使用link和@import有什么区别？
区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
圣杯布局代码：
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
</style>
双飞翼布局代码：
<body>
<div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
</body>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
</style>
[js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
<script>
/*
* 初始化 arr
* 数组的长度 length
* 最小值 min
* 最大值 max
*/
function randomArr(arr, length, min, max) {
// 生成随机数
var num = Math.floor(Math.random() * (max - min + 1)) + min
// includes() 方法用于判断字符串是否包含指定的子字符串
if (!arr.includes(num)) {
// 数组不存在该值
arr.push(num)
}
// 递归进行
return arr.length === length ? arr : randomArr(arr, length, min, max)
}
console.log(randomArr([], 5, 2, 32))
</script>
第二天
[html]html的元素有哪些（包含H5）？
行内元素:
<span>...</span>
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<sup>...</sup> 上标
<sub>...</sub> 下标
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
块级元素:
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
H5元素:
<article> --- 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容
<section> --- 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<main> --- 页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<aside> --- 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
<header> --- 标签定义 section 或 document 的页眉。
<footer> --- 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
<hgroup> --- 标签用于对网页或区段（section）的标题进行组合
<nav> --- 标签定义导航链接的部分
<canvas> --- 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<video> --- 标签定义视频，比如电影片段或其他视频流。
<audio> --- 标签定义声音，比如音乐或其他音频流。
<embed> --- 标签定义嵌入的内容，比如插件。
<source> --- 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<datalist> --- 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
<details> --- 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
<summary> --- 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
<figure> --- 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
<figcaption> --- 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
<mark> --- 主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
<meter> --- 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
<output> --- 标签定义不同类型的输出，比如脚本的输出。
<progress> --- 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
<time> --- 标签定义日期或时间，或者两者。
<keygen> --- 标签用于对网页或区段（section）的标题进行组合
<command> --- 标签定义命令按钮，比如单选按钮、复选框或按钮。
[css] CSS3有哪些新增的特性？
text-shadow 文字阴影
2d、3d变换:
transform
rotate()
scale()
skew()
translate()
transition 过度动画
animation 自定义动画
@media 多媒体查询
display:flex 弹性盒子模型
边框(borders):
border-radius 圆角
box-shadow 盒阴影
border-image 边框图像
背景:
background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域
渐变：
linear-gradient 线性渐变
radial-gradient 径向渐变
[js] 写一个方法去掉字符串中的空格
方法1：
<script>
var str = ' abcd de er ft ge ';
function trim(str) {
var reg = /\s+/g;
if (typeof str === 'string') {
var trimStr = str.replace(reg,'');
}
console.log(trimStr)
}
trim(str)
</script>
**```
方法2：**
```javascript
<script>
var trim = function (str) {
return str.replace(/\s*/g, "");
}
console.log(trim('aa gg eed gd'))
</script>
去除字符串中的各种地方的空格
str.replace(/\s*/g,""); //去除字符串内所有的空格
str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
str.replace(/^\s*/,""); //去除字符串内左侧的空格
str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格
第3天
[html] HTML全局属性(global attribute)有哪些（包含H5）？
1.accesskey：提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。
2.autocapitalize：控制用户的文本输入是否和如何自动大写，它可以有以下的值：
- off or none，没有应用自动大写（所有字母都默认为小写字母）。
- on or sentences，每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
- words，每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
- characters，所有的字母都应该默认为大写。
3.class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。
4.contenteditable：一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。 如果可以，浏览器会调整元素的部件（widget）以允许编辑。
- true 或者空字符串，表明元素是可被编辑的；
- false，表明元素不能被编辑。
5.data-*：一类自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。 HTMLElement.dataset 属性可以访问它们。
6.dir：一个指示元素中文本方向的枚举属性。它的取值如下：
- ltr, 指从左到右，用于那种从左向右书写的语言（比如英语）；
- rtl, 指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）；
- auto, 指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。
7.draggable：一种枚举属性，指示是否可以 使用 Drag and Drop API 拖动元素。它可以有以下的值：
- true, 这表明元素可能被拖动
- false, 这表明元素可能不会被拖动
8.dropzone：枚举属性，指示可以使用 Drag and Drop API 在元素上删除哪些类型的内容。 它可以具有以下值：
- copy，表示drop将创建被拖动元素的副本
- move，表示拖动的元素将移动到此新位置。
- link，将创建一个指向拖动数据的链接。
9.hidden：布尔属性表示该元素尚未或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容
id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。
10.inputmode：向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 元素，但在contenteditable模式下可用于任何元素。
11.is：允许您指定标准HTML元素应该像已注册的自定义内置元素一样。
12.itemid：项的唯一全局标识符。
13.itemprop：用于向项添加属性。 每个HTML元素都可以指定一个itemprop属性，其中一个itemprop由一个名称和值对组成。
14.itemref：只有不是具有itemscope属性的元素的后代，它的属性才可以与使用itemref项目相关联。它提供了元素ID列表（而不是itemids）以及文档中其他位置的其他属性。
15.itemscope：itemscope（通常）与itemtype一起使用，以指定包含在关于特定项目代码块中的HTML。 itemscope创建Item并定义与之关联的itemtype的范围。 itemtype是描述项及其属性上下文的词汇表（例如schema.org）的有效URL。
16.itemtype：指定将用于在数据结构中定义itemprops（项属性）的词汇表的URL。 itemscope用于设置数据结构中按itemtype设置的词汇表的生效范围。
17.lang：帮助定义元素的语言:不可编辑元素所在的语言，或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”(由用连字符分隔的“语言子标记”组成)，格式在 Tags for Identifying Languages (BCP47) 中定义。xml:lang 优先于它。
18.part：元素的部件名称的空格分隔列表。Part名称允许CSS通过::part() 伪元素选择和设置阴影关联树中的特定元素。
19.slot：将shadow DOM阴影关联树中的一个沟槽分配给一个元素：具有slot属性的元素被分配给由元素创建的沟槽，其name属性的值与slot属性的值匹配。
20.spellcheck：枚举属性定义是否可以检查元素是否存在拼写错误。它可能具有以下值：
- true，表示如果可能，应检查元素是否存在拼写错误;
- false, 表示不应检查元素的拼写错误。
21.style：含要应用于元素的CSS样式声明。 请注意，建议在单独的文件中定义样式。 该属性和
22.tabindex：整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它可能需要几个值：
- 负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;
- 0 表示元素应通过顺序键盘导航可聚焦和可到达，但其相对顺序由平台约定定义;
- 正值意味着元素应该可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是tabindex的增加值。如果多个元素共享相同的tabindex，则它们的相对顺序遵循它们在文档中的相对位置。
23.title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。
24.translate ：枚举属性，用于指定在页面本地化时是否转换元素的属性值及其Text 节点子节点的值，或者是否保持它们不变。它可以具有以下值：
- 空字符串和"yes"，表示元素将被翻译。
- “no”, 表示该元素不会被翻译。
[css]在页面上隐藏元素的方法有哪些？
占位:
- visibility: hidden;
- margin-left: -100%;
- opacity: 0;
- transform: scale(0);
不占位:
- display: none;
- width: 0; height: 0; overflow: hidden;
仅对块内文本元素:
- text-indent: -9999px;
- font-size: 0;
[js] 去除字符串中最后一个指定的字符
<script>
function delLast(str, target) {
return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');
}
const str = delLast('asdfghhjdfd', 'f')
console.log(str) // asdfghhjdd
</script>
第4天
[html] HTML5的文件离线储存怎么使用，工作原理是什么？
原理：
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
怎么用：
首先，在html页面头部加入一个manifest的属性:
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
然后书写cache.manifest文件：
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
manifest （即 .appcache 文件）文件是简单的文本文件。
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
- 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
- 离线的情况下，浏览器就直接使用离线存储的资源。
[css] CSS选择器有哪些？哪些属性可以继承？
选择器：
1、标签选择器
以标签名开头，选择所有div元素
div {
margin: 0;
padding: 0;
}
2、类选择器
给标签取class名，以点（.）加class名开头，选择所有该class名的元素
<div class="wrap"></div>
.wrap {
margin: 0;
padding: 0;
}
3、id选择器
给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘wrap’”的元素
<div id="wrap"></div>
#wrap {
margin: 0;
padding: 0;
}
4、子选择器
以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)
div>p {
margin: 0;
padding: 0;
}
<div>
<p></p>
<p></p>
<span></span>
</div>
5、包含选择器
以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块)
div p {
margin: 0;
padding: 0;
}
<div>
<p></p>
<p></p>
<span>
<p></p>
</span>
</div>
6、全局通配符选择器
以*开头(星号标在大括号前，修饰了包含body所有的标签)
* {
margin: 0;
padding: 0;
}
<body>
<div>
<p class="first"></p>
<p></p>
<p></p>
</div>
</body>
7.属性选择器
8.伪类选择器
9.伪元素选择器
可以继承的属性：
1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
5、光标属性：
cursor：光标显示为何种形态
[js]写一个方法把下划线命名转成大驼峰命名
<script>
function transoform(str) {
var result = str.split('');
result.forEach(function (e, i, a) {
if (e === '_') {
a[i + 1] = a[i + 1].toUpperCase(); }
});
return result.join('').replace(/\_*/g, '');
}
var result = transoform('_if_you_are_my_world');
console.log(result); // IfYouAreMyWorld
</script>