ホームページ > 記事 > ウェブフロントエンド > HTMLの書き方
HTMLの書き方
- WBOYオリジナル
- 2023-05-21 09:51:06831ブラウズ
HTML (Hypertext Markup Language) は、Web ページの構築に使用されるマークアップ言語であり、Web ページ構築の基礎です。この記事では、HTML を記述し、Web サイトにスタイルと機能を追加する方法について説明します。
- HTML ドキュメントの作成
HTML ドキュメントはタグで構成されており、タグはネストすることができます。各タグには、開始タグと終了タグがあります。例:
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落</p>
</body>
</html>この例では、HTML のルート タグ、Web ページのタイトルを含む 93f0f5c25f18dab9d176bd4f6de5d30e タグ、およびf0bb1cc7704059bd1535596c9df13e57 タグ内には、見出し用の 4a249f0d628e2318394fd9b75b4636b1 タグと段落用の e388a4556c0f65e1904146cc1a846bee タグがあります。
- タグと属性
HTML タグには、タグの特性を指定する属性を含めることができます。たとえば、以下に示すように、a1f02c36ba31691bcfe87b2722de723b タグは src 属性を通じて画像の URL を指定できます:
<img src="https://example.com/image.jpg" alt="这是图像的描述">
この例では、src 属性を使用して画像の URL を指定します。 alt 属性は画像の説明を提供します。
- リンク
Web ページには、他の Web ページまたはローカル ファイルへのリンクを追加できます。 タグを使用してリンクを作成します。例:
<a href="https://example.com/">这是一个链接</a>
この例では、href 属性を使用してリンク ターゲットの URL を指定します。
- リスト
リストを使用して情報を整理できます。 HTML には、順序付きリストと順序なしリストの 2 種類のリストがあります。順序付きリストでは c34106e0b4e09414b63b2ea253ff83d6 タグが使用され、順序なしリストでは ff6d136ddc5fdfeffaf53ff6ee95f185 タグが使用されます。例:
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>この例では、c34106e0b4e09414b63b2ea253ff83d6 タグを使用して順序付きリストを作成し、ff6d136ddc5fdfeffaf53ff6ee95f185 タグを使用して順序なしリストを作成します。
- スタイル
CSS (カスケード スタイル シート) を使用して、Web サイトにスタイルを追加できます。 CSS は、Web ページの外観とレイアウトを記述するために使用されるスタイル シート言語です。例:
<!DOCTYPE html>
<html>
<head>
<title>这是网页标题</title>
<style>
h1 {
color: red;
font-size: 48px;
}
p {
font-size: 24px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落</p>
</body>
</html>この例では、93f0f5c25f18dab9d176bd4f6de5d30e タグ内に c9ccee2e6ea535a969eb3f532ad9fe89 タグを埋め込んでスタイルを追加します。 h1 セレクターを使用してページ タイトルを選択し、色とフォント サイズを指定します。 p セレクターを使用して段落を選択し、フォント サイズと行の高さを指定します。
- JavaScript
JavaScript を使用して、Web サイトにインタラクティブで動的な機能を追加できます。 JavaScript は、HTML および CSS とともに使用できるスクリプト言語です。例:
<!DOCTYPE html>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<button onclick="alert('你点击了按钮')">点击我</button>
</body>
</html>この例では、bb9345e55eb71822850ff156dfde57c8 タグを使用してボタンを作成し、onclick 属性に JavaScript コードを追加して、ボタンがクリックされたときにアラート ボックスをポップアップします。
概要
この記事では、HTML ドキュメント、タグと属性、リンク、リスト、スタイル、JavaScript の記述など、HTML の基本を紹介しました。これらの基本があれば、簡単な Web サイトとアプリケーションの構築を始めることができます。ただし、高品質で保守しやすい Web サイトを構築したい場合は、これらの基本を深く学び、オブジェクト指向プログラミング、フレームワーク、ライブラリなどの高度なトピックに進む必要があることに注意してください。
以上がHTMLの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。