マインドマップギャラリー HTML ノート HTML 検索コードを含む非インターネット アプリケーション
HTML (基本的な非 CSS)。テーブル タグ、リスト タグ、フォーム タグ、一般的な HTML タグなどを含みます。 w3cs の非オンライン検索機能は一番下にあります。
2024-01-21 00:57:23 に編集されましたhtml (基本的な非CSS)
ベース
何から始めればよいでしょうか?
<!DOCTYPE html>
タグ付きHTML
lang Web サイトの言語は何ですか?
形式: <html lang="zh-cn"></html>
英語
中国語
その他例: フランス語
HTMLの共通タグ
タイトル
<h1>~<h6> ダブル
6 つのレベル。1 から 6 まで重要度が減少し、太く、大きくなり、独自の行 h=head を占有します。
段落
<p></p> ダブル
テキストを 2 つの段落に分割する ブラウザのサイズは 1 つの段落の行折り返しに影響します
例: <p>c</p> <p>sp</p> は c (下の 2 行) sp と表示されます。
改行
<br /> シングル
強制改行 br=break
例: <p>c<br />sp</p> は c (次の行) sp と表示されます。
テキスト書式設定タグ
大胆な
<strong>二重の提案
<b> ダブル
傾ける
<em> 二重提案
<i> ダブル
取り消し線
<del> 二重提案
<s> ダブル
下線
<ins> 二重提案
<u>ダブル
ボックスにはコンテンツが含まれており、レイアウトに使用されます
<div> 倍精度浮動小数点
分割する、分割する
各行に配置できる div ラージ ボックスは 1 つだけです
<スパン> double
スパン スパン
複数の項目を 1 行に配置したり、垂直に分割したりできます。
画像のタグとパス
<img /> 単一の画像
画像とHTMLをファイルにまとめます
属性は次のように「オーバーレイ」できます:<img src="画像 URT" alt="画像が表示できない場合にテキストを表示"/>
属性
<img src="imageURT"/>
src は必須の属性であり、イメージへのパスです。
=" "にファイル名を書きます
<img alt="画像が表示できない場合にテキストを表示">
画像が表示できない場合にテキストを表示する
=""の中に文字を書きます
<img title="画像上にマウスを置いたときのプロンプトテキスト">
画像上にマウスを置いたときのプロンプトのテキスト
=""の中に文字を書きます
<img width="500">
画像幅の変更
「」の中に数字を書きます
高さを記述しない場合は比例拡大縮小とみなされます。
<img height="500">
像高変更
「」の中に数字を書きます
widthを書かない場合は比例拡大縮小とみなされます。
<img border="15">
写真の境界線の黒の直角エッジ (システムは CSS を学習するときに調整方法を学習します)
「」の中に数字を書きます
知らせ
イメージ タグには複数の属性を含めることができ、これらの属性はタグ名の後に記述する必要があります。
属性には特別な順序はなく、スペースで区切られています。
キーと値のペアの形式、つまり key="value"、attribute="attribute value" を採用します。
パス
基本知識
ディレクトリフォルダー: HTML ファイルや画像など、ページの作成に必要な素材を保存する通常のフォルダー。
ルート ディレクトリ ディレクトリ フォルダの最初のレベルを開きます
ソフトウェアはディレクトリ フォルダを直接開き、呼び出し元のルート ディレクトリを表示できます。
相対パス
参照先ファイルの場所を参考に作成したディレクトリパス
HTMLページに対する画像の位置
同レベルパス
ファイル名を直接書き込む
次のレベルのパス /
呼び出される次のレベルのフォルダー名/ファイル名
サブトピック
前のレベルのパス ../
../ファイル名
複数レベルのネスト
例: ../../ファイル名
絶対パス
ディレクトリ内の絶対位置。ターゲットの場所に直接接続されます。通常はドライブ文字から始まります。
C:\Users\PC\Desktop\html\filename.gif または完全なネットワーク アドレス https://newsandstory.com/stories/21062184742201828485/21062184742201828485.png
ハイパーリンクタグ
<a href="リンクアドレス" target="ターゲットウィンドウの開き方"> ダブル
href
必須の属性
リンクアドレス
目標
ターゲットウィンドウの開き方
_self デフォルト値
_blank 新しいウィンドウで開きます
リンクの分類
外部リンク
他のページへのリンク
内部リンク
自分のページへのリンク 画像のタグとパスを参照
空のリンク < a href="#"> ホーム </a >
ダウンロードリンク
href のアドレスがファイルまたは圧縮パッケージの場合、ファイルがダウンロードされます。
Web要素のリンク
ハイパーリンクは、テキスト、画像、表、オーディオ、ビデオなど、Web ページ内のさまざまな Web 要素に追加できます。
アンカーリンク
リンクをクリックすると、ページ上の特定の場所にすばやく移動できます。
リンク テキストの href 属性に、<a href="#two"> Episode 2</a> などの #name の形式で属性値を設定します。ターゲットの場所タグを見つけて、id 属性を追加します。先ほどの名前、例:<h3 id="two">エピソード 2 の紹介</h3>
コメント
<!-- --> で始まり、で終わります
ショートカットキー制御 / (Appleコンピュータ制御=ctrl)
特殊文字
一部の記号を直接使用するのが不便な場合は、次の文字に置き換えられます。
テーブルラベル
テーブルの基本構文
<テーブル> double
テーブルラベルを定義する
<tr> ダブル
行ラベルを定義する
<テーブル> の 1 つ下のレベル
<td> ダブル
テーブル内のセルを定義する
<tr>次のレベルで
<番目> ダブル
ヘッダーセルのテキストを太字で中央揃えにする
<tr>次のレベルで
テーブルのプロパティ
表に書き込む
基本的には後からcssで設定します。
整列=""
プロパティ値:
left はテーブルを左揃えにします
center テーブルを中央に揃えます
右はテーブルを右揃えにします
境界線=""
属性値
1 枠線あり
【スペース】枠なし
セルパドリング=""
属性値: ピクセル値
セルの端とその内容の間のスペースを指定します。デフォルトは 1 です。
セル間隔=""
属性値: ピクセル値
セル間のスペースを指定します。デフォルトは 2 です。
幅=""
プロパティ値: ピクセル値またはパーセンテージ
セル幅を指定する
高さ=""
プロパティ値: ピクセル値またはパーセンテージ
セルの高さを指定する
テーブル構造のプロパティ
<頭>
ヘッダー部分
中には <tr> が必要です
<本体>
形の本体
セルの結合 (単純)
<td> で書かれています
行全体を結合する
rowspan="結合されたアイテムの数"
直立
上に書いてある
列全体をマージする
Colspan="結合されたアイテムの数"
横向き
一番左に書いてある
リストタグ
レイアウトに使用される
順序なしリスト
<ul><li></li><ul>
<ul> 内にネストできるのは <li> のみです
<li>中に他のものを入れることもできます
独自のスタイルを持つ (変更を加えるための CSS)
順序付きリスト
<ol><li></li></ol>
<li> のみを <ol> 内にネストできます。
<li>中に他のものを入れることもできます
独自のスタイルを持つ (変更を加えるための CSS)
カスタムリスト
<dl><dt>プロジェクト名</dt><dd>各プロジェクトの説明</dd></dl>
<dl>制限には以下が含まれます:
フォームタグ
情報を収集する
<形式> ダブル
フォームフィールド
プロパティ (後で学習)
アクション="URLアドレス"
メソッド="メソッドを送信"
名前=「名前」
フォームコントロール
要素
<入力> 単一
入力
タイプ = "
name="Custom" 単一選択を実現するための名前と値を定義します。
value="Custom" は、ボックス/ボタンにテキスト情報を直接入力します。クリック クラスにより、入力された内容が背景に認識されます。
ページを開いたとき、デフォルトでは、checked="checked" が選択されます。
maxlength="正の整数" 入力の最大長
<label for="カスタム名"><input id="同じカスタム名"> Double
テキストをクリックすると項目内の入力フォームを選択できます
<選択> ダブル
ドロップダウンフォーム
<オプション>オプションn<オプション>
オプションを定義する
selecteg="selecteg" 現在のオプションに含まれる項目はデフォルト値に設定されます
<テキストエリア> 倍精度
テキストフィールド要素
中にデフォルトのテキストを書き込むことができます
Cols="1 行に数単語を書きます" (覚える必要はありません。CSS 経由で変更します)
rows="数行を書き込みます" (覚える必要はありません。CSS 経由で変更します)
ドキュメントを表示***
百度
http://www.baidu.com
W3C
http://www.w3school.com.cn/
インターネットにアクセスできない場合 (リンクは作成者のコンピュータ パスです。インターネットをお持ちでない教師は、この Baidu ネットワーク ディスクからダウンロードできます: リンク: https://pan.baidu.com/s/1C63iXo-WHEfaX42jnkG7hQ) ?pwd=ws47 抽出コード:ws47 --Baidu Netdisk スーパーメンバー V1 からの共有)
MDN
https://developer.mozilla.org/zh-CH/