htmlの書き方-フロントエンドQ&A-php.cn

htmlの書き方

PHPz

リリース： 2023-04-21 10:20:38

オリジナル

2840 人が閲覧しました

HTML (Hyper Text Markup Language) は、Web ページの作成に使用されるマークアップ言語です。マークアップを使用して、Web ページのコンテンツと構造を記述します。この記事では、HTML を使用して基本的な Web ページを作成する方法について説明します。

基本的な HTML ファイル構造

HTML ファイルは <!DOCTYPE html> で始まる必要があります。これは HTML5 の宣言メソッドであり、 Web ブラウザこのドキュメントが書かれている HTML のバージョン。次に、HTML ファイルのルートタグである <html> タグを追加する必要があります。 <html> タグ内に他のタグを追加するだけです。

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页。</p>
  </body>
</html>

ログイン後にコピー

上記のコードでは、<head> タグは Web ページのメタデータを含めるために使用され、<title> は Web ページのメタデータを指定するために使用されます。 Web ページのタイトル、 <body> タグは、Web ページのメインコンテンツを含めるために使用されます。 <h1> と  は、それぞれ Web ページのタイトルと段落を作成するために使用されます。

テキストとリンクの追加

HTML では、次のタグを使用してテキストとリンクを追加できます:

<!-- 段落 -->
<p>这是一个段落。</p>

<!-- 标题 -->
<h1>这是一个一级标题</h1>

<!-- 强调 -->
<strong>这是加粗的文本。</strong>
<em>这是斜体的文本。</em>

<!-- 链接 -->
<a href="http://www.example.com">这是一个链接</a>

ログイン後にコピー

画像の追加

<img> タグを使用して画像を追加できます。タグには画像の URL を含める必要があります。代替テキストは alt 属性を使用して追加できます。これは支援技術ユーザーにとって重要です。

<img src="image.jpg" alt="这是一张图片。">

ログイン後にコピー

リストの追加

次のタグを使用して、順序付きリストと順序なしリストを作成できます:

<!-- 有序列表 -->
<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>

<!-- 无序列表 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

ログイン後にコピー

テーブルを追加

次のタグを使用してテーブルを作成できます:

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

スタイルとレイアウト

CSS (カスケードスタイルシート) を使用してスタイルとレイアウトを追加できます。レイアウトを HTML に変換します。 CSS を使用すると、Web ページ上のテキストの色、サイズ、位置などを制御できます。

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
    <style>
      h1 {
        color: blue;
        font-size: 24px;
        text-align: center;
      }
      
      p {
        color: black;
        font-size: 18px;
        margin: 10px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页。</p>
  </body>
</html>

ログイン後にコピー

上記のコードは、Web ページのタイトルを青で中央揃えに設定し、段落を黒、サイズ 18 ピクセル、上下の余白 10 ピクセル、行の高さ 1.5 に設定します。

結論

上記は、基本的な HTML タグと CSS を使用して Web ページを構築するための簡単なガイドですが、HTML と CSS にはさらに複雑で高度な使用方法が数多くあります。言語。これには、Web ページの動的対話のための Javascript の使用などが含まれます。つまり、HTML と CSS を使用して Web ページを構築することは、初心者が始めるのに適した方法であり、フロントエンド開発を深く学ぶ唯一の方法でもあります。

以上がhtmlの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。