基本構造、ドキュメントタイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<タイトル></タイトル>
</head>
<本文>
</本文>
</html>

2. 文書の種類:

（１）HTML4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

（２）HTML5

<!DOCTYPE html>

（３）XHTML1.0

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. 頭:
（１）文字セット

コードをコピー

コードは次のとおりです。

（２）JSの紹介

コードをコピー

コードは次のとおりです。

<スクリプト言語="javascript"></スクリプト>
<script language="javascript" src=""></script>
<script language="javascript">var u="__URL__";var a="__APP__";</script>
<script language="javascript" src="__PUBLIC__/js/jquery-1.8.1.min.js"></script>

（３）CSSの紹介

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css"></スタイル>
<link rel="スタイルシート" href="" type="text/css">

（4）デフォルトのジャンプを設定する

コードをコピー

コードは次のとおりです。

（５）検索エンジン関連情報の設定

コードをコピー

コードは次のとおりです。

4. 件名:

（１）基本内容

コードをコピー

コードは次のとおりです。

（２）フォーム
GET 送信: <form id="" action="" method="post"></form>
POST 送信: <form id="" action="" method="get"></form>

ファイルとともに送信: <form id="" action="" method="post" enctype="multipart/form-data"></form>

ホームページでよく使用されるもの:

コードをコピー

コードは次のとおりです。

テキストフィールド: <input id="" name="" class="" type="text"></input>

パスワードフィールド: <input id="" name="" class="" type="password"></input>
通常のボタン: <input id="" name="" class="" type="button"></input>
ラジオボタン: <input id="" name="" class="" type="radio"></input>
複数選択ボタン: <input id="" name="" class="" type="checkbox"></input>

アップロードされたファイル名を表示するには:

<input id="" name="" class="" type="text" onchange="document.getElementById('').value=this.value"></input>
ファイルのアップロード: <input id="" name="" class="" type="file"></input>
隠しフィールド: <input id="" name="" class="" type="hidden"></input>
送信ボタン: <input id="" name="" class="" type="submit"></input>
画像送信ボタン: <input id="" name="" class="" type="image"></input>
リセットボタン: <input id="" name="" class="" type="reset"></input>

複数行テキスト領域: <textarea cols="" rows="" id="" name=""></textarea>

ドロップダウンメニュー:

コードをコピー

コードは次のとおりです。

<名前="" サイズ="" 複数選択>
<option value="" が選択されました></option>
<オプション値=""></オプション>
</選択>

（3）ハイパーリンクをクリックしてJSにジャンプします：<a class="" href="#" id="" onclick="location.href=''"></a>
空のハイパーリンク（クリックするとページの先頭に移動します）: <a href="#"></a>
空のハイパーリンク（クリックなし）: <a href="javascript:void(0);"></a>

画像のハイパーリンク: <a href=""><img width="" height="" src=""></a>

（4）画像通常画像：<img src="" >

画像の幅と高さを設定します（比例して縮小されますが、ファイルサイズは変わりません）：<img width="" height="" src="">

（５）表

コードをコピー

コードは次のとおりです。

<表の境界線="1" セルパディング="10" セル間隔="0">
<tr>
<th width="100px">あ</th>
<th width="200px">B</th>
</tr>
<tr>
<td>あ</td>
<td>ば</td>
</tr>
</テーブル>

（6）リスト

順序なしリスト:

コードをコピー

コードは次のとおりです。

<ul type="disc">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ul>
<ul type="square">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ul>
<ul type="circle">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ul>

順序付きリスト:

コードをコピー

コードは次のとおりです。

<ol type="1">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ol>
<ol type="a">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ol>
<ol type="A">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ol>
<ol type="i">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ol>
<ol type="I">
<li>最初のポイント</li>
<li>2 番目のポイント</li>
</ol>

（7）マルチメディア

字幕表示: <marquee></marquee>

バックグラウンドミュージック: <bgsound></bgsound>

オーディオ、ビデオ、フラッシュ、mpeg など: <embed></embed>

（８）行制御

タイトル: <hn></hn>

段落: <p></p>

改行: <br>

水平線: <hr>

5. フレームワーク

コードをコピー

コードは次のとおりです。

<フレームセット行="50% 50%">
<農場 src="">
<農場 src="">
</フレームセット>

<<: CocosCreator Typescriptでテトリスゲームを作る

>>: Web デザインにおける Less と More について語る (写真)