面试题二（6道）

最新推荐文章于 2024-09-21 09:30:15 发布

December_shi

最新推荐文章于 2024-09-21 09:30:15 发布

阅读量214

点赞数 1

分类专栏：面试题文章标签： html css js

本文链接：https://blog.csdn.net/December_shi/article/details/112790168

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

全局属性 可用于任何 HTML 元素。

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditable（h5）	规定是否可编辑元素的内容。
contextmenu（h5）	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*（h5）	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggable（h5）	指定某个元素是否可以拖动
dropzone（h5）	指定是否将数据复制，移动，或链接，或删除
hidden（h5）	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheck（h5）	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translate（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：枚举属性定义是否可以检查元素是否存在拼写错误。它可能具有以下值：
21.style：含要应用于元素的CSS样式声明。请注意，建议在单独的文件中定义样式。该属性和``元素主要用于快速样式化，例如用于测试目的。
22.tabindex：整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它可能需要几个值：

负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;0 表示元素应通过顺序键盘导航可聚焦和可到达，但其相对顺序由平台约定定义;正值意味着元素应该可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是tabindex的增加值。如果多个元素共享相同的tabindex，则它们的相对顺序遵循它们在文档中的相对位置。
23.title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户,但不是必须的。
24.translate：枚举属性，用于指定在页面本地化时是否转换元素的属性值及其Text 节点子节点的值，或者是否保持它们不变。它可以具有以下值：

空字符串和"yes"，表示元素将被翻译。"no", 表示该元素不会被翻译。

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

占位:

visibility: hidden; 页面会渲染只是不限显示
margin-left: -100%;
opacity: 0; 看不见，但是会占据空间
transform: scale(0);

不占位:

display: none; 页面不会渲染
width: 0; height: 0; overflow: hidden;

仅对块内文本元素:

text-indent: -9999px;
font-size: 0;

利用 position （absolute 的情况下）

left/right/top/bottom: 9999px/-9999px 让元素在视区外
z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

其他

transform: skew(90deg, -90deg)

代码案例：

通过z-index

position: absolute;：让元素脱标，不占实际的位置
z-index: -1;：使用层级隐藏在其他元素之下

.box {
  position: absolute;
  z-index: -1;
}

通过位置或者margin

left: -500%; 、margin-left: -500%;：让元素的位置在当前可是区域之外

.box {
  position: absolute;
  left: -500%;
}
.box {
  position: absolute;
  margin-left: -500%;
}

使用 transform
必须使用position配合，让元素脱标，不然还会占据空间

scale：缩放

.box {
  position: absolute;
  /* 1.缩放 */
  transform: scale(0);
  /* 2.位移 */
  transform: translateX(-200%);
  /* 3.旋转 */
  transform: rotateX(90deg);
}

使用透明度

.box {
  position: absolute;
  opacity: 0;
}

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

方法一：

<script>
    var str = 'good morning';
    function delLast(str, del) {
        if (typeof str !== 'string') {
            alert('请确认要删除的对象为字符串！');
            return false;
        } else {
            // 传入的字符在当前字符串中最后一次出现的位置
            let index = str.lastIndexOf(del);
            /*
                * substring(开始位置，截取位置)
                * 获取最后一个传入子串的位置并进行截取
                * 截取传入字串之前的 +  截取传入字串位置+1  组合
                */
            var a = str.substring(0, index) + str.substring(index + 1, str.length);
            console.log(a);
        }
    }
    delLast(str, 'o')
</script>

在这里插入图片描述

方法二：

<script>
    function delLast(str, target) {
        return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');
    }

    const str = delLast('good morning', 'g')

    console.log(str) // good mornin
</script>

在这里插入图片描述

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

离线存储使用

1.只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

2.然后cache.manifest文件的书写方式，就像下面这样：

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

3.离线存储的manifest一般由三个部分组成:

CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

离线存储原理

html5的离线存储是基于一个新建的。appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会想cookiie一样被存储了下来。之后当网络处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

示例：

这里需要说明的是，如果需要看到离线存储的效果，那么你需要把你的网页部署到服务器上，不管是本地还是生产环境服务器中，通过本地文件打开网页是无法体验到离线存储的。
我在我的电脑上跑了一个本地node服务器，通过localhost访问。我的manifest文件向下面这样：

CACHE MANIFEST
#v0.11

CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js
js/app.js
lib/ionic/css/ionic.css
css/style.css
views/login_header.html
views/login.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2

NETWORK:
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
css/style.css

然后我们访问网页看看效果。

在这里插入图片描述

可以看出浏览器根据manifest文件下载相应资源并且缓存在本地，现在我们来试试再次访问网页

在这里插入图片描述

资源已经离线存储在本地，所以浏览器不需要再次下载资源，可以直接使用本地缓存的资源。接着，我们更新下服务器上的资源，比如我修改下app.js，结果我这里就不显示了，跟上面那张图是一样的，更新的资源并没有生效，现在我们更新下manifest文件，比如把版本改为0.12

在这里插入图片描述

很显然，只有更新了manifest文件，对离线资源的更新才能在浏览器上生效。
最后，我们来试试离线状态下是什么情况，这才是离线存储的重头戏。通过Chrome设置离线状态，刷新页面

在这里插入图片描述

由于在离线状态，所以浏览器无法访问到manifest文件，但是网页还是可以正常访问，这就是离线存储的威力。
对于HTML5中离线存储对象window.applicationCache有几个事件需要我们关注下：

在这里插入图片描述

1.oncached:当离线资源存储完成之后触发这个事件，这个是文档的说法，我在Chrome上面测试的时候并没有触发这个事件。
2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

总结：

优点:

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

使用:

只需要在页面头部加入,然后创建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选择器有哪些？哪些属性可以继承？

CSS 的选择器

选择器	例子	例子描述	CSS
.class	.intro	选择 class=“intro” 的所有元素。	1
#id	#firstname	选择 id=“firstname” 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有元素。	1
element,element	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element>element	div>p	选择父元素为元素的所有元素。	2
element+element	div+p	选择紧接在元素之后的所有元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。	2
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个元素。	2
element1~element2	p~ul	选择前面有元素的每个元素。	3
[attribute^=value]	a[src^=“https”]	选择其 src 属性值以 “https” 开头的每个元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有元素。	3
[attribute*=value]	a[src*=“abc”]	选择其 src 属性中包含 “abc” 子串的每个元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的元素。	3
:disabled	input:disabled	选择每个禁用的元素	3
:checked	input:checked	选择每个被选中的元素。	3
:not(selector)	:not§	选择非元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

哪些属性可以继承

1. 所有元素都可以继承

visibility和cursor

2. 内联元素可以继承

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：文本流的方向

3. 块级元素可以继承

text-indent：文本缩进
text-align：文本对齐方式

4. 列表元素可以继承

list-style：复合属性。设置列表项目相关内容
list-style-type：列表项所使用的预设标记
list-style-position：列表项标记如何根据文本排列
list-style-image：列表项标记的图像

5. 表格元素嗯昆虫继承

border-collapse：表格的行和单元格的边是合并还是独立

6. 不可继承的元素

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

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

<script>
    function formatHump(str) {
        return str
            // 把字符串分割成字符串数组
            .split('_')
            // map返回一个新的数组  第一个元素转换为大写 删除元素下标大写
            .map((item) => item[0] && item[0].toUpperCase() + item.substr(1))
            // 把数组中的所有元素放入一个字符串
            .join('');
    }
    console.log(formatHump('December_shi'));
</script>

在这里插入图片描述

<script>
    function toCamel(str) {
        str = str.replace(/(\w)/, (match, $1) => `${$1.toUpperCase()}`)
        while (str.match(/\w_\w/)) {
            str = str.replace(/(\w)(_)(\w)/, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)
        }
        return str
    }
    console.log(toCamel('a_bcd')) // ABcd
    console.log(toCamel('d_c_efa')) // DCEfa
</script>