html 5 common interview questions-HTML Tutorial-php.cn

1. Common block-level elements Inline element p - the most commonly used block-level element dl - block-level element used with dt-dd form - interactive form h1 -h6- title hr - horizontal separator line ol – Ordered list p - paragraph ul - unordered list fieldset - form field set colgroup-col - form column grouping element table-tr-td table and row-cell pre - formatted text a – hyperlink (anchor) br - Line break i - italic em - emphasis img - picture input - input box label - form label span - commonly used inline container, defining text blocks strong - bold emphasis sub - subscript sup - superscript textarea - multi-line text input box u - Underline select - Project selection 2. Several conditions for realizing three points of text text-overflowAttribute is only: whether to display an omission mark when the text overflows, and does not haveOthers Definition of style attributes. To achieve the effect of producing an ellipse when overflowing, you need to define:
1. Container width: width: value; (px, %, both are acceptable)
2. Mandatory text Display in one line: white-space：nowrap;
3. Overflow content is hidden: overflow: hidden;
4. Overflow text displays ellipses: text-overflow: ellipsis;
Note: It must be a single line of text to set the overflow of this article! ! !

IE6+; chrome1.0+; safari3.1+ (firefox, opera are not supported yet)

3. Several conditions for vertical centering

To set an element to be vertically centered in a container, you must change the default display attribute value to inline-block;
and add the sibling element (ruler) (sibling element [ruler] style Set to vertical-align:middle;width:0;height:100%;display:inline-block;).

Three conditions:
1: The container (parent element) must be added text-align:center;
2: The current element must be converted into an inline block element (display:inline-block;) Then add vertical-align:middle;
3: Add the sibling element span after the current element (without carriage return); and perform vertical-align on span: middle;width:0;height:100%;display:inline-block

4. Replacement elements and non-replacement elements

Replacement elements and non-replacement elements

a) Replacement elements: The browser determines the specific display content of the element based on its tags and attributes. For example: the browser will read the image information and display it based on the value of the src attribute of the tag, but if you view the (x)html code, you cannot see the actual content of the image; the type of the tag Attributes determine whether to display input boxes, radio buttons, etc. (x), ,

, <select> in html are all replacement elements. These elements often have no actual content, that is, they are empty elements. The replacement element generates a box in its display, which is why some inline elements (img, input) can set the width and height. b) Non-replaceable elements (non-replacement elements): (x) Most elements of html are non-replaceable elements, that is, their content is directly displayed to the user (such as a browser). 5. What is a sprite map? What are the advantages? Image integration, integrate small single background images into one large background image. Advantages of image integration: 1) Reduce the number of requests to the server through image integration, thereby improving the page loading speed. 2) Reduce the size of pictures by integrating them. 6. What is <a href="http://www.php.cn/code/5005.html" target="_blank">css cascading</a> style sheet? <a href="http://www.php.cn/code/6066.html" target="_blank">Priority</a>How is the algorithm calculated? a. The priority order of importance and source from low to high is: 1) Browser default style 2) <a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id..... The weight of the selector 3) Inline style 4) Inline or external (writing order) 5)!important highest 7. The difference between display:none and <a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden The former: hidden but does not take up space The latter: hidden but takes up space 8, <a href="http://www.php.cn/code/6337.html" target="_blank">Clear float</a>Several ways hack1: Add the declaration overflow:hidden to the parent element; hack2: Add height to the parent element hack3: Add space below the floating element p, and add a declaration to the element: p{<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>:both; height:0; overflow:hidden;} hack4: Universal clearing float method p<a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;} 9. Which attributes can be <a href="http://www.php.cn/code/6064.html" target="_blank">inherited</a>? 1) Text related: <a href="http://www.php.cn/wiki/804.html" target="_blank">font-family</a>, <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>, <a href="http://www.php.cn/wiki/826.html" target="_blank">font-style</a>, <a href="http://www.php.cn/wiki/862.html" target="_blank">font-variant</a> ,<a href="http://www.php.cn/wiki/858.html" target="_blank">font-weight</a>,font,<a href="http://www.php.cn/wiki/865.html" target="_blank">letter-spacing</a>,<a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>,text-align,<a href="http://www.php.cn/wiki/867.html" target="_blank">text-indent</a>,<a href="http://www.php.cn/wiki/863.html" target="_blank"> text-transform</a>, <a href="http://www.php.cn/wiki/866.html" target="_blank">word-spacing</a> 2) List related: <a href="http://www.php.cn/wiki/954.html" target="_blank">list-style</a>-image, <a href="http://www.php.cn/wiki/955.html" target="_blank">list-style-position</a>, <a href="http://www.php.cn/wiki/956.html" target="_blank">list-style-type</a>, list-style 3) Color related: color 4) Transparency (child elements will inherit the opacity of the ancestor element, but cannot be changed) Note: font-size What is inherited is the size of the parent element, not the proportion. line-height When the parent element is a percentage or px value, the child element is the same as the parent element. When the parent element is normal or a number, the line-height of the child element is the font size of the child element multiplied by the number. 10. Positioning method position attribute value: <a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>, relative, absolute, fixed 1) static static is the default value, and the element is located In the document flow, it is displayed normally, ignoring the <a href="http://www.php.cn/wiki/904.html" target="_blank">top</a>, <a href="http://www.php.cn/wiki/906.html" target="_blank">bottom</a>, <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>, and <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a> attributes of the element. <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>The attribute is always 0. 2) relative relative positioning, retaining the position and size occupied by the element in the document flow, determined by the left/right/top/bottom attributes Relative moving distance, the original position is retained 3) absolute <a href="http://www.php.cn/code/6074.html" target="_blank">Absolute positioning</a>, separate the <a href="http://www.php.cn/wiki/60.html" target="_blank">object</a> from the document flow, use left/right/top/bottom The other attributes are positioned absolutely relative to the closest parent element with positioning settings; if not, it is based on the body object 4) fixed fixed is similar to absolute, but it is relative to the upper left corner of the window. Will not follow document scrolling. But if it is in a multi-frame page, it is relative to the upper left corner of the frame, not the upper left corner of the browser. 11. What is the difference between link and @import? 1. The difference between ancestors. Link belongs to the X<a href="http://www.php.cn/code/427.html" target="_blank">HTML tag</a>, and @import is completely a method provided by CSS. 2. In addition to loading CSS, the link tag can also do many other things, such as defining <a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a>, defining rel connection attributes, etc. @import can only load CSS 3. The difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link<a href="http://www.php.cn/wiki/231.html" target="_blank"></a> will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. So sometimes when browsing the page where @import loads CSS, there will be no style (it just flickers) 4. Difference in compatibility. Since @import was proposed by CSS2.1, old browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem. 5. Differences when using dom to control the style. When<a href="http://www.php.cn/code/7565.html" target="_blank">using javascript</a> to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom 12. What are the attribute values of positioning? Is each worth it? The role of each attribute value: static: default value. An element whose position is set to static displays normally, always at the position given by the document flow (static elements ignore any top, bottom, left, or right declarations). absolute: relative to the absolute positioning of the parent element, s floats out of the layout flow. It does not occupy space. It is what we call a layer. Its position is relative to the nearest positioned parent element. Position, you can directly specify the "left", "top", "right" and "bottom" attributes. If the parent is not positioned, html (root element) will be used. (Stacking order z-index: value) relative: It is an offset positioning relative to the default position. It can be moved to a position relative to its normal position by setting the left, top, right, and bottom values. (The movement occurs relative to its own starting position, [will not disrupt the normal layout flow] fixed: Absolute positioning relative to the browser is positioned relative to the specified coordinates of the browser window . The position of this element can be specified by the "left", "top", "right" and "bottom" attributes. The element will stay in that position regardless of whether the window is scrolled or not. 13. Write html5. <a href="http://www.php.cn/php/php-tp-append.html" target="_blank">Added 15 new labels for </a> <a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a>er nav footer <a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> aside article section figure datalist video audio fieldest legend label caption 14. 1. What is BFC? How is it generated? 1. Block-level formatting context 2. Adaptive two-column layout, clearing internal floats, and preventing vertical <a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>Overlap (put in two BFCs) 3. Root element, <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> attribute is not none, position is absolute or fixed, display is inline-block, table-cell, table-caption , flex, inline-flex, overflow are not visible 15. The difference between .px, em, rem, pt 1) px is actually pixel, use px to set the font When the size is large, it is relatively stable and accurate However, there is a problem with this method. When the user browses the web page we created in the browser, if the browser is zoomed, our web<a href="http://www.php.cn/code/7955.html" target="_blank"> Page layout </a> is broken. Therefore, it was proposed to use "em" to define the font of the web page. 2) em scales the font size based on the baseline em sets the font size relative to its parent element, so there will be a problem. To set any element, you may need to know its parent element. The size 3) rem is displayed relative to the font size of the root element rem is relative to the root element <html>, which means that we only need to determine a reference value in the root element 4) The size of pt is equal to 1/72 of 1 inch: it is a unit of measurement for text This measurement method comes from the printing-design background and is most suitable for media, but it is also widely used Monitor 16. What are the methods to achieve vertical + horizontal centering? 1.p{width:200px;height:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin :auto;} 2, p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px; } 17. Progressive enhancement and graceful degradation Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then perform effects and interactions for advanced browsers Wait for improvements and additional functions to achieve a better user experience. Graceful degradation: Build complete functions from the beginning, and then make them compatible with lower version browsers 18. What are the css selectors? 1) Wildcard selector * 2) Type selector/element selector a 3) Attribute selector input[type="button"]4) Containing selector p .code a 5) Sub-object selector                                                                                                                                                                                                                                                           ##5 Pseudo-class and pseudo-object selectors p :first-letter a<a href="http://www.php.cn/code/6014.html" target="_blank">:hover</a><a href="http://www.php.cn/wiki/970.html" target="_blank">10) Adjacent selector li+li</a><a href="http://www.php.cn/wiki/966.html" target="_blank"> 19. The difference between animation and transition</a>The same point: they both change the attribute value of the element over time. The difference: transition needs to trigger an <a href="http://www.php.cn/php/php-tp-incident.html" target="_blank"> event </a> (hover event or click event, etc.) before it can change its css properties over time; animation can also be used without triggering any events. Explicitly change the element's CSS attribute value over time to achieve an <a href="http://www.php.cn/code/9595.html" target="_blank">animation</a> effect. CSS3 animation requires clear animation attribute values. 20. What are the standard <a href="http://www.php.cn/code/6444.html" target="_blank">box model</a> and the weird box model. The difference between the two, how to implement the weird box model, and the standard sum model Standard box model: content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> Weird box model: content a When calculating the width of the box, add border and padding and another one without adding Weird box model implementation: box-sizing:border-box Standard box model: box-sizing:content-box 21. How to center an element up, down, left, and right within the parent element 1. css: .box{display:flex;width:800px;height:<a href="http://www.php.cn/code/4221.html" target="_blank">300</a>px;just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-content:center} .box p{align-self:center} html:   2. css: .box{display:flex;width: 800px;height:800px;justify-content:center;align-items:center;} html: 22. What are the commonly used formats for video and audio? For <a href="http://www.php.cn/code/6707.html" target="_blank">video</a>: video/ogg video/mp4 video/webm for<a href="http://www.php.cn/code/6093.html" target="_blank"> Audio</a>: audio/ogg audio/mpeg 23. Briefly explain the attributes and attribute values of the <a href="http://www.php.cn/code/10723.html" target="_blank">flexible box model</a> (write at least 6 attributes) display:flex; flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: justify-content: align-items: align-self: align-content: flex -wrap: 23. Briefly introduce the usage of linear gradient, radial gradient and repeated gradient Linear gradient: linear-gradient() Radial gradient: radial-gradient () Repeating linear gradient: repeating-linear-gradient() Repeating radial gradient: repeating-radial-gradient() 24. Briefly introduce the usage of animation animation consists of two parts: animation: animation name animation execution time animation type animation delay time animation repetition number animation direction; @<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>frames animation name 25, the main properties of css3D And attribute value 1. Depth of field: perspactive:number; If you want the object to be seen larger, then set the value smaller. If you want to see the object smaller, set the value larger 2. 3D stage: transform-style:preserve-3d; 3. translateZ() rotateZ() scaleZ() 26. The main attributes in 2D transform:translate() rotate() skew() scale() transform-origin: 27. Briefly introduce the attributes and attribute values of transition animation transition :Attribute name (you can use <a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a>) animation execution time animation type animation delay time 28, new <a href="http://www.php.cn/code/6021.html" target="_blank">background attribute in css3</a> <a href="http://www.php.cn/code/865.html" target="_blank">background-origin</a>:Background origin <a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>:Background clipping <a href="http://www.php.cn/code/872.html" target="_blank">background-size</a>:<a href="http://www.php.cn/code/8294.html" target="_blank">Background image## The size of </a>#The following are the three values of background-size length specifies the size of the background image. The first value is width, the second value is height. Percentage(%) Set the background image size as a percentage cover Expand the background image to a large enough size so that the background image completely covers the background area 29. Write the core of the five major browsers and their representative works *Trident: IE, Maxthon, Tencent, Theworld, 360 Browser *Gecko:: The representative work Mozilla Firefox is an open source project *Webkit: The representative work Safari and Chrome are an open source project. *Presto: Representative work Opera, Presto is a browser layout engine developed by Opera Software. It is also recognized as the fastest rendering engine in the world. *Blink: Browser layout engine developed by Google and Opera Software, released in April 2013. 30. Write down several common bugs and solutions in IE6 (at least 4) 1) The picture has a border BUG Solution: Add border:0; or border:0 to the picture none; 2. Double floating direction (double margin) Solution: display: inline 3. Default height (IE6, IE7) Solution: Add declaration to element: font-size :0; Option 2: Add a statement to the element: overflow:hidden; 4. The default sizes of button elements are different. Option: Use a tag to simulate 31. IE’s <a href="http://www.php.cn/code/120.html" target="_blank"> filter </a>What? 1, _ Underline attribute filter 2, \9: IE version recognition; other browsers do not recognize syntax: selector {attribute: attribute value\9;} 3, \ 0 : Recognized by IE8 and above; not recognized by other browsers Syntax: selector {attribute: attribute value\0;} 32. Element height collapse solutions (at least 4 types) hack1: Add a declaration to the parent element overflow:hidden; hack2: Add a height to the parent element hack3: Add an empty p below the floating element, and add a declaration to the element: p{clear:both ; height:0; overflow:hidden;} hack4: universal clear floating method p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility: hidden;}</article><ul class=" list-paddingleft-2"></ul>The above is the detailed content of html 5 common interview questions. For more information, please follow other related articles on the PHP Chinese website!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Statement：<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">Previous article：<a class="dBlack" title="css multi-line ellipsis compatibility writing method" href="https://m.php.cn/faq/359949.html">css multi-line ellipsis compatibility writing method</a>Next article：<a class="dBlack" title="css multi-line ellipsis compatibility writing method" href="https://m.php.cn/faq/359951.html">css multi-line ellipsis compatibility writing method</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><a href="https://m.php.cn/article.html" class="bBlack">See more</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Public welfare online PHP training，Help PHP learners grow quickly！</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"> © php.cn All rights reserved
 </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("");
});
$(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>