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 ローカルログインでポート番号を使用してログインできない問題の解決策

最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...

Nginx_geo モジュールを使用して CDN スケジュールを設定する方法

NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...

CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション

ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...

Centos サーバーに MySql をデプロイし、Navicat に接続するプロセスの詳細な説明

(1)サーバー構成: [root@localhost ~]# cd /usr/local/src/ ...

Vue.js ドロップダウン コンポーネント付きテキストボックス

ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択した...

react+antd.3x は IP 入力ボックスを実装します

この記事では、IP入力ボックスを実装するための react+antd.3x の具体的なコードを参考ま...

Vue のスロットスコープの詳細な理解(初心者向け)

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...

Vueでパスワードの表示と非表示機能を実装するアイデアを詳しく解説

効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...

DockerにRedisをインストールし、パスワードを設定して接続する方法

Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

目次1. 時刻表示に関する従来の考え方2. 時刻の書式設定 toLocaleString() Obj...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...