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つの簡単な例を使ってハイパーリンクの下線を削除する方法

推薦する

Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

JavaScriptの厳密モードが8進数をサポートしていない問題の説明

JavaScript厳密モードが 8 進数をサポートしていないという問題に関して、まず、 Java...

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...

Win10 + Ubuntu 16.04 デュアルシステム 完璧なインストールチュートリアル [詳細]

必ずデータをバックアップすることを忘れないでください。データは貴重なものです! ！ ！コンピュータモ...

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...

カスタムスクロールバー効果を実現するJavaScript

実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...

MySQLとNavicatプレミアムのインストールと設定の詳細な手順

前提条件: Mac、zsh がインストールされ、bash のときに mysql がダウンロードされ、...

Mysql は最大接続数を表示し、最大接続数を変更します

MySQL 最大接続数の表示と最大接続数の変更1. 最大接続数を確認する '%max_con...

Ubuntuにmysql5.7.10を手動でインストールする

このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...

WeChatミニプログラムをTencent Mapsに接続する2つの方法

最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでい...

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...

Nginxを使ってサーバー内で複数コンテナの共存を実現する方法

背景Tencent Linux クラウド ホストがあり、その上に Docker (ServiceDo...