Rumah > Artikel > hujung hadapan web > Teg Sebaris dalam HTML

Teg Sebaris dalam HTML

王林asal: 2024-09-04 16:25:09608semak imbas

Untuk mencipta halaman web, elemen HTML mengambil peranan penting dalam pembangunan halaman web. Elemen HTML tersebut secara khusus dibahagikan kepada 2 subkategori seperti elemen Sebaris dan elemen peringkat Blok. Elemen sebaris ialah elemen yang tidak bermula dengan baris baharu. Selain itu, ia tidak memerlukan ruang lebar penuh pada halaman web. Elemen jenis itu hanya menduduki ruang sebanyak yang diperlukan untuk memuatkan elemen yang disertakan. Terdapat pelbagai tag Inline dalam HTML. Kita akan lihat semua itu satu persatu nanti. elemen berfungsi sebagai bekas untuk teks yang disertakan dalam HTML. Selalunya, elemen sebaris digunakan dalam elemen HTML yang lain.

Sintaks untuk mencipta elemen sebaris adalah seperti berikut:

Sintaks:

<span>Contents</span>

Seperti yang ditunjukkan di atas, elemen rentang dianggap sebagai bekas untuk elemen yang disertakan. Tidak perlu mengaitkan ke teg span. Ia menggunakan nama kelas, nama id atau gaya sebagai atribut.
Elemen sebaris disertakan dalam bahagian badan. Elemen tersebut mencipta struktur yang lebih pendek berbanding elemen lain.

20 Teg Sebaris Terbaik dalam HTML

Berbilang teg Sebaris akan digunakan dalam HTML; jom tengok satu persatu:

1. : Teg ini digunakan untuk meletakkan singkatan teks seperti HTML, WWW, ASAP, PFA, dll.

Sintaks:

<abbr title="Text">Abbrevation_text</abbr>

2. : Teg ini digunakan untuk menerangkan akronim. Ia seperti NASA, GUI, dll. Teg ini tidak digunakan pada masa kini dalam HTML 5. Ia memberikan maklumat tentang penyemak imbas, enjin carian, dll.

Sintaks:

<acronym title="Text">text</acronym>

3. : Mentakrifkan teks dalam format tebal.

Sintaks:

<b>Text</b>

4. : Teg Sebaris ini dalam HTML mentakrifkan Penggantian Dwi Arah. Ia membantu pengguna untuk mengatasi arah teks yang sedia ada. Ia mempunyai dua nilai kiri-ke-kanan dan kanan-ke-kiri.

Sintaks:

<bdo dir="ltr">Text </bdo>

5. : Ini ialah salah satu teg sebaris yang digunakan untuk menentukan teks yang lebih besar.

Sintaks:

<big >Text</big>

6. <br>: Teg ini digunakan untuk memberikan pemisah baris atau ruang dalam kod HTML.

Sintaks:

<br>

7. : Teg butang dalam HTML digunakan untuk membuat butang boleh klik.

Sintaks:

<button type="button"> Text</button>

8. : Salah satu elemen Sebaris yang penting ialah , yang mentakrifkan tajuk karya atau dokumen dengan menggunakan HTML.

Sintaks:

<p><cite >Text </cite>other text</p>

9. : Elemen sebaris ini digunakan untuk mentakrifkan sekeping kod komputer. Ia dianggap sebagai teg frasa.

Sintaks:

<code>Text</code>

10. : Elemen sebaris ini digunakan untuk mentakrifkan tika istilah dalam kod HTML.

Sintaks:

<p><dfn> text</dfn ></p>

11. : Ini juga dianggap sebagai teg frasa yang dipaparkan dengan teks yang ditekankan.

Sintaks:

<em>Text</em>

12. : Teg ini digunakan untuk menerangkan sebahagian daripada teks dalam suasana alternatif. Terutamanya ia digunakan untuk memaparkan teks yang terkandung dalam huruf condong. Ini dirujuk sebagai istilah teknikal.

Sintaks:

<p> <i>text</i>another text</p>

13. : Salah satu elemen Sebaris yang paling penting disertakan sebagai imej pada halaman web kami. Jadi teg ini membantu untuk memasukkan imej dalam halaman web kami seperti berikut:

Sintaks:

<img src="Image_URL" alt="text" height="value" width="value">

14. : Jenis elemen sebaris ini akan digunakan dalam unsur. Ia membolehkan pengguna meletakkan data input.

Sintaks:

<form> <input type=" text" name="value"> <input type=" text" name="value"> </form>

15. : Ini juga dikenali sebagai teg frasa dalam HTML, yang digunakan untuk mengambil input daripada papan kekunci.

Sintaks:

<kbd>keyboard input</kbd>

16. : Elemen sebaris ini akan digunakan dalam , ,,, , <input>, <meter> dll.</p> <p><strong><b>Sintaks: </b></strong></p> <pre class="brush:php;toolbar:false"><form> <label for="value">Text </label> <input type='radio" name="value" id="" value=""><br> <label for="value">Text </label> <form></pre> <p><b></b><strong>17. <peta>:</strong> Elemen ini digunakan untuk mewakili peta imej sebelah pelanggan. Ia adalah imej dengan kawasan yang boleh diklik. Ia mengandungi atribut seperti <img >, <area> seperti yang ditunjukkan sintaks di bawah:</p> <p><strong><b>Sintaks:</b></strong></p> <pre class="brush:php;toolbar:false"><img src="URL" width="value" height="value" alt="text" usemap="#map_name "> <map name="map_name "> <area shape="Shape_type" coords="value" href="URL" alt="text"> </map></pre> <p><b></b><strong>18. <q>:</strong> This inline element is used to show quotations around the text.</p> <p><strong><b>Syntax:</b></strong></p> <pre class="brush:php;toolbar:false"><q>Text</q></pre> <p><b></b><strong>19. <sub>:</strong> This element is used to show the subscript of the text.</p> <p><strong><b>Syntax:</b></strong></p> <pre class="brush:php;toolbar:false"><p>text <sub> text</sub></p></pre> <p><b></b><strong>20. <sup>:</strong> This element is used to give superscript to the text as shown in the below syntax,</p> <p><strong><b>Syntax:</b></strong></p> <pre class="brush:php;toolbar:false"><p>text <sub> text</sub></pre> <h3>Examples of Inline Tags in HTML</h3> <p>Following are the different examples of inline tags in HTML.</p> <h4> <b></b>Example #1</h4> <p>This example is showing some basic inline tags are as follows:</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h4>Abbreviation tag</h4> <abbr title="HyperTextMarkupLaanguage">HTML</abbr> <h4>Acronym tag</h4> <acronym title="UserInterface">UI</acronym> <h4>Bold tag</h4> <p>Not everyone will understand your journey. <b>You are here to live your life, not to make everyone understand</b></p> <h4>Bidirectional tag</h4> <p><bdo dir="rtl">Train your mind to stay calm in every situation</bdo></p> <h4>Big tag</h4> <p>Image of the day: Isro launches talking human robot <big>Vyommitra</big></p> <h4>Image tag</h4> <img src="C:\Users\Sonali\Desktop\t3.jpg"> </body> </html></pre> <p><strong><b>Output:</b></strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831113825.jpg" alt="Teg Sebaris dalam HTML" ></p> <h4> <b></b>Example #2</h4> <p>As earlier, we had discussed, inline tags are also useful in form elements as input fields for text input, radio buttons, buttons, dates, select tags, and so many. The following example illustrates the use of those inline tag for form building.</p> <p><strong><b>Code:</b></strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <style> .card{ border:2px solid black; } </style> </head> <body> <div class="card"> <h3 style="text-align: center;">Employee Details</h3> <form> <table align="center" cellpadding = "4"> <tr> <td>FIRST NAME</td> <td><input type="text" name="First_Name"/> </td> </tr> <tr> <td>LAST NAME</td> <td><input type="text" name="Last_Name"/> </td> </tr> <tr> <td>Employee ID</td> <td><input type="text" name="empid" /> </td> </tr> <tr> <td>DATE OF BIRTH</td> <td><input type="date" name="Birth_date" /></td> </tr> <tr> <td>EMAIL ID</td> <td><input type="text" name="Email_Id" maxlength="100" /></td> </tr> <tr> <td>MOBILE NUMBER</td> <td> <input type="text" name="Mobile_Number" maxlength="10" /> </td> </tr> <tr> <td>GENDER</td> <td> Male <input type="radio" name="Gender" value="Male" /> Female <input type="radio" name="Gender" value="Female" /> Transgender <input type="radio" name="Gender" value="Transgender" /> </td> </tr> <tr> <td>CITY</td> <td><input type="text" name="City" maxlength="20" /> </td> </tr> <tr> <td>Department</td> <td><input type="text" name="dept" /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </div> </body> </html></pre> <p><strong><b>Output:</b></strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831324064.jpg" alt="Teg Sebaris dalam HTML" ></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831697024.jpg" alt="Teg Sebaris dalam HTML" ></p> <h4> <b></b>Example #3</h4> <p>This example is showing some basic inline tags are as follows:</p> <p><strong><b>Code:</b></strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h4>Cite tag</h4> <p><cite >EDUCBA</cite> What do you want to learn?</p> <h4>dfn tag</h4> <p> <dfn>Beautiful sunset</dfn></p> <h4>em tag</h4> <p>Oh dear sunrise <em>Are you Real???</em></p> <h4>q tag</h4> <p>Time<q>Its never seen, but teach us many things </q></p> </body> </html></pre> <p><strong><b>Output:</b></strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831810063.jpg" alt="Teg Sebaris dalam HTML" ></p> <h3>Conclusion</h3> <p>So, Inline tags create smaller code structure. It takes minimal space around the element. Different elements comes under Inline tags are <q>, <em>, <dfn>, <input>, <img>, <cite>, <map>, <sup>, <code>, <label>, <bdo>, <sub> etc. Inline tags never create a new line.</p><p>Atas ialah kandungan terperinci Teg Sebaris dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">map</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">kind</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="Tag angka HTML" href="http://m.php.cn/ms/faq/1796600093.html">Tag angka HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Tag angka HTML" href="http://m.php.cn/ms/faq/1796600095.html">Tag angka 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>