Zusammenfassung der Front-End-Interviewfragen

Wir haben bereits Dutzende von CSS-Interviewfragen mit Ihnen geteilt. In diesem Artikel werden wir Ihnen eine Zusammenfassung der Front-End-Interviewfragen mitteilen, in der Hoffnung, Ihnen zu helfen.

HTML

1 Welche neuen Inhalte oder APIs wurden zu HTML5 hinzugefügt und welche wurden verwendet?

• HTML5 neuer Eingabe-Eingabetyp:

• E-Mail-Typ

• URL-Typ

• Zahlentyp bietet die Funktion zum Auswählen von Zahlen, in denen das Min-Attribut festgelegt ist Der Mindestwert, das Max-Attribut legt den Maximalwert fest, das Value-Attribut legt den aktuellen Wert fest und das Step-Attribut legt den Wert für jede Erhöhung fest.

• Bereichstyp, der das Bereichsfeld angibt, das die numerische Eingabe begrenzt

• Datum und Uhrzeit Typ: Datum, Monat, Woche, Uhrzeit, Datum/Uhrzeit, Datum/Uhrzeit-lokal

• Suchtyp

• Tel-Typ

• Farbtyp

• HTML5 neues Formularelement

• datalist gibt die Optionsliste des Eingabefelds an, das

• keygen bereitstellt eine zuverlässige Möglichkeit zur Authentifizierung von Benutzern

• Ausgabe für verschiedene Ausgabearten

• Es gibt weitere Details, die hier nicht aufgeführt sind. Bitte lesen Sie diesen Blog

---

2. Was ist der Unterschied zwischen Eingabe und Textbereich?

• ist ein einzeiliges Textfeld. ist ein mehrzeiliges Textfeld. </span></p></li></ul> <hr> <p><span style="font-size: 14px;">3. Verwenden Sie ein p, um die Implementierung von textarea zu simulieren? </span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">Zuerst müssen wir wissen, dass p sehr anpassungsfähig ist und die Höhe mit zunehmendem Inhalt zunimmt. Der Textbereich hat eine feste Größe. Wenn die Höhe die angegebene Höhe überschreitet, wird eine Bildlaufleiste angezeigt. </span></p></li> <li><p><span style="font-size: 14px;">p hat ein Attribut namens contenteditable. Dies kann erreicht werden, indem das contenteditable-Attribut auf true gesetzt wird. Der Inhalt von p ist editierbar. </span></p></li> <li><p><span style="font-size: 14px;">Nachdem Sie den Inhalt bearbeitbar gemacht haben, legen Sie die angegebene Höhe in CSS fest und setzen Sie das Attribut overflow-y auf auto, um die Bildlaufleiste zu realisieren. </span></p></li> </ul> <hr> <p><span style="font-size: 14px;">4. Wie ignorieren mobile Geräte die Erkennung von Nummern auf der Seite als Telefonnummern?</span></p> <ul class=" list-paddingleft-2"> <li> <p><span style="font-size: 14px;">Mobile Geräte erkennen oft eine Reihe von Nummern als Telefonnummer. Die Farbe und der Stil der Nummern ändern sich. Klicken Sie hier, um einen direkten Anruf zu tätigen. </span></p> </li> <li><p><span style="font-size: 14px;">Fügen Sie den folgenden Code hinzu, um die Erkennung zu deaktivieren. </span></p></li> </ul> <pre class="brush:php;toolbar:false"><span style="font-size: 14px;">   <meta name = "format-detection" content = "telephone=no">  <br></span></pre> <hr> <h2><span style="font-size: 14px;">CSS</span></h2> <p><span style="font-size: 14px;">1. Linkes und rechtes Layout: feste Breite auf der linken Seite, rechts adaptiv, Nicht weniger als 3 Methoden </span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">Methode 1: Stellen Sie das linke Modul so ein, dass es nach links schwebt, und stellen Sie die Breite des rechten Moduls auf 100 % ein </span></p></li> <li><p><span style="font-size: 14px;">Methode 2: Der übergeordnete Container setzt display: flex; der rechte Teil setzt flex: 1. display:flex ist auf eine flexible Box eingestellt, und ihre Unterelemente können den Flex-Wert festlegen, um den Anteil des von ihr eingenommenen Platzes zu steuern. </span></p></li> <li><p><span style="font-size: 14px;">Methode 3: Negative Marge verwenden. Stellen Sie den linken und rechten Teil so ein, dass er nach links schwebt, und stellen Sie die Breite für den rechten Teil auf 100 % ein. Stellen Sie den linken Rand des linken Teils auf negative 100 % ein. Um zu verhindern, dass der Inhalt des rechten Teils verdeckt wird, fügen Sie dem rechten Teil einen linken Rand (die Breite des linken Teils) hinzu. </span></p></li> </ul> <hr> <p><span style="font-size: 14px;">2. Was sind die neuen Funktionen von CSS3?</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 14px;">Wählen des CSS3-Geräts</span></p></li> <ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p><span style="font-size: 14px;">E: letztes Kind / E: n-tes Kind (n) / E: n-tes Kind (n) n-tes from last Element </span></p></li></ul> <li><p><span style="font-size: 14px;">Das @Font-face-Attribut wird zum Laden von Schriftarten auf der Serverseite verwendet. Es kann serverseitige Schriftarten laden und diese dem Client anzeigen. auch wenn der Client die Schriftart nicht installiert </span></p></li> <li><p><span style="font-size: 14px;">Abgerundete Ecken: Randradius</span></p></li> <li><p><span style="font-size: 14px;">Flexible Box-Modus-Anzeige: Flex. usw. Attribute</span></p></li> </ul> <hr> <p><span style="font-size: 14px;">3<p><span style="font-size: 14px;">Verwandte Empfehlungen: </span></p> <p><span style="font-size: 14px;"><a href="http://www.php.cn/js-tutorial-370735.html" target="_self">Die neuesten Baidu-Frontend-Interviewfragen zum Teilen</a></span></p> <p><a href="http://www.php.cn/div-tutorial-359954.html" target="_self">Webfront -End-Interviewfragen Track 8 – Absolute Positionierung und relative Positionierung </a></p> <p><a href="http://www.php.cn/div-tutorial-370734.html" target="_self">Teilen Sie einige Beispiele für Front-End-Interviewfragen</a></p> <p class="article fmt article__content"><br></p> <p class="comments-box-content"><br></p></span></p><p>Das obige ist der detaillierte Inhalt vonZusammenfassung der Front-End-Interviewfragen. 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="Zusammenfassung der grundlegenden CSS-Interviewfragen" href="https://m.php.cn/de/faq/386902.html">Zusammenfassung der grundlegenden CSS-Interviewfragen</a></span><span>Nächster Artikel：<a class="dBlack" title="Zusammenfassung der grundlegenden CSS-Interviewfragen" href="https://m.php.cn/de/faq/386905.html">Zusammenfassung der grundlegenden CSS-Interviewfragen</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://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="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</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><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>