HTML (正式名は「Hypertext Markup Language」) は、Web ページの作成に使用される標準言語です。マークアップ (HTML タグ) を使用してテキスト、画像、リンク、表などのさまざまな要素を定義し、これらの要素を編成して Web ページを形成します。この記事では、HTML の基本的な構文、タグ、要素、属性、その他の関連知識と、その知識を使用して Web ページを作成する方法を紹介します。
- HTML の基本構文
HTML は一連のタグとテキストで構成されます。その基本的な構文は次のとおりです:
<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 定义文档头部 -->
<title>网页标题</title> <!-- 定义网页标题 -->
</head>
<body> <!-- 定义文档主体 -->
<!-- 此处可以插入文本、图像、链接等各种元素 -->
</body>
</html>
ログイン後にコピー
このうち、「」は文書タイプが HTML5 標準であることを宣言し、「」は HTML 文書のルート要素であり、 "
" の定義 ドキュメント ヘッダーは通常、Web ページのタイトル、スタイル、スクリプト、その他の情報を定義するために使用されます。"
" は Web ページのタイトルを定義します。 「<body>」はドキュメントの本文であり、テキスト、画像、リンクなどのさまざまな要素を定義するために使用されます。 <ol start="2"><li>HTML タグと要素</li></ol>
<p> HTML 内のタグは山括弧 (< >) で囲まれ、通常はそれぞれがタグと終了タグで始まるペアで表示されます。 。たとえば、「<p>」は段落を定義する開始タグであり、「</p>」は終了タグです。 </p>
<p>HTML には、タグが 1 つだけあり、終了タグを必要としない単一タグもいくつかあります。たとえば、「<img>」は画像を挿入するために使用され、その構文は次のとおりです: </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><img src="图片地址" alt="图片描述"></pre><div class="contentsignin">ログイン後にコピー</div></div>
<p> このうち、「src」属性は画像の URL アドレスを指定し、「alt」属性は" 属性は画像の説明情報を指定します。 </p>
<ol start="3"><li>HTML</li></ol>
<p>HTML タグの属性には、要素を記述するために使用される追加情報である属性を含めることもできます。たとえば、「<a>」タグはリンクを作成するために使用され、その構文は次のとおりです。 </a></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><a href="链接地址">链接文本</a></pre><div class="contentsignin">ログイン後にコピー</div></div>
<p> このうち、「href」属性はリンクの URL アドレスを指定します。 「リンクテキスト」はユーザーがページ上で見るものです。 </p>
<p>「href」属性に加えて、他にもよく使用される属性が多数あります。たとえば、「class」属性と「id」属性は、スタイル シートや JavaScript スクリプトによる簡単なアクセスと操作のために要素を識別および分類するために使用されます。構文は次のとおりです。 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div class="class名称" id="id名称">元素内容</div></pre><div class="contentsignin">ログイン後にコピー</div></div>
<ol start="4"><li>簡単な Web ページの作成例</li></ol>
<p>次に、HTML を使用して作成された簡単な Web ページの例を示します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
body {
background-color: #E6E6FA;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎访问我的第一个网页！</h1>
<p>这是一个由HTML制作的简单网页示例。</p>
<h2>利用HTML制作网页的步骤：</h2>
<ol>
<li>学习HTML基本语法、标签和属性。</li>
<li>创建HTML文件，用文本编辑器编辑文件代码。</li>
<li>保存HTML文件，用浏览器打开并查看网页效果。</li>
</ol>
<p>祝大家学习愉快，制作美丽的网页！</p>
</body>
</html></pre><div class="contentsignin">ログイン後にコピー</div></div>
<p>この Web ページには、HTML のタイトル、段落、スタイル、リストなどのさまざまな要素が含まれています。このうち、「<style>」タグはWebページのスタイルを定義するのに使用され、「background-color」属性は背景色を指定し、「font-family」属性はフォントファミリーを指定し、「<」タグはWebページのスタイルを定義するために使用されます。 ;ol>」タグは順序付きリストを作成するために使用されます。 </p>
<ol start="5"><li>概要</li></ol>
<p>HTML は Web ページを作成するための基本的な言語の 1 つであり、HTML の基本的な構文、タグ、要素、属性をマスターすると、Web ページを作成するのに役立ちます。美しい有効なWebページを作成します。この記事が HTML の学習に役立ち、美しい Web ページを作成できることを願っています。 </p>
以上がhtmlの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
