HTMLウェブページの作り方-フロントエンドQ&A-php.cn

HTMLウェブページの作り方

王林

リリース： 2023-05-27 11:41:37

オリジナル

4220 人が閲覧しました

1. HTML とは?

HTML (Hyper Text Markup Language)、つまりハイパーテキストマークアップ言語です。簡単に言うと、Webページ制作の基本となる言語です。 Web ページをマークアップによって記述するマークアップ言語であり、各 Web ページは複数の Web ページ要素 (テキスト、画像、ビデオ、オーディオなど) で構成されます。 HTML の主な機能は、ユーザーが入力したテキスト、画像、オーディオ、ビデオ、その他のコンテンツとフォーマット情報を整理して Web ページドキュメントを形成することです。Web ページドキュメントはブラウザーによって解析およびレンダリングされ、最終的にユーザーに表示されます。

2. HTML タグ

HTML タグは HTML の中核概念です。これらは山かっこで囲まれたコマンドで、ブラウザにテキストの表示方法を指示します。 HTML タグには、開始タグ (例: <head>)、終了タグ (例: </head>)、または単一のタグ (例: <img&gt) が含まれます。 ; )。

HTML を記述するときは、次の規則に従う必要があります。

すべての HTML 要素は、開始タグ <tag> と終了タグ # 内になければなりません。 ##< ;/tag> は閉じられています。単一タグの場合は、自己終了タグ を使用できます。
タグはルートタグで、HTML ドキュメント全体の始まりを示します。 タグは、すべての HTML 要素に含める必要があります。
<head> タグと タグが含まれている必要があります。 <head>タグには、ドキュメントのタイトル、キーワードなどのドキュメントのメタデータが含まれます。 タグには、テキストや画像などの表示可能なページコンテンツが含まれます。
次は HTML テンプレートの例です:
```
<!DOCTYPE html> 
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1>标题 1</h1>
    <p>这是一个段落。</p>
  </body>
</html>
```
ログイン後にコピー
3. CSS
CSS (Cascading Style Sheets) は、Web ページのスタイルとレイアウトの言語。美しい Web ページを作成するために HTML とともに使用されます。 CSS は、フォント、色、背景、境界線、レイアウトなどの Web ページ表示の要素を制御します。
CSS スタイルを HTML に埋め込むには、内部スタイルと外部スタイルの 2 つの方法があります。
内部スタイルは、ページコードの
<head> タグに 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. JavaScript
JavaScript HTML コンテンツを制御し、Web ページをインタラクティブで動的にするために使用されるスクリプト言語です。フォームの検証、画像の切り替え、ページの動的更新など、ユーザーとの対話に使用できます。
JavaScript を HTML ページに埋め込むには、内部スクリプトと外部スクリプトの 2 つの方法があります。
内部スクリプトは、ページコードの
<head> または に 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 ページを作成する手順は次のとおりです。
2. .html ファイル形式で保存します。
たとえば、次は CSS と JavaScript を含む 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 サイトの他の関連記事を参照してください。