HTMLの一般的なタグ

HTMLの一般的なタグ

1. HTMLタグを理解する

HTML では、タグはペアで表示されます。HTML では、コードはタグによって編成されます。以下に、HTML タグの構造を Hello World の表示を通して示します。

<html>
    <head></head>
    <body>
        Hello  World!
    </body>
</html>

上記のコードブロックに示されているように、山括弧で囲まれており、ペアで現れるこのものはタグ (タグ) と呼ばれ、要素 (エレメント) と呼ばれることもあります。

通常、タグは開始タグ、終了タグ、およびこれら 2 つのタグの間にあるタグの内容のペアで表示されます (少数のタグはタグとして表示され、これらのタグは単一タグとも呼ばれます)。
タグは一般に入れ子にすることができ、タグ間の内容は 1 つ以上のタグにすることができ、このとき、これらのタグの間にツリー構造が形成されます。
開始タグ内のタグに属性を割り当てることができます。属性はキーと値のペアに相当し、1 つ以上存在できます。

上記のコードセグメントでは、html がこのファイルの最上位ラベル、つまりツリーのルートノードであり、このページのいくつかの属性が head に格納され、このページにどのようなコンテンツが含まれるかが body に格納されます。

次に、HTML でどのタグがサポートされているか、各タグの機能、および各タグが持つ主要な属性を紹介する必要があります。

2. HTMLタグの概要

VS CodeやIDEAでHTMLコードを書く場合、ショートカットキーを使って素早くコードフレームを生成し、VSで!(英語)を入力し、Tabキーを押すことで基本的なコードフレームを生成する内容を書くことができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

この生成されたコードフレームワークでは、このページのいくつかの基本プロパティが大まかに紹介されています。

画像-20230304162442962

以下は、HTML で一般的に使用されるタグの紹介です。

注釈ラベル

HTML のコードコメントは通常、他の言語のコメントとはまったく異なります。HTML では、//、/ **/、および # は正当なコメントではなく、コメントの内容はページに表示されませんが、ページのソースコードコメントは通常、にあります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是一个html中的注释标签 -->
    Hello World!
</body>
</html>

ページ内で F12 キーを押すとソースコードが表示され、コメントが表示されます。

画像-20230304170344279

VS Code では、ctrl + / を使用してコードにすばやくコメントすることができます。

タイトルタグ

htmlではh1～h6で第1段見出し～第6段見出しを表しており、数字が大きいほどフォントが小さくなります。

</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

表示される効果は以下の通りです。

HTML でラベルを折り返すかどうかは、コードの記述とは関係ありませんが、ラベル自体の性質に関係しており、タイトルタグのうち、各ラベルは 1 行を占めます。

段落タグ

htmlで使用する

段落タグを表すには、段落の内容を書き込むという使い方になります。

と

各段落間の効果を明確に示すために、Lorem を使用してランダムなテキストを生成します。

</head>
<body>
    <!--这是段落标签-->
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p> 
</body>
</html>

画像-20230304172330187

各段落の間、改行や明確な段落間隔は CSS を使用して調整できます。

改行ラベル: br

html では br タグを使用してテキストを折り返すことができ、折り返す効果を得るために上記の段落に br タグを追加します。

br タグも単一のタグであり、終了タグは必要ありません

画像-20230304173145444

タグの書式設定

テキストは HTML で書式設定でき、書式設定に関連する操作には太さ、斜体、取り消し線、下線などがあります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是格式化标签,不独占一行, 加上<br>换行 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <br>
    <em>倾斜</em>
    <i>倾斜</i>
    <br>
    <del>删除线</del>
    <s>删除线</s>
    <br>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

表示される効果は以下の通りです。

画像-20230304173610033

上記の書式設定タグは 1 行に収まらないため、改行タグを追加する必要がありますが、実際の開発プロセスでは、通常、上記の効果を実現するために CSS が使用されます。

画像タグ

画像の表示効果を実現するには、img タグを使用します。この場合、img タグには、相対パスと絶対パスを含む画像のパスを記述する src 属性が含まれている必要があります。

相対パス: HTML ファイルの場所に基づいて、画像の場所を見つけます。
- 同レベルパス: ファイル名を直接記述します (または ./)。
- 次のレベルのパス: image/1.jpg
- 上位パス: …/image/1.jpg
絶対パス: 完全なディスクパスまたはネットワークパス。例:
- ディスクパス: E:\test.jpg
- ネットワークパス: https://tse1-mm.cn.bing.net/th/id/OIP-C.xq6cOv82ubIhJY9qkFd5AgHaEK?pid=ImgDet&rs=1
img タグの追加属性:

altタグ：画像が正しく表示されない場合に代替テキストが表示されます

画像-20230304214851958

画像-20230304214905944

タイトルタグ: マウスを画像の上に置くと、置換テキストが表示されます

画像-20230304215459998

画像-20230304215448389

width / height は画像のサイズを記述し、幅と高さを制御します。

 <img src="./test.jpg width="500px" height="800px">

ハイパーリンクラベル

HTML のハイパーリンクタグは a タグを使用し、a タグには href 属性と target 属性の 2 つの属性があります。
- href : 必須。クリック後にどのページにジャンプするかを示し、元のページを上書きします。
- target : 一般的に targrt = “_blank” と記述され、元のページを上書きせずに新しいページにジャンプする機能です。

<!-- 这是一个超链接标签 其中的链接也可以替换为ip地址-->
<body>
    <a href="https://www.baidu.com">百度</a>
    <!-- target 使用, 不会覆盖原来的页面,打开了一个新的页面-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
</body>

画像-20230304221555808

フォームタブ

HTML では table を table タグとして使用します。tr タグは行を表し、td タグはセルを表し、th タグはヘッダー内のセルを表します。

次の属性を table タグに追加できます。

幅と高さの属性。テーブルの長さと幅を設定します。
align 属性: 周囲の要素に対するテーブルの中央/左/右の配置を示します。
border 属性はテーブルに境界線を追加します。1 は境界線があることを意味し (数値が大きいほど境界線が太くなります)、「」は境界線がないことを意味します。
cellpacing 属性は、セル間の距離を設定することを意味します。通常、デフォルトは 2 ピクセルです。通常、テーブルの境界線が完全に塗りつぶされるように設定するには、この属性を 0 ピクセルに設定します。
cellpadding 属性: セル内のコンテンツと境界線の間の距離を示します。通常、デフォルトは 2 ピクセルです。

表をより美しく見せるために、通常、CSS クラスは表のテキストを中央に配置するように設定されます。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css使表格中的文字居中 -->
    <style>
        td{
      
      
            text-align: center;
        }
    </style>
</head>
<!-- 这是一个表格标签 -->
<body>
<!-- 设置table标签的相关属性 -->
    <table width="500px" height="300px" border="1px" cellspacing="0" cellpadding = "5">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1233</td>
        </tr>
        <tr>
            <td>宋六</td>
            <td>1156</td>
        </tr>
    </table>
</body>
</html>

画像-20230304224146310

table タグの align 属性が設定されている場合、テーブルはページの周囲の要素に対して中央/左/右に配置されます。

<!-- 将表格设置为水平居中 -->
<table border="1px" cellspacing="0" cellpadding = "5" align="center">

画像-20230304225000794

リストラベル

リストタグの役割は通常、順序付きリストと順序なしリストを含む要素をレイアウトすることです。通常、並列項目を表す場合は順序なしリストが使用されます。

順序付きリスト: ol li 順序なしリスト: ul li

<body>
    <h3>我的列表如下</h3>
<!-- 有序列表 -->
    <ol>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ol>
<!-- 无序列表 -->
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>
</body>

表示効果は次のとおりです。

画像-20230304230011517

フォームラベル

フォームタグは、フォームフィールドやフォームコントロールなど、ユーザーが入力する重要な方法であり、最も一般的に使用されるフォームコントロールは入力タグです。

入力タグ

input タグを使用すると、単一行のテキストボックス、パスワードボックス、ボタン、ラジオボックス、チェックボックスなどのさまざまな入力コントロールを実装できます。

入力タグ属性
- type : テキスト、パスワード、ボタン、チェックボックス、画像、ラジオなど、さまざまなタイプの値（必須）があります。
- name : 入力タグに名前を付けます。ラジオボタンの場合、同じ名前のボタンのみがもう 1 つ選択できます。
- value : input タグのデフォルト値
- selected : デフォルトでチェックされるラジオボタンとチェックボックスを設定するために使用されます。
- maxlength : 最大長を設定します。
入力タグは次を使用します
- テキストボックス
```
 <input type="text">
```
- パスワードボックス
```
 <input type="password">
```
- 単一ボックス
男性または女性のいずれかを選択します。デフォルトの選択は男性です。
```
<input type="radio" name ="sex" checked = "checked">男
<input type="radio" name = "sex">女
```
- チェックボックス
```
<h4>今天干什么</h4>
<input type="checkbox">写博客
<input type="checkbox">刷力扣
<input type="checkbox">学html
```
- 通常のボタン
```
 <input type="button" value="我是个按钮">
```
ここのボタンをクリックしても応答はありませんが、後で js を使用してクリック効果を表示できます。
- 送信ボタン (フォームで使用)
```
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
```
送信ボタンの外観はボタン 1 に似ており、フォームとサーバー間の対話をトリガーします。
- ファイル選択ボックス
クリックすると、ファイルエクスプローラーが起動し、アップロードするファイルが選択されます。
```
 <input type="file">
```
タグを選択

select タグは主にドロップダウンメニューで使用され、ドロップダウンメニューのオプションは option タグで定義されます。

selected="selected" は、デフォルトで選択されていることを意味します。デフォルトの選択を指定しない場合、デフォルトで最初の選択になります。

 <select>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
    </select>

    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>郑州</option>
        <option>西安</option>
     </select>

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-nM3lkSzw-1680319948963)(C:/Users/love46/AppData/Roaming/Typora/) typora-user-images/image-20230306101732436.png)]

テキストエリアタグ

複数行編集ボックス: テキスト領域には無制限の量のテキストを含めることができ、テキストのデフォルトのフォントは等幅フォント (通常は Courier) です。テキストエリアのサイズは、cols 属性と rows 属性で指定できますが、より良い方法は CSS の height 属性と width 属性を使用することです。

<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-VhWR1tpd-1680319948964) (C:/Users/love46/AppData/Roaming/Typora/) typora-user-images/image-20230306102647356.png)]

上記のタグは、グラフィカルインターフェイスの基本要素であるコントロールと呼ぶこともできます。

意味ラベルがありません

divタグとspanタグは、Webページのレイアウトによく使用されます。
- div は 1 行で大きなボックスです。HTML ドキュメントで分割ブロックと領域部分を定義するためによく使用され、ブロックレベルの要素を結合して、これらの要素を CSS を通じて書式設定できるようにするためによく使用されます。
- スパンは単一行ではなく、小さなボックスであり、ドキュメント内のインライン要素を結合するために使用されます。
```
<div>
  <span>html</span>
  <span>css</span>
  <span>js</span>
</div>

<div>
   <span>c</span>
   <span>java</span>
   <span>c++</span>
   <span>go</span>
 </div>
```

3. 事例の応用

HTMLページタグの包括的な適用 - 表示の再開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历信息页</title>
</head>
<!-- 简历展示信息 -->
<body>
    <h1>张三</h1>
    <!--基本信息  -->
    <div>
        <h2>基本信息</h2>
        <img width = "500px"src="test.jpg">
        <p>
            <span>求职意向:</span>
            <span>Java开发工程师</span>
        </p>
        <p>
            <span>联系电话:</span>
            <span>XXX-XXXX-XXXX</span>
        </p>
        <p>
            <span>邮箱</span>
            <span>[email protected]</span>
        </p>
        <p>
            <a href="https://github.com/echoyter">我的github博客</a>
        </p>
        <p>
            <a href="https://www.csdn.net/">我的CSDN博客</a>
        </p>
    </div>
    <!-- 教育背景 -->
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>1990-1996 幼儿园 </li>
            <li>1996-2002 小学</li>
            <li>2002-2005 初中</li>
            <li>2005-2008 高中</li>
            <li>2008-2012 本科</li>
        </ol>

        <h2>专业技能</h2>
        <ul>
            <li>Java基础语法扎实</li>
            <li>数据结构熟练应用</li>
            <li>熟悉计算机网络理论</li>
            <li>掌握Web开发功能</li>
        </ul>

        <h2>我的项目</h2>
        <ol>
            <li>留言墙</li>
            <p>
                <span>开发时间:<span>
                <span>2008年9月到2008年12月</span>
            </p>
            <p>功能介绍</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
            <li>学习小助手</li>
            <p>
                <span>开发时间:</span>
                <span>2008.9-2008.12</span>
            </p>
            <p>功能介绍</p>
            <ul>
             <li>支持错题检索</li>
             <li>支持同学探讨</li> 
            </ul>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>在校期间学习成绩优良,多次获得奖学金</p>
    </div>
</body>
</html>

結果は以下に示すとおりです。

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-dcNPZrPF-1680319948965)(C:/Users/love46/AppData/Roaming/Typora/) typora-user-images/image-20230306111147615.png)]

上記のhtmlタグはページの骨格構造を記述するだけなので、次のパートではcssを学習してページを美しくする方法を学びます。

「フロントエンド三銃士」：HTMLの共通タグ

HTMLの一般的なタグ

1. HTMLタグを理解する

2. HTMLタグの概要

3. 事例の応用

おすすめ