リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。 私は JavaEye でこのトピックを見ましたが、議論が非常に興味深いものだったので、参加せずにはいられませんでした。 セマンティック思考 まず、リンクやボタンにはセマンティクスがあり、使い勝手の都合上、置き換えることはできません。 a はアンカーの略語で、ナビゲーションや位置決めに使用されるアンカー ポイントです。典型的な使用法は次のとおりです。 <a href="http://www.w3c.org/">W3C Web サイト</a> <a name="anchor-one">これはアンカー 1 の場所です。</a> <a href="#anchor-one">アンカー 1 へのリンク</a> name属性とhref属性を同時に指定することもできます。これは基本的な知識です。ご不明な点がある場合は、HTML 4.01仕様を参照してください。 ボタン(button と <input type="button/submit" /> を含む)について説明します。意味的には、ボタンはフォームの一部であり、ボタンがトリガーするアクションはフォームに関連しています。フォームアクションがまったくない場合は、ボタンを使用しないでください。以下にいくつか例を挙げます。 ![]() 上の図にはいくつかのリンクが表示されています。ボタンのように見えますが、意味的には a です。 ![]() 上図の表示ボタンと並び替えボタンが操作フォームです。意味的に言えば、ボタンまたは入力の方が適切です。 (注:Taobaoの検索結果ページでは現在、 を使用しています。これは、後述のプログレッシブエンハンスメントの考慮のためです) つまり、リンクとボタンには独自の意味と使用シナリオがあり、自由に交換することはできません。 文章分析の世界は決してそれほど単純ではありません。JavaScript が全盛の今日の Web の世界では、リンク a は js イベントをトリガーするためによく使用されます。 <a href="" onclick="something()">テスト 1</a> <a href="#" onclick="something();return false">>テスト 2</a> <a href="javascript: void(0)" onclick="something()">>テスト 3</a> <a href="javascript: void something()">>テスト 4</a> まず、最初の書き方は IE では href を自動的に補完してしまうため問題があります。 2 番目の書き方は、onclick イベント内のデフォルト イベントを直接ブロックするため、href="#" 内の # は実際には任意の値にすることができます。 # は、js がない場合にクリック後に現在のページに留まるように考慮するために使用されます (注: a が 1 画面より下にある場合、この記述方法ではページが先頭までスクロールされます)。 3 番目の書き方は、href 値が JavaScript 疑似プロトコルであり、void が JavaScript の単項演算子 (!、typeof など) であるというものです。 void 演算子の機能は、値を返さずに次の式のみを実行することです。 void(0) はデフォルトイベントを阻止するようです。実際、次の式はすべて正しいです。 <a href="javascript: void(1)" onclick="something()">>テスト 3</a> <a href="javascript:;" onclick="something()">>テスト 3</a> <a href="javascript:" onclick="something()">>テスト 3</a> <a href="javascript: return true" onclick="something()">>テスト 3</a> のデフォルトの操作は JavaScript 疑似プロトコルの内容であるため、void を追加しても他のイベントはトリガーされません。 (注: Opera では、擬似プロトコルで戻り値がある場合、href が変更されるため、通常は void(0) または空のステートメントを記述します) 3 番目の書き方を理解すれば、4 番目の書き方も明らかになります: href="javascript: void something()"。この書き方の「利点」の 1 つは、マウスをホバーすると、ステータス バーを通じて実行される関数をユーザーが確認できることです。これは開発者にとってはメリットかもしれませんが、一般ユーザーの信頼を本当に高めることになるのでしょうか?それとも恐怖感でしょうか?データがなければ結論を導き出すことはできません。 上記の記述方法に加えて、クラスまたは ID を介してフックを追加し、js でフックを介してイベントを追加するという記述方法も推奨されます。 反省: 上記の書き方のどれが最良であるかを議論するつもりはありません。問題の原因について考えてみましょう。なぜ js イベントをトリガーするために を使用するのでしょうか?私が考えられる理由は次のとおりです。
浮遊スタイル以外には実質的な理由はないことがわかります。スタイルの問題をしばらく脇に置いて、例を見てみましょう。 ![]() 上記は Google Reader の操作バーです。興味があれば、Firebug を使って確認してみてください。使用されているマークアップは次のとおりです。 ![]() マウスのホバースタイルはまったく問題ではありません。 ![]() CSS に cursor: pointing to point を追加するだけです。 上記の例から、次のような結論を導き出すことができます。ナビゲーションや位置決めのセマンティクスなしで js アクションをトリガーするだけであれば、span またはその他の適切なタグを使用できます。を誤って使用する必要はありません (を使用すると問題が発生します。まず、デフォルトのイベントが削除され、次に、ステータス バーの情報が一般ユーザーを混乱させたり、怖がらせたりする可能性があります)。 もちろん、それがリンク自体であり、ナビゲーションの前に js ロジックを追加したり、フォームの並べ替えに適用したりするだけの場合は、プログレッシブ エンハンスメントの観点から、js をサポートしていないブラウザーでも使いやすさを確保するために、完全な href 値を記述することがベスト プラクティスです。 ベスト プラクティスは、要約や最終的な結論ではありません。ベスト プラクティスは、コードを書く前に考慮すべき一連の原則にすぎません。
コードには生命があり、タグの王国は動物園であり、それらに慣れていて、すべてがかわいいです。 |
<<: MySQL で自動インクリメントシーケンスを実装するためのサンプルコード
背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...
1つ: 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...
1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
プロジェクトの開発中に、データベースのデータがどんどん大きくなり、その結果、1 つのテーブルにデータ...
目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...
Linux 仮想マシン: VMware + Ubuntu 16.04.4 Windows ネイティブ...
目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....
トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...
序文Docker イメージは Dockerfile といくつかの必要な依存関係で構成され、Docke...
序文mv コマンドは、move の略語で、ファイルを移動したり、ファイル名を変更したり (ファイルの...
目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...
Tomcat7.0は仮想ディレクトリを設定します(1)現在、当社のウェブサイトはデフォルトのディレク...
el-form フォームにルールを追加します。データにルールを定義する定義されたルールをel-for...
私の最初のサーバープログラム現在、オンラインゲームの書き方を学んでいるので、サーバーサイドのプログラ...