2022 年のフロントエンド面接の質問 (続き...)

2022 年のフロントエンド面接の質問

1.html中間ラベルDOCTYPEの機能は何ですか?

回答:現在の HTML バージョンを宣言するために使用されます。これは、Web ブラウザーがページのコンテンツをより正確に理解してコンテンツの効果を表示できるように、ページの解析にどの HTML または XHTML 仕様が使用されるかを Web ブラウザーに通知するために使用されます。より良い！

2.metaラベルの役割は何ですか?

回答:メタは、HTML ドキュメント内の HTTP プロトコルの応答ヘッダーメッセージをシミュレートするために使用され、次の 2 つの共通の属性があります。① name属性: 検索エンジンのロボットが最も検索して分類できるように、コンテンツ (Web ページのコンテンツ) に対応する Web ページを記述するために使用されます (ほぼすべての検索エンジンは、オンラインロボットを使用して、Web ページを分類するためのメタ値を自動的に見つけます)。そのうち重要なのは説明 (検索エンジン上のサイトの説明) とキーワード (カテゴリのキーワード) であるため、各ページにメタ値を追加する必要があります。

<meta name="description" contect="xxxxx"> 告诉搜索引擎你的站点的主要内容
<meta name="keywords" contect="xxxxxx">向搜索引擎说明你的网页的关键词

② viewpoint属性: ビューポート (ビューポート) の初期サイズを示します。現在モバイルデバイスでのみ使用されています。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

3.html一般的なインラインブロック要素は何ですか? 共通のブロック要素は何ですか?

答え: ① 块（block）级元素（独占一行，可设宽高）: HTML5 の div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、new header、section、side、footer など
② 行内（inline）元素（一行多个，不可设宽高）:span、img、a、lable、input、abbr (略語)、em (強調)、big、cite (引用)、i (斜体)、q (短い引用)、textarea、select、small、sub、sup、strong 、u（下線）、ボタン（デフォルト表示：インラインブロック）
③ 行内块（inline-block）元素（可设宽高，综合）：img、input、td

4.aハイパーリンクの使用に加えて、タグはどのように使用できますか? キーコードを指定しますか?

答え: ① 超链接作用（跳转页面可点击）:

<a href="http://www.baidu.com">百度</a>

② 锚点跳转作用：

<h3 id="a">标题1<h3>
<h3 id="b">标题2<h3>
<h3 id="c">标题3<h3>
<h3 id="d">标题4<h3>
        .
        .
        .
<h3 id="e">标题5<h3>

<a herf="#a">点我跳到标题1哟</a>

5.ファイルhtmlをインポートするjs方法は何通りありますか? キーコードを教えてみてはいかがでしょうか？

回答：インライン型、埋め込み型、外部導入型の3種類

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js三种引入</title>
    <!-- 3.外部引入js -->
    <script src="js/js.js"></script>
    <script>
        // 2,内嵌js
        alert("你好呀!")
    </script>
</head>

<body>
    <!-- js嵌入页面引入方式 -->
    <!-- 1,行内js(主要用于事件) -->
    <input type="button" value="点击一下" onclick="alert('你好世界!')">
    <!-- 整个程序的执行流程是从上到下的所以我们会先看到弹窗中的你好呀!然后才会看到按钮,点击之后会出现弹窗你好世界! -->
</body>

</html>

6.jsで一般的に使用される文字列メソッドは何ですか? (少なくとも 5 つ書いて、それが機能することを説明してください)

方法	説明
アンカー（）	HTMLアンカーを作成する
大きい（）	文字列を大きなフォントで表示する
まばたき()	点滅する文字列を表示
血（）	文字列を太字で表示します
charAt()	指定された位置にある文字を返します
charCodeAt()	指定された位置の文字の Unicode エンコードを返します。
concat()	接続文字列
修理済み（）	文字列をタイプライターテキストとして表示します
フォントカラー()	指定した色を使用して文字列を表示します
フォントサイズ（）	指定されたサイズで文字列を表示します
fromCharCode()	文字エンコーディングから文字列を作成する
`indexOf()`	検索文字列
イタリック体()	文字列を斜体で表示する
lastIndexOf()	文字列を後ろから前に取得します
リンク（）	文字列をリンクとして表示する
localeCompare()	ロケール固有の順序で 2 つの文字列を比較します
マッチ（）	1 つ以上の正規表現の一致を検索します
`replace()`	正規表現に一致する部分文字列を置換する
検索（）	正規表現に一致する値を取得します
スライス（）	文字列のセグメントを抽出し、抽出された部分を新しい文字列で返します。
小さい（）	文字列を小さいフォントサイズで表示する
`split()`	文字列を文字列の配列に分割する
ストライク（）	取り消し線付きの文字列を表示する
`sub()`	文字列を下付き文字として表示する
`substr()`	開始インデックス番号から文字列内の指定された数の文字を抽出します。
`substring()`	文字列内の指定された 2 つのインデックス番号の間にある文字を抽出します。
すする（）	文字列を上付き文字として表示する
toLocaleLowerCase()	文字列を小文字に変換する
toLocaleUpperCase()	文字列を大文字に変換する
toLowerCase()	文字列を小文字に変換する
toUpperCase()	文字列を大文字に変換する
toSource()	オブジェクトを表すソースコード
toString()	戻り文字列
`valueOf()`	文字列オブジェクトのプリミティブ値を返します。

7.jsの 8 つのデータ型は何ですか? 、

答：简单数据类型：文字列、数値、ブール値、Null、未定義、シンボル、BigInt
复杂数据类型（引用数据类型）：オブジェクト

8.jsリスナーイベントを追加するにはどうすればよいですか?

答え：

① addEventListener()方法:
1. element.addEventListener(event, function, useCapture) の 3 番目のパラメーターは、指定されたイベントがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを制御できます。true - イベントハンドラーはキャプチャフェーズ中に実行されます。false - デフォルト - イベントハンドラーはバブリングフェーズで実行されます。

2. addEventListener() は、上書きせずに複数のイベントを同じ要素にバインドできます。複数のイベントが同じ要素にバインドされている場合は、最初にバインドし、最初に実行するというルールが採用されます。

3.addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。4.注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法，可以采用以下方法。

5.可以使用 removeEventListener() 来移除之前绑定过的事件。

②attachEvent()方法(IE6-8)
1.attachEvent是 IE 有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。

2.attachEvent()是后绑定先执行。

3.绑定时间时，attachEvent必须带 on，如 onclick，onmouseover 等

9.html中怎么引入css文件?

答：
①行内式

<div style="border:1px solid red">888</div>

②style标签式

<style>
	div{
      
      
	width:200px;
	height:200px;
	}
</style>

③link标签外部引用式`

<head>
	<link href="./mystyle.css" rel="stylesheet" type="text/css"/>
</head>

10.利用css中transparent属性画出一个三角形？

<style>
     .box{
      
      
         width: 0px;
         height: 0px;
         border: 30px solid transparent;
         border-top-color: pink;

		// 这两个是设置兼容低版本浏览器的，有需要的话可以加上，高版本的可以不加
		line-height: 0px;
        font-size: 0px;
     }
</style>

在这里插入图片描述

11.写出opcity五大兼容性代码？

答：

<style>
.opacity{
      
         
    filter:alpha(opacity=50); /* IE  */ 或者使用rgba（0，0，0，.5）  
    -moz-opacity:0.5; /* 老版Mozilla */  
    -khtml-opacity:0.5; /* 老版Safari */  
    opacity: 0.5; /* 支持opacity的浏览器*/  
    -webkit-opacity: 0.5;/*支持webkit内核浏览器*/
    opcity:.5 /* IE9 + etc...modern browsers */
    }  
</style>

12.css中有几种实现渐变的方式？写出关键代码？

答：
线性渐变（ Linear Gradients ）- 向下/向上/向左/向右/对角方向

<style>
上下方向
background-image: linear-gradient(red, blue)

左右
background-image: linear-gradient(to right, red , blue);

</style>

径向渐变（ Radial Gradients ）- 由它们的中心定义

<style>
background-image: radial-gradient(red, green, blue)
</style>

详情点击这里！！！！

13.css中有哪几种定位？写出关键代码

写不动了没人点赞，看下这篇吧!非常详细

14使得元素水平垂直居中的方式有哪几种？

水平垂直居中方案，得记别光看呀！！

15.写出清楚浮动的6种方式？

清除浮动的方案！！！

2022 年のフロントエンド面接の質問 (続き...)

2022 年のフロントエンド面接の質問

おすすめ