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="http://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="http://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="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/1609.html" title="深入浅析Bootstrap列表组组件" class="aBlack">深入浅析Bootstrap列表组组件</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="JavaScript函数柯里化详解" class="aBlack">JavaScript函数柯里化详解</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="JS密码生成与强度检测完整实例(附demo源码下载)" class="aBlack">JS密码生成与强度检测完整实例(附demo源码下载)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧" class="aBlack">JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧</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>