HTML設定(-)

HTMLはWebページ制作において最も重要な言語の1つであり、Webページのレイアウトやレイアウトを決定することができます。 HTML では、さまざまな要素の属性を設定して、Web ページの表示効果を制御できます。プロパティを設定する方法の 1 つは、「-」記号を使用することです。

1. CSS 属性名の「-」

CSS は、Web ページを美しくするために使用されるスタイルシート言語です。HTML 言語と同様に、「-」記号も Web ページを区切るために使用されます。複合属性の値を説明します。

たとえば、背景色属性は「background-color」、フォント サイズは「font-size」と記述することができます。この書き方はCSSでは「ハイフンネーミング」と呼ばれており、属性名の読みやすさを向上させるのに役立ちます。

2. カスタム データ属性

HTML5 では、「data-」接頭辞を使用してデータ属性をカスタマイズし、JavaScript で読み取れるように HTML 要素にカスタム属性を追加できます。この要素のデータを操作します。

たとえば、HTML 要素に data-* 属性を追加して、記事 ID、公開時刻などの要素に関連するカスタム情報を保存できます。

HTML コード:

<div id="article-123" data-time="2020-12-01">
  <h2>文章标题</h2>
  <p>文章内容</p>
</div>

JavaScript コード:

const article = document.getElementById('article-123');
console.log(article.dataset.time); // 2020-12-01

3. 入力ボックスのタイプ

HTML では、input 要素の type 属性を設定できます。 , 入力ボックスのタイプを指定します。一般的に使用される入力ボックスのタイプには、テキスト ボックス、パスワード ボックス、ラジオ ボタン、チェック ボックス、送信ボタンなどが含まれます。

たとえば、タイプを「テキスト」に設定してテキスト入力ボックスを作成し、タイプを「パスワード」に設定してパスワード入力ボックスを作成できます。同時に、同じ名前属性を持つ複数の複数選択ボックスを設定して、複数選択機能を実現することもできます。

HTML コード:

<form>
  <label for="username">用户名: </label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码: </label>
  <input type="password" id="password" name="password"><br>

  <label for="gender-male">男: </label>
  <input type="radio" id="gender-male" name="gender" value="male">

  <label for="gender-female">女: </label>
  <input type="radio" id="gender-female" name="gender" value="female"><br>

  <label for="fruits">选择水果: </label>
  <input type="checkbox" name="fruits" value="apple">苹果
  <input type="checkbox" name="fruits" value="banana">香蕉
  <input type="checkbox" name="fruits" value="orange">橙子<br>

  <input type="submit" value="提交">
</form>

4. URL 内のコネクタ

URL では、便宜上スペースを「-」記号または「_」記号を使用して置き換えます。検索エンジンは URL 内のキーワードを正しく解析します。同時に、「/」記号の代わりに「-」記号を使用して URL パスを簡素化することもできます。

5. 概要

HTML では、「-」記号を使用すると、CSS プロパティ、カスタム データ プロパティ、入力ボックス タイプ、URL コネクタを設定し、Web の効率と効率を向上させることができます。ページ制作と読みやすさ。同様に重要なことは、ユーザーにより良いブラウジング エクスペリエンスを提供するために、HTML 標準とセマンティクスに準拠する必要があるということです。

以上がHTML設定(-)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。