HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML見出し

HTML見出しは、

から

までの6つのレベルを指し、h1が最も重要な見出しレベルであり、h6が最も重要度が低くなっています。 H1、H2、H3、H4、H5、H6は6つの見出しです。

注 −見出しは、検索エンジン（googleなど）がWebページのコンテンツのインデックスを作成するために使用します。

HTML見出しの例を見てみましょう −

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked>
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset>
</form>
<script>
   var textSelect = document.getElementById("textSelect");
   var headingPreview = document.getElementById("headingPreview");
   function changeHeading() {
      if(textSelect.value === '')
         headingPreview.innerHTML = 'Write a Heading';
      else{
         for(var i=0; i<6; i++){
            var radInp = document.getElementsByClassName('radio')[i];
            if(radInp.checked === true && textSelect.value !== '')
               headingPreview.innerHTML ='<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
         }
      }
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

1）[プレビュー]をクリックする前に テキストフィールドが空のボタン-

HTML見出し

2）[プレビュー]をクリックした後 テキストフィールドが空のボタン-

HTML見出し

3）[プレビュー]をクリックした後 テキストフィールドが空ではなく、「h6」ラジオボタンがチェックされているボタン-

HTML見出し

4）[プレビュー]をクリックした後 テキストフィールドが空ではなく、「h1」ラジオボタンがチェックされているボタン-

HTML見出し


  1. HTMLDOM入力ラジオ値プロパティ

    HTML DOM入力ラジオ値プロパティは、type =” radio”を持つ入力要素とvalue属性に関連付けられています。ラジオボタンの値属性の値を返すか、設定するために使用されます。 ラジオボタンのvalueプロパティは、コンテンツが表示されないだけなので、Webサイトのユーザーインターフェイスには影響しません。ただし、フォームの送信時に同じグループの複数のボタンを区別するために使用できます。 構文 以下は、-の構文です。 値プロパティを設定します- radioObject.value = text; ここでは、ラジオボタンの値を指定するためにテキストが使用されています。 例 入

  2. HTMLDOM入力無線タイププロパティ

    HTML DOM入力ラジオタイププロパティは、type =” radio”を持つ入力要素に関連付けられています。入力無線要素に対して常に無線を返します。 構文 無線タイププロパティの構文は次のとおりです- radioObject.type 例 ラジオタイププロパティの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Input radio type Property</h1> <form> FRUIT: <input type="radio" name=