ホームページ > 記事 > ウェブフロントエンド > HTML はどのように機能するのか?

HTML はどのように機能するのか?

WBOYオリジナル: 2024-09-04 16:13:21727ブラウズ

HTML は、ウェブページの開発に使用されるタグベースの言語です。 HTML は Hyper Text Markup Language の略です。ハイパーテキストとは、Web ページが相互にリンクされる方法を指します。したがって、Web ページ上で利用可能なリンクはハイパーテキストと呼ばれます。これは、タグがブラウザーにページがどのようにレンダリングされるかを伝えるマークアップ言語です。 Berners-Lee が 1991 年後半に開発しましたが、「HTML2.0」は 1995 年に公開された最初の標準仕様でした。その後、その多くの HTML バージョンが HTML 4.0 のようになりました。現在、その最新バージョンは HTML5.0 で、フロントエンド Web サイト開発では非常に有名です。

HTML ページの仕組み

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 タグは、、<link> などの他の HTML タグを保持できるドキュメントのヘッダーを表します。など</p> <h4></h4> <p>このタグは <head> 内で使用されます。ドキュメントのタイトルを記述するためのタグ。</p> <h4></h4> <p>タグは、<div>、<h1>、<p> などの他の HTML タグを保持するドキュメントの本文を表します。など</p> <h3>HTML 作品のさまざまなタグとその説明</h3> <p>HTML の仕組みを示すさまざまなタグについては、以下で説明します。</p> <h4><h1></h1></h4> <p>以下に示すさまざまな見出しの例を作成するために使用される見出しタグ</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>出力</strong></p> <p>見出し 1<br> 見出し 2<br> 見出し 3<br> 見出し 4<br> 見出し 5<br> 見出し 6</p> <h4><p></h4> <p>これは段落タグであり、以下に示す例でよりよく理解できます。</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>出力 </strong></p> <p>これはテキストの最初の段落です。<br> これは本文の 2 番目の段落です。<br> これは本文の 3 番目の段落です。</p> <h4><br></h4> <p>このタグは改行に使用されます。次の行から何かを開始したいときはいつでもこのタグを使用できます。終了タグを必要としない単一行のタグです。</p> <h4></h4> <p>Web ページ作成におけるこのタグの主な用途は、コンテンツ全体を中央に配置することです。</p> <h4></h4> <p>線の作成に使用され、主に Web ページを単一の線で描画する場合に使用されます。</p> <h4></h4> <p>これは HTML の非常に重要なタグです。シナリオによっては、HTML ページ内に記述されているものと同じものをすべて表示したい場合があります。そのような場合、これは非常に便利なタグです。以下に例を示します。</p> <pre class="brush:php;toolbar:false"><!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 </pre> </body> </html></pre> <p><strong>出力</strong></p> <p>Laravel は PHP フレームワークです。ウェブで使用されるオープンソースのフレームワークです<br> アプリケーション開発。このフレームワークはモデルビューコントローラー<br> に基づいています。このフレームワークを利用して開発されたこのプロジェクトによるデザインパターンは<br> より構造化され、管理しやすくなります。このフレームワークは既存の</p>を再利用します。 <h4> </h4> <p>単一のスペースを印刷するには、これが HTML で使用されます。</p> <h4>タグのプロパティ</h4> <p>タグレベルでプロパティを設定できます。例を以下に示します</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>出力</strong></p> <p>左揃え<br> 中央揃え<br> 右揃え</p> <h3>HTML のコア属性</h3> <p>以下に示すほぼすべての HTML 要素で使用されているコア属性はほとんどありません。</p> <ul> <li>ID</li> <li>タイトル</li> <li>クラス</li> <li>タイプ</li> </ul> <h4>1) ID</h4> <p>この属性は、ページ内の HTML 要素を一意に識別するために使用されます。 id 属性によって HTML ページ内の複数の場所で同じ要素が使用されている可能性があり、要素とそのコンテンツを識別し、JavaScript の別の目的に使用できる可能性があります。以下に例を示します。</p> <p><code><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> </code> <p id = "css">この 2 番目のパラグラフでは、カスケードスタイルシートとは何か、その使用方法について説明します</p> </code></p> <p>説明 – 上記の例では、この要素を ID によってのみ区別するために、同じ要素が 2 回使用されています。</p> <h4>2) タイトル</h4> <p>この属性の構文は id 属性に似ており、この属性の目的はそれを運ぶ要素によって異なります。カーソルが要素の上に来るとツールチップとして表示されることがよくありますが、これがこの属性の主な用途です。例を以下に示します –</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>出力</strong></p> <p>長い間眠っている</p> <p>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.</p> <h4>3) Class</h4> <p>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 –</p> <p><code>class = "className11 className12 className53"</code></p> <h4>4) Style</h4> <p>It is used to writing the cascading style rule at the element level, which can be better explained by the example given below.</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>Output</strong></p> <p>This is a style example text; it is red color…</p> <h3>Conclusion</h3> <p>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.</p><p>以上がHTML はどのように機能するのか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">laravel</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">print</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">require</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">everything</a><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="HTML でのキャリア" href="http://m.php.cn/ja/faq/1796600021.html">HTML でのキャリア</a></span><span>次の記事：<a class="dBlack" title="HTML でのキャリア" href="http://m.php.cn/ja/faq/1796600024.html">HTML でのキャリア</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>