HTML

HTMLの概要

HTMLはHyperText Markup Languageの略で、中国語名はHyperText Markup Languageです。

ハイパーテキスト：通常のテキストに加えて、画像、音声、ビデオ、リンク、表、フォームなどのコンテンツを含めることができます。
マークアップ言語：ページの構造とコンテンツをタグで記述します。HTMLはプログラミング言語ではなく、コンパイル実行が必要なスクリプト言語でもありません。

HTMLファイルの一般的な拡張子は.htmlまたは.htmです。ブラウザがHTMLファイルを読み込むと、タグが解析され、ページがレンダリングされます。

HTML 文書構造

完全なHTML 文書は通常、文書宣言、ルート要素、ヘッダ、本文から構成されます。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>我的第一个页面</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>：現在のドキュメントでHTML 5を使用することを宣言する。
<html>：HTMLドキュメントのルート要素。
<head>ページタイトル、文字エンコーディング、スタイルシート、スクリプトなどのページ情報を保存します。
<body>：ブラウザに実際に表示されているページ内容を保存する.

共通テキストラベル

タイトルタグTitle Labels

HTMLは<h1>から<h6>のレベル6タイトルを提供し、最高レベルの<h1>と最低レベルの<h6>を提供します。

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

タイトルレベルは、コンテンツ構造に基づいて使用する必要があります。デフォルトのフォントサイズだけに基づいてタイトルを選択しないでください。

パラグラフと改行

<p>这是一个段落。</p>
<p>这是另一个段落。<br />这里进行了换行。</p>

<p>は段落を表し，<br />は現在位置で改行することを表す.

水平分割線

<hr />

古いHTMLではsizeやcolorなどの属性で区切り線を設定できますが、現代の開発ではCSSが一般的に使用されます。

テキストスタイルラベルてきすとすたいるらべる

<p><s>删除线文本</s></p>
<p><u>带下划线的文本</u></p>
<p><i>斜体文本</i></p>
<p><b>加粗文本</b></p>
<p>2<sup>10</sup></p>
<p>n<sub>log</sub></p>

<s>正確ではなくなったコンテンツや関連性がなくなったコンテンツを示します。デフォルトでは取り消し線が表示されます。
<u>デフォルトで下線が表示されます。
<i>デフォルトでイタリック体が表示されます。
<b>デフォルトで太字が表示されます。
<sup>：上付き。
<sub>：下付き文字。

セマンティクスを強調する必要がある場合は，通常<strong>と<em>を優先する.

事前フォーマットされたテキスト

<pre>は、テキストのスペースと改行を保持します。

<pre>
public class Person {
    private String name;
    private Integer age;
    private String sex;
}
</pre>

font label

レガシー HTMLでは、<font>を使用してフォントの色とサイズを設定できます。

<font size="5" color="red">正式进入第三阶段：</font>
<font color="green">JavaWeb 程序开发</font>

<font>はHTML 5では非推奨であり、最新のページはCSSのcolor、font-sizeなどのプロパティを使用する必要があります。

HTMLエンティティー文字

エンティティ文字は、文字がHTML 構文と競合する場合や、特殊なスペースを入力する必要がある場合に使用できます。

エンティティ	結果の表示	説明
`<`	````	より小さい数字
`>`	`	サイズより大きい。
`&`	`&`	号と号。
` `	改行しないスペース	固定スペースの挿入によく使用されます

List Labelsリスト

説明リストの一覧

記述リストは、

、 <dt>、<dd> `で構成されます。

<dl>
    <dt>图书信息</dt>
    <dd>Java 学习笔记</dd>
    <dd>Java 核心技术</dd>
    <dd>Java 编程思想</dd>
</dl>

順序付きリスト

<ol type="1">
    <li>Java 学习笔记</li>
    <li>Java 核心技术</li>
    <li>Java 编程思想</li>
</ol>

typeの一般的な値は、1、A、a、I、iである。

順序のないリスト

<ul type="disc">
    <li>Java 学习笔记</li>
    <li>Java 核心技术</li>
    <li>Java 编程思想</li>
</ul>

レガシー HTMLのtype属性には、circle、disc、またはsquareが使用できます。現代の開発では通常 CSSのlist-style-typeで箇条書きを設定する。

イメージタグImage Tag

<img>ページに画像を表示する場合：

<img src="" width="300" height="300" alt="图像丢失" />

src：写真のアドレス。
width：画像の幅。
height：写真の高さ。
alt：画像が表示されない場合の代替テキストもアクセシビリティに役立ちます。

ハイパーリンクラベル

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

<a href="www.baidu.com" target="_blank">百度</a>

href宛先アドレス
target="_blank"新しいウィンドウまたは新しいタブで開きます。
target="_self"：現在のページで開きます。これもデフォルトの動作です。

テーブルタグ

テーブルは主に構造化データを表示するために使用され、ページレイアウト全体にテーブルを使用することは推奨されません。

基本的な構造

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格</th>
        <td>普通单元格</td>
    </tr>
</table>

<table>：テーブルの定義。
<caption>テーブルタイトルを定義します。
<tr>行を定義します。
<th>：ヘッダセルを定義します。デフォルトで太字で中央にします。
<td>通常のセルを定義します。

セルの連結

colspan列間連結、つまり水平方向連結。
rowspan行間連結、つまり垂直方向連結。

例：例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>表格示例</title>
</head>
<body>
    <table align="center" width="800" border="1" bordercolor="#ffb399" cellpadding="10" cellspacing="5">
        <caption>用户信息</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <td>女</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td colspan="2">水平方向合并两个单元格</td>
            <td rowspan="2">垂直方向合并两个单元格</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>22</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
    </table>
</body>
</html>

align、border、bordercolor、cellpadding、cellspacingのような表現属性は、現代のHTMLでは推奨されず、実際の開発は通常 CSSで設定されます。

フォームタグ

フォームは、ユーザー入力を収集し、データをサーバーに送信するために使用されます。

フォーム基本構造

<form action="http://localhost:8080/login.do" method="get">
    表单内容
</form>

action：フォーム送信アドレス。
method：提出方法で、一般的な値はgetとpostです。

name属性を持ち、無効になっていないフォームコントロールのみが、ルールに従ってフォーム送信に参加します。

`input`の制御

inputの一般的なtype値は以下の通り。

`type`	作用
`text`	単行テキストボックス
`password`	パスワード入力ボックス
`radio`	ラジオボックス
`checkbox`	チェックボックス
`hidden`	隠しドメイン
`email`	メールボックス入力ボックス
`number`	デジタル入力ボックス
`file`	ファイル選択ボックス
`date`	日付選択ボックス
`datetime-local`	ローカル日時選択ボックス
`month`	年月選択ボックス
`color`	カラーセレクタ
`button`	普通ボタン
`image`	画像送信ボタン
`submit`	提出ボタン
`reset`	リセットボタン

一般的な汎用属性には、id、name、class、placeholder、style、valueがあります。

フォームのサンプル

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>表单示例</title>
</head>
<body>
    <form action="http://localhost:8080/login.do" method="get">
        账户：<input type="text" name="userName" /><br />
        密码：<input type="password" name="userPwd" /><br />
        性别：
        <input type="radio" name="userSex" value="male" />男
        <input type="radio" name="userSex" value="female" />女<br />
        爱好：
        <input type="checkbox" name="hobby" value="smoking" />抽烟
        <input type="checkbox" name="hobby" value="drinking" />喝酒
        <input type="checkbox" name="hobby" value="perm" />烫头<br />
        邮箱：<input type="email" name="email" /><br />
        数字：<input type="number" name="number" /><br />
        文件：<input type="file" name="file" /><br />
        日期：<input type="date" name="date" /><br />
        本地时间：<input type="datetime-local" name="dateTime" /><br />
        颜色：<input type="color" name="color" /><br />
        年月：<input type="month" name="month" /><br />
        普通按钮：<input type="button" value="确定" /><br />
        图片按钮：<input type="image" src="fish.jpg" width="600" height="300" alt="提交" /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

ラジオボックスは、ミューテックスグループを形成するために同じnameを使用する必要があります。コミットが必要なコントロールは、nameと適切なvalueを設定してください。

ラベルのドロップダウン選択

“<select>定義”ドロップダウンリスト、“<option>定義オプション”

<label for="education">学历：</label>
<select id="education" name="education">
    <option value="">请选择</option>
    <option value="college">专科</option>
    <option value="bachelor">本科</option>
    <option value="master">研究生</option>
</select>

メタデータラベル

<meta>は通常、<head>に配置され、文書の文字エンコーディング、キーワード、ビューポートなどの情報を記述するために使用される。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="java程序开发,javaWeb程序设计,锅包肉" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元数据示例</title>
</head>
<body>
</body>
</html>

charset文書文字エンコーディングを設定します。
name keywordsやviewportなどのメタデータ名を指定します。
content対応するメタデータの内容を指定する。
http-equiv HTTPレスポンスヘッダ機能の一部をエミュレートする。

フレームタブ

レガシー HTMLでは、<frameset>および<frame>を使用してブラウザウィンドウを複数のゾーンに分割できます。

<frameset rows="150,*">
    <frame name="top" src="hello.html" />
    <frameset cols="200,*">
        <frame name="left" src="world.html" />
        <frame name="right" src="right.html" />
    </frameset>
</frameset>

rows行別のリージョン。
cols：列による区域区分。
nameフレームワーク名。
src：フレームに表示されるページアドレス.

<frameset>と<frame>はHTML 5で非推奨になりました。最新のページレイアウトはCSSを使用し、他のページを埋め込むときは必要に応じて<iframe>を使用できます。

統合ケーススタディ

以下の例では、タイトル、リンク、リスト、表、フォームを組み合わせて使用します。ケースは表レイアウトを使用したレッスンを保持します。現代のプロジェクトでは、ページ全体のレイアウトは通常 CSS FlexboxまたはGridを使用します。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>前端编程培训中心</title>
</head>
<body>
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" height="100" bgcolor="#f0f0f0" align="center">
                <h1>前端编程培训中心</h1>
                <p>专注 HTML、CSS、JavaScript 零基础前端教学</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="40" bgcolor="#2c3e50" align="center">
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">首页</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">课程介绍</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">师资力量</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">学员案例</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">在线报名</a>
            </td>
        </tr>
        <tr>
            <td width="200" bgcolor="#ecf0f1" valign="top" height="400">
                <h3 align="center">栏目导航</h3>
                <hr />
                <ul>
                    <li><a href="#">HTML 入门课程</a></li>
                    <li><a href="#">CSS 美化样式</a></li>
                    <li><a href="#">JavaScript 交互</a></li>
                    <li><a href="#">综合项目案例</a></li>
                </ul>
                <hr />
                <h3 align="center">联系我们</h3>
                <p align="center">电话：123-456789</p>
                <p align="center">地址：黑龙江工商学院</p>
            </td>
            <td width="600" valign="top" bgcolor="#ffffff">
                <h2 align="center">欢迎来到黑龙江工商学院</h2>
                <hr />
                <table width="90%" border="1" align="center" cellpadding="5" cellspacing="0">
                    <tr>
                        <th>课程名称</th>
                        <th>学习时长</th>
                        <th>适合人群</th>
                    </tr>
                    <tr>
                        <td>HTML 网页搭建</td>
                        <td>5 天</td>
                        <td>零基础学员</td>
                    </tr>
                    <tr>
                        <td>CSS 页面美化</td>
                        <td>7 天</td>
                        <td>掌握 HTML 基础</td>
                    </tr>
                    <tr>
                        <td>JavaScript 交互开发</td>
                        <td>10 天</td>
                        <td>有前端基础</td>
                    </tr>
                </table>
                <br />
                <hr />
                <h3 align="center">在线报名表单</h3>
                <form>
                    <table width="80%" align="center" border="0">
                        <tr>
                            <td width="100" align="right">姓名：</td>
                            <td><input type="text" name="name" placeholder="请输入姓名" /></td>
                        </tr>
                        <tr>
                            <td align="right">手机号：</td>
                            <td><input type="text" name="phone" placeholder="请输入手机号" /></td>
                        </tr>
                        <tr>
                            <td align="right">意向课程：</td>
                            <td>
                                <select name="course">
                                    <option>HTML 入门</option>
                                    <option>CSS 美化</option>
                                    <option>JavaScript 开发</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="提交报名" />
                                <input type="reset" value="重置" />
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="60" bgcolor="#2c3e50" align="center">
                <p style="color: #fff;">© 2026 前端编程培训中心 版权所有</p>
            </td>
        </tr>
    </table>
</body>
</html>

HTML

HTML

HTMLの概要

HTML 文書構造

共通テキストラベル

タイトルタグTitle Labels

パラグラフと改行

水平分割線

テキストスタイルラベルてきすとすたいるらべる

事前フォーマットされたテキスト

font label

HTMLエンティティー文字

List Labelsリスト

説明リストの一覧

順序付きリスト

順序のないリスト

イメージタグImage Tag

ハイパーリンクラベル

テーブルタグ

基本的な構造

セルの連結

例：例

フォームタグ

フォーム基本構造

inputの制御

フォームのサンプル

ラベルのドロップダウン選択

メタデータラベル

フレームタブ

統合ケーススタディ

`input`の制御