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 をベースにしたログインページの実装

推薦する

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

ウェブデザイナー職の面接でよくある質問と回答

1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...

Windows10システムにスーパーセットをインストールする手順

Superset は、エレガントなインターフェースとデータ テーブルに基づく動的なデータ生成を主な機...

きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

6秒でMySQLに100万件のレコードを挿入する方法を教えます

1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...

Vueはアンカー配置機能を実装します

この記事では、アンカー配置を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

フロントエンドブラウザのフォントサイズが12px未満のソリューション

序文最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。...

docker runとstartの違い

docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...

Centos7でのパーティションのフォーマットとマウントの実装

Linux では、ハードディスクの追加やパーティションの再マウントといった状況に頻繁に遭遇します。こ...

ボタンを使用してフォームを送信する代わりに、画像を使用してフォームを送信します。

コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...

JavaScriptの浅いコピーと深いコピーについての簡単な説明

目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...

MySQLの基本操作を詳しく解説(第2部)

序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...

WIN10 での JDK インストールと環境変数の設定手順 (詳細版)

目次1. JDKをダウンロードする(例としてjdk1.8.0を使用する) 2. JDK をインストー...