2021.2.24 前端题

【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样式声明。 请注意，建议在单独的文件中定义样式。 该属性和

【CSS】用css创建一个三角形，并简述原理。

不会~
参考答案：
1）CSS绘制三角形-border法：
https://www.jianshu.com/p/9a463d50e441
2）CSS三角形的实现原理及运用：
http://caibaojian.com/css-border-triangle.html

【JS】写一个方法，将字符串大小写切换。

我写的好麻烦啊

function switchh(str){
    var ascii=[]
    for (var i=0;i<str.length;i++){
        // 获得ASCII码
        ascii[i]=str.charCodeAt(i)
        ascii[i]=ascii[i]<91?ascii[i]+32:ascii[i]-32
    }
    var ss=''
    for (var i=0;i<str.length;i++){
    	// 由ASCII码转为字符
        ss+=String.fromCharCode(ascii[i])   
    }
    console.log(ss)
}

【Vue】如何定义全局方法？

• 将方法挂载到Vue.prototype上面
  缺点：调用该方法得时候没有提示
• 利用全局混入mixin
  优点：因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示
• 使用Plugin
  Vue.use的实现并没有实现挂载的功能，只是触发了插件的install方法，本质上使用了Vue.prototype
• 任意vue文件中写全局函数
  参考