HTMLバージョン:
1. 作成したページはどのブラウザでテストされましたか?これらのブラウザのコアは何ですか?
2. すべての HTML ファイルの先頭に、Doctype という非常に重要な項目があります。これが何のためにあるか知っていますか?
答え: 宣言はドキュメントの先頭、 タグの前にあります。このタグは、ドキュメントが使用する HTML 仕様または XHTML 仕様をブラウザに伝えます。 (キーポイント: どの仕様に従ってページを解析するかをブラウザーに指示します)
3.Quirksモードとは何ですか?標準モードとの違いは何ですか
答え:
IE6 以降、標準モードが導入され、ブラウザは指定されたブラウザと同じように標準に準拠したドキュメントを処理しようとします。
CSS は IE6 より前では十分に成熟していなかったので、IE5 より前のブラウザやその他のブラウザでは CSS のサポートが強化されます。ただし、現時点では、多くのページが古い書き込みレイアウト モードに基づいているため、問題が発生します。 、IE6 が CSS をサポートしている場合、これらのページは異常に表示されます。既存のページが破壊されないようにして、新しいレンダリング メカニズムを提供するにはどうすればよいでしょうか。
プログラムを作成するとき、特に新しい機能が古い機能と互換性がない場合に、元のインターフェイスを変更せずに、より強力な機能を提供するにはどうすればよいかという問題によく遭遇します。この種の問題が発生した場合の一般的なアプローチは、パラメーターと分岐を追加することです。つまり、特定のパラメーターが true の場合は新しい関数を使用し、パラメーターが true でない場合は古い関数を使用します。破壊しない オリジナルのプログラムも新しい機能を提供します。 IE6 は、DTD をこの「パラメータ」として扱います。これは、DTD が記述されていれば、このページでは CSS レイアウトがより適切にサポートされることを意味するとみなします。 、以前のレイアウトは互換性があります。これがQuirksモード(個性モード、奇妙なモード、奇妙なモード)です。
違い:
レイアウト、スタイル分析、スクリプト実行の 3 つの側面で全体的な違いがあります。
ボックスモデル: W3C 標準では、要素の幅と高さを設定すると、要素のコンテンツの幅と高さを指します。Quirks モードでは、IE の幅と高さにはパディングとボーダーも含まれます。
インライン要素の高さと幅を設定する: 標準モードでは、 などのインライン要素の幅と高さの設定は有効になりませんが、互換モードでは有効になります。
パーセンテージの高さを設定する: 標準モードでは、要素の高さはそれに含まれるコンテンツによって決まります。親要素がパーセンテージの高さを設定していない場合、子要素がパーセンテージの高さを設定することは無効です。 margin:0 auto を使用して設定します。水平方向に中央揃え: margin:0 auto を使用すると、標準モードでは要素を水平方向に中央揃えにできますが、quirks モードでは失敗します。
(他にもたくさんあります。彼が何を答えるかは問題ではありません。重要なのは、彼が答えた答えが彼自身の経験から来たのか、それとも記事から読んだだけなのか、それとも当時は知らなかったのかです。全部。)
4. tableレイアウトと比較したdiv+cssレイアウトの利点は何ですか?
5.a: img の alt と title の類似点と相違点は何ですか? b: ストロングとエムの類似点と相違点は何ですか?
答え:
あ:
b:
6. プログレッシブエンハンスメントとグレースフルデグラデーションの違いについて説明できますか?
違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの供給を減らそうとしますが、プログレッシブ エンハンスメントは非常に基本的な機能するバージョンから始まり、将来の環境のニーズに適応するために拡張し続けます。劣化(機能の衰退)は過去を振り返ることを意味し、漸進的な強化は根を安全地帯に保ちながら前を向くことを意味します。
「グレースフル・ダウングレード」の視点
「グレースフル・デグラデーション」の考え方では、ウェブサイトは最も高度で完全なブラウザー向けに設計されるべきだと考えています。 「古い」とみなされるブラウザ、または機能が欠けているブラウザのテストを開発サイクルの最終段階で手配し、テスト対象を主流ブラウザ (IE、Mozilla など) の以前のバージョンに限定します。
この設計パラダイムでは、古いブラウザは「貧弱だがまあまあ」のブラウジング エクスペリエンスしか提供しないと考えられます。特定のブラウザに合わせていくつかの小さな調整を行うことができます。ただし、それらは私たちの注意の焦点ではないため、大きなバグの修正を除いて、その他の違いは無視されます。
「プログレッシブ・エンハンスメント」の視点
「漸進的強化」の視点では、コンテンツ自体に焦点を当てるべきだと考えています。
ウェブサイトを構築する理由はコンテンツです。表示する Web サイト、収集する Web サイト、検索する Web サイト、運営する Web サイト、これらすべてを含む Web サイトもありますが、すべてコンテンツが含まれることは同じです。これにより、「プログレッシブ エンハンスメント」がより合理的な設計パラダイムになります。これが、Yahoo! によってすぐに採用され、「段階的ブラウザ サポート (段階的ブラウザ サポート)」戦略の構築に使用された理由です。
そこで質問です。製品マネージャーは、IE6、7、および 8 の Web ページの効果は、最新のバージョンの最新のブラウザーに比べて角の丸みや影 (CSS3) がはるかに少なく、互換性が必要であることを認識しました (画像の背景を使用し、CSS3 を放棄します)。彼を説得しますか?
(無料プレイ)
7. Web サイトのリソースを保存するために複数のドメイン名を使用する方が効果的であるのはなぜですか?
8. ウェブ標準と標準設定団体の重要性についてのあなたの認識について話してください。
(標準的な答えはありません) Web標準と標準設定組織はすべて、開発者が統一標準に従い、開発の難易度や開発コストを軽減し、SEOが向上するように設計されていますが、そうではありません。コードの悪用はさまざまなバグやセキュリティの問題を引き起こし、最終的には Web サイトの使いやすさを向上させるためです。
9.Cookie、sessionStorage、localStorageの違いについて説明してください。
SessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータは、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。 LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
ウェブストレージとCookieの違い
10. srcとhrefの違いを簡単に説明します。
答え:
Src は現在の要素を置き換えるために使用され、href は現在のドキュメントと参照されるリソースの間の接続を確立するために使用されます。
Srcはsourceの略称で、外部リソースの場所を指します。srcリソースをリクエストすると、指定されたコンテンツがドキュメントの現在のタグの場所に埋め込まれ、指定されたリソースがダウンロードされて適用されます。 jsスクリプト、imgなどのドキュメント 画像やフレームなどの要素。
ブラウザーがこの要素を解析すると、リソースがロード、コンパイル、実行されるまで、他のリソースのダウンロードと処理が一時停止されます。これは、ピクチャやフレームなどの要素にも当てはまります。これは、指定されたリソースを埋め込むのと似ています。現在のタグ。これが、js スクリプトが先頭ではなく下部に配置される理由でもあります。
href は Hypertext Reference の略で、ネットワーク リソースの場所を指し、ドキュメントに
を追加すると現在の要素 (アンカー) または現在のドキュメント (リンク) へのリンクが確立されます。
その後、ブラウザはドキュメントを CSS ファイルとして認識し、リソースを並行してダウンロードし、現在のドキュメントの処理を停止しません。このため、@import メソッドを使用する代わりに、link メソッドを使用して CSS を読み込むことが推奨されます。
11. Webページ制作ではどのような画像形式が使用されるか知っていますか?
答え:
png-8、png-24、jpeg、gif、svg。
しかし、上記のどれも面接官が望む最終的な答えではありません。面接官は Webp、Apng を聞きたいと考えています。 (新しい技術や新しいものに注目していますか)
ポピュラーサイエンス Webp: WebP 形式。画像の読み込みを高速化するために Google によって開発された画像形式。画像圧縮量は JPEG の約 2/3 にすぎず、サーバーの帯域幅リソースとデータ容量を大幅に節約できます。 Facebook Ebay などの有名な Web サイトは、WebP 形式のテストと使用を開始しています。
同じ品質であれば、WebP 形式の画像の体積は JPEG 形式の画像より 40% 小さくなります。
Apng: 正式名称は「Animated Portable Network Graphics」で、PNG形式で動的な画像効果を実現できるPNGのビットマップアニメーション拡張機能です。 2004 年に誕生しましたが、最近 iOS Safari 8 でサポートされるまで、主要なブラウザ メーカーではサポートされていませんでしたが、GIF に代わる次世代のダイナミック グラフィックス標準になることが期待されています。
12. マイクロフォーマットってご存知ですか?理解について話してください。フロントエンド ビルドではマイクロフォーマットを考慮する必要がありますか?
答え:
Microformats は、機械可読なセマンティックな XHTML 語彙のコレクションであり、構造化データのオープン標準です。特殊なアプリケーションのために開発された特殊な形式です。
利点: Web ページにスマート データを追加すると、Web サイトのコンテンツが検索エンジンの結果インターフェイスに追加のヒントを表示できるようになります。 (応用例:Douban、興味があれば自分でググってみてください)
13. CSS/JS コードがオンラインになった後、開発者は通常、ユーザーが Web ページを更新した時点からパフォーマンスを最適化します。JS リクエストは通常どこにキャッシュされますか?
答え: DNS キャッシュ、CDN キャッシュ、ブラウザ キャッシュ、サーバー キャッシュ。
14. 1 ページに大量の写真があり (大規模な電子商取引 Web サイト)、読み込みが非常に遅いです。ユーザーのエクスペリエンスを向上させるために、これらの写真の読み込みを最適化するにはどのような方法がありますか。
15. HTML構造の意味論をどのように理解していますか?
HTML 自体にはパフォーマンスがありません。たとえば、
たとえば、セマンティック マークアップを使用すると、スクリーン リーダーは単語を完全に発音しようとするのではなく、「スペルアウト」します。
セマンティック マークアップは、デバイスに必要な関連情報を提供するため、考えられるすべての表示状況 (既存のデバイスや将来の新しいデバイスを含む) を考慮する必要がなくなります。たとえば、携帯電話では、段落にタイトルのタグを付けることができます。テキストは太字で表示されますが、ハンドヘルド コンピュータではより大きなフォントで表示されます。いずれにしても、テキストをタイトルとしてマークすると、読み取りデバイスが独自の条件でページを適切に表示することが保証されます。
検索エンジン クローラーもマークアップに依存して、個々のキーワードのコンテキストと重みを決定します
クローラーはプレゼンテーションに使用されるマークアップをほとんど無視し、セマンティック マークアップのみに焦点を当てるため、ページがクローラーにとって理解しやすいかどうかは非常に重要です。
チーム開発とメンテナンスが簡単
16. フロントエンドの観点からSEOをうまく行うために考慮する必要があることについて話しますか?
検索エンジンがどのようにウェブページをクロールし、インデックスを作成するかを理解します
メタタグの最適化
キーワードを選択してWebページに配置する方法
主要な検索エンジンを理解する
メインのインターネット ディレクトリ
検索エンジンも生き残る必要があります。インターネットコマースがますます成熟するにつれ、有料の検索エンジンが普及してきました。最も代表的なのはOvertureとBaidu、そしてもちろんGoogleの広告プロジェクトGoogle Adwordsだ。商用 Web サイトを見つけるために検索エンジンのクリック広告を使用する人が増えています。また、最小限の広告投資で最大限のクリック数を獲得する方法についても学ぶ必要があります。
ウェブサイトが完成したら、そこに横たわって顧客が空から降ってくるのを待ってはいけません。他の人にあなたを見つけてもらう最も簡単な方法は、Web サイトを検索エンジンに送信することです。商用 Web サイトをお持ちの場合、主要な検索エンジンやディレクトリを含めるには料金を支払う必要があります (例: Yahoo は 299 ドルかかります)。しかし良いニュースは、(少なくともこれまでのところ) 最大の検索エンジンである Google は現在無料であるということです。 、検索市場の 60% 以上のコントロールを支配しています。
Webコンテンツはハイパーテキストの形で相互にリンクされており、Webサイト間でも同様です。検索エンジンに加えて、人々は毎日、さまざまな Web サイト間のリンクを通じてサーフィン (「サーフィン」) を行っています。他の Web サイトからあなたの Web サイトへのリンクが増えるほど、より多くのトラフィックが得られます。さらに重要なのは、Web サイトに外部リンクが多いほど、検索エンジンによる重要性が高く評価され、ランキングが高くなります。
CSS:
1. DOM の CSS スタイルを設定する方法はありますか?
2.CSSのセレクターとは何ですか?
最初の 3 つの基本セレクターに加えて、
を含むいくつかの拡張セレクターもあります。そこで質問なのですが、CSSセレクターの優先順位はどのように定義されているのでしょうか?
基本原則:
一般に、セレクターが特殊であればあるほど、優先順位は高くなります。つまり、セレクターがより正確にポイントするほど、その優先順位は高くなります。
複雑な計算方法:
それでは、次のコードを見てください、 タグ内のテキストは何色ですか? 。
答案:red。与样式定义在文件中的先后顺序有关,即是后面的覆盖前面的,与在
中的先后关系无关。
3.CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?
最基本的:
设置display属性为none,或者设置visibility属性为hidden
技巧性:
设置宽高为0,设置透明度为0,设置z-index位置在-1000
4.超链接访问过后hover样式就不出现的问题是什么?如何解决?
答案:被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)
5.什么是Css Hack?ie6,7,8的hack分别是什么?
答案:针对不同的浏览器写不同的CSS code的过程,就是CSS hack。
示例如下:
1 #test { 2 width:300px; 3 height:300px; 4 5 background-color:blue; /*firefox*/ 6 background-color:red\9; /*all ie*/ 7 background-color:yellow\0; /*ie8*/ 8 +background-color:pink; /*ie7*/ 9 _background-color:orange; /*ie6*/ } 10 :root #test { background-color:purple\9; } /*ie9*/ 11 @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/ 12 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
6.请用Css写一个简单的幻灯片效果页面
答案:知道是要用css3。使用animation动画实现一个简单的幻灯片效果。
1 /**HTML**/ 2 div.ani 3 4 /**css**/ 5 .ani{ 6 width:480px; 7 height:320px; 8 margin:50px auto; 9 overflow: hidden; 10 box-shadow:0 0 5px rgba(0,0,0,1); 11 background-size: cover; 12 background-position: center; 13 -webkit-animation-name: "loops"; 14 -webkit-animation-duration: 20s; 15 -webkit-animation-iteration-count: infinite; 16 } 17 @-webkit-keyframes "loops" { 18 0% { 19 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; 20 } 21 25% { 22 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; 23 } 24 50% { 25 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; 26 } 27 75% { 28 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; 29 } 30 100% { 31 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; 32 } 33 }
7.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?
块级元素(block)特性:
那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案: 、 、
8.什么是外边距重叠?重叠的结果是什么?
答案:
外边距重叠就是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
9.rgba()和opacity的透明效果有什么不同?
答案:
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么?
答案:
垂直方向:line-height
水平方向:letter-spacing
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
11.如何垂直居中一个浮动元素?
1 // 方法一:已知元素的高宽 2 3 #div1{ 4 background-color:#6699FF; 5 width:200px; 6 height:200px; 7 8 position: absolute; //父元素需要相对定位 9 top: 50%; 10 left: 50%; 11 margin-top:-100px ; //二分之一的height,width 12 margin-left: -100px; 13 } 14 15 //方法二: 16 17 #div1{ 18 width: 200px; 19 height: 200px; 20 background-color: #6699FF; 21 22 margin:auto; 23 position: absolute; //父元素需要相对定位 24 left: 0; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 }
那么问题来了,如何垂直居中一个?(用更简便的方法。)
1 #container //<img alt="大手インターネット企業のフロントエンド面接の質問 (HTML/CSS)" >的容器设置如下 2 { 3 display:table-cell; 4 text-align:center; 5 vertical-align:middle; 6 }
12.px和em的区别。
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css
吗?你了解他们的不同之处?
重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。
在这一方面,无法做每一个复位重置。它也确实有些超过一个重置,它处理了你永远都不用考虑的怪癖,像HTML的audio
元素不一致或line-height
不一致。
14.Sass、LESS是什么?大家为什么要使用他们?
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。
为什么要使用它们?
15.display:none与visibility:hidden的区别是什么?
即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
16.知道css有个content属性吗?有什么作用?有什么应用?
答案:
知道。css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。
最常见的应用是利用伪类清除浮动。
1 //一种常见利用伪类清除浮动的代码 2 .clearfix:after { 3 content:"."; //这里利用到了content属性 4 display:block; 5 height:0; 6 visibility:hidden; 7 clear:both; } 8 9 .clearfix { 10 *zoom:1; 11 }
after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素,再利用clear:both清除浮动。
那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?
答案:css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。
具体实现方案:请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解