HTML文書の基本構造(Webページ作成の基礎知識)

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理:

1. ローカル操作: ブラウザでhtmlファイルを開く

2. リモートアクセス操作: ローカルブラウザがリモートサーバー(tomcal)にアクセス

ウェブページ ファイルは将来サーバーに保存されるため、ウェブページ ファイル名に中国語の文字を含めないことをお勧めします。HTML ファイルを保存する場合は英語を使用することをお勧めします。.htm または .html のファイル サフィックスを使用できます。

2. HTML文書の基本構造

1. ドキュメントの骨組み: すべてのウェブページファイルは通常、ドキュメントの骨組みを形成する次の4つのタグのペアで構成されています。


コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<title>ウェブページのタイトル</title>
</head></p> <p><body>
ウェブページに表示されるコンテンツを配置する場所です
</本文>
</html>

<html>....</html>: Web ページの開始と終了を示します。すべての HTML 要素はこれらのタグの間に配置する必要があります。
<head>....</head>: タイトル、検索エンジンのキーワードなど、Webページファイルのヘッダー情報を識別します。内部のコンテンツが最初に読み込まれます。
<title>....</title>: Webページファイルのタイトルを識別します
<body>....</body>: ウェブページファイルの本体、つまりページの表示コンテンツを識別します。

2. メタタグ

メタタグは、ファイル情報の定義や検索エンジンによる検索を容易にするためのWebページの説明に使用されます。<head> <head/>の間に配置する必要があります。

キーワードを設定: (検索エンジン用の短いキーワード)
<meta name="keywords" content="value"/> value は設定するキーワードを示します。複数のキーワードは "," で区切られ、説明が設定されます: (キーワードを拡張したり、Web ページのコンテンツの概要を示すために使用されます)
<meta name="description" content="value"/> 値は設定する説明を示します。複数の説明は、作成者を設定するために , で区切られます。
<mate name="author" content="著者名" />著者名は通常、会社名です。Web ページのコードを設定します。
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
一定の時間にページをジャンプするように設定します。
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" /> (content="2;url=http://www.baidu.com" 2 は、一定秒数後にウェブページが URL で指定された宛先にジャンプすることを示します)

Web ページのバージョンを説明します。
<meta name="改訂" content="html4.01">
その他の Web ページ情報を設定できます:
<meta name="others" content="これは私の最初のウェブサイトです。ウェブサイトの主なコンテンツは、アニメーション、音楽、記事、ブログなどです。皆様の訪問を歓迎します!">

Web ページがどのソフトウェアを使用して作成されたかを説明します。
<meta name="ジェネレータ" content="メモ帳">


コードをコピー
コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="keywords" content="Web デザイン、Web ページの学習" />
<meta name="description" content="Web デザインの学習方法、Web デザインの学習方法、HTML 中国語マニュアル" />
<meta name="author" content="123WORDPRESS.COM" />
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" />
<meta name="改訂" content="html4.01">
<title>HTML ドキュメントの基本構造_meta タグ</title>
</head>
<本文>
メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページを説明するために使用されます。
</本文>
</html>

3. 頭部

コードをコピー
コードは次のとおりです。

<ヘッド>
<title>Web ページのタイトル</title>ファイル タイトルの宣言<mate>ドキュメントのキーワード、説明、文字セット設定などのドキュメント情報。
<base> ハイパーリンク URL ベース参照ポイント
JavaScript および VBScript プログラム
スタイルシートを使用してレイアウト宣言を設定できます
<link> は CSS レイアウトサンプルなどの外部ファイルを参照できます。
</head>

3. HTMLタグの構文

HTML の最も基本的な構文は <tag>content</tag> です。タグは通常、開始タグと終了タグのペアで使用されます。終了タグのない単一のタグもあります (例: <hr/>)。

HTML タグの種類: 単一タグと二重タグ二重タグ:
属性付き: <tag name attribute="属性値">...</tag name> 例: <font size="3">.....</font>
属性なし: <タグ名>...</タグ名> 例: <タイトル>.....</タイトル>

単一マーカー:
属性付き: <タグ名属性="属性値"> 例: <hr width="200"/> (デフォルトは中央揃え)
属性なし: <タグ名> 例: <br />


コードをコピー
コードは次のとおりです。

<!-- 属性付き: <tag name attribute="属性値">...</tag name> 例: <font size="3">.....</font>-->
<font size="4" color="#33FF00">2. 体育の先生はこう言いました: 私の授業にスカートをはいて来る者は、逆さまに立たせる罰を与えます! </font> </p> <p><!-- 属性なし: <tag name>...</tag name> 例: <title>.....</title>--></p> <p><!-- 属性あり: <tag name attribute="attribute value"> 例: <hr width="200"/> (デフォルトは中央揃え)-->
<hr width="200"/></p> <p><!--属性なし: <タグ名> 例:
改行を示しますが、段落区切りではありません--></p> <p>3. 私の心の中で暮らして、家賃を払っていますか?
4. 君のせいで私は面目を失った。だから、ステージに戻るチャンスすら与えない。

<<:  CSSテーマを簡単に切り替える方法の詳細な説明

>>:  layui をベースにしたログインページの実装

推薦する

Nginx の高同時実行最適化の実践

1. チューニングの必要性​ 私は、どのように書けばいいのか本当に分からないので、共有するために最適...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

W3C チュートリアル (4): W3C XHTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

img 画像タグに alt 属性を付与する必要がありますか?

img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...

JavaScript は div マウス ドラッグ効果を実装します

この記事では、divマウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考まで...

Linux ifconfig コマンドの使用

1. コマンドの紹介ifconfig (ネットワーク インターフェイスを構成する) コマンドは、ネッ...

hrefパラメータ転送における中国語の文字化けについて

パラメータを渡すために href が必要で、パラメータが中国語の場合、文字化けした文字が表示されます...

Vue の関連ページへのマルチレベルジャンプ (ページドリルダウン) 機能の完全な例

背景プロジェクト開発プロセスでは、前のページから次のページにジャンプする必要に迫られることがよくあり...

MySQL ステートメントを使用した簡単な追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL ステートメントを使用して、単純な追加、削除、変更、およびクエ...

ウェブデザインのためのロイヤルブルーのカラーマッチング入門

古典的な色の組み合わせは力と権威を伝え、強いロイヤルブルーはあらゆる古典的な色の組み合わせの中心的な...

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

MySQLの実行プロセスとシーケンスについての簡単な説明

目次1:mysql実行プロセス1.1: コネクタ1.2: キャッシュ1.3: アナライザー1.4: ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...