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全文インデックスの原理と欠点

MySQL フルテキスト インデックスは、特定のテーブルの特定の列に表示されるすべての単語のリストを...

セマンティクス: Html/Xhtml は本当に標準に準拠していますか?

<br />原文: http://jorux.com/archives/what-is-...

VMware インストール後に仮想ネットワーク カードが表示されない問題について

1 問題の説明: 1.1 Windows 10 に VMware を初めてインストールする場合、また...

Ubuntu環境でPHPとNginxをコンパイルしてインストールする方法

この記事では、Ubuntu 環境で PHP と Nginx をコンパイルしてインストールする方法につ...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

Unicodeの一般的な記号

Unicode は、世界中のすべてのテキストと記号に対応できる国際組織によって開発された文字エンコー...

IE6 ウェブページ作成リファレンス IE6 デフォルトスタイル

これは実際には IE の公式ドキュメントではありません。他の人が実践を通じて開発した IE6 のデフ...

PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明

概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...

MySQL 8.0.13 解凍版のインストールと設定方法のグラフィックチュートリアル

1. インストール1. MySQLをダウンロードするダウンロードアドレス: リンクアドレスブラウザで...

MySQLインデックスの詳細な分析

序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

Linux での MongoDB のインストールと設定のチュートリアル

MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...

MySQL における悲観的ロックと楽観的ロック

リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...

JSはUUIDとNanoIDというユニークなIDメソッドを生成します

目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文：ユ...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...