Heim > Artikel > Web-Frontend > So verwenden Sie das Span-Tag in HTML

So verwenden Sie das Span-Tag in HTML

php中世界最好的语言Original: 2017-11-22 14:44:215038Durchsuche

In diesem Artikel erfahren Sie, wie Sie das Span-Tag in HTML verwenden, vier Anweisungen zur Verwendung des Span-Tags und Hinweise Zum Schluss gibt es eine Zusammenfassung über Span, werfen wir einen Blick darauf

Syntax:

<span>内容</span>

Anweisungen zur Verwendung von Span-Tags

1) In der DIV+CSS-Schnittlayout-Rekonstruktionstechnologie wird neben dem div-Tag auch häufig span verwendet Tag-Layout

2) Es gibt nichts Besonderes an span selbst. Im Allgemeinen kann dieses Tag-Layout für andere Layouts verwendet werden.

3) Sie können den gewünschten Verschönerungseffekt auch erzielen, indem Sie verschiedene Stile für das Span-Tag-Objekt festlegen.

4), Merkmale, normalerweise ein Spannenpaar ohne Stilsatz, Höhe und Breite sind adaptive Inhalte, der von diesem Tag eingenommene Abstandsraum ist so groß wie die Kapazität.

Span-Tag-Anwendungsfall

<span>内容内容内容</span> 
<span>我们的网址www.php.cn</span>

Span ist ein häufig verwendetes Layout-Tag in HTML. Der Unterschied zum div-Tag besteht darin, dass span den Höhen- und Breitenraum mit dem Inhalt einnimmt (nahe der Inhalt), während ein div-Tag eine Zeile einnimmt

Ich glaube, dass Sie durch diesen Artikel bereits genug Verständnis für das SPAN-Tag haben. Bitte achten Sie auch weiterhin auf andere Updates auf dieser Website .

Verwandte Lektüre:

Verwendung von Float in der CSS-Operation DIV

Welche Funktionen haben HTML-Kommentare?

So löschen Sie Floating in CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Span-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：So verwenden Sie

in HTML</a></span><span>Nächster Artikel：<a class="dBlack" title="So verwenden Sie <textarea> in HTML" href="http://m.php.cn/de/faq/381651.html">So verwenden Sie <textarea> 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/1796678155.html" title="Wie steuere ich Eingabebreiten in Bootstrap-3-Formularen, ohne das Layout zu beeinflussen?" class="aBlack">Wie steuere ich Eingabebreiten in Bootstrap-3-Formularen, ohne das Layout zu beeinflussen?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796678197.html" title="Wie kann ich Remote-Inhalte in Bootstrap 4 Modal laden?" class="aBlack">Wie kann ich Remote-Inhalte in Bootstrap 4 Modal laden?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796678258.html" title="Wie kann ich die Inkrementpfeile einer Eingabe vom Typ Zahl mithilfe von CSS anpassen?" class="aBlack">Wie kann ich die Inkrementpfeile einer Eingabe vom Typ Zahl mithilfe von CSS anpassen?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796678278.html" title="Können Sie mehrere :before-Pseudoelemente auf dasselbe Element anwenden?" class="aBlack">Können Sie mehrere :before-Pseudoelemente auf dasselbe Element anwenden?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796678281.html" title="Warum funktioniert „Höhe: 100 %“ in Flexbox-Spalten in Chrome nicht wie erwartet?" class="aBlack">Warum funktioniert „Höhe: 100 %“ in Flexbox-Spalten in Chrome nicht wie erwartet?</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><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>