ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLウェブページの作り方
HTMLウェブページの作り方
- 王林オリジナル
- 2023-05-27 11:41:374240ブラウズ
1. HTML とは?
HTML (Hyper Text Markup Language)、つまりハイパーテキスト マークアップ言語です。簡単に言うと、Webページ制作の基本となる言語です。 Web ページをマークアップによって記述するマークアップ言語であり、各 Web ページは複数の Web ページ要素 (テキスト、画像、ビデオ、オーディオなど) で構成されます。 HTML の主な機能は、ユーザーが入力したテキスト、画像、オーディオ、ビデオ、その他のコンテンツとフォーマット情報を整理して Web ページ ドキュメントを形成することです。Web ページ ドキュメントはブラウザーによって解析およびレンダリングされ、最終的にユーザーに表示されます。
2. HTML タグ
HTML タグは HTML の中核概念です。これらは山かっこで囲まれたコマンドで、ブラウザにテキストの表示方法を指示します。 HTML タグには、開始タグ (例: 93f0f5c25f18dab9d176bd4f6de5d30e)、終了タグ (例: 9c3bca370b5104690d9ef395f2c5f8d1)、または単一のタグ (例: ddd55ce8aef52a977047c270ea353de5 と終了タグ # 内になければなりません。 ##< ;/tag> は閉じられています。単一タグの場合は、自己終了タグ cd02bdb502a3e8db9c0fb45c5fc9dac3 を使用できます。
タグはルート タグで、HTML ドキュメント全体の始まりを示します。 100db36a723c770d327fc0aef2ce13b1 タグは、すべての HTML 要素に含める必要があります。
タグと 6c04bd5ca3fcae76e30b72ad730ca86d タグが含まれている必要があります。 93f0f5c25f18dab9d176bd4f6de5d30eタグには、ドキュメントのタイトル、キーワードなどのドキュメントのメタデータが含まれます。 6c04bd5ca3fcae76e30b72ad730ca86d タグには、テキストや画像などの表示可能なページ コンテンツが含まれます。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>标题 1</h1>
<p>这是一个段落。</p>
</body>
</html>3. CSSCSS (Cascading Style Sheets) は、Web ページのスタイルとレイアウトの言語。美しい Web ページを作成するために HTML とともに使用されます。 CSS は、フォント、色、背景、境界線、レイアウトなどの Web ページ表示の要素を制御します。 CSS スタイルを HTML に埋め込むには、内部スタイルと外部スタイルの 2 つの方法があります。 内部スタイルは、ページ コードの 93f0f5c25f18dab9d176bd4f6de5d30e タグに CSS コード スタイルを追加します。例:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<style>
h1 {
color: blue;
font-family: Arial;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<p>这是一个段落。</p>
</body>
</html>外部スタイル シートは、スタイル ルールを追加します。例: スタイル ファイル style.css 内: h1 {
color: blue;
font-family: Arial;
}外部スタイルを HTML ページに追加: <!DOCTYPE html>
<html>
<head>
<title>标题</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>标题 1</h1>
<p>这是一个段落。</p>
</body>
</html> 4. JavaScriptJavaScript HTML コンテンツを制御し、Web ページをインタラクティブで動的にするために使用されるスクリプト言語です。フォームの検証、画像の切り替え、ページの動的更新など、ユーザーとの対話に使用できます。 JavaScript を HTML ページに埋め込むには、内部スクリプトと外部スクリプトの 2 つの方法があります。 内部スクリプトは、ページ コードの 93f0f5c25f18dab9d176bd4f6de5d30e または 6c04bd5ca3fcae76e30b72ad730ca86d に JavaScript コードを追加します。例:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script>
function sayHello() {
alert("Hello!");
}
</script>
</head>
<body>
<button onclick="sayHello()">点击这里</button>
</body>
</html>外部スクリプト 外部ファイルにスクリプト コードを追加します。例: スクリプト ファイル script.js 内: function sayHello() {
alert("Hello!");
} 外部スクリプトを HTML ページに追加します:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="sayHello()">点击这里</button>
</body>
</html> 5. HTML ページの作成簡単な HTML ページを作成する手順は次のとおりです。
- メモ帳や Sublime Text などのテキスト エディターを開きます。
- 新しいテキスト ファイルを作成し、
- .html
ファイル形式で保存します。ドキュメント タイプ宣言、HTML 要素タグ、コンテンツを含む HTML コードを作成します。 - CSS スタイルを追加して、Web ページの外観とスタイルを制御します。
- JavaScript スクリプトを追加して、Web ページの対話性とダイナミクスを制御します。
- ブラウザで HTML ファイルを開いて、ページをプレビューしてテストします。
<!DOCTYPE html>
<html>
<head>
<title>我的HTML页面</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial;
}
h1 {
color: #009900;
font-size: 36px;
text-align: center;
margin-top: 50px;
}
</style>
<script>
function sayHello() {
alert("Hello!");
}
</script>
</head>
<body>
<h1>欢迎访问我的HTML页面</h1>
<button onclick="sayHello()">点击这里</button>
</body>
</html>6. 概要HTML は Web ページの基本言語です。 Web コンテンツを説明および提示するために使用します。 CSS と JavaScript は、Web ページの外観と対話性を強化し、Web ページをより魅力的なものにします。 HTML ページを作成するには、HTML タグの規則に従い、スタイルとスクリプトを追加し、最後にブラウザでテストする必要があります。 HTML、CSS、JavaScript を学ぶことで、フロントエンド開発の基本的な知識を獲得し、Web デザインと開発の強固な基盤を築くことができます。 以上がHTMLウェブページの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。