HTMLタグ学習ガイド：初心者からマスターまで！

HTMLタグはWebページ構築の基本要素として、Web開発者であれば必ず学ばなければならない内容の1つです。ただし、初心者にとって、HTML タグは面倒で複雑なパズルのように思えるかもしれません。では、HTMLタグを体系的に学ぶにはどうすればよいでしょうか? この記事ではHTMLタグの入門から習熟までをわかりやすく解説し、HTMLタグの本質をわかりやすく解説します！

1. HTMLタグの概要

HTMLとは何ですか?

HTML は Hyper Text Markup Language の頭字語で、Web ドキュメントや Web アプリケーションを作成するためのマークアップ言語です。マークアップを使用してドキュメントの構造とセマンティクスを記述します。

HTMLタグの役割

HTML タグは、Web ページの構造とコンテンツを記述するために使用される特別なクラスのコードです。HTML タグを使用すると、テキスト、画像、音声、ビデオ、その他の要素を組み合わせて、リッチで階層的な Web ページを作成できます。一般的な HTML タグは、<html>、<head>、<body>、<p>、<img>、<a> などです。

HTMLタグの基本構文

すべての HTML タグは <タグ名> で始まり </タグ名> で終わります。タグ名は大文字と小文字を区別しません。タグ内にテキストまたは他の HTML タグを挿入できます。

たとえば、次は単純な HTML ドキュメントです。

<!DOCTYPE html>
<html>
    <head>
        <title>我的网站</title>
    </head>
    <body>
        <h1>欢迎来到我的网站！</h1>
        <p>这是一个由HTML和CSS构建的网页。</p>
        <img src="mypic.jpg" alt="我的图片">
        <a href="http://www.example.com">点击这里</a>访问我的朋友的网站。
    </body>
</html>

このドキュメントでは、<html> タグと </html> タグはドキュメント全体のルート要素を定義するために使用され、<head> タグと </head> タグはドキュメントのヘッダー情報を含めるために使用されます。タイトルとスタイルシート。<body> タグと </body> タグには、タイトル、段落、画像、リンクなど、ドキュメントの主要なコンテンツが含まれます。

2. 高度な HTML タグ

テキストラベル

テキストタグは、段落、見出し、太字、斜体、ハイパーリンクなどのテキスト関連のコンテンツを表示するために使用されます。

<p>: 段落を作成するために使用されます。

<h1> ～ <h6>：6 段階の見出しを作成します。

<strong> または <b>: 太字のテキストの場合。

<em> または <i>: 斜体テキストの場合。

<a>: ハイパーリンクの作成に使用されます。

画像タグ

imageタグは画像を挿入するために使用されます。

<img>: 画像を挿入するために使用されます。画像のソース (src)、サイズ (幅、高さ)、代替テキスト (alt) などを指定できます。

例えば：

<img src="mypic.jpg" alt="我的图片">

リストラベル

リストタグは、順序付きリスト、順序なしリスト、および定義リストを作成するために使用されます。

<ul> および <li>: 順序なしリストの作成に使用されます。

<ol> および <li>: 順序付きリストの作成に使用されます。

<dl>、<dt>、<dd>: 定義リストの作成に使用されます。

例えば：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>
<ol>
    <li>第一条</li>
    <li>第二条</li>
</ol>
<dl>
    <dt>词汇1：</dt>
    <dd>这是词汇1的定义。</dd>
    <dt>词汇2：</dt>
    <dd>这是词汇2的定义。</dd>
</dl>

フォームタブ

テーブルタグはテーブルを作成するために使用されます。

<table>: テーブルの作成に使用されます。

<tr>: テーブルの作成に使用される行。

<td>: テーブルの作成に使用されるセル。

<th>: テーブルの作成に使用されるヘッダーセル。

例えば：

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>30</td>
        <td>程序员</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>35</td>
        <td>设计师</td>
    </tr>
</table>

フォームラベル

フォームタグは、ユーザーが入力したデータを収集するためのフォームを作成するために使用されます。

<form>: フォームの作成に使用されます。

<input>: さまざまなタイプの入力ボックスを作成するために使用されます。

<label>: フォーム要素のラベルを作成するために使用されます。

例えば：

<form action="submit.php" method="post">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username">
    <label for="password">密码：</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="提交">
</form>

3. 高度な HTML タグ

「マルチメディア」タブ

マルチメディアタグは、オーディオとビデオを挿入するために使用されます。

<audio>: オーディオを挿入するために使用されます。

<video>: ビデオを挿入するために使用されます。

例えば：

<audio controls>
    <source src="myaudio.mp3" type="audio/mp3">
    <source src="myaudio.ogg" type="audio/ogg">
    您的浏览器不支持音频格式，请升级您的浏览器。
</audio>
<video controls>
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.ogg" type="video/ogg">
    您的浏览器不支持视频格式，请升级您的浏览器。
</video>

フレームラベル

フレームタグは、異なるウィンドウを区切るフレームを作成するために使用されます。

<frame>: フレームを定義するために使用されます。

<frameset>: フレームセットを定義するために使用されます。

<noframes>: フレームをサポートしていないブラウザで代替コンテンツを表示するために使用されます。

例えば：

<frameset cols="25%,75%">
    <frame src="menu.html">
    <frame src="content.html">
</frameset>
<noframes>
    您的浏览器不支持框架，请升级您的浏览器。
</noframes>

セマンティックタグ

セマンティックタグはテキストタグと同じですが、テキストを表すためだけでなく、テキストのセマンティクスを表すためにも使用されます。

<section>: ドキュメントのセクションを表すために使用されます。

<article>: 独立した記事を表すために使用されます。

<header>: ドキュメントのヘッダーを表すために使用されます。

<aside>: ドキュメントのサイドバーを表すために使用されます。

<nav>: ドキュメントのナビゲーションを表すために使用されます。

例えば：

<header>
    <h1>我的网站</h1>
   </header>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<section>
    <h2>最新消息</h2>
    <article>
        <h3>标题1</h3>
        <p>内容1</p>
    </article>
    <article>
        <h3>标题2</h3>
        <p>内容2</p>
    </article>
</section>
<aside>
    <h2>热门文章</h2>
    <ul>
        <li><a href="#">文章1</a></li>
        <li><a href="#">文章2</a></li>
        <li><a href="#">文章3</a></li>
    </ul>
</aside>

スタイルタグ

styleタグはスタイルシートを追加するために使用されます。

例えば：

<head>
    <style>
        body {
            background-color: #f2f2f2;
        }
        h1 {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>

V. まとめ

この記事の学習を通じて、HTML タグの基本構文と一般的なタグの使用法を理解できました。さらに学習を進めると、HTML5 のいくつかの新しいタグとセマンティックタグ、および CSS を使用して HTML ドキュメントにスタイルを追加する方法を学ぶことができます。HTMLタグの使い方を実践的にマスターすることが最も重要であり、常にコードを書いて効果を確認することで初めてHTMLタグの本質を理解することができます。

HTMLタグ学習ガイド：初心者からマスターまで！

おすすめ