HTML構造のセマンティック化についてどう理解していますか？

  • 1、スタイルが除去されたり失われたりした場合でも、ページに明確な構造を提示できる。
  • 2、スクリーンリーダー（訪問者が視覚障害を持つ場合）は、あなたのマークアップに完全に基づいてWebページを「読み上げ」ます。
  • 3、PDAや携帯電話などのデバイスは、通常のPCブラウザのようにWebページをレンダリングできない場合があります（通常、これらのデバイスはCSSのサポートが弱いためです）。
  • 4、検索エンジンのクローラーもマークアップに依存して、コンテキストと各キーワードの重みを決定します。
  • 5、ページがクローラーにとって理解しやすいかどうかは非常に重要です。クローラーは表現用のマークアップを大幅に無視し、セマンティックマークアップのみに注目するからです。
  • 6、チームでの開発とメンテナンスが容易になります。

Doctype文書宣言のstrictモードとquirksモード。この2つのモードをどうやって発動させるか、それらを区別する意味は何か？

1、2つのモードの発動方法

XMLヘッダー宣言を追加すると、IEブラウザのQuirks modeが発動します。発動後、ブラウザの解析方法はIE5.5と同じになり、IE5.5と同じバグやその他の問題、動作（Javascript）も同様になります。

2、IE6の発動：XHTMLのDOCTYPEの前にXML宣言を追加する

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、IE7の発動：XML宣言とXHTMLのDOCTYPEの間にHTMLコメントを追加する

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4、IE6とIE7の両方で発動可能：HTML4.01のDOCTYPE文書の先頭にHTMLコメントを追加する

<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5、ページの上部に追加する <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 、「quirks mode（互換モード）」を発動させる

6、DTD宣言を使用していない場合、またはHTML4より前（HTML4を含まない）のDTD宣言を使用している場合、基本的にすべてのブラウザはquirks modeで表示されます。

フロントエンドの観点からSEOをしっかり行うために何を考慮すべきかについて話してください。

  • 1、検索エンジンがどのようにWebページをクロールし、どのようにインデックスするかを理解する。
  • 2、Metaタグの最適化。
  • 3、キーワードをどのように選定し、Webページに配置するか。
  • 4、主要な検索エンジンを理解する。
  • 5、主要なインターネットディレクトリ
  • 6、クリック課金型の検索エンジン。
  • 7、検索エンジンへの登録。
  • 8、リンク交換とリンク人気度（Link Popularity）。
  • 9、タグの適切な使用。

CSSファイルを外部リンクとして導入できることは知っていますが、外部リンクによるCSSの導入方法にはどのようなものがありますか？これらの方法でパフォーマンスに違いはありますか？

CSSの導入方法で最も一般的なものは3つあります：

  • 第一：head部分に追加する<link rel="stylesheet" type="text/css" href="my.css.html"/>、外部のCSSファイルを導入する。
  • 第二：head部分に追加する
    <style type="text/css"> 
div{margin: 0;padding: 0;border:1px red solid;} 
</style>
  • 第三：ページのタグ内に直接追加する<div style="border:1px red solid;">

CSS Spriteとは何ですか？この技術の長所と短所について話してください。

CSS spritesは中国では多くの人が「cssスプライト」と呼んでおり、Webページの画像を処理する方法の一つです。ページに関わるすべての散在する画像を に含めることで、サーバーへのリクエスト回数を減らし、アクセス速度を向上させます。

1、長所：

  • （1）CSS Spritesを利用すると、WebページのHTTPリクエストを効果的に減らし、ページのパフォーマンスを大幅に向上させることができます。これもCSS Spriteの利点であり、広く普及・応用された主な理由です。
  • （2）Webデザイナーの画像命名の悩みを解決します。集合画像1枚に名前を付けるだけで、個々の小要素に名前を付ける必要がないため、Webページ制作の効率が向上します。
  • （3）スタイル変更が簡単で、1枚または少数の画像の色やスタイルを変更するだけで、Webページ全体のスタイルを変えることができます。メンテナンスも簡単です。

2、短所：

  • （1）画像を結合する際、複数の画像を秩序立てて合理的に1枚の画像にまとめ、さらに十分なスペースを確保して、ブロック内に不要な背景が表示されないようにする必要があります。これらはまだ良い方で、最も辛いのはワイド画面や高解像度画面でのレスポンシブページの場合です。画像の幅が十分でないと、背景が途切れやすくなります。
  • （2）CSS Spritesは開発時にやや面倒です。Photoshopや他のツールを使って各背景ユニットの正確な位置を測定・計算する必要があります。裁縫のような細かい作業で、難しさはありませんが非常に煩雑です。
  • （3）CSS Spritesはメンテナンス時に面倒です。ページの背景に少し変更があれば、通常この結合画像を変更する必要があります。変更する必要がないなら触らないのが良く、それにより多くのCSSを変更するのを避けられます。元の場所に収まらない場合は、下に画像を追加するしか（できれば）ありません。そうすると画像のサイズが大きくなり、CSSも変更する必要があります。

CSS3標準に基づいて、webkitカーネルブラウザが認識できる角丸（サイズは任意）を定義してください。

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

インライン要素には何がありますか？ブロックレベル要素には何がありますか？CSSのボックスモデルは？

  • インライン要素には、a、b、span、I、em、img、input、select、strong があります。
  • ブロックレベル要素には、div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、p があります。
  • ボックスモデル：margin、border、padding、width

フロントエンドページはどの3つの層から構成されていますか？それぞれ何ですか？役割は何ですか？

Webページは3つの層に分けられます。すなわち、構造層、表現層、行動層です。

  • 1、Webページの構造層（structural layer）は、HTMLやXHTMLなどのマークアップ言語によって作成されます。タグ、つまり山括弧内に現れる単語は、Webページコンテンツの意味的な意味を示します。これらのタグには、関連コンテンツをどのように表示するかについての情報は一切含まれません。例えば、Pタグは「これはテキストの段落です」という意味を表します。
  • 2、Webページの表現層（presentation layer）は、CSSによって作成されます。CSSは「関連コンテンツをどのように表示するか」という問題に答えます。
  • 3、Webページの行動層（behavior layer）は、「コンテンツはイベントにどのように反応すべきか」という問題に答えます。これはJavaScript言語とDOMが支配する領域です。

HTMLのform内のactionメソッドにおけるGETとPOSTの違いは何ですか？

  • 1、GETはサーバーからデータを取得するために使われ、POSTはサーバーへデータを送信するために使われます。
  • 2、GETはフォーム内のデータを variable=value の形式で、actionが指すURLの後ろに追加し、両者は"?"で接続され、各変数間は"&"で接続されます。POSTはフォーム内のデータをフォームのデータ本体に置き、変数と値が対応する形で、actionが指すURLに送信します。
  • 3、Getは安全ではありません。なぜなら、転送過程でデータがリクエストURLに置かれ、現在の多くのサーバー、プロキシサーバー、またはユーザーエージェントがリクエストURLをログファイルに記録してどこかに保存するため、プライバシー情報が第三者に見られる可能性があります。また、ユーザーはブラウザーで送信データを直接見ることもでき、一部のシステム内部メッセージがユーザーの前に表示されます。Postのすべての操作はユーザーからは見えません。
  • 4、Getが転送するデータ量は小さいです。これは主にURLの長さ制限によるものです。一方、Postは大量のデータを転送できるため、ファイルのアップロードではPostのみを使用できます（もちろんもう一つの理由もあり、後述します）。
  • 5、GetはFormフォームのデータセットの値をASCII文字に制限します。一方、PostはISO10646文字セット全体をサポートします。
  • 6、GetはFormのデフォルトメソッドです。

HTML要素のidとclassの違いは何ですか？

idとclassはウェブページの2つの汎用属性であり、それらは連携してページ全体を豊かにします。要素にスタイルを定義するとき、どちらも使用できますが、違いはありますか？

  • 1、CSSスタイルシートで記述する場合、idセレクタの前には「#」を付け、classセレクタの前には「.」を付けます。
  • 2、id属性は1つのページ内では一度しか使用できませんが、classは繰り返し使用できます。
  • 3、idは要素タグとして異なる構造と内容を区別するために使われ、classはスタイルとして任意の構造と内容に適用できます。
  • 4、レイアウトの一般的な原則：idは構造と内容を先に決めてからスタイルを定義します。classはその逆で、先にスタイルを定義し、その後ページ内で異なるニーズに応じてスタイルを異なる構造と内容に適用します。
  • 5、現在のブラウザーは同じページ内に同じ属性値を持つ複数のidを許可しており、通常は正常に表示されますが、JavaScriptがidを通じて要素を制御するときにエラーが発生します。
  • 6、実際の応用では、classはテキストブロックやページの装飾によく使われ、idは大規模なレイアウトや包含ブロック、包含ボックスのスタイル設計によく使われます。

Ajaxとは何ですか？

Ajaxは1つの技術ではなく、実際にはいくつかの技術の組み合わせです。それぞれの技術には独自の長所があり、それらが合わさって強力な新技術となります。Ajaxには以下が含まれます：

  • 1、XHTMLとCSS
  • 2、ドキュメントオブジェクトモデル（Document Object Model）を使用して動的表示とインタラクションを行います。
  • 3、XMLとXSLTを使用してデータのやり取りと操作を行います。
  • 4、XMLHttpRequestを使用して非同期データ受信を行います。
  • 5、JavaScriptを使用してそれらを結び付けます。

あなたが作成したページはどのブラウザでテストしましたか？これらのブラウザのカーネルはそれぞれ何ですか？よく遭遇するブラウザの互換性の問題にはどのようなものがありますか？なぜ発生するのですか？解決方法は何ですか？

  • 1、DOCTYPEはCSS処理に影響します。
  • 2、FF：paddingを設定すると、divのheightとwidthが増加しますが、IEは増加しません。そのため、!importantを使って別途heightとwidthを設定する必要があります。
  • 3、FF：!importantをサポートしますが、IEは無視します。!importantを使用してFF専用にスタイルを設定できます。
  • 4、divの垂直中央揃えの問題：vertical-align:middle; 行間をDIV全体と同じ高さに増やします line-height:200px; そして文字を挿入すると垂直中央に揃います。欠点は、内容が改行しないように制御する必要があることです。
  • 5、Mozilla FirefoxとIEではBOXモデルの解釈が一致せず、2pxの差が生じます。解決方法：div{margin:30px!important;margin:28px;} この2つのmarginの順序は逆に書いてはいけません。!importantという属性はIEでは認識できませんが、他のブラウザーでは認識できます。

HTML5のオフラインストレージ

HTML5の重要な特徴の1つはオフラインストレージです。いわゆるオフラインストレージとは、いくつかのリソースファイルをローカルに保存することです。これにより、後続のページの再読み込みではローカルリソースファイルが使用され、オフライン状態でもWebアプリケーションにアクセスし続けることができます。同時に、一定の方法（関連ファイルの更新や関連APIの使用）を通じて、オフラインストレージの更新や削除などの操作ができます。

HTML5のオフラインストレージは、どのファイルを保存する必要があるかを示すmanifestファイルを使用します。次のように使用します。<html manifest='offline.manifest'>manifestファイルを導入します。このファイルのパスは相対パスでも絶対パスでも構いません。Webアプリケーションが多く、manifestファイルを集中管理したい場合は、静的ファイルサーバーが良い選択肢です。

iframeの長所と短所は？

1、短所：

ウェブページでフレーム構造を使用する最大の欠点は、検索エンジンの「スパイダー」プログラムがこのようなページを解析できないことです。「スパイダー」プログラムが複数のフレームで構成されたウェブページに遭遇すると、フレームだけを見てリンクを見つけることができません。そのため、そのサイトは死んだサイトだと思い込み、すぐに去ってしまいます。ウェブサイトにとってこれはまさに災難です。製品を販売したいなら顧客が必要です。顧客を得たいなら、まず人々にあなたのウェブサイトを訪れてもらう必要があります。そしてそのためには、検索エンジンに頼らざるを得ません。あなたは多大な時間、労力、お金をかけてオンラインショップを開いたのに、わざわざ検索エンジンにインデックスさせないのは、小売店を開いたのに窓をすべて黒く塗り、看板も掲げないようなものです。

2、長所：

上記から、iframeフレームの欠点は検索エンジンにクロールされないことであることがわかります。しかし、物事には常に両面性があります。この欠点が長所にもなり得ます。これを利用すれば、サイト上でユーザーに見せる必要があるが検索エンジンにクロールされる必要のないコンテンツをiframeフレームで表示できます。これによりiframeの真の効果を発揮でき、サイトのコードも大幅に簡素化できます。例として、筆者が前述した微博（ウェイボー）ライブ配信情報の追加が挙げられます。これらの微博情報は検索エンジンに提供する必要はなく、訪問者とのインタラクティブな体験を提供する必要があります。下図のように、iframeフレームを使って微博情報を埋め込めば、サイトの微博ライブ配信プラットフォームを簡単に追加できるだけでなく、コードも非常に簡潔になります。

iframeは元のウェブページをそのまま全て表示できる点が良いのですが、トップページで使用すると検索エンジンに最も嫌われます。そうなると、サイトがどんなに良くできていても良い順位にはなりません。動的ウェブページの場合はincludeを使う方がまだましです。ただし、その場合は<html><head><title><body>タグを削除する必要があります。

フレームの長所

  • ページをリロードする際にページ全体をリロードする必要はなく、ページ内の1つのフレームページだけをリロードすればよい（データ転送が減り、ウェブページのダウンロード速度が向上する）
  • ナビゲーションバーを簡単に作成できる

フレームの短所

  • 多くのページが生成され、管理が容易ではない
  • 印刷が容易ではない
  • ブラウザーの戻るボタンが機能しない
  • コードが複雑で、一部の検索エンジンにインデックスされない
  • 多くの小型モバイル端末（PDA、携帯電話）ではフレームを完全に表示できない
  • 複数フレームのページはサーバーへのHTTPリクエストを増加させる
  • 上記の多くの欠点により、標準的なウェブデザインの理念に合わず、すでに標準的なウェブデザインから捨てられています。

ヒント：現在、フレームのすべての長所はAjaxで完全に実現できるため、フレームを使用する必要はもはやありません。

CSSボックスモデルの原理

  • 1、W3Cボックスモデルの範囲にはmargin、border、padding、contentが含まれ、content部分は他の部分を含みません。
  • 2、IEボックスモデルの範囲にもmargin、border、padding、contentが含まれます。標準のW3Cボックスモデルと異なるのは、IEボックスモデルのcontent部分がborderとpaddingを含むことです。

CSSのdisplay:noneとvisibility:hiddenの違い

  • visibility:hiddenは非表示にしますが、閲覧時には位置を保持します。
  • display:noneは存在しないものとみなされ、かつ読み込まれません。

jQueryとは何ですか？

jQueryはJavaScriptで書かれた再利用可能なJavaScriptライブラリです。

jQueryを使用せずにUIテキストを設定するJavaScriptコードは次のとおりです：

document.getElementById("txt1").value = "hello";

jQueryライブラリを使用した後のJavaScriptコードは次のとおりです：

$("#txt1").val("Hello");

このように、jQueryライブラリを使用した後のJavaScriptコードは明らかに簡潔になり、IT業界の特徴である「短、平、快」（簡潔・フラット・高速）にもより適合しています。

jQueryとJavaScriptの関係は？jQueryはJavaScriptを取って代わるでしょうか？

  • JavaScript：Webで最も人気のあるスクリプト言語です。
  • jQuery：優れたJavaScriptフレームワークです。軽量なJSライブラリであり、CSS3と互換性があり、さまざまなブラウザー（IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+）とも互換性があります。

jQueryはJavaScriptを取って代わるものではありません。jQueryを使用することでWeb開発が簡単になります。

jQueryライブラリをどう使うのですか？

jquery.comからダウンロードしたjquery.jsファイル（最新のjQueryバージョンV1.11.1またはV2.1.1）。 jQueryのファイル命名規則、例えば"jquery-1.4.1.js"では、1.4.1はJSファイルのバージョン番号です。

Webアプリケーションを開発する前に、インクルードする必要があるJavaScriptは、下のコードのとおりです。

<script src="../code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

CDN（コンテンツ配信ネットワーク）とは何ですか？

Webページを開発する際に、最も考慮される問題の1つは、クライアントコンピュータでのページの応答時間です。時間が短いほど、ユーザーエクスペリエンスは良くなります。

一方、ユーザーエクスペリエンスを制約する重要な要素の1つは、ブラウザがダウンロードするWebファイルのサイズです。これには、*.html、画像、*.js、*.cssなどのファイルが含まれます。

再利用を最大化し、帯域幅を節約するために、CDNが登場しました。その基本的な考え方は、データ転送の速度と安定性に影響を与える可能性のあるインターネット上のボトルネックや経路を可能な限り回避し、コンテンツをより速く、より安定して配信することです。その目的は、ユーザーが近くのサーバーから必要なコンテンツを取得できるようにし、インターネットの混雑を解消し、ユーザーがWebサイトにアクセスする際の応答速度を向上させることです。

jQuery CDNをどのように使いますか？

  • （1）公式のCDNノードを使用することをお勧めします。使用コードは次のとおりです。
    <script src="../code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  • 2）また、Googleが提供するjQuery CDNもあります：
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  • （3）同様に、MicrosoftもjQuery CDNのノードを提供しています：
    <script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

CDNネットワークにアクセスできない場合、自動的にWebサイトのjQueryファイルにアクセスするにはどうすればよいですか？

通常、CDNネットワークノードは信頼性があります。しかし、たまに故障することもあります。そのため、二重の保険として、CDNの読み込みに失敗したかどうかを判断し、失敗した場合はWebサイト上のjQueryを自動的に読み込むようにできます。サンプルコードは次のとおりです。

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined')  
{  
    document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js.html' type='text/javascript'%3E%3C/script%3E"));  
}
</script>

同じバージョンのjquery.jsファイルとjquery.min.jsファイルの違いは何ですか？

  • 同じ点：これらの2つのファイルは同じjQuery機能を提供します。つまり、関数呼び出しに違いはありません。
  • 異なる点：jQuery.jsファイルはプログラマーが読むのに適しています。jQuery.min.jsファイルは、圧縮とすべての空白の削除により帯域幅とスペースを節約し、ファイルをより小さくしてネットワーク転送に使用しますが、プログラマーが読むのには適していません。

いつjquery.jsを使い、いつjquery.min.jsを使うのですか？

  • 開発・デバッグの場面では、jQuery.jsファイルを使用します。デバッグ時にJavaScriptコードを確認できるからです。
  • 本番環境では、jQuery.min.jsファイルを使用します。ネットワーク帯域幅を削減し、Webページの読み込み速度を速めることができます。

jQuery.vsdoc.jsファイルとは何ですか？

*.vsdoc.jsファイルは、Microsoftの開発環境Visual Studioで使用するためのもので、jQueryのインテリセンスを簡単に取得できます。jQueryの関数を入力すると、関数の型、関数の使用説明、関数パラメータなどが自動的に表示されます。VSでjQueryを使ってWebアプリケーションを開発する場合、vsdoc.jsファイルは開発効率を大幅に向上させます。

jQueryの基本構文をどう説明しますか？

jQueryの構文構造は4つの部分に分けられます：

  • 1. デフォルトでは、すべてのjQueryコマンドは"$"記号で始まります。
  • 2. 次に、HTML要素の選択です。例えば、以下はID"txt1"によってHTMLテキストボックスを選択するものです。
  • 3. 続いて、ドット（.）で区切ります。この演算子は、選択した要素とその要素のアクション（関数）を分離します。
  • 4. 最後に、どのような関数（アクション）を実行するかです。

jQueryにおいて、"$"記号は何を表しますか？

jQueryでは、"$"記号はjQueryのエイリアスです。デフォルトのjQueryライブラリは$で始まります。

なぜjQuery.noConflict()を使うのですか？

jQueryと似たようなライブラリが多数あります。例：MooTools、Backbone、Sammy、Cappuccino、Knockoutなど。これらのライブラリの中には$記号を使用するものもあります。同時に使用すると、名前の競合が発生する可能性があります。

この競合を解決するには、jQuery.noConflict()を使用する必要があります。これにより、$というデフォルトの記号に依存しなくなります。例えば：

jQuery.noConflict();  
(function($){

})(jQuery);

同じページ内で、複数のdocument.readyイベントを読み込めますか？

できます。

関連チュートリアル：

  • HTML チュートリアル：https://www.example.com/html/
  • CSS チュートリアル：https://www.example.com/css/
  • Javascript チュートリアル：https://www.example.com/js/
  • jQuery チュートリアル：https://www.example.com/jquery/