経験者の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ソースコマンドの使い方の紹介

ブログ    

推薦する

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

Alibaba Cloud サーバーの購入とインストール方法

1. サーバーを購入するこの例では、購入したサーバーはAlibaba Cloudです。大学生はAli...

Alibaba Cloud Server Linux システムは Tomcat を構築して Web プロジェクトを展開します

私は全体のプロセスを 4 つのステップに分けます。 JDKをダウンロードしてインストールするTomc...

概要ページでのフロートとクリアフロート

1. フロート: 主な目的は、テキストを画像の周囲に折り返す効果を実現することです。また、複数列レイ...

Centos7のホスト名を変更する3つの方法

方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...

Linux で pyenv をインストールする方法

前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...

JavaScript のデシェイクとスロットリングの例

目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

CSSを使用して特別なロゴやグラフィックを実装する

1. はじめに画像は多くのスペースを占め、画像の数が増えるほど管理が難しくなるため、シンプルなラベル...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

Hadoop におけるネームノードとセカンダリネームノードの動作メカニズムの説明

1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...

MySQL 悲観的ロックと楽観的ロックの実装

目次序文実際の戦闘1. ロックなし2. 悲観的ロック3. 楽観的ロック要約する序文悲観的ロックと楽観...

NFS サーバーの原理と、その構築、構成、展開の手順を簡単に分析します。

目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...