HTML
1. What is html?
Hypertext Markup Language, a standard markup language for creating web pages
2. What is the difference between HTML and XHML
HTML is a language based on WEB web page design, XHTML is a markup language based on XML
3. Briefly describe your understanding of HTML semantics?
According to the content structure, choose the appropriate label code semantics, which can better facilitate the analysis of browsers and search engines. Why Semantic. It can better display the page without css and improve the user experience, such as the title attribute of the picture, etc., which is conducive to SEO and convenient for developers to read
4. What are the three layers of the browser page, what are they, and what are their functions? The
browser page is divided into three layers: structure layer, presentation layer, and behavior layer,
corresponding to: html, css, and js
functions: html is used to realize the structure of the page, css is used to describe the performance and style of the page, and js is used for the interaction of the page and the realization of business logic
5. What is the role of Doctype? What is the difference between strict mode and promiscuous mode?
The user declares the document and tells the browser what document standard to use to parse the page.
Strict mode: also known as general mode, the browser will render the document in the highest supported mode,
promiscuous mode: simulate the behavior of old browsers in a looser backward compatible mode to prevent the site from running.
Under what circumstances will there be mixed mode, when the Doctype does not exist or the form is incorrect, it will lead to the emergence of mixed mode
6. What is Quirks mode? What is the difference between it and the Standards mode?
Before ie6, if the DTD is not declared, the browser will be forward compatible and adopt the previous layout method, which is the Quirks mode.
Difference:
box model: in standard mode, the width of the box model is the value width, and the height is the value height. In quirks mode, the width of the box also includes padding and border. , after setting the percentage height for the parent element, setting the percentage height for the child element also does not take effect, and it will take effect in Quirks
mode
7. When the page imports styles, what is the difference between using link and @import?
- In addition to loading css, the link tag can also define RSS and ref connection attributes. @import can only load css
- Loading order: the link tag can be loaded when the page is rendered, and @import needs to wait for the page to be rendered before it can be loaded.
- Compatibility issue: link is an html tag and there is no compatibility issue. @import is proposed by css2.1 and requires ie or above to be compatible
- js usage problem: the css introduced by link can use js to modify the style, but the one introduced by @import cannot be modified
8. What are the inline elements? What are block-level elements? What are the empty (void) elements?
Inline elements: ab span select input lable
Block-level elements: div table p th tr td ol ul li h1-h6
Empty elements: br hr
9. Tell me about your understanding of the browser kernel?
Mainly divided into: rendering engine and js engine
Rendering engine; mainly responsible for grabbing the content html or xml of the webpage and adding css for page rendering. Please input it to the browser or printer in the form of computer webpage. Different browsers have different kernels and different rendering effects.
js engine: responsible for the interaction and animation effects of web pages and the execution of business code.
At the beginning, the distinction between engines was not clear, and the js engine became more and more independent. Later, the kernel tended to be a rendering engine
10. What are the common browser kernels?
webkit: commonly used in old versions of chrome and safria,
Trident: also known as IE kernel, mainly used for IE reuse, Baidu browser and some browsers in compatibility mode
presto: mainly used by Opera browser, which is recognized as the fastest rendering engine in the world. But after 2013, Opera joined the Google camp and abandoned Presto
Blink: The browser typesetting engine developed by Google and Opera Software Representative: chrome and Opera
Gecko: Representative Firefox Firefox
11. What is the difference between title and h1, b and strong, i and em?
The difference between title and h1
title is the title of the web page, which is displayed in the browser tab bar, and directly tells the search engine and the user
the theme of the website.
The difference between b and strong
b: Entity tag, used to make the text bold
strong: Logical tag, used to strengthen the tone of the text .
Difference:
The b tag has no physical meaning, but only gives the text a bold effect
. Suggestion: In order to comply with the CSS3 specification, b should be used as little as possible
and use strong instead. The
difference between i and em
. i: Entity label, which makes the font tilt
em: Logic label, which emphasizes the role of text. The default emphasis style can be modified using css
12. What are the disadvantages of iframe?
Blocking the page onload event
is not conducive to SEO, and the device compatibility is poor.
The iframe and the home page share the link pool. The browser has a limit on the number of the same connection, so it will affect the parallel loading of the page. (The solution is to dynamically modify the src of the iframe, and then dynamically assign the value after the main page is loaded, and then load it)
The iframe will increase http requests, which is not advisable for large websites
13. What can the Page Visibility API be used for?
document.visibilityState
has three states
visible
page content can be at least partially visible. Effectively, this means that the page is the foreground tab of a non-minimized window.
hidden:
The page content is not visible to the user. In practice, this means that the document is part of a background tab or minimized window, or that the OS screen lock is active.
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
})
You can know whether the page is in the background state or device lock screen state, or minimized state, when the browser opens multiple pages and is not on the current page.
14. Realize drawing a 1px high line without using a border, which can maintain the same effect in Quirksmode and CSSCompat modes of different browsers.
<div style="width: 100%;height: 1px;"></div>
HTML5
1. What are the new features of html5 and which elements have been removed? How to deal with browser compatibility issues of HTML5 new tags? How to distinguish HTML and HTML5?
New features of HTML5
1. Semantic tags: header. footer. nav. section. article
2. Drawing: canvas
3. Media playback: video audio
4. Geographic location: Geolocation (geolocation)
5. Local storage: localStorage .sessionStorage
6. Form controls: calendar, date, time, email, url, search, etc.
Removed
big. center. font. frame. applet. etc. Tabs
Compatibility
The latest versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 will support certain HTML5 features.
Dealing with browser compatibility issues
(1), using document to create tags
Use tags to judge the js that IE9 loads html. Load letskillie6.zh_CN.pack.js in ie6
(2) Use html5shim: call the following code in:
1.<!--[if lt IE 9]>
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3.<![endif]-->
b）使用kill IE6: 在</body>之前调用以下代码：
1.<!--[if lte IE 6]>
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
3.<![endif]-->
Distinguish html5 The
<!doctype> statement must be on the first line in the HTML5 document, and the html statement is relatively long.
Subsequent updates ---------