マインドマップギャラリー HTMLの基本タグ
基本的な HTML タグのマインド マップには、HTML メディア要素、HTML ページ内のブロックと行、Web ページ上の基本タグのセマンティクス、イメージ タグ、Web ページ編集ツールなどが含まれます。
2023-03-02 14:21:36 に編集されましたHTMLの基本タグ
Webページの構成
HTML部分 (<html>コンテンツ</html>)
JS部分 (<script>特殊効果</script>)
CSS部分 (<スタイル>スタイル</スタイル>)
基本構造
<! DOCTYPE html> ステートメント
<title>ウェブページのタイトル</title>
HTMLウェブページ
<head>ヘッド部分
<body>本体
<body>Web ページのコンテンツ(テキスト、画像など)</body>
Webページ編集ツール
ノート
ドリームウィーバー
メモ帳++
Hビルダー
VScodr
Webページの基本情報
文字化けの解決策
headセクションに<meta>タグを追加
<meta charset="gb2312">
簡体字中国語: gb2312
繁体字中国語:big5
純粋な英語の Web ページ: iso-8859-1
国際標準に準拠: UTF-8
ページの背景色または背景画像
bgcolor="#FFCCFF""
Web ページの背景色
背景="back_image.GIF""
Web ページの背景画像
Web ページ上の基本タグの意味化
タイトル
<h1>
段落
<p>...</p>
写真
<画像>
改行
<br>
水平線
<時間>
<hr size="5">線の太さの値
color="red" 線の色
width="300" />線幅
タイトルタグ
<h1>レベル 1 タイトル</h1> <h2>レベル 2 のタイトル</h2> <h3>レベル 3 の称号</h3> <h4>第 4 レベルの見出し</h4 <h5>5 レベルの見出し</h5> <h6>6 レベルの見出し</h6>
<h1> が最大で、次に <h2> などが続きます。
<h1> タグと <h2> タグを使用する場合は、キーワードを含めることを推奨します。また、出現するのは 1 回のみであることが推奨されます。 <h3>、<h4>、<h5> タグは SEO 効果がほとんどないため、むやみに使用しないことをお勧めします。
画像タグ
*.jpg
*.gif
*.png
*.bmp
画像の基本的な文法
<img src="イメージタグ"
画像の場所
幅="300"
画像の幅
高さ = "150"
画像の高さ
alt="有名人のコンサートのオープニング">
画像に追加された指示テキスト、マウス 画像を移動して情報テキストを表示します
リストタグ
順序なしリストタイプの属性セットの箇条書き
箇条書き: 円盤 (デフォルト)、四角形、円形
<ul>タグで実装
<li> タグを使用してリスト項目を表現します
Ordered list-type 属性は項目の順序を設定します
プロジェクトの順序: 1 (デフォルト)、A、a、I、i
<ol>タグで実装
<li> タグを使用してリスト項目を表現します
クラステーブルを定義 - 箇条書きと表示順序なし
箇条書きと表示順序なし
<dlタグ>で実装
<dt>タグでリスト項目を定義する
<dd>タグでコンテンツを定義する
フォーマット済みのテキストラベル
タグ:<pre>…</pre>
例:<前>…… </pre>
ハイパーリンク
<a>タグ
<a href="パス"
リンクパス
target="ターゲットウィンドウ位置">"
説明: リンクが開くウィンドウ
テキストまたは画像をリンク</a>
注: スタンドアロン後は該当ページにジャンプします
一般的な値: _self、_blank
他のページへのリンク
相対パス: 現在のファイルを基準としたファイルの場所を指定します。
例: 同じディレクトリ (C:\HTML) 内のページにリンクするには、<a href="doc1.html> と記述します。
絶対パス: ルートディレクトリからファイルまでの完全なパスを指定します。
例: 同じディレクトリ (C:\HTML) 内のページにリンクするには、<a href="c:\html\doc2.html> と記述します。
このページへのリンク
アンカー タグ: ユーザーがドキュメントの特定の部分に「ジャンプ」できるようにするために使用されます。
アンカー タグを定義します:<a name="helpme">男性を導く道を歩む新人</a> アンカー タグの場所へのリンク: <a href="#helpme">[Newcomer on the Road]</a>
注: ページの長さが十分でない場合、アンカー リンクはジャンプしません。 現時点では、ページコンテンツを追加してページを長くするだけです。
HTML ページ内のブロックと行
行レベルのラベル
特徴: 他の要素と同じ行に保持できる、自動的に折り返せない、幅と高さを設定できない
一般的な行レベルのタグ: a、span、strong、u (下線)、em (強調)、i (斜体)、sub (下付き文字)、sup (上付き文字)
ブロックレベルのタグ
特徴: 他の要素と同じ行に置くことはできません (1 行を占有)、自動的に折り返すことができ、幅と高さを設定できます
一般的な行レベルのタグ: div、p、h1-h6、ul、li、dl (定義リスト、ul...li に似ています)、 dt (定義リスト内の項目を定義)、dd (dt と一致する項目の内容を定義)
レイアウトで一般的に使用されるブロックレベルのタグ
セクションタグ <div>
<div> タグは、<p> などのタグに埋め込み、通常のブロック要素として使用できます。
テーブル:<テーブル> 行: <tr>…</tr> 列 (セル):<td>…</td>
フォーム:<から> … </から>
インラインブロックレベルのタグ
特徴: 他の要素と同じ行に配置でき、幅と高さを設定することもできます
共通タグ: textarea、input、img、button
HTMLメディア要素
ビデオ要素:<ビデオ>…</ビデオ>
例:<ビデオ src="ビデオ パス"
説明: 再生するビデオファイルのパスを指定します。
コントロール></ビデオ>
説明: 再生、一時停止、音量のコントロールを提供します。
videoタグの共通属性
1.autoplay が表示され、準備が整うとすぐにビデオが再生されます。
2. コントロールが表示されると、再生ボタンなどのコントロールがユーザーに表示されます。
3.loop が表示され、メディア ファイルの再生が完了したら、再度再生を開始します。
4.「ミュート」と表示され、ビデオの音声がミュートされます。
5.src 再生する動画のURL
オーディオ要素:<audio>…</audio>
<audio src="オーディオ要素"
説明: 再生するオーディオファイルのパスを指定します。
コントロール></オーディオ>
説明: 再生、一時停止、音量のコントロールを提供します。
自動再生属性:自動再生
<ビデオの自動再生> … … </ビデオ>
ソースタグの共通属性
1.srcはメディアファイルのURLを指定します 2.type はリソースのメディア タイプを指定します。
説明: 1. 複数のソース タグを記述し、さまざまなブラウザ デコード サポートと互換性のあるタイプを指定できます。ただし、src は 1 つしか書き込めません 2.sourceタグのtype属性の属性値には、video/ogg、video/mp4、video/webmが含まれます