Web 開発は、今日最も需要の高いスキルの 1 つです。これには、ブラウザ経由でアクセスできる、ユーザーフレンドリーで魅力的な Web サイトを作成することが含まれます。 Web 開発者になるための最初のステップは、HTML を理解することです。
HTML (ハイパー テキスト マークアップ言語) は、あらゆる Web ページのバックボーンです。これは、Web ページを構造化し、ブラウザーでのコンテンツの表示方法を決定するために使用される標準言語です。ページの外観は CSS (Cascading Style Sheets) によって決まり、その機能は JS (Javascript) によって決まりますが、HTML は、基本的なスケルトンまたは構造を担当します。
コースのこの部分に入る前に、旅の中で使用される有名な専門用語や繰り返し使用される専門用語を理解することが重要です。これらは、作業を進めるにつれて概念を理解するのに役立ちます (また、作成者が物事を説明しやすくなります ;-) )。
のタグ(段落) その中に、ブラウザは段落ノードを子として持つ本文ノードを作成します。
) は div の子とみなされます。
HTML は ハイパー テキスト マークアップ言語
を表します。ハイパー テキスト: 異なるドキュメントをリンクする HTML の機能を指します。
マークアップ言語: タグを使用してテキストに注釈を付け、ブラウザーでの表示方法を定義します。
HTML ドキュメントの基本構造は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
タグ: HTML では、タグは要素を定義するために使用されます。タグは、 のように山括弧で囲みます。または
要素: 開始タグと終了タグで構成され、コンテンツが含まれる場合があります。たとえば、
Hello, world!
は段落要素です。すべての HTML ドキュメントは次の基本構造に従います。
Here are some basic HTML elements you’ll use frequently:
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.Let’s take a step further by creating a simple table in HTML:
<p>Table Example</p>
<table>
<tr>
<th>Name</th>
<th>Power</th>
<th>Is Kurama Present</th>
</tr>
<tr>
<td>Naruto</td>
<td>Rasengan</td>
<td>Yes</td>
</tr>
<tr>
<td>Sasuke</td>
<td>Sharingan</td>
<td>No</td>
</tr>
</table>
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
Note that
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
