HTML は、ウェブページの開発に使用されるタグベースの言語です。 HTML は Hyper Text Markup Language の略です。ハイパーテキストとは、Web ページが相互にリンクされる方法を指します。したがって、Web ページ上で利用可能なリンクはハイパーテキストと呼ばれます。これは、タグがブラウザーにページがどのようにレンダリングされるかを伝えるマークアップ言語です。 Berners-Lee が 1991 年後半に開発しましたが、「HTML2.0」は 1995 年に公開された最初の標準仕様でした。その後、その多くの HTML バージョンが HTML 4.0 のようになりました。現在、その最新バージョンは HTML5.0 で、フロントエンド Web サイト開発では非常に有名です。
HTML ページがどのように機能するかの構造を見てみましょう。
<!DOCTYPE html> <html> <head> <title>title tag of html</title> </head> <body> <h1>heading tag of html</h1> <p>paragraph tag of html<p> </body> </html>
このタグは、ドキュメントのタイプと HTML バージョンを定義します。
上記のタグは、
… で表されるドキュメント ヘッダーで構成される完全な HTML プログラミング言語ドキュメントを囲みます。 … で表されるドキュメント本体。タグ。head タグは、
このタグは
内で使用されます。ドキュメントのタイトルを記述するためのタグ。タグは、
などの他の HTML タグを保持するドキュメントの本文を表します。など
HTML の仕組みを示すさまざまなタグについては、以下で説明します。
以下に示すさまざまな見出しの例を作成するために使用される見出しタグ
<!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
出力
見出し 1
見出し 2
見出し 3
見出し 4
見出し 5
見出し 6
これは段落タグであり、以下に示す例でよりよく理解できます。
<!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <p>This is a first paragraph of text.</p> <p>This is a second paragraph of text.</p> <p>This is a third paragraph of text.</p> </body> </html>
出力
これはテキストの最初の段落です。
これは本文の 2 番目の段落です。
これは本文の 3 番目の段落です。
このタグは改行に使用されます。次の行から何かを開始したいときはいつでもこのタグを使用できます。終了タグを必要としない単一行のタグです。
Web ページ作成におけるこのタグの主な用途は、コンテンツ全体を中央に配置することです。
線の作成に使用され、主に Web ページを単一の線で描画する場合に使用されます。
これは HTML の非常に重要なタグです。シナリオによっては、HTML ページ内に記述されているものと同じものをすべて表示したい場合があります。そのような場合、これは非常に便利なタグです。以下に例を示します。
<!DOCTYPE html> <html> <head> <title>Preserve Formatting Example</title> </head> <body> <pre class="brush:php;toolbar:false"> Laravel is the PHP framework. It is an open source framework used in web application development. This framework is based on model view controller design pattern due to this project developed with help of this framework are more structured and manageable. This framework reuses the existing
出力
Laravel は PHP フレームワークです。ウェブで使用されるオープンソースのフレームワークです
アプリケーション開発。このフレームワークはモデル ビュー コントローラー
に基づいています。
このフレームワークを利用して開発されたこのプロジェクトによるデザインパターンは
より構造化され、管理しやすくなります。 このフレームワークは既存の
単一のスペースを印刷するには、これが HTML で使用されます。
タグレベルでプロパティを設定できます。例を以下に示します
<!DOCTYPE html> <html> <head> <title>Align Attribute</title> </head> <body> <p align = "left">Left aligned</p> <p align = "center">Center aligned</p> <p align = "right">Right aligned</p> </body> </html>
出力
左揃え
中央揃え
右揃え
以下に示すほぼすべての HTML 要素で使用されているコア属性はほとんどありません。
この属性は、ページ内の HTML 要素を一意に識別するために使用されます。 id 属性によって HTML ページ内の複数の場所で同じ要素が使用されている可能性があり、要素とそのコンテンツを識別し、JavaScript の別の目的に使用できる可能性があります。以下に例を示します。
<p id = "html">これは、HTML とは何か、その使用方法を説明する最初の段落です</p><code><p id = "html">This is first paragraph which explains what is HTML how to use it</p><br>
<p id = "css">This it second para which explains what is Cascading Style Sheet and how to use it</p>
この 2 番目のパラグラフでは、カスケード スタイル シートとは何か、その使用方法について説明します
説明 – 上記の例では、この要素を ID によってのみ区別するために、同じ要素が 2 回使用されています。
この属性の構文は id 属性に似ており、この属性の目的はそれを運ぶ要素によって異なります。カーソルが要素の上に来るとツールチップとして表示されることがよくありますが、これがこの属性の主な用途です。例を以下に示します –
<!DOCTYPE html> <html> <head> <title> title Attribute Example</title> </head> <body> <h3 title = "Hello Title Example Test">Sleeping from the long time</h3> </body> </html>
出力
長い間眠っている
If we try to bring our cursor over “Sleeping from a long time”, we will see that whatever title we have used in our code is coming out as a tooltip of the cursor.
The class attribute is used to associate an element with a style sheet and specifies the class of element. We will learn more about the use of the class attribute when we will learn Cascading Style Sheet (CSS).Its main use is CSS. Value for this attribute may also be a space-separated list of class names. The example is given below –
class = "className11 className12 className53"
It is used to writing the cascading style rule at the element level, which can be better explained by the example given below.
<!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">This is style example text , it is red color...</p> </body> </html>
Output
This is a style example text; it is red color…
As we saw many basics tags, the web page can be created with the help of these tags, which can be displayed to the end-user whenever a user requests the particular web page through his web browser, the work of displaying will be done by the web browser. Today lots of new tags exist into the market to make web pages more attractive.
以上がHTML はどのように機能するのか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。