Summary of front-end interview questions

We have shared dozens of css interview questions with you before. In this article, we will share with you a summary of front-end interview questions, hoping to help everyone.

HTML

1. What new content or APIs have been added to html5, and which ones have been used?

• HTML5 new input input type:

• email type

• url type

• number type provides the function of selecting numbers, in which the min attribute is set to the minimum Value, the max attribute sets the maximum value, the value attribute sets the current value, and the step attribute sets the value for each increase.

• range type, indicating the range field that limits numeric input

• Date and time type :date,month,week,time,datetime,datetime-local

• search type

• tel type

• ##color type

• HTML5 new form element

• datalist specifies the option list of the input field

• keygen provides a Reliable way to authenticate users

• output is used for different types of output

• There are more details that are not listed here. Please read this blog

---

##2. What is the difference between input and textarea?

• is a single-line text box. is a multi-line text box. <p><span style="font-size: 14px;"></span></p> </li></ul> <hr>3. Use a p to simulate the implementation of textarea? <p><span style="font-size: 14px;"></span></p> <ul class=" list-paddingleft-2"> <li>#First we need to know that p is highly adaptive, and the height will increase as the content increases. The textarea has a fixed size. If the height exceeds the specified height, a scroll bar will appear. <p><span style="font-size: 14px;"></span></p> </li> <li>p has an attribute called contenteditable. This can be achieved by setting the contenteditable attribute to true. The content of p is editable. <p><span style="font-size: 14px;"></span></p> </li> <li>#After making the content editable, set the specified height in css and set the overflow-y attribute to auto to realize the scroll bar. <p><span style="font-size: 14px;"></span></p> </li> </ul> <hr>4. How do mobile devices ignore the recognition of numbers on a page as phone numbers?<p><span style="font-size: 14px;"></span></p> <ul class=" list-paddingleft-2"> <li> Mobile devices often recognize a string of numbers as a phone number. The color and style of the numbers will change. Click to make a direct call. <p><span style="font-size: 14px;"></span></p> </li> <li>#Add the following code to turn off recognition. <p><span style="font-size: 14px;"></span></p> <pre class="brush:php;toolbar:false"><span style="font-size: 14px;">   <meta name = "format-detection" content = "telephone=no">  <br></span></pre> </li> </ul> <hr>CSS<h2><span style="font-size: 14px;"></span></h2>1. Left and right layout: fixed width on the left, adaptive on the right, many There are 3 methods<p><span style="font-size: 14px;"></span></p> <ul class=" list-paddingleft-2"> <li>Method 1: Set the left module to float left, and set the width of the right module to 100%<p><span style="font-size: 14px;"></span></p> </li> <li>Method 2: The parent container sets display: flex; the right part sets flex: 1. display: flex is set to a flexible box, and its sub-elements can set the flex value to control the proportion of the space it occupies. <p><span style="font-size: 14px;"></span></p> </li> <li>#Method 3: Use negative margin. Set the left and right parts to float left, and set the width to 100% for the right part. Set the left margin of the left part to negative 100%. In order to prevent the content of the right part from being covered, add a left margin (the width of the left part) to the right part. <p><span style="font-size: 14px;"></span></p> </li> </ul> <hr>2. What are the new features of CSS3?<p><span style="font-size: 14px;"></span></p> <ul class=" list-paddingleft-2"> <li>Choose of CSS3 Device<p><span style="font-size: 14px;"></span></p> </li> <ul class=" list-paddingleft-2" style="list-style-type: square;"><li>E:last-child / E :nth-child(n) / E :nth-last-child(n) The nth from the bottom Element <p><span style="font-size: 14px;"></span></p> </li></ul> <li>@Font-face attribute is used to load font styles. It can load server-side fonts and display them to the client, even if the client does not have Install the font<p><span style="font-size: 14px;"></span></p> </li> <li>Rounded corners: border-radius<p><span style="font-size: 14px;"></span></p> </li> <li>Flexible box mode display: flex. Wait for attributes<p><span style="font-size: 14px;"></span></p> </li> </ul> <hr>3.BFC and IFC<p><span style="font-size: 14px;"><p><span style="font-size: 14px;">Related recommendations: </span></p> <p><span style="font-size: 14px;"><a href="http://www.php.cn/js-tutorial-370735.html" target="_self">The latest Baidu front-end interview questions sharing</a></span></p> <p><a href="http://www.php.cn/div-tutorial-359954.html" target="_self">Web front-end interview questions Track 8 - Absolute positioning and relative positioning</a></p> <p><a href="http://www.php.cn/div-tutorial-370734.html" target="_self"> Share some examples of front-end interview questions</a></p> <p class="article fmt article__content"><br></p> <p class="comments-box-content"><br></p></span></p><p>The above is the detailed content of Summary of front-end interview questions. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Summary of basic CSS interview questions" href="https://m.php.cn/faq/386902.html">Summary of basic CSS interview questions</a></span><span>Next article：<a class="dBlack" title="Summary of basic CSS interview questions" href="https://m.php.cn/faq/386905.html">Summary of basic CSS interview questions</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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></html>