Front-end development questions (1)

How do you understand the semantics of the HTML structure?

1. Clear structure of the page when the style is removed or lost;
2. The screen reader (if a visitor has a visual fault) will "read" Your webpage based on your mark;
3. devices such as PDAs and mobile phones may not be able to render webpages like normal computer browsers (usually because these devices
Weak CSS support );
4. Search engine crawlers also rely on tags to determine the weights of context and keywords;
5. Whether your page is easy to understand is very important for crawlers, because crawlers will largely ignore the tags used for presentation, but focus only on semantic tags;
6. Facilitate team development and maintenance.

How to trigger the strict mode and hybrid mode declared by the Doctype document to differentiate their significance?
1. How to trigger two modes:
Adding the xml header declaration can trigger the Quirks mode of the IE browser. After the triggering, the browser resolution method is the same as IE5.5, and has the same bugs and other problems as IE5.5, as is the behavior (Javascript.
2. IE6 trigger: add the XML declaration before the xhtml doctype,
<? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. IE7 trigger: Add HTML comments between XML declaration and xhtml doctype.
<? Xml version = "1.0" encoding = "UTF-8"?>
<! --... And keep IE7 in quirks mode -->
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4. Both IE6 and IE7 can be triggered: Add HTML comments to the DOCTYPE header of HTML4.01.
<! -- Quirks mode --> <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
5. Add <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> triggers the "weird mode"
6. When the DTD declaration is not used or the DTD declaration below HTML4 (excluding HTML4) is used, basically all browsers use quirks mode for rendering.

Let's talk about what needs to be considered for SEO from the previous perspective?
1. Understand how search engines capture webpages and how to index webpages;
2. Meta tag Optimization;
3. How to select keywords and place them on the webpage;
4. Understand the main search engines;
5. Main internet Directories
6. Pay-as-you-go search engines;
7. Search Engine Logon;
8. Link Popularity );
9. Use tags properly.

We know that CSS files can be introduced through external links. What are the methods for introducing CSS to external links? Are there any differences in the performance of these methods?
There are three most common methods to introduce CSS:
1. Add <link rel = "stylesheet" type = "text/css" href = "my.css"/> to the header to introduce external CSS files;
2. Add the header
<Style type = "text/css">
Div {margin: 0; padding: 0; border: 1px red solid ;}
</Style>
Third: Add <div style = "border: 1px red solid;">

What is CSS Sprite? Let's talk about its advantages and disadvantages.
CSS sprites is a processing method for web page image applications. It allows you to include all the sporadic images on a page
To reduce the number of requests to the server and increase the access speed.
1. Advantages:
(1) The use of CSS Sprites can effectively reduce http requests on webpages, greatly improving the page performance, which is also an advantage of CSS Sprite, it is also the main reason for its widespread dissemination and application;
(2) it solves the problem of web designers in naming pictures. You only need to name the pictures in a collection, and you do not need to name every small element, this improves the webpage production efficiency.
(3) easy to change the style. You only need to modify the color or style of the image on one or more images, and the style of the entire webpage can be changed. It is easy to maintain.
2. Disadvantages:
(1) When merging images, You need to combine multiple images into one picture in an orderly and reasonable manner, and leave enough space to prevent unnecessary background from being displayed in the section; these are okay. the most painful thing is the Adaptive Page under the wide screen and high-resolution screen. If your picture is not wide enough, it is easy to break the background;
(2) CSS Sprites is troublesome during development. You need to use photoshop or other tools to calculate the exact position of each background Unit. It is not difficult, but complicated.
(3) CSS Sprites is difficult to maintain. If the page background is slightly changed, you need to modify the merged image without any changes, in this way, you can avoid modifying more css. If the image cannot be placed in the original place, you can only (preferably) Add the image, so that the image is added and css needs to be changed.

Defines the rounded corner recognized by a webkit kernel Browser Based on CSS3 (random size)
-Moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px;

What are the elements in the row? What are the block-level elements? CSS box model?
Row elements: a B span I em img input select strong
Level elements: div ul ol li dl dt dd h1 h2 h3 h4 p
Box Model: margin border padding width

What are the three layers of front-end pages? What is the role?
Web pages are divided into three layers: structural layer, presentation layer, and behavior layer.
1. The structurallayer is created by Markup languages such as HTML and XHTML. Tags, that is, words that appear in angle brackets, make semantic meanings of web content. These tags do not contain any information about how to display the content. For example, the P tag expresses the syntax "this is a text segment ."
2. The presentation layer of the webpage is created by CSS. CSS answers the question "How to display relevant content.
3. behaviorlayer is responsible for answering the question "How should content respond to events. This is a field dominated by the Javascript language and DOM.

What is the difference between get and post of action in form in html?

1. Get is used to obtain data from the server, while Post is used to transmit data to the server.
2. Get adds the data in the form to the URL pointed to by action in the form of variable = value, and the two use "?" And each variable is connected by "&". Post puts the data in the form data body and passes the data to the URL indicated by the action according to the corresponding variables and values.
3. Get is insecure because data is stored in the request URL during transmission, nowadays, many existing servers, proxy servers, or user proxies record the request URL to a log file and place it in a certain place, so that some private information may be seen by a third party. In addition, you can directly view the submitted data in the browser. Some internal messages are displayed in front of the user. All Post operations are invisible to users.
4. Get transmission has a small amount of data, mainly because it is restricted by the URL length; while Post can transmit a large amount of data, so only Post can be used for uploading files (of course, there is another reason, as mentioned later ).
5. Get restricts that the dataset value of Form forms must be ASCII characters, while Post supports the entire iso000046 character set.
6. Get is the default Form method.

What is the difference between the id of an html element and the class?
Id and class are two common attributes in a webpage. They work together to enrich the entire page. When we define a style for an element, both are available, but there is a difference.
1. When writing in the css style sheet, "#" should be added to the id prefix, and "." should be added to the class prefix.
2. The id attribute can only be used once when being written on a page, while the class can be used repeatedly.
3. id is used as an element label to distinguish between different structures and contents. As a style, class can be applied to any structure or content.
4. General Layout principle: id first defines the structure and content and then defines the style for it. On the contrary, the class defines the style first, and then applies the style to different structures and content on the page according to different requirements.
5. Currently, browsers allow multiple IDs with the same attribute values on the same page, which can be normally displayed. However, when javascript controls elements by id, an error occurs.
6. In practical application, the class is often used in Text sections and page modifiers, while the id is mostly used in the grand layout and design of the Inclusion block, or the style of the Inclusion box.

What Is Ajax?
Ajax is not a technology. It is actually several technologies, each of which has its own unique characteristics. Together, Ajax becomes a powerful new technology. Ajax includes:
1. XHTML and CSS
2. Use the Document Object Model for Dynamic Display and Interaction
3. Use XML and XSLT for Data Interaction and operations
4. Use XMLHttpRequest to receive asynchronous data
5. bind them together using JavaScript

In which browser have you tested the page? What are the kernels of these browsers? What are the compatibility of browsers that we often encounter? Why? What is the solution?
1. DOCTYPE affects CSS Processing
2. FF: After padding is set, the div will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.
3. FF: supported! Important, IE is ignored, available! Important sets a special style for FF
4. vertical center problem of div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; then insert the text, and the vertical center is finished. The disadvantage is that you need to control the content rather than line feed.
5. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed ,! The important attribute IE cannot be identified, but other browsers can.

[Html5] offline storage
An important feature of H5 is offline storage. The so-called offline storage is to save some resource files locally, so that subsequent page reloading will use local resource files, you can continue to access web applications offline, and update and delete offline storage operations by means of updating related files or using related APIs;

H5 offline storage uses a manifest file to indicate which files need to be stored, as shown in

Advantages and disadvantages of iframe
1. Disadvantages:
The biggest drawback of using a framework in a webpage is that the search engine's "Spider" program cannot interpret such a page. When the "Spider" program encounters a webpage composed of several frameworks, they only see the framework and cannot find the link. Therefore, they will think that the website is a dead site and quickly turn away. This is a disaster for a website. If you want to sell products, you need customers. If you want customers, you must first let people access your website. To do so, you do not have to turn to search engines. You spent a lot of time, energy, and money opening an online store, but you didn't want search engines to search for you. It's like opening a retail store, but all the windows are painted black, it also does not have any signboard.
2. Advantages:
From the above, we can find that the disadvantage of using the ifame framework is that it cannot be crawled by search engines. But everything always has two sides. Its disadvantage may also be its advantages. With this, we can display some of the content on our site that needs to be viewed by our users, but it does not need to be crawled by the search engine using the ifame framework, in this way, ifram can play a real effect, and the Code on our site can be greatly simplified. For example, I added Weibo live broadcasting information as mentioned above, we do not need to provide these Weibo information to search engines, but we need to provide an interactive experience with visitors, as shown in. If we use the ifame framework to embed Weibo information, it is not only easy to add the site's Weibo live broadcast platform, but also very streamlined code.
Iframe is good to be able to display all the original web pages intact, but if used on the home page, it is the most annoying search engine. so even if your website is doing well, it cannot rank well! If it is a dynamic web page, it is better to use include! However, the Summary: Advantages of the framework
When reloading a page, you do not need to reload the entire page. You only need to reload a frame page on the page (which reduces data transmission and increases the download speed of the page)
Easy to create navigation bar
Disadvantages of the framework
It will generate many pages and is not easy to manage
Hard to print
The browser's back button is invalid.
The code is complex and cannot be indexed by some search engines
Most small mobile devices (PDA mobile phones) cannot completely display the frame
Multiple frameworks add http requests to the server.
Due to the many shortcomings above, it does not conform to the standard webpage design concept and has been abandoned by the standard webpage design.

Tip: currently, all the advantages of the framework can be implemented using Ajax, so there is no need to use the framework.

CSS Box Model Principle
1. The W3C box model has the following scopes: margin, border, padding, and content. The content part does not contain other parts.
2. The range of the IE box model also includes margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model contains border and pading.

Difference between CSS display: none and visibility: hidden
Visibility: hidden, but its position is retained during browsing. CSS display: none is regarded as nonexistent and not loaded!