HTMLタグと基本要素の学習のまとめ
|
1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって定義される包含範囲です。タグは、左と右に小なり記号 (<) と大なり記号 (>) が付いた文字列です。開始タグは、スラッシュ (/) で始まらず、許可された属性と値のペアのシーケンスを含むタグです。終了タグはスラッシュ (/) で始まります。のように： コードをコピー コードは次のとおりです。<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” 幅=”” 高さ=””> |
>>: 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ビッ...