Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie die Unterschiede und die Verwendung von Alt und Titel in h5

Teilen Sie die Unterschiede und die Verwendung von Alt und Titel in h5

零下一度
零下一度Original
2017-05-19 14:04:555259Durchsuche

Alt und Titel sind zwei Attribute, die wir in unserer Arbeit häufig verwenden, aber wir haben ihre Unterschiede nie zusammengefasst. Lassen Sie uns nun die Verwendung beider zusammenfassen.

Gleiche Punkte: Beide lassen eine kleine schwebende Ebene schweben, um den Textinhalt anzuzeigen.

Unterschiede: 1.alt kann nur ein Attribut eines Elements sein, während title ein Attribut eines Elements oder einer Beschriftung sein kann, zum Beispiel: title</title> ; . <br><br>2. Das Alt-Attribut wird zur Angabe von Ersatztext verwendet. Es kann nur in Bild-, Bereichs- und Eingabeelementen (einschließlich Applet-Elementen) verwendet werden, um Benutzern Textbeschreibungen für Bilder auf Webseiten bereitzustellen kann nicht normal angezeigt werden. Es versteht Bildinformationen. Beachten Sie, dass Alt zum Ersetzen von Bildern und nicht zum Bereitstellen zusätzlicher Beschreibungstexte verwendet wird. Laut einigen SEO-Leuten hat die Verwendung des Alt-Attributs auch einen Suchmaschinenoptimierungseffekt, da Suchmaschinen Bildinformationen nicht direkt lesen können und Alt Textinformationen dafür bereitstellen kann, sodass es für Suchmaschinen benutzerfreundlicher ist. <br><br>Der Titel kann für jedes Element verwendet werden. Bewegen Sie die Maus über das Element und der Inhalt des Titels wird angezeigt, um den Effekt einer ergänzenden Erklärung oder Aufforderung zu erzielen. <br><br>Was jedoch häufig passiert, ist die gleichzeitige Verwendung der beiden Attribute title und alt im img-Tag. In der alten Version des IE-Browsers ist der Eingabeaufforderungstext, der angezeigt wird, wenn die Maus über das Bild fährt, der Alt-Inhalt, und das Titelattribut wird ignoriert. Dies hat viele Leute in die Irre geführt. Wenn Sie daher den Inhalt des Titels im IE anzeigen möchten, muss entweder das Titelattribut mit alt übereinstimmen oder der Alt-Inhalt muss leer sein („“ und keine Leerzeichen). In der neuen Version des IE (IE8 und höher) tritt diese Situation jedoch nicht mehr auf. <br>Wenn das img-Tag im a-Tag verschachtelt ist, wird außerdem das Titelattribut von img wirksam. </p> <p>【Verwandte Empfehlungen】<br></p> <p>1. <strong><span style="color: rgb(255, 0, 0);">Besondere Empfehlung</span></strong>: <a href="http://www.php.cn/xiazai/gongju/714" target="_self">Version „php Programmer Toolbox“ V0.1 herunterladen </a></p> <p>2. <a href="http://www.php.cn/course/list/13.html" target="_self">Kostenloses h5-Online-Video-Tutorial</a><a href="http://www.php.cn/course/list/12.html" target="_self"></a></p> <p>3. <a href="http://www.php.cn/course/372.html" target="_self">php.cn Original-HTML5-Video-Tutorial</a> <a href="http://www.php.cn/course/373.html" target="_self"></a></p> <p>4. <a href="http://www.php.cn/html5-tutorial-362587.html" target="_self">Die Lösung für das Problem, dass das H5-Video-Tag nur Ton, aber kein Video abspielen kann</a></p> <p>5.<a href="http://www.php.cn/html5-tutorial-362586.html" target="_self"> IIS MIME ist nicht registriert als MP4-Typ, die Lösung für die Unfähigkeit, das Vidoe-Tag zu erkennen</a></p><p>Das obige ist der detaillierte Inhalt vonTeilen Sie die Unterschiede und die Verwendung von Alt und Titel in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><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="Teilen Sie 10 klassische Animationstools in HTML5" href="http://m.php.cn/de/faq/362540.html">Teilen Sie 10 klassische Animationstools in HTML5</a></span><span>Nächster Artikel:<a class="dBlack" title="Teilen Sie 10 klassische Animationstools in HTML5" href="http://m.php.cn/de/faq/362554.html">Teilen Sie 10 klassische Animationstools in HTML5</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><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348281.html" title="Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite" class="aBlack">Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348372.html" title="Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)" class="aBlack">Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348373.html" title="Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9" class="aBlack">Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348374.html" title="Reguläre Ausdrücke und neue HTML5-Elemente" class="aBlack">Reguläre Ausdrücke und neue HTML5-Elemente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348469.html" title="So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen" class="aBlack">So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen</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/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>