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

HTMLの書き方

May 21, 2023 am 09:51 AM

HTML (Hypertext Markup Language) は、Web ページの構築に使用されるマークアップ言語であり、Web ページ構築の基礎です。この記事では、HTML を記述し、Web サイトにスタイルと機能を追加する方法について説明します。

HTML ドキュメントの作成

HTML ドキュメントはタグで構成されており、タグはネストすることができます。各タグには、開始タグと終了タグがあります。例:

&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;这是网页标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;p&gt;这是一个段落&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この例では、HTML のルートタグ、Web ページのタイトルを含む <head> タグ、および<body> ; タグには Web ページのコンテンツが含まれます。 <body> タグ内には、見出し用の <h1> タグと段落用の <p> タグがあります。

タグと属性

HTML タグには、タグの特性を指定する属性を含めることができます。たとえば、以下に示すように、<img> タグは src 属性を通じて画像の URL を指定できます:

&lt;img src=&quot;https://example.com/image.jpg&quot; alt=&quot;这是图像的描述&quot;&gt;

ログイン後にコピー

この例では、src 属性を使用して画像の URL を指定します。 alt 属性は画像の説明を提供します。

リンク

Web ページには、他の Web ページまたはローカルファイルへのリンクを追加できます。タグを使用してリンクを作成します。例:

&lt;a href=&quot;https://example.com/&quot;&gt;这是一个链接&lt;/a&gt;

ログイン後にコピー

この例では、href 属性を使用してリンクターゲットの URL を指定します。

リスト

リストを使用して情報を整理できます。 HTML には、順序付きリストと順序なしリストの 2 種類のリストがあります。順序付きリストでは <ol> タグが使用され、順序なしリストでは <ul> タグが使用されます。例:

&lt;ol&gt;
    &lt;li&gt;第一项&lt;/li&gt;
    &lt;li&gt;第二项&lt;/li&gt;
    &lt;li&gt;第三项&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
    &lt;li&gt;第一项&lt;/li&gt;
    &lt;li&gt;第二项&lt;/li&gt;
    &lt;li&gt;第三项&lt;/li&gt;
&lt;/ul&gt;

ログイン後にコピー

この例では、<ol> タグを使用して順序付きリストを作成し、<ul> タグを使用して順序なしリストを作成します。

スタイル

CSS (カスケードスタイルシート) を使用して、Web サイトにスタイルを追加できます。 CSS は、Web ページの外観とレイアウトを記述するために使用されるスタイルシート言語です。例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;这是网页标题&lt;/title&gt;
    &lt;style&gt;
        h1 {
            color: red;
            font-size: 48px;
        }
        p {
            font-size: 24px;
            line-height: 1.5;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;p&gt;这是一个段落&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この例では、<head> タグ内に <style> タグを埋め込んでスタイルを追加します。 h1 セレクターを使用してページタイトルを選択し、色とフォントサイズを指定します。 p セレクターを使用して段落を選択し、フォントサイズと行の高さを指定します。

JavaScript

JavaScript を使用して、Web サイトにインタラクティブで動的な機能を追加できます。 JavaScript は、HTML および CSS とともに使用できるスクリプト言語です。例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;这是网页标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;button onclick=&quot;alert('你点击了按钮')&quot;&gt;点击我&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この例では、<button> タグを使用してボタンを作成し、onclick 属性に JavaScript コードを追加して、ボタンがクリックされたときにアラートボックスをポップアップします。

概要

この記事では、HTML ドキュメント、タグと属性、リンク、リスト、スタイル、JavaScript の記述など、HTML の基本を紹介しました。これらの基本があれば、簡単な Web サイトとアプリケーションの構築を始めることができます。ただし、高品質で保守しやすい Web サイトを構築したい場合は、これらの基本を深く学び、オブジェクト指向プログラミング、フレームワーク、ライブラリなどの高度なトピックに進む必要があることに注意してください。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。