皆さん、こんにちは。フロントエンド入門シリーズの最初のブログへようこそ。このシリーズでは、フロントエンド開発の基本、Web ページと Web アプリケーションの構築をゼロから学びましょう。このブログでは、HTML (Hypertext Markup Language) の基本概念とタグを紹介し、すぐに使い始めるのに役立ちます。
HTMLの基礎入門と初めての試み
序文: 学習目標
今学期の目標は次のとおりです。
- HTMLとは何かを知る
- ページ全体の HTML 構造を理解することを学びます
- HTMLのタグと要素の関係を理解する
- ハローワールドの練習
- 一般的な開発ツールをマスターする
- 一般的なブラウザとそのカーネルについて学ぶ
HTMLとは何ですか?
HTML は Web ページを記述するために使用される言語です。
- HTMLはハイパーテキストマークアップ言語の略です:ハイパーテキストマークアップ言語
- HTMLはプログラミング言語ではなく、マークアップ言語です
- マークアップ言語はマークアップタグのセットです
- HTML はマークアップ タグを使用してWeb ページを記述します
- HTML ドキュメントには HTMLタグとテキストコンテンツが含まれます
- HTML ドキュメントはWeb ページとも呼ばれます
HTML タグと要素
HTMLタグ
HTML マークアップ タグは、HTML タグ (HTML タグ) と呼ばれることがよくあります。
- HTML タグは、山括弧で囲まれたキーワードです。たとえば、
- HTML タグは通常、やなどのペアで指定されます。
- タグペアの最初のタグは開始タグ、2 番目のタグは終了タグです
- 開始タグと終了タグは、開始タグと終了タグとも呼ばれます
<标签>内容</标签>
HTML要素
「HTMLタグ」と「HTML要素」は通常同じものを記述します。
ただし、厳密に言えば、次の例に示すように、HTML 要素には開始タグと終了タグが含まれます。
HTML 要素:
<p>这是一个段落。</p>
HTMLページの構造
HTML スケルトンは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<p>程序员小豪</p>
</body>
</html>
分析例
![[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-Sr0n11P2-1687583272139)(/Users/adherezheng/mynote/note/csdn/html/アセット/image-20230623164323975.png)]](https://img-blog.csdnimg.cn/e476e1aba62e4dc1a054219876386b17.png)
1. <!DOCTYPE html>声明为 HTML5 文档
2. <html>元素是 HTML 页面的根元素
3. <head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
4. <title>元素描述了文档的标题
5. <body>元素包含了可见的页面内容
6. <h1>元素定义一个大标题
7. <p>元素定义一个段落
注: ブラウザ ページでキーボードの F12 キーを使用してデバッグ モードを開くと、コンポーネント タグを確認できます。
手書きのハローワールド
開発ツールを選択する
HTML を開発するには、次の開発ツールを選択できます。
- Visual Studio コード (推奨)
- ウェブストーム
- 崇高なテキスト
- ドリームウィーバー
- Hビルダー
ファイルを作成する
vs codeを使用しています。フォルダーを開いて新しいファイルを作成し、test.htmlという名前を付け、この新しいファイルに「!+Enter」を入力すると、HTMLスケルトンが直接生成され、本文内にあります。 div タグを使用して、タグ内に hello word を書き込みます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
ブラウザを開く
このファイルの「デフォルトのブラウザで開く」を右クリックすると、Web ページ上に HTML が表示されることがわかります。
![[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-x0YTW66J-1687583272142)(/Users/adherezheng/mynote/note/csdn/html/アセット/image-20230623165500223.png)]](https://img-blog.csdnimg.cn/3ebcdba1710f42e3a09893938b35affd.png)
5 つの一般的なブラウザとそのカーネル
ちなみに、ここで一般的な 5 つのブラウザを紹介します。
| ブラウザ | レンダリング エンジン コア |
|---|---|
| クロム/クロム | まばたき |
| Firefox | ヤモリ |
| サファリ | ウェブキット |
| マイクロソフトエッジ | EdgeHTML (旧バージョン) / Blink (新バージョン) |
| オペラ | まばたき |
各ブラウザは、Web コンテンツの解析とレンダリングに異なるレンダリング エンジンを使用します。これらのレンダリング エンジンには、パフォーマンス、機能、および標準サポートが異なる場合があります。