経験者のHTMLの書き方と理由の分析

経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素
miaobao04
ナビゲーションを記述するために最も一般的に使用される「順序なしリスト」を使用する理由は明らかです。これはリンクのリストを表しており、それ自体がリスト タグを選択する十分な理由です。しかし、リストをより意味のあるものにするためには、リストのデフォルトのスタイルを削除する必要があります。
もう 1 つの利点は、想像を超えるかもしれません。リストを作成してリンクを追加し、CSS を使用してリスト内の一連の要素を制御および定義します。

 <ul><li><a href="#">収集して共有する</a></li></ul>

2. パス(パンくずリスト): p 段落タグと list リストタグ
miaobao

この問題について一緒に話し合うことができます。他にもっと良い方法があればお知らせください。個人的には、パス(パンくずリスト)を次のように記述することを好みます。 (ただし、>> 記号はあまり使用しません)。

 <p id="breadcrumbs"><a href="#">ホーム</a> » <a href="#">会社概要</a> </p>

ウェブサイトのパス(パンくずリスト)は、特定のページ内で階層関係を持っています。論理的には、階層関係を示すためにリストをネストする必要があります。しかし、リストに項目が 1 つしかない場合はどうでしょうか。個人的には、Web ページのパス (パンくずリスト) は 1 行で表示されるべきだと考えています。

3. 入力ボタン
input type="submit" を最後に使用したのがいつだったか思い出せませんが、2 つの理由からずっと前に使用しなくなりました。ボタン要素に type="submit" が必要なのはなぜでしょうか。ボタンは独自の要素であり、コード内で識別しやすく、CSS で定義しやすいです (すべての古いブラウザーがこの要素タグ属性をサポートしているわけではありません)。また、他のタグ要素を書き込むこともできるため、可塑性の可能性が広がります。

 <button type="submit">フォームを送信</button>

4. メッセージ: 順序付きリスト (ol) と順序なしリスト (ul)
miaobao02
リストは本当に素晴らしいです! 3 つの異なるタイプ (順序付きリスト、順序なしリスト、定義リスト) があり、それぞれに独自の用途があります。順序付きリスト (ol) と順序なしリスト (ul) は両方とも使用する意味があるため、いつ使用するかについて混乱するかもしれません。メッセージは、教科書に載っている、自然な上向きの順序できちんと並べられた時系列の例に少し似ています。各コメント メッセージは固定時間に対応しているため、コメント構造では順序付きリスト (ol) を使用する必要があります。

 <オル>
	<li>
	<ul>
	<li><img src="path-to-gravatar.gif" alt="著者名" /></li>
	<li><a href="url-to-authors-homepage.html">著者名</a></li>

	<li>投稿日をここに記入</li>
	</ul>
	<div>ここにコメントテキストを入力してください...</div>
	</li>
</ol>

5. label/input: 他のラベル要素へのdiv
miaobao03
ラベル/入力の外側に親構造を埋め込むのに最適なラベル要素は何ですか?

 <label for="contactName">あなたの名前</label>
<input type="text" name="連絡先名" id="連絡先名" />

適切なタグ コードの使用については以前に説明しましたが、今回は div を使用してラベル/入力を埋め込むことを選択しました。ラベルとそれに関連するコンポーネントは全体として考慮されます。 div 要素には幅広いセマンティック プロパティがあり、あらゆる状況に適応できます。

 <div>
	<label for="contactName">あなたの名前</label>
	<input type="text" name="連絡先名" id="連絡先名" />
</div>

中国語原文: HTML ライティングの 5 つの好み
私のHTML コーディングの好みトップ5

<<:  Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

>>:  MySQLソースコマンドの使い方の紹介

推薦する

SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。

Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

Lua モジュールを使用して WAF を実装する Nginx の原理の分析

目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...

3つのDocker Nginxログの処理の詳細な説明

社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...

React は入力値を取得し、2 つのメソッドの例を送信します

方法1: DOMが提供するイベントオブジェクトのターゲットイベント属性を使用して値を取得し、送信する...

Node.jsはブレークポイント再開を実装する

目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...

Ubuntu 14 に Nginx-RTMP ストリーミング サーバーをインストールするチュートリアル

1. RTMP RTMP ストリーミング プロトコルは、Adobe が開発したリアルタイムのオーディ...

DockerでNginxサーバーを作成する方法

動作環境: MAC Docker バージョン: Docker version 17.12.0-ce,...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

mysql 計算関数の詳細

目次2. フィールドの連結2. MySQL関数の例をいくつか挙げてください。 2.1 シンボル処理2...

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...

ホバー画像のポップアウトポップアップ効果を実現するための純粋な CSS のサンプルコード

実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...

jsは動的にテーブルを生成します(ノード操作)

この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...

PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル

1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...