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 を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル

推薦する

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

Linux の MariaDB データベースについて

目次Linux の MariaDB データベースについて1. データベースとは何ですか? 2. デー...

Vueタブとキャッシュページを切り替えるいくつかの方法

目次1. 切り替え方法2. タブを動的に生成する3. キャッシュコンポーネント3.1 キープアライブ...

Vue 3 で Vue Router リンクを拡張する方法

序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...

jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...

HTML 左、中央、右の適応レイアウト (calc css 式を使用)

最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...

HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。

ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

JavaScript をスリープまたは待機させる方法

目次概要setTimeout() の確認スリープ関数の書き方シンプルな選択ループで実行されますか?要...

自分のブログを構築しながら学んだこと

<br />ブログを始めて 1 年、私はブログの内外で多くのことを個人的に学びました。ま...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

Vueはシンプルな虫眼鏡効果を実装します

この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

win10でのmysql5.7.21解凍バージョンのインストールチュートリアル

次のように、Win10でMysqlの解凍バージョンをインストールします。環境: win10 64ビッ...