HTML

記事ディレクトリ

HTML

画像タグ

引用画像

最初のケース: インターネット画像。インターネット画像アドレスを直接使用します。

<img src="http://img.mobiletrain.org/omlinerjcs.png">

2 番目のケースでは、ローカルディスク上のフォルダー内の画像を参照します。

<img src="C:\hello.png">

ページファイルと画像ファイルは同じレベルにあるため、パスを省略して画像名を直接使用できます。
ページファイルと画像が保存されているフォルダーは同じレベルにあります。最初に画像が保存されているフォルダーの名前を書き込み、次に / を使用してフォルダーに入り、画像ファイルを見つけます。
ページが置かれているフォルダと画像は同階層の関係にあるので、まずページが置かれているフォルダの上位に戻り、.../

イメージタグ属性

alt="前峰教育" 画像の読み込みに失敗した場合に表示されます
タイトル属性:
- 定義されたコンテンツはページスペースを占有しません
- デフォルトでは非表示で、マウスを引いたときにのみ表示されます

ハイパーリンク

href の値はターゲットページのアドレスであり、画像の src 属性と同様であり、タグペアの内容はページに表示されるコンテンツです。

<a href="目标页面地址" target="_self">显示在页面中的文本</a>

target="self" はリンクのターゲットが現在のウィンドウで開かれていることを示し、_blank は空白のページで開かれていることを示します。

文字装飾

<b>加粗的文本<b>

<strong>加粗的文本</strong>

b タグはテキストを太字にするためだけに使用され、strong タグはよりセマンティックであり、テキストがより重要であることを示します。
<i>倾斜的文本</i>

<em>倾斜的文本<em>
<s>删除线文本</s>HTML5はサポートしていません

<del>删除线文本</del>
<u>下划线文本</u>
<sup>上角标文本</sup>

<sub>下角标文本</sub>

シート

ベース

<table>
    <tr>
        <td></td>
        <th>加粗的文本</th>
    </tr>
</table>

tr は行を表し、td はセルを表し、通常のテーブルの各 tr の td の数は等しい

th タグ内のテキストは太字で中央揃えになります

フォームのプロパティ

border: 線の太さを定義します。<table border="1">
セル間隔: セル間の距離を定義します。
cellpadding: セルの境界線とテキストの間の距離を定義します。

セル間の距離、またはセルとテキスト間の距離を広げたい場合は、2つの間隔の属性値を調整するだけです

テーブル行のプロパティ

整列 (水平整列) <tr align="" valign="">:
- 左: 左揃え
- 中央: 中央揃え
- 右: 右に揃えます
valign (垂直配置):
- 上: 上揃え
- 中央: 中央揃え
- 下: 下揃え
bgcolor: テーブルの背景色を変更します。
bordercolor: テーブルの境界線の色を変更します。

セルのプロパティ

rowspan: 行全体を結合します。

<td rowspan="4"></td>

セルが縦に 4 セル分のスペースを占める必要があることを示します
Colspan: 列全体をマージします

表の見出しと構造的なグループ化

表のタイトルは通常、最初の tr タグの前に配置されます。

<table>
    <caption>标题</caption>
    <tr></tr>
</table>

thead タグには、対応するテーブルヘッダーの tr 行の内容を配置します。tbody タグは、table タグのサブタグでもあり、thead タグと同じレベルです。テーブル内のグループ化されていないすべての tr は、tbody に配置されます。対応するテーブルフッターは tfoot タグに配置されます。最初の tr 行の内容、テーブルでは 1 つの thead と 1 つの tfoot のみが許可されますが、複数の tbody は許可されます

<table>
    <thead></thead>
    <tbody>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

l 列グループ化ラベルは、colgroup です。列グループ化は、テーブル内のセルの列全体の色を定義するためによく使用されます。これは、1 つのグループに分割される列の数を意味します。複数のグループを分割する必要がある場合は、次を使用する必要があります。複数のコルグループ

<colgroup span="3"></colgroup>

色の値と長さの単位

カラー値を表す方法:

色の名前: 色の値を定義するために色の英語の単語を使用します。
- 140 の標準英語名を使用する必要がある
- 漢字は色の値として使用できません
16 進値: #RRGGBB の形式を使用して色の値を定義することを指します。

RR (赤) GG (緑) BB (青) 00 ～ FF の色の強度

例：#0000FFは青色で表示されます
- #捨てないでね
- すべて小文字
- すべてのブラウザをサポート
RGB 値: カラー値 (0 ～ 255 の整数) を定義するための RGB (赤、緑、青) の使用を指します。
- 大文字と小文字を区別しません
- 括弧やカンマ内の数字の前後にはスペースを入れることができます
- すべてのブラウザをサポート

長さの単位:

絶対長さの単位: 固定。これらの単位で表された長さが設定サイズとして表示されます。

ピクセル(ピクセル)
相対単位長: 長さを基準にして計算された長さを指し、通常、さまざまなデバイスに適応するために使用されます。

割合(%)

ブロックレベル要素とインライン要素

HTML要素 - 表示値 - ブロックブロック/インライン

ブロックレベルの要素:

ブロック要素: div (タグにはブロックのコンテンツが含まれます)
見出し要素 h1 ～ h6
段落要素<p>
リスト要素<ol> <ul> <li> <dl> <dt> <dd>
フォーム要素<table> <tr> <td> <th> <thead> <tfoot> <caption>

インライン要素:

リンク要素:<p>
テキスト修飾子要素:<b><em><i><strong><sub><sup>
ラップ要素:<br>
画像要素:<img>
範囲要素:<span>

形状

<form></form>

テキストボックスとパスワードボックス

単一行のテキストボックス:

<input type="">

type="text" または type="password" パスワードボックス、デフォルトのテキスト 1 行の通常のテキストボックス

複数行のテキストボックス

ユーザーが複数行のテキストを入力できるようにします。テキストは右の境界線に達すると自動的に折り返され、テキストが下の境界線を超えるとスクロールバーが生成されます。マウスをスクロールして完全な情報を表示できます。

<textarea cols></textarea>

表示領域の幅と高さを設定できます。Cols は、テキスト領域の表示幅を指定するために使用されます。

値ボタンのタイプ

単一選択と複数選択

inpt タグの type 属性値を設定します。ラジオは単一の選択肢を意味し、チェックボックスは複数の選択肢を意味します

ラジオボタンコントロールは意味をなすためにグループで使用する必要があり、各グループには少なくとも 2 つのラジオボタンが必要です
グループは name 属性によって確立され、同じ name 値を持つグループがグループになります。
同じグループ内のラジオボタンでは、1 つだけが選択され、残りは自動的に選択されていないものとして表示されます。

ラジオボタンのチェックボックスはデフォルトで選択されており、それを実現するためにchecked属性が定義されています。空でない限り、どの文字でも問題ありません。通常はチェックされています。

ドロップダウンメニュー

<select multiple size=“2>
    <option selected></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

selected はデフォルトで選択されたオプションです。multiple はドロップダウンメニューで複数の値を選択できるようにします。size 属性はコントロールの表示行のデフォルト数を定義できます。

ドキュメントを選択してください

<input type="file">

フォームラベル

<form>
    <label for="username"></label>
    <input type="text" id=“username>
    <br>
    您的手机号:<input type="text" value="155****0000" readonly>
    <input type="radio" disabled>
</form>

ラベルは、画面上のクリックしにくい領域をクリックするのに役立ちます。ラベルに関連付けられたフォームコントロールを定義するために使用されます。

readonly 読み取り専用コントロール無効無効: 無効のフォームコントロール値は収集されず、バックエンドに送信されず、選択できません。

フォームのグループ化

枠線とタイトルのあるフォーム:

<fieldset>
    <legend>标题</legend>
</fieldset>

境界線の機能は、関連するフィールドをブロックに視覚的に分割することです。グループラベルに他のコントロールを追加するには、凡例ラベルの後ろに配置する必要があります。

フォームボタン

value=" " ボタンに名前を付けます

送信ボタン：クリックすると送信情報を確認し、同時にフォームデータをバックグラウンド機能に送信します。

<input type="submit">

ボタンをクリックすると:
- ページが更新されます。データがバックグラウンドサーバーに送信され、バックグラウンドサーバーがデータをデータベースに保存します。サーバーは、Web ページのフォームにアクセスアドレスを提供します。
  
  <form action="">
  
  値はサーバーアドレスです
- 入力ボックスの内容が消える
  
  予約することもできます: フォームのターゲット属性を定義します (_blank または __self にすることができます)
- ブラウザのアドレスバーに疑問符が表示されます
リセットボタン：入力ボックスの内容をクリアします。

<input type="reset">
通常ボタン：<input type="button">
画像ボタン: 送信ボタンの外観を画像に置き換えます。

<input type="image" src="">

ダブルラベルボタンボタン:<button></button>

type="button"を追加すると通常のボタンとなり、フォーム送信機能はなくなります

フォームデータの収集とフォームの送信

入力ボックスの name 属性を定義します。name の値は、ユーザーが入力したコンテンツを保存し、アドレスバーに表示するのに役立ちます。フォームのaction属性にサーバーアドレスを入力し、サーバーにデータを送信します。

データに機密情報が含まれている場合は、アドレスバーに表示しないでください。解決策は、form タグでメソッド属性 (get 値と post 値を含む) を定義することです。

get はデフォルト値であり、ブラウザは収集されたフォームデータをサーバーアドレスに追加してサーバーに送信します。
post 値はフォームデータを収集できるだけでなく、アドレスバーのプライベートデータを公開することもできません。

その他の便利なラベル

<hr>水平線を示し、Web ページ上に水平の分割線を引く機能を持ちます。

<hr width="" size="" noshade="" color="" align="">

width/size: 水平線の幅と高さをそれぞれ制御します。水平線のデフォルトの幅は画面全体にわたるため、2px になります。
noshade: 水平線の影を削除するために使用されます。
color: 水平線の色を定義するために使用されます。
align: 水平線の水平方向の配置を調整するために使用されます。デフォルトは水平方向の中央揃えです。

<pre>二重タグは事前にフォーマットされたテキストを表し、テキストは HTML ソースコードとまったく同じように表示されます。

<map>二重タグを使用してイメージマップを定義し、画像のさまざまな領域をクリックしてリンクされたページにジャンプします。

<map name="">
  <area href="" shape="" coords="">
</map>

name は img タグの usemap 属性に関連付けられており、

エリアシングルラベルは画像上のホットスポットエリアを定義し、ホットスポットエリアの位置、サイズ、形状はエリアラベルを通じて設定できます。

href 属性は、ホットスポット領域内のリンクのターゲットアドレスを定義するために使用されます。
形状は領域の形状を定義するために使用されます。デフォルト: すべての領域rect: 長方形 Circle: 円 Poly: 多角形
coords 属性は、クリック可能な領域の座標を定義するために使用されます。

iframe

ダブルタブは、1 つの Web ページ内に別の Web ページを表示するために使用されます。

<iframe src="页面路径" width="数字" height="数字" frameborder="0" scrolling="yes"></iframe>

src: 他の Web サイトのページを紹介するために使用されます
width: インポートされたページの幅を制御するために使用されます。
高さ: インポートされたページの高さを制御するために使用されます。
Frameborder: インポートされたページにはデフォルトで境界線が付いています。通常、この属性の値は境界線をキャンセルするために 0 に設定されます。
スクロール: フレームのスクロールバーを表示するかどうかを制御するために使用されます。

yes: スクロールバーは常に表示されます no: スクロールバーは決して表示されません auto: スクロールバーは必要なときに表示されます

リンク先のアドレスはインターネットのWebサイトアドレスでも、自分で作成したローカルページのアドレスでもよく、これらのページをiframe内に表示することができます。

<a href="http://www.baidu.com" target="iframe_a">百度</a>
<iframe name="iframe_a"></iframe>

SVG

SVG は、XML 構文に基づく画像形式、つまりスケーラブルなベクターグラフィックスです。ファイル自体は小さなサイズのテキストファイルなので、何度拡大しても崩れません。SVG 画像は HTML 経由で描画できます。<svg>タグは SVG 画像のコンテナです。

<svg width="" height="">...</svg>

このうち、幅と高さはそれぞれキャンバスの幅と高さを指します。

SVG の事前定義された形状要素

長方形を描く

<rect width="" height="" fill="" />

width: 長方形の幅を定義します。
高さ: 長方形の高さを定義します。
fill: 長方形の塗りつぶしの色を定義します。
ストローク幅: 長方形の境界線の幅を定義します
ストローク: 長方形の境界線の色を定義します。
fill-opacity: 塗りつぶしの色の不透明度を定義します。有効な値の範囲は 0 から 1 で、透明度の値が小さいほど、透明度が高くなります。
ストローク不透明度: ストロークの色の不透明度を定義します。有効な値の範囲は 0 ～ 1 です。
不透明度: 要素全体の不透明度 (0 ～ 1 の範囲)

角丸長方形を描く

<rect rx="" ry=""/>

2 つの値が等しい場合、それは丸い角であり、2 つの値が等しくない場合、それは楕円形の角です。

円を描く

<circle cx="" cy="" r="" stroke="" stroke-width="" fill="" />

cx: 円の中心の x 座標を定義します。
cy: 円の中心の y 座標を定義します
r: 円の半径を定義します

楕円形を描く

<ellipse cx="" cy="" rx="" ry=""/>

cx: 楕円の中心の x 座標を定義します。
cy: 楕円の中心の y 座標を定義します。
rx: 水平半径を定義します
ry: 垂直半径を定義します

線を描く

<line x1="" y1="" x2="" y2=""/>

2 点の座標を結ぶことによって形成されます。座標原点はキャンバスの左上隅です。

多角形を描く

<polygon points="220,20 250,190 160,210"/>

ポイント: 各ポイントの座標をスペースで区切って定義します。

複数の線を描く

<polyline points="20,20 40,25 60,40 80,120 120,140"/>

パスを描く

パスを適用すると、任意の形状のグラフィックスを描画できます。

<path d="M150 0 l75 200"/>

d: 描画パスを定義するために使用されるコマンド。好き：
- M コマンド (moveto): d="M150 0" は点 (150,0) から描画を開始することを意味します
- L コマンド (lineto): 直線を描くために使用します。つまり、最後の終点から x75、y200 まで直線を描きます。
- q コマンド: 2 次ベジェ曲線を描画するために使用されます。q 150 -300 300 0 は、制御点の座標が (150, -300)、終点の座標が (300,0) であることを意味します。

Gラベル

SVG では、g タグを使用して複数の描画要素をラップすることができ、g タグでパブリック属性を定義できます。

<g>
   <path />
   <circle />
   <text> </text>
</g>

SVG ストローク属性

<path stroke /> //笔画属性
<path stroke-width />  //笔画宽度属性
<path stroke-linecap />  //笔画笔帽属性
<path stroke-dasharray />  //虚线笔画属性

ぼかしと影の効果

フィルターフィルター

<defs>
  <filter id>
      <feGaussianBlur stdDeviation="" />
  </filter>
</defs>

feGaussianBlur は、stdDeviation 属性を通じてブラーの量を定義します。値は数値です。値が大きいほど、ブラーの量が高くなります。

<filter>
   <feOffset dx="" dy="" in="" />
    <feBlend in="SourceGraphic"/>
</filter>

dx、dy は、x 軸と y 軸上の影のオフセットを表します。
in は影画像のソースを示します: 黒 SourceAlpha 元の画像 SourceGraphic

feBlend は、元のイメージの上に影のイメージをブレンドします。

線形グラデーションと放射状グラデーション

線形勾配

<defs>
   <linearGradient x1="" y1="" x2="" y2="">
      <stop offset="10%" stop-color="" />
   </linearGradient>
</defs>

y1=y2 x1≠x2 水平勾配

x1=x2 y1≠y2 垂直勾配

x1≠x2 y1≠y2 角度勾配

線形グラデーションのカラー範囲は 2 つ以上のカラーで構成できます。ストップカラーはカラーを定義します。オフセット属性はグラデーションカラーの開始位置と終了位置を定義するために使用されます。ストップカラーはグラデーションカラーを定義します。

放射状グラデーション

<defs>
   <radialGradient id="" cx="" cy="" r="" fx="" fy="" >
       <stop offset="10%" stop-color="" />
   </radialGradient>
</defs>

id 属性はグラデーションの一意の名前を定義し、cx、cy、r は最も外側の円を定義し、fx、fy は最も内側の円を定義します。

Web フロントエンド開発を始めるための HTML のフルバージョン