リンク 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 で自動インクリメントシーケンスを実装するためのサンプルコード
前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...
質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...
実際のWebページ開発でも、アコーディオンは頻繁に登場します。簡単なアコーディオンを作ったのですが、...
目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...
面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...
目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...
1. Dockerに適したRedisのバージョンを見つけるdocker hubで見つけることができ...
目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....
この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...
MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...
問題を見つける最近、仕事で問題が発生しました。InnoDB タイプの SQL ファイルを実行すると、...
序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...
概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...
ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...