HTMLの基本構造を包括的に理解する

HTMLの基本構造を包括的に理解する

HTML入門

ハイパーテキスト マークアップ言語: ハイパーテキスト マークアップ言語

ハイパーテキスト: ハイパーテキスト (テキスト + 画像 + ビデオ + オーディオ + リンク)

マークアップ言語:

ウェブサイトの3つの要素

画像、ハイパーリンク、テキスト

HTML の基本構造

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.      <ヘッド>   
  3.          <タイトル>ドキュメント</タイトル>   
  4.      </ヘッド>   
  5.      <本文>   
  6. モスバオーです！
  7.      </本文>   
  8. </html>​​   

ウェブページの標準 HTML タグ

1. HTML ドキュメント宣言: <!DOCTYPE HTML>

2. ページタイトル: <title>~</title>

3. ページのエンコーディング: <meta charset="utf-8" />

UTF-8は多言語エンコードです（推奨）

gb2312は簡体字中国語のエンコードです


4. ページキーワード: <meta name="keywords" content="キーワード 1,キーワード 2,…" />

ページのメインコンテンツ: <meta name="description" content="コンテンツの紹介" />

注: メタ タグは HTML 言語の補助タグで、通常は検索エンジンを最適化するために使用されます。HTML ドキュメントの先頭に配置されます。

HTMLドキュメントの初期構造を生成する

1. HTML5 標準構造: html:5+Tab キーまたは !+Tab キー

生成された結果は次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      <タイトル>ドキュメント</タイトル>   
  6. </ヘッド>   
  7. <本文>   
  8.        
  9. </本文>   
  10. </html>​​   

2. HTML4 遷移構造: html:xt+Tab キー

生成された結果は次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml"   xml:lang = "en" >   
  3. <ヘッド>   
  4.      <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = UTF-8" >   
  5.      <タイトル>ドキュメント</タイトル>   
  6. </ヘッド>   
  7. <本文>   
  8.        
  9. </本文>   
  10. </html>​​   

HTML タグに関する注意:

• HTML 要素は開始タグと終了タグで構成されます。

• 開始タグと終了タグで囲まれたテキストが要素の内容です。

• HTML タグには始まりと終わりが必要です。コンテンツのないタグ (空タグ) の場合は、// を使用して終了します。

• タグ名は大文字と小文字が区別されませんが、XHTML ではタグ名は小文字にする必要があります。

• タグには属性があり、タグのプロパティと特徴を表すために使用されます。属性は開始タグで指定されます。

以上がHTMLの基本構造についての包括的な理解であり、これがエディターが皆さんと共有する内容のすべてです。皆さんの参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/mossbaoo/archive/2016/07/31/5724065.html

<<:  MySQL関数の包括的な概要

>>:  3つの簡単な例を使ってハイパーリンクの下線を削除する方法

推薦する

MySQLの不合理なMaxIdleConnsにより接続が短くなる

1 背景最近、Shimo Document のオンライン ビジネスでパフォーマンスの問題が発生しまし...

大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション

MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

CSS3 で半透明の背景画像と不透明なコンテンツを実現する方法の例

以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透...

アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析

問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...

Windows でのシンプルな Mysql バックアップ BAT スクリプトの共有

序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...

無効属性が設定されていてバックグラウンドがデータを読み取れない場合に、選択を読み取り専用にサポートする方法

コードをコピーコードは次のとおりです。 <span style="font-fami...

https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順

Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...

JavaScript ベースのシンプルなカルーセルの実装

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

Mysqlは日付範囲の抽出方法を指定します

データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...

CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する

最終的な効果は次のようになります。アニメーションは2つのステップに分かれていますランニング軌道を開発...

CentOS7でルートパスワードをリセットする方法

レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...

Centos7のシステム言語を簡体字中国語に変更する方法

例示するシステムを自分でインストールする場合は、通常、システム言語をカスタマイズできます。ただし、ク...

ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い

概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティス...

MySQLデータベースのトランザクション分離レベルの詳細な説明

データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...