Rumah > Artikel > hujung hadapan web > Bagaimana HTML Berfungsi?

Bagaimana HTML Berfungsi?

WBOYasal: 2024-09-04 16:13:21670semak imbas

HTML ialah bahasa berasaskan teg yang digunakan untuk pembangunan halaman web; HTML adalah singkatan dari Hyper Text Markup Language. Hiperteks merujuk kepada cara halaman Web dipautkan bersama. Oleh itu, pautan yang tersedia pada halaman web dipanggil Hypertext. Ia adalah bahasa penanda iaitu teg memberitahu penyemak imbas cara halaman itu akan dipaparkan padanya. Berners-Lee membangunkannya pada penghujung tahun 1991, tetapi "HTML2.0" ialah spesifikasi standard pertama yang diterbitkan pada tahun 1995. Kemudian, banyak versi HTMLnya datang seperti HTML 4.0; pada masa ini, versi terkininya ialah HTML5.0 yang sangat terkenal dalam pembangunan tapak web bahagian hadapan.

Struktur cara halaman HTML berfungsi

Mari kita lihat struktur cara halaman HTML berfungsi.

<!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>

Teg ini mentakrifkan jenis dokumen dan versi HTML.

Teg di atas melampirkan dokumen bahasa pengaturcaraan HTML yang lengkap, terdiri daripada pengepala dokumen yang diwakili oleh … dan badan dokumen yang diwakili oleh … tanda nama.

teg kepala mewakili pengepala dokumen yang boleh menyimpan teg HTML lain seperti , <link> dll.</p> <h4><tajuk></h4> <p>tag ini digunakan di dalam <head> tag untuk menulis tajuk dokumen.</p> <h4><badan></h4> <p><badan> teg mewakili badan dokumen yang menyimpan teg HTML lain seperti <div>, <h1>, <p> dll.</p> <h3>Teg HTML yang berbeza dan penerangannya</h3> <p>Teg berbeza tentang cara HTML berfungsi adalah seperti yang dijelaskan di bawah:</p> <h4><h1></h4> <p>Teg tajuk digunakan untuk mencipta variasi contoh tajuk yang diberikan di bawah</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>Tajuk 1<br> Tajuk 2<br> Tajuk 3<br> Tajuk 4<br> Tajuk 5<br> Tajuk 6</p> <h4><p></h4> <p>Ini ialah teg perenggan yang boleh difahami dengan lebih baik melalui contoh yang diberikan di bawah.</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>Ini ialah perenggan pertama teks.<br> Ini ialah perenggan kedua teks.<br> Ini ialah perenggan ketiga teks.</p> <h4><br /></h4> <p>Tag ini digunakan untuk memutuskan baris; kita boleh menggunakan tag ini bila-bila masa kita mahu apa-apa akan bermula dari baris seterusnya. Ia ialah teg baris tunggal yang tidak memerlukan teg penutup.</p> <h4><tengah></h4> <p>Letakkan keseluruhan kandungan di tengah tempat penggunaan utama teg ini dalam penciptaan halaman web.</p> <h4><hr></h4> <p>Digunakan untuk mencipta garisan, terutamanya digunakan apabila anda ingin melukis halaman web satu baris.</p> <h4><pra></h4> <p>Ini adalah teg HTML yang sangat penting; dalam beberapa senario, kami ingin menunjukkan semuanya sama seperti yang ditulis di dalam halaman HTML; dalam kes tersebut, ia adalah teg yang sangat berguna. Contoh diberikan di bawah.</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 ialah rangka kerja PHP. Ia ialah rangka kerja sumber terbuka yang digunakan dalam web<br> pembangunan aplikasi. Rangka kerja ini adalah berdasarkan pengawal paparan model<br> corak reka bentuk kerana projek ini dibangunkan dengan bantuan rangka kerja ini adalah<br> lebih tersusun dan terurus. Rangka kerja ini menggunakan semula</p> yang sedia ada <h4> </h4> <p>Untuk mencetak satu ruang, ini digunakan dalam HTML.</p> <h4>Sifat Teg</h4> <p>Kami boleh menetapkan sifat pada tahap teg Contoh yang diberikan di bawah</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>Dijajar ke kiri<br> Dijajarkan ke tengah<br> Dijajarkan ke kanan</p> <h3>Atribut Teras HTML</h3> <p>Terdapat beberapa atribut teras yang telah digunakan dengan hampir semua elemen HTML yang mengikuti.</p> <ul> <li>Id</li> <li>Tajuk</li> <li>Kelas</li> <li>Jenis</li> </ul> <h4>1) Id</h4> <p>Atribut ini digunakan untuk mengenal pasti secara unik elemen HTML dalam halaman; mungkin elemen yang sama telah digunakan dalam halaman HTML di berbilang tempat oleh atribut id yang kami kenal pasti elemen dan kandungannya dan boleh digunakan untuk tujuan lain dalam javascript. Contoh diberikan di bawah.</p> <p><code><p id = "html">Ini ialah perenggan pertama yang menerangkan apa itu HTML cara menggunakannya</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">Ini para kedua yang menerangkan apa itu Lembaran Gaya Bertatai dan cara menggunakannya</p> </code></p> <p>Penjelasan – Dalam contoh di atas, elemen yang sama digunakan dua kali untuk membezakan elemen ini sahaja melalui ID.</p> <h4>2) Tajuk</h4> <p>Sintaks atribut ini serupa dengan atribut id, tujuan atribut ini bergantung pada elemen yang membawanya; walaupun ia sering dipaparkan sebagai petua alat apabila kursor menghampiri elemen, ini ialah kegunaan utama atribut ini. Contoh diberikan di bawah –</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>Tidur lama</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>Atas ialah kandungan terperinci Bagaimana HTML Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Kerjaya dalam HTML" href="http://m.php.cn/ms/faq/1796600021.html">Kerjaya dalam HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Kerjaya dalam HTML" href="http://m.php.cn/ms/faq/1796600024.html">Kerjaya dalam HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/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/ms/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/ms/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</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/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</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/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</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:;" class="language course-right-orders chooselan chooselanguage" 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>