HTML is a tag-based language used to development of web pages; HTML stands for Hyper Text Markup Language. Hypertext refers to the way in which Web pages are linked together. Thus, the link available on a webpage is called Hypertext. It is a markup language which is tags tell the browser how the page will be rendered on it. Berners-Lee developed it in late 1991, but “HTML2.0” was the first standard specification published in 1995. Later, its many HTML versions came like HTML 4.0; currently, the latest version of it is HTML5.0 which is very famous in front end websites development.
Structure of how HTML page works
Let us see the structure of how the HTML page works.
<!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>
This tag defines the type of the document and HTML version.
Above tag encloses the complete HTML programming language document, comprises of document header which is represented by
… and document body which is represented by … tags.
head tag represents the document’s header which can keep other HTML tags like
, <link> etc.</p>
<h4><title></h4>
<p>this tag is used inside the <head> tag to write the document title.</p>
<h4><body></h4>
<p><body> tag represents the document’s body which keeps other HTML tags like <div>, <h1>, <p> etc.</p>
<h3>Different Tags of HTML works and their description</h3>
<p>The different tags of how HTML works are as explained below:</p>
<h4><h1></h4>
<p>Heading tag use to create varieties of the heading example given below</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>Output</strong></p>
<p>Heading 1<br>
Heading 2<br>
Heading 3<br>
Heading 4<br>
Heading 5<br>
Heading 6</p>
<h4><p></h4>
<p>This is a paragraph tag that can be better understood by the example given below.</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>Output </strong></p>
<p>This is the first paragraph of the text.<br>
This is the second paragraph of the text.<br>
This is the third paragraph of the text.</p>
<h4><br /></h4>
<p>This tag is used to break the line; we can use this tag whenever we want anything’s will start from the next line. It is a single line tag that does not require a closing tag.</p>
<h4><center></h4>
<p>Put the whole content into center place this main use of this tag in web page creation.</p>
<h4><hr></h4>
<p>Used for creating the line, mainly used when you want to draw a single line web page.</p>
<h4><pre class="brush:php;toolbar:false"></h4>
<p>This is a very important tag of HTML; in some scenario, we want to show everything the same as it is written inside the HTML page; in those cases, it is a very useful tag. The example is given below.</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>Output</strong></p>
<p>Laravel is the PHP framework. It is an open-source framework used in web<br>
application development. This framework is based on model view controller<br>
design pattern due to this project developed with the help of this framework are<br>
more structured and manageable. This framework reuses the existing</p>
<h4> </h4>
<p>To print a single space, this is used in HTML.</p>
<h4>Tags Properties</h4>
<p>We can set the property at tag level Example given below</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>Output</strong></p>
<p>Left aligned<br>
Center aligned<br>
Right aligned</p>
<h3>Core Attributes of HTML</h3>
<p>There are few core attributes which have been used with almost all the HTML element which are following.</p>
<ul>
<li>Id</li>
<li>Title</li>
<li>Class</li>
<li>Type</li>
</ul>
<h4>1) Id</h4>
<p>This attributes used to uniquely identify the HTML element in the page; it may be possible that the same element has been used in the HTML page at multiple places by the id attribute we identify the element and its content and can be used for another purpose in javascript. The example is given below.</p>
<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>
<p>Explanation – In the above example, the same element is used two times to differentiate this element only way by the ID.</p>
<h4>2) Title</h4>
<p>This attribute syntax is similar to the id attributes, the purpose of this attributes will depend upon the element that carries it; although it is often displayed as a tooltip when the cursor comes over the element, this is the main use of this attribute. The example is given below –</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>Output</strong></p>
<p>Sleeping for a long time</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>Das obige ist der detaillierte Inhalt vonWie funktioniert HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Karriere in HTML" href="http://m.php.cn/de/faq/1796600021.html">Karriere in HTML</a></span><span>Nächster Artikel：<a class="dBlack" title="Karriere in HTML" href="http://m.php.cn/de/faq/1796600024.html">Karriere in HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</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/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('ja');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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><!--顶部导航 end--><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>