面试题总结

最新推荐文章于 2024-08-25 18:26:48 发布

り沫莉ゝ

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量160

点赞数 2

文章标签： html css javascript

本文链接：https://blog.csdn.net/Lily68910/article/details/112618547

版权

本文介绍了HTML中link与@import导入样式的区别，包括加载时机、兼容性和动态修改样式的能力。接着详细阐述了圣杯布局和双飞翼布局在解决三栏布局问题上的异同，提供了两种布局方式的代码实现。此外，讨论了CSS3的新特性，如边框圆角、过渡动画和2D/3D变换。最后，涉及了JavaScript数组处理、HTML元素、CSS选择器、HTML5离线存储及其工作原理，以及CSS伪类选择器等知识点。

摘要由CSDN通过智能技术生成

页面导入样式时，使用link和@import有什么区别？

区别：
1.link是HTML标签，@import是css提供的。

2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。

3.link没有兼容性问题，@import不兼容ie5以下。

4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

圣杯布局和双飞翼布局的理解和区别，并用代码实现

作用：

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局代码：

<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="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;
}
#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>

<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>

在这里插入图片描述

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

 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)
    }

html的元素有哪些（包含H5）

H5新增

header
section
asize
footer
nav
article
audio
video

块元素

div、p、h1-h6、ol、ul、li
table、tbody、td、tr、thead
dl、dt、dd

行内元素:

a、input、button
em、i
sub、sup
label
strong、span

CSS3有哪些新增的特性

边框圆角：border-radius
盒子阴影：box-shadow
边框图像：border-image 
文字阴影：text-shadow
过度动画：transition
自定义动画：animation

2d、3d变换
transform
rotate()旋转
scale()缩放
skew()
translate()位移

背景:
background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域

渐变：
linear-gradient 线性渐变
radial-gradient 径向渐变


文本效果;
word-break
word-wrap
text-overflow
text-shadow
text-wrap
text-outline
text-justify

弹性盒子(flexbox)
多媒体查询@media

写一个方法去掉字符串中的空格

var trim = function(str){
return str.replace(/\s*/g,"");
}
str.replace(/\s*/g,""); //去除字符串内所有的空格

str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格

str.replace(/^\s*/,""); //去除字符串内左侧的空格

str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格

HTML全局属性(global attribute)有哪些（包含H5）

全局属性：用于任何HTML5元素的属性

accesskey:设置快捷键

class:为元素设置类标识

contenteditable:指定元素内容是否可编辑

contextmenu:自定义鼠标右键弹出上下文菜单内容（仅firefox支持）

data-*:为元素增加自定义属性

dir：设置元素文本方向（默认ltr；rtl）

draggable:设置元素是否可拖拽

dropzone:设置元素拖放类型（copy|move|link,H5新属性，主流均不支持）

hidden:规定元素仍未或不在相关

id:元素id，文档内唯一

lang:元素内容的语言

spellcheck:是否启动拼写和语法检查

style:行内css样式

tabindex:设置元素可以获得焦点，通过tab导航

title:规定元素有关的额外信息

translate:元素和子孙节点内容是否需要本地化（均不支持）

在页面上隐藏元素的方法有哪些

占位:
visibility: hidden;
margin-left: -100%;
opacity: 0;
transform: scale(0);

不占位:
display: none;
width: 0; height: 0; overflow: hidden;

仅对块内文本元素:
text-indent: -9999px;
font-size: 0;

去除字符串中最后一个指定的字符

function trim(str) { 
   if(typeof str === 'string'){ 
       var trimStr=str.substring(0,str.length-1) 
      } 
      return trimStr; 
  }

HTML5的文件离线储存怎么使用，工作原理是什么

优点:
没有网络时可以浏览,加快资源的加载速度,减少服务器负载

使用:
只需要在页面头部加入,然后创建manifest.appcache文件

manifest.appcache文件配置:
1)CACHE MANIFEST放在第一行
2)CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要列出来
3)NETWORK:表示在线才能访问的资源列表,如果CACHE列表里也存在,则CACHE优先级更高
4)FALLBACK:表示如果访问第一个资源是吧,那么使用第二个资源来替换它

浏览器如何解析manifest
1.在线情况:浏览器发现html头部有manifest属性,他会请求manifest文件,如果是第一次访问,那么浏览器会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访问过并存储,那么浏览器使用 离线的资源价值,然后对比新的文件,如果没有发生改变就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储
2.离线情况:浏览器就直接使用离线存储资源

与传统浏览器的区别
1)离线缓存是针对整个应用,浏览器缓存是单个文件
2)离线缓存可以主动通知浏览器更新资源

状态 window.applicationCache对象的status属性
0:无缓存
1:闲置
2.检查中,正在下载描述文件并检查更新
3:下载中
4:更新完成
5:废弃,应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

事件 window.applicationCache对象的相关事件
1)oncached:当离线资源存储完成之后就触发这个事件
2)onchecking:当浏览器对离线存储资源进行更新检查的时候触发
3)ondounloading:当浏览器开始下载离线资源的时候会触发
4)onprogress:当浏览器在下载每一个资源的时候会触发
5)onupdateready:当浏览器对离线资源更新完成之后触发
6)onnoupdate:当浏览器检查更新之后发现没有这个资源时触发

注意事项
站点离线存储的容量限制是5M
如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源,在同一个域下
在manifest中使用的相对路径,相对参照物为manifest文件
CACHE MANIFEST字符串硬在第一行,且必不可少
系统会自动缓存引用清单文件的HTML文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

CSS选择器有哪些？哪些属性可以继承？

选择器

　id选择器(#myid)、

　　类选择器(.myclassname)、

　　标签选择器(div, h1, p)、

　　相邻选择器(h1 + p)、

　　子选择器（ul > li）、

　　后代选择器（li a）、

　　通配符选择器（*）、

　　属性选择器（a[rel=”external”]）、

　　伪类选择器（a:hover, li:nth-child）
　　
    伪元素选择器

可以继承的属性

所有元素可继承的： 
visibility和cursor 

终极块级元素可继承的： 
text-indent和text-align 

内联元素可继承的： 
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction 

列表元素可继承的： 
list-style、list-style-type、list-style-position、list-style-image

不可继承的：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。

写一个方法把下划线命名转成大驼峰命名

 function changeStr(str){
   if(str.split('_').length==1)return;
   str.split('_').reduce((a,b)=>{
     return a+b.substr(0,1).toUpperCase() + b.substr(1)
   })
}

简述超链接target属性的取值和作用

1._blank

打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel="noopener norefferrer" 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。

2._parent

在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。

3._top

在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。

补充：target值也可以是标准值之外的任意字符，这样的话达到的效果就是一半的_blank：即如果当前浏览器还没有打开这个链接，则会弹出新窗口打开此链接；如果已经打开了这个链接，则不会再重复弹出第二个窗口，而是刷新已打开的窗口链接。

CSS3新增伪类有哪些并简要描述

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

:nth-child(odd)选择奇数行

:nth-child(even)选择偶数行

:nth-child(2n)选择偶数行

:nth-child(2n+1)选择奇数行

写一个把字符串大小写切换的方法

let str = 'aBcDeFgH'
let arr = []
for(let item of str) {
  if (item === item.toUpperCase()) {
    item = item.toLowerCase()
  } else {
    item = item.toUpperCase()
  }
  arr.push(item)
}
let newStr = arr.join('')
console.log(newStr)
// AbCdEfGh

function caseConvert(str){
    return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2)=>{
	return `${s1.toUpperCase()}${s2.toLowerCase()}`
    })
}
caseConvert('AsA33322A2aa') //aSa33322a2AA

label都有哪些作用？并举相应的例子说明

使用方法：
input必须要有id属性，label中的for属性对应此 id
<label for="inputId"><input id="inputId" type="text" /> 文本</label>

<label for="inputId"><input id="inputId" type="checkbox" /> 文本</label>

作用

可以获得和表单项同样的事件

比如输入框，点击 label 可以获取焦点
比如单选框，点击 label 可以被选中

用css创建一个三角形，并简述原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 50px;
      border-color: white white red white;
    }
  <syle>
</head>
<body>
  <div class="box"></div>
</body>
<html>

写一个去除制表符和换行符的方法

var str = '大家好  去除制表符和换行\n发生的发生';
        function fn(str) {
            var s = str.replace(/\t|\n|\v|\r|\f/g,'');
            return s;
        }

\f 匹配换页字符。
\n 匹配换行字符。
\r 匹配回车符字符。
\t 匹配制表字符。
\v 匹配垂直制表符。
\s会匹配空格

り沫莉ゝ

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
面试题总结

第1天页面导入样式时，使用link和@import有什么区别？区别：1.link是HTML标签，@import是css提供的。2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。3.link没有兼容性问题，@import不兼容ie5以下。4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。圣杯布局和双飞翼布局的理解和区别，并用代码实现圣杯布局：DOM:headerleft圣杯布局rightfooter
复制链接

扫一扫