HTMLタグと基本要素の学習のまとめ

HTMLタグと基本要素の学習のまとめ

1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって定義される包含範囲です。タグは、左と右に小なり記号 (<) と大なり記号 (>) が付いた文字列です。開始タグは、スラッシュ (/) で始まらず、許可された属性と値のペアのシーケンスを含むタグです。終了タグはスラッシュ (/) で始まります。のように：
<body><!—開始タグ-->
<font color=”read”>接続</font> <!—color=”read” は属性と値のペアです。 「つながり」はコンテンツです -->
</body><!—終了タグ-->

2. HTML 要素の 4 つの形式<br />空要素<br>
属性 <hr color="blue"> を持つ空の要素
コンテンツ <title>Connection</title> を持つ要素
コンテンツと属性を持つ要素 <font color=”read”>Link</font>
要約すると、これらの例は

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

<html>//開始シンボル。ブラウザがなくても解析できる
<head> // ドキュメントヘッダーの開始
<タイトル>
私の名前は cauthy です! // ドキュメントのタイトルの開始
</title>//文書タイトルの終了
</head> //ドキュメントヘッダーの終了
<body color="red">// ドキュメント本体の開始
Hello World! //ブラウザに表示されるコンテンツ
</body>//文書本文の終了
</html> //HTMLドキュメント終了

注意: HTML では、属性とタグは大文字と小文字を区別しません。属性値は二重引用符で囲むことも、囲まないこともできます。

3. 段落制御に関するタグ
<palign="#"> は段落を意味し、機能: 段落を作成します。属性alignはセグメントの配置を示し、leftright justifyのいずれかになります。
<br> は改行を示します 機能: 改行
<hrcolor="””> は水平線を示します。機能: 水平線を挿入します。属性は色を示します。緑色または #ffoooo などの 16 進数を使用できます。

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

<html>
<head><title>静かな夜の思い</title></head>
<本文>
<p align="center">
静かな夜の思い
<hr color="#ffoooo">
<p align="center">
ベッドの前で月明かりが明るく、地面に霜が降りているのかと思いました。

明るい月を見上げながら故郷を想います。
</本文>
</html>//効果図

4. テキスト表示に関するタグ
<center>…</center>: テキストを中央に配置する
<hn align="”>…<hn>: ドキュメントのタイトルを示すために使用されます。n は 1 から 6 までの整数で、1 は最大のタイトルを表します。属性 align はタイトルの配置を表します。center、left、right のいずれかになります。
<fontsize=”n”color=””>…</font>: フォントを設定するために使用します。size はフォント サイズを示します。n は 1 から 7 までの整数で、数字が大きいほど、表示されるフォントが大きくなります。
<b>…</b>: テキストを太字にする
<i>…</i>: テキストを斜体に設定する

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

<html>
<head><title>静かな夜の思い</title></head>
<本文>
<中央>
<h1><fontcolor="red"><b><i>静かな夜の思い</i></b></font></h1>
李白
<hr color="#ffoooo">
<p>
<font color="blue"size=6>
ベッドの前で月明かりが明るく、地面に霜が降りているのかと思いました。

明るい月を見上げながら故郷を想います。 </font>
</center>
</本文>
</html>

5. 特殊文字の入力方法<br />HTML 文書では、改行なしスペース、キャリッジリターン、HTML 予約語、キーボードに存在しない一部の文字などの記号を入力するには、引用符で囲む必要があります。HTML には、文字参照とエンティティ参照の 2 種類の参照があります。
文字参照とエンティティ参照はどちらも & で始まり、セミコロン (;) で終わります。文字参照を使用する場合は、& の後に # を追加し、その後に必要な文字の 10 進コードまたは 16 進コード (ISO 10646 文字セットでの文字のエンコード) を続ける必要があります。エンティティ参照を使用する場合は、& の後に文字のニーモニックを記述します。
HTML では、全角スペースを使用してスペースを入力できます。

6. HTML のコメント
<!--これがコメントの内容です-->

7. クラス リスト - 番号付きリストを作成する<br />番号付きリストを作成するには、<ol> タグと <li> タグを使用します。 type 属性を使用して、番号付けシステムのタイプを指定できます。A (A、B、C)、a (a、b、c)、I (III III)、i (i ii iii)、1 (1、2、3) デフォルトでは、<ol> タグで start 属性を使用して開始番号を設定します。
リスト内の数字の順序を変更するには、<li> タグの value 属性を使用します。
箇条書きリストを作成するには、<ul> タグと <li> タグを使用します。 Ulのtype属性は、disc（実線の円）、square（実線の四角）、circle（白抜きの円）のいずれかになります。
署名されていないリストを作成するには、<dl> タグと <dt> タグを使用し、インデントされたリストを作成するには、<dt> の代わりに <dd> タグを使用します。
用語リストを作成するには、<dl> 要素内で <dt> タグと <dd> タグの両方を使用します。用語リスト内のリスト項目は、用語とその説明の 2 つの部分で構成されます。用語は <dt> タグで指定され、説明は <dd> タグで指定されます。

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

<ol start="10"type="I">
数学
<livalue="20">言語
<li>物理学
</ol>
<ul type="circle">
数学
<li>言語
<li>物理学
</ul>
<ダウンロード>
数学
<dd>言語
<dt>物理的
<dd>化学
</dl>

8. 表<br />表は <table border= n align=”” bgcolor=””>…</table> を使用して作成されます。border は表の幅です。デフォルト値は 0 で、表の幅は表示されません。
<caption>…</caption>: 表のタイトルを定義するために使用されます
<tralign=”” valign=”” >…</br>: align 属性は、この行の水平方向の配置を指定します。leftcenterright を指定できます。valign は、垂直方向の配置を指定します。top、middle、bottom を指定できます。
<th>…</th>: 表のヘッダーに使用します
<td>…</td>: セルを定義するために使用します

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

<html>
<head><title>表</title></head>
<本文>
<table border="5"align="center" bgcolor="青">
<caption>試験結果</caption>
<tr align="center"valign="middle">
<th>言語</th>
<th>数学</th>
<th>英語</th>
</tr>
<tr align="center"valign="middle" >
<td>80</td>
<td>70</td>
<td>60</td>
<tr align="center"valign="middle" >
<td>60</td>
<td>70</td>
<td>80</td>
</テーブル>
</本文>
</html>

9. フォームの作成
<form method="get or post" action="URL">: 属性 method は、サーバーにデータを送信するときに使用する HTTP メソッド (get メソッドまたは post メソッド) を指定します。 Get はデフォルトのメソッドです。get メソッドを使用してフォームを送信すると、送信されたデータは URL (action 属性で指定) の末尾に追加され、URL の一部としてサーバーに送信されます。たとえば、アクションを reg.asp に設定すると、フォームを送信した後、ブラウザーのアドレスに http://localhost:8080/reg.asp?user=zhangsan&pwd=1234 が表示されます。
Post メソッドは、メニュー内の情報をデータ ブロックとしてサーバーに送信します。どのメソッドが使用されるかに関係なく、データのエンコードは同じで、形式は次のとおりです: name1=value1&name2=value2
action 属性は、フォームを処理するスクリプトのアドレスを指定します。つまり、フォームがサーバーに送信された後、誰がそれを処理するのでしょうか。プロセッサの URL は action で指定されます。
<inputtype=””name=””size=””value=””>: type は、作成するコントロールのタイプを指定します。属性名は、コントロールの名前を指定するために使用されます。フォームを処理するサーバー側スクリプトは、名前と値のペアで表されるフォーム データを取得し、名前を使用して対応する値を取得できます。 Name 属性はフォームには表示されず、size 属性はフォーム内のコントロールの初期幅を設定するために使用されます。属性値はコントロールの初期値を指定します。
1行テキスト入力コントロール (type="text") 送信ボタン (type="submit")
リセットボタン (type="rest") パスワード入力コントロール (type="password")
ラジオボタン (type="radio") チェックボックス (type="checkbox") 隠しコントロール (type="hidden")
複数行のテキスト入力を作成します <textarea name=”” rows=””cols=”” >…</textarea>
次の例では、テーブルを使用してフォームを制御します。

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

<html>
<head><title>フォーム</title></head>
<本文>
<フォームメソッド="get" アクション="reg.jsp">
<表の境界線="0">
<tr valign="middle"></tr>
<td>ユーザー名:</td>
<td><inputtype="text" size="20" name="ユーザー"></td>
<tr align="left"valign="middle"></tr>
<td>パスワード:</td>
<td><inputtype="パスワード"></td>
<tr align="left"valign="middle"> </tr>
<td>興味</td>
<td><inputtype="checkbox"name="interest" value="football">サッカー
<input type="checkbox" name="interest" value="basketball">バスケットボール
</td>
<tr align="left"valign="middle"></tr>
<td>性別</td>
<td><inputtype="radio" name="sex"checked value="1">男性
<input type="radio"name="sex" value="0">女性
</td>
</選択></td>
<tr align="left"valign="middle"></tr>
<tdvalign="top">個人プロフィール:</td>
<td><textareaname="personal" rols="5" cols="20">個人プロフィール</textarea>
</td>
<tr align="left"valign="middle"></tr>
<td></td>
<td><inputtype="hidden"value="001" name="id"></td>
<tr align="left"valign="middle"></tr>
<td></td>
<td><inputtype="reset" value="リセット"><inputtype="submit" value="送信"></td>
</テーブル>
</フォーム>
</本文>
</html>

10. ハイパーリンク

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

<a href="URL">…リンクテキスト</a>
<a href="form.html">現在のディレクトリ</a>
<ahref=../”form.html”>現在のディレクトリの上のディレクトリ</a>
<ahref=”E://form.html”>絶対パス</a>
<ahref=”http://www.baidu.com”>ワールド ワイド ウェブ アドレス</a>

11. 画像を埋め込む

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

<画像 src=”URL” 幅=”” 高さ=””>

<<:  Vue ページでよりエレガントに画像を紹介する方法

>>:  HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル

推薦する

MySQLは2つの日付間の日数、月数、年数を計算します

MySQL 組み込みの日付関数 TIMESTAMPDIFF は、2 つの日付間の秒数、分数、時間数、...

MySQLクエリ文の実行プロセスを理解するための記事

序文要件を満たす特定のデータをデータベースから取得する必要があります。Select ABC FROM...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

JavaプログラミングでJavaScriptの超実用的なテーブルプラグインを書く

目次効果ドキュメント最初のステップステップ2ステップ3ソースコード効果ドキュメント最初のステップta...

3 階層ナビゲーション メニューを実現するための js+css

この記事の例では、3レベルのナビゲーションメニューを実装するためのjs + cssの具体的なコードを...

MySQL イベント スケジューラに関するよくある話 (必読)

概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...

Linux のソフトリンクとハードリンクの詳細な説明

目次1. ファイルとディレクトリの基本的な保存2. Inコマンドの紹介（1）lnコマンドの基本情報を...

Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)

この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...

JavaScriptアップロードファイル制限パラメータケースの詳細な説明

プロジェクトシナリオ: 1. アップロードファイルの制限関数： 1. フロントエンド操作による異常な...

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

Nginx がサーバーの生存状態をパッシブにチェックする詳細な説明

導入定期的にヘルスチェックを送信して、アップストリーム グループ内の HTTP サーバーのヘルスを監...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする（最初に） 3. 配列の複製4. 構造化分解割り当て5...