2022.1.18
今日题目来源http://www.h-camel.com/index.html (每日三加一，答案选择评论区好的，同时写出自己的答案。转载加学习，加油!!!)**
1. [html] 页面导入样式时，使用link和@import有事么区别？
区别：
1.link是XHTML标签，除了加载CSS，还可以定义RSS，定义rel连接属性。@import是css提供的，且只能加载css。
2.link引入的样式在页面加载的同时进行加载，@import引入的样式需要在页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下
4.link可以通过js操作DOM动态进行引入样式表改变样式，而@import不可以。
2. [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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用cale去计算中间区域</title>
<style>
#hd {
height: 50px;
background: #666;
text-align: center;
}
#bd {
height: 100px;
width: 100%;
background-color: aquamarine;
}
#left {
float: left;
width: 200px;
height: 100%;
background-color: green;
}
#center {
float: left;
width: calc(100% - 400px);
height: 100%;
background-color: blue;
}
#right {
float: right;
width: 200px;
height: 100%;
background-color: red;
}
#footer {
height: 50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
双飞翼布局代码：
<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>
3. [js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值.
描述：
1. 这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr。
var arr = new Array(5);
var num = randomNumber();
var i = 0;
randomArr(arr,num);
function randomArr(arr,num) {
if (arr.indexOf(num)< 0){
arr[i] = num;
i++;
} else {
num = randomNumber();
}
if (i>=arr.length){
console.log(arr);
return;
}else{
randomArr(arr,num)
}
}
function randomNumber() {
return Math.floor(Math.random()*31 + 2)
}
// 自己的，没有完成第一个条件。
let arr = [];
function addArr(arr) {
if (arr.length == 5) {
console.log(arr);
return arr;
} else {
let newNum = randoms(1, 6);
if (arr.indexOf(newNum) == -1) {
arr.push(newNum);
} else {
console.log('有重复');
}
addArr(arr);
}
}
// 生成最大值和最小值之间的随机数
function randoms(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
4. [html] html的元素有哪些（包含H5）？
块级元素：
head -
meat - 申明页面的诸多属性
title - 窗口标题
style - 样式
body - 文本内容
header - 头部块
section - 内容块
footer - 底部块
article - 文章标签
aside
nav
menu
bir
hr - 下划线
h1-h6 描述标题
div
p
ul
li
ol
oi
dl
dt
dd
form
table
theader
tbody
tr
th
行内元素
label
a
span
td
input
button
strong
b
i
去除的元素
font
5. [css] CSS3有哪些新增的特性？
边框(borders):
border-radius 圆角
box-shadow 盒阴影
border-image 边框图像
背景:
background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域
渐变：
linear-gradient 线性渐变
radial-gradient 径向渐变
文本效果;
word-break
word-wrap
text-overflow
text-shadow
text-wrap
text-outline
text-justify
转换：
2D转换属性
transform
transform-origin
2D转换方法
translate(x,y)
translateX(n)
translateY(n)
rotate(angle)
scale(n)
scaleX(n)
scaleY(n)
rotate(angle)
matrix(n,n,n,n,n,n)
3D转换：
*3D转换属性：
transform
transform-origin
transform-style
3D转换方法
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(x)
rotateY(y)
rotateZ(z)
perspective(n)
过渡
transition
动画
@Keyframes规则
animation
弹性盒子(flexbox)
多媒体查询@media
6. [js] 写一个方法去掉字符串中的空格
var str = ' abc d e f g ';
function trim(str) {
var reg = /\s+/g;
if (typeof str === 'string') {
var trimStr = str.replace(reg,'');
}
console.log(trimStr);
}
trim(str);
str.replace(/\s*/g,""); //去除字符串内所有的空格
str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
str.replace(/^\s*/,""); //去除字符串内左侧的空格
str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格
string.split(' ').join('')
7. [html] HTML全局属性(global attribute)有哪些（包含H5）？
属性 描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname）
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制，移动，或链接，或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translateNew 指定是否一个元素的值在页面载入时是否需要翻译
8. [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;
9. [js] 去除字符串中最后一个指定的字符
function delLast(str, del) {
if (typeof str !== 'string') {
return false;
} else {
let index = str.lastIndexOf(del);
str.substring(0, index) + str.substring(index + 1, str.length);
}
}
10. [html] HTML5的文件离线存储怎么使用，工作原理是什么？(好像快要废弃了)
（1）背景介绍：
HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，
在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css等等文件，
但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。
而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
（2）知识剖析：
1.原理：
HTML5的离线存储是基于一个新建的.manifest文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，
这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
2.什么是manifest文件
Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存
（3）常见问题：
如何使用离线存储
（4）解决方案：
1）页面头部像下面一样加入一个manifest的属性。
2）在cache.manifest文件的编写离线存储的资源。
以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，
更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。
离线存储的manifest一般由三个部分组成：
1. CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2. NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。
不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3. FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
