Keep the mood of the empty cup with the new knowledge
HTML and CSS which browsers did you do to test the pages? What are the cores of these browsers?| Browser name | Kernel |
|---|---|
| Ie | Trident |
| Firefox (Firefox) | Gecko |
| Safari | Webkit |
| Opera | Used to be Presto and has now switched to Google Chrome's Blink kernel |
| Chrome (Google) | Blink (co-developed with Opera software based on Webkit,google) |
<! The doctype> declaration is located in the first position in the document, before the label, which tells the browser which HTML or XHTML specification to use for the document. (Focus: Tell the browser which specification to parse the page in)
What is the Quirks mode? What is the difference between it and the standards model?Starting with IE6, introduced the standards mode, in standard mode, the extent to which the browser attempts to properly handle a standard document in a specified browser.
Before the IE6 CSS is not mature enough, so IE5 and so on before the browser support for the CSS is poor, IE6 will provide better support for CSS, and then the problem comes, because there are many pages are based on the old layout of the way to write, if IE6 support CSS will display these pages are not normal, how to That is, to ensure that the existing page is not broken, but also provide a new rendering mechanism?
We often encounter such problems when writing programs, how to ensure that the original interface is not changed, to provide more powerful features, especially when the new features are incompatible with the old features. A common practice when encountering this problem is to add parameters and branches, that is, when a parameter is true, we use the new function, and if the argument is not true, use the old function so that it does not break the original program and provide new functionality. IE6 is also similar to doing this, it takes the DTD as this parameter, because the current page is not going to write the DTD, so IE6 assumes that if the DTD is written to imply that the page will be a better layout for CSS support, and if not, the use of compatibility before the layout, which is Quirks Mode (quirks mode, weird mode, weird mode)
Instance:
<!DOCTYPE html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The first: Indicates that the page is in compliance with the HTML5 specification, the browser will choose standards Mode, this DOCTYPE is the most recommended one.
The second type: The browser will also choose standards Mode, although there are some differences between the first DOCTYPE, but can almost be considered the same
Third: The browser will choose almost standards Mode, it is necessary to note that the cleavage of this page will need to rewrite the HTML5 specification, then the table label segmentation picture problem may be confused.
When the DOCTYPE is missing (not noted, written incorrectly), the browser will choose Quirks mode, which is very not recommended, we should try to avoid Quirks mode
Difference:
Overall there are three different aspects of layout, style parsing, and scripting execution.
Early Internet Explorer (ie 6) counted the box's padding and border into the box's size, a model known as the IE box model. In the IE box model
Box width = content width + padding left + padding right + border left + border right
Box width = content width + padding left + padding right + border left + border right
In the standard box model, box size is the size of content
- Box width = content width,box height = content Height
This difference will result in a large difference in all block-level elements when the page is drawn, so the pages in the two different document modes differ greatly.
Sets the height of the element in the row, and in standards mode, <span> setting the width and height of the elements in the line will not take effect, and in quirks mode, it will take effect.
Sets the height of a percentage, in standards mode, where the height of an element is determined by the content it contains, and if the parent element does not have a percentage set height, the child element sets a percentage height that is invalid.
margin:0 Auto is centered horizontally, and using margin:0 Auto enables the element to be centered horizontally in standards mode, but fails in quirks mode.
In quirks mode, setting a margin for the body is not valid.
By default, IE has a vertical scroll bar, although it is inactive (dull state) when nothing can be scrolled, and in quirks mode you can set body {Overflow:auto;} Delete it (when not needed), but in standard mode you still need to add HTML {overflow:auto;}
The default floating picture's horizontal margin is 3 pixels (not 0).
Font properties are not inherited from the body or other enclosing elements into the table. Especially font-size. font, color, line height is also possible.
(There are many, the answer is not important, the key is to see whether he answered these are their own experience encountered, or is said to be
Look at the article, not even know it at all. ）
What are the advantages of the DIV+CSS layout compared to the table layout?
- When the revision is more convenient, just change the CSS file
- Faster page loading, clear structure, concise page display
- The performance is separated from the structural phase
- Easy to optimize (SEO) search engine more friendly and ranked more easily by the front
What are the similarities and differences between IMG ALT and title? Similarities and differences of strong and EMAlt (Alt text): For user agents (UA) that cannot display images, forms, or applets, the ALT attribute is used to specify alternate text. The language of the replacement text is specified by the lang attribute. (In IE, you will see ALT as tool tip when there is no title)
Title (tool tip): This property provides a suggested message for the element that sets the property
Strong: Bold emphasis on labeling, emphasizing, the importance of expressing content
EM: Italic accent labels, more strongly emphasized, highlighting points of content
Describe the difference between a gradual enhancement and an elegant downgradeProgressive Enhancement (Progressive enhancement): Build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.
Graceful downgrade (graceful degradation): Build full functionality from the start, then compatible with low-version browsers
The difference: Graceful demotion begins with a complex situation and attempts to reduce the user experience, while the incremental enhancement begins with a very basic, capable version of the action, and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.
The "Graceful downgrade" view
The "Graceful downgrade" view is that the site should be designed for the most advanced and sophisticated browsers. Test work in browsers that are considered "obsolete" or functionally missing is scheduled in the final stages of the development cycle, and the test object is limited to a previous version of the mainstream browser.
In this design paradigm, older browsers are considered to provide only "rudimentary but poor,but passable" browsing experience, and can make small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be ignored in addition to fixing larger errors.
"Progressive enhancement" view
The "progressive enhancement" view is that the focus should be on the content itself
Content is the incentive for us to build our website. Some sites show it, some collect it, a bit of search, some operations, and some sites will even contain all the above, but the same point is that they all involve the content. This makes "progressive enhancement" a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "tiered browser support" strategy
Is it more efficient to use multiple domain names to store site resources?
- CDN Cache is more convenient
- Breakthrough Browser Concurrency Limits
- Save Cookie Bandwidth
- Saves the number of connections to the primary domain and optimizes page response times
- Prevent unnecessary security issues
Understanding of the importance of web standards and standards-setting bodiesWeb standards and standards-setting agencies are to enable the development of the web more "healthy", developers follow the unified standards, reduce the development of difficulty, development costs, SEO will do better, and will not be abused by the code caused by various bugs, security issues, and ultimately improve the usability of the site.
Describe the difference between cookies,sessionstorage and localstorage.The data in the Sessionstorage (session), which is accessed only by pages in the same session and destroyed when the session ends. Because Sessionstorage is not a persistent local store, it is only session-level storage. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted.
The difference between Web storage and cookies
The concept of Web Storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.
In addition, Web Storage has methods such as setitem,getitem,removeitem,clean, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie, but cookies Nor is it indispensable: the role of cookies is to interact with the server, as part of the HTTP specification, and the Web Storage simply to "store" data locally.
Front-end Settings user settings, get, empty cookies
// 写 cookies function setCookie(){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "=" + encodeURIComponent(value) + "；expires=" + exp.toGMTString();}// 读取 cookiesfunction getCookie(name){ var arr,reg = new RegExp("(^|)" + name + "+([^;]*)(;|$)"); if(arr.document.cookie.match(reg) return decodeURIComponent(arr[2]); else return null;}//删除 cookiesfunction delCookie(name){ var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(name); if(!cval = null){ document.cookie = name + "=" + cval + ";expires" + exp.toGMTString(); }}
Briefly describe the difference between src and hrefSRC is used to replace the current element, and the href is used to establish a connection between the current document and the application resource.
SRC is the abbreviation for srouce, pointing to the location of the external resource, pointing to the content and will be embedded in the document where the current label is located, when the SRC resource is requested to download and apply the resource to the document, such as JS script, img image and frame elements.
<script src = "js.js"></script>
When the browser resolves to the element, it pauses the download and processing of the other resources until the resource is loaded, compiled, executed, and so on, like pictures and frames, similar to embedding the resource into the current tag, which is why the JS script is placed on the bottom instead of the head.
HREF is the abbreviation for Hypertext Reference, which points to the location of the network resource, establishes the link between the current element (anchor point) or the current document (link), and if added in the document
<link href = "common.css" rel="stylesheet"/>
The browser will then recognize the document as a CSS file, and it will download the resources in parallel and will not stop processing the current document. This is also why it is recommended to use the link method to load CSS, and not to use @import way
What are the image formats used in Web authoring?Png-8,png-24,jpeg,gif,svg
What I want to hear is WEBP (whether there's fresh technology), WEBP, a Google-developed picture format designed to speed up the loading of pictures. Image compression volume is about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites like Facebook and Ebay have started testing and using the WebP format. In the same quality, the WEBP format image is 40% smaller than the JPEG format image
Support situation: Google Browser has supported WEBP format, opera in the version number Opera11.10 also added support, however, Firefox and IE temporarily does not support WEBP format, you can use Flash plugin to display WEBP, of course, this will cost some performance.
In the ointment, the encoding time of the WEBP format image is 8 times times longer than the JPEG format image.
Detailed can be clicked to say WebP, what is the most serious?
Know what a micro format (microformat) is? Talk about understanding, should you consider micro-format in front-end construction?Micro-format (microformats) is a set of semantic XHTML vocabularies that make machine readable, and an open standard for structured data. is a special format for special applications.
Pros: Add smart data to a Web page, allowing the site content to display additional hints in the search engine results interface. (application example: watercress)
The significance and function of micro-format in practical application
- When capturing web content, the semantics of content blocks can be recognized more accurately;
- Manipulate content, including providing access, proofreading, and converting it to other related formats for use by external programs and Web services
Instance:
// 以前写链接到首页的代码<a href = "http://laibh.top">赖同学</a>// 现在为a标签加上rel属性,标记a包括rel=”homepage”属性，该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性，就为这个链接添加了具体的结构和意义。<a href = "http://laibh.top" rel = "homepage">赖同学</a>
HCard Micro FormatHcard is a micro-format for publishing detailed contact information for individuals, companies, organizations, locations, and more. It allows the parser (such as other websites, Firefox's operator plugin) to get detailed information and display it through other Web sites or map tools, or into other programs such as the Address Book.
Instance:
<div> <div>赖同学</div> <div>某某公司</div> <div>电话：xxx-xxx-xxx</div> <a href = "http://laibh.top">赖同学的网站<a></div> // 加入微格式后 <div class = "vcard"> <div class = "fn">赖同学</div> <div class = "org">某某公司</div> <div class = "tel">电话：xxx-xxx-xxx</div> <a class = "url" href = "http://laibh.top">赖同学的网站<a></div>
Here, the official name (class= "FN"), the Organization (class= "org"), the phone number (class= "tel") and the URL (class= "url") are respectively marked with the corresponding class, and all content is included in the class= "vcard".
At present, this seems to be a thankless thing, because HCard and other micro-formats have not yet been well supported by browsers and terminal devices. But once these shortcomings have been improved, HCard will bring great convenience to our digital life.
After the CSS/JS code is on-line, developers often optimize performance, starting from the user Refresh page, a JS request in general where there will be cache processing?DNS caching: Multiple visits to a Web site within a short period of time without multiple access to the DNS server.
CDN Cache: Content Distribution network
Browser cache: The browser stores the most recently requested document on the user's disk.
Server Caching: Stores Web pages and objects that require frequent access in a system that is closer to the user, and speeds up when the objects are accessed again.
Also, about updating the CSS and JS file cache issues
The above is probably the solution of the idea: JS file content modified, you can add a T parameter to indicate the date, use this date as the version number, see the date can also know which day is released, no modification JS file without modification date.
A large number of pictures on a page (large e-commerce site), loading is very slow, there are ways to optimize the loading of these images, to give users a better experienceImage lazy loading, in the non-viewable area of the page to add a scrolling event, to determine the image location and the top of the browser distance from the page distance, if the former less than the latter, the priority load
If you are a slideshow, photo album, etc., you can use the picture preloading technology to load the previous and next photos of the current period.
If the picture is a CSS picture. Techniques such as csssprite,svgsprite,iconfont,base64 can be used.
If the picture is too large, you can use a specially encoded image that loads with a specially compressed thumbnail to enhance the user experience.
If the picture display area is smaller than the true size of the picture, the image is compressed and the image is compressed and the display is the same after the service side is based on the business needs.
If you want to understand the semantics of HTML structure
- A clear structure for the page to get rid of or lose style
- A screen reader (if the visitor has a visual impairment) will "read" your page exactly according to your tag.
- Devices such as pda/may not be able to render web pages like normal computer browsers (usually because these devices are less supportive of CSS)
- Search engine crawlers also rely on tags to determine the context and the weight of each keyword, conducive to SEO, and search engine to establish good communication
- Facilitates team development and maintenance. The team that follows the standard of the standards can reduce many different things, facilitate the development of maintenance, improve efficiency, and even achieve modular development.
What does SEO need to consider to be a front-end perspective?Learn how search engines crawl Web pages and how to index them
Need to know some of the basic work of the search engine, the difference between search engines, search robot (SEO robot or called web crawler) how to work, search engine how to sort the results and so on.
Meta tag semanticsMainly includes the theme (Title), website description (Description) and Keywords (Keywords), and some other hidden text such as author (AuThor), directory (category), coding Language (Language), etc.
How to select keywords and place keywords in web pagesSearch will have to use keywords, keyword analysis and selection is one of the most important SEO work, first to the site to determine the main keywords (generally 5 up and down), and then for these keywords to optimize, including keyword density (Density), correlation (relavancy), Prominence (prominency) and so on.
Learn about the main search enginesAlthough there are many search engines, there are a few things that can make a difference to the website traffic. For example, the main English has google,yahoo,bing, such as Baidu, Sogou, Youdao and so on. Different search engines do not have the same rules for crawling and indexing or sorting pages. Also understand the relationship between search portals and search engines, such as AOL Web search using Google's search technology, MSN with Bing technology.
The main Internet directoryOpen directory itself is not a search engine, but a large site directory, and the main difference between him and the search engine is that the content of the site is collected differently. Catalog is manually edited, mainly included in the homepage of the website, search engine is automatically collected, in addition to the home page also crawl a large number of content pages.
Pay-per-click search EnginesSearch engines also need to survive, with the growing sophistication of Internet commerce, the search engine fees are also beginning to big line. The most typical are Overture and Baidu, and of course Google Adwords, which also includes Google's advertising program. More and more people use search engine Click Ads to locate the business site, which also has a lot of optimization and ranking of learning, you have to learn to spend the least amount of advertising to get the most clicks.
Search Engine LoginAfter the website is finished, don't lie there waiting for the guests to fall from the sky. The easiest way to get someone to find you is to submit the site to a search engine. If you're a business site, the main search engines and catalogs will require you to pay for the collection (such as Yahoo $299), but the good news is that (at least so far) the biggest search engine Google is still free, and it dominates more than 60% of the search market.
Link Exchange and link-wide degrees (link popularity)Web content is hyperlinked to each other in hypertext (hypertext), as is the case between websites. In addition to search engines, people also surfing ("surfing") every day through links between different websites. The more links you have to your site from other sites, the more traffic you will get. What's more, the more external links you have to your site, the more important the search engine thinks it is, and gives you a higher ranking.
Is there a way to set its CSS style on a DOM?External style sheet, introducing an external CSS file
Internal style sheet, placing CSS code directly inside the tag
inline style, which defines the CSS style directly inside the HTML element
What selectors are available for CSSDerived selectors (declared with HTML tags)
ID selector (declared with DOM's ID)
Class selector (declared with a style class name)
Property selector (with DOM property declaration, belongs to CSS2,IE6 not supported, not commonly used, do not know to forget)
In addition to the first 3 basic selectors, there are some extension selectors, including
Descendant selectors (using space spacing, such as Div. a{})
Group selector (using comma interval, such as P,div, #a {})
How is the precedence of CSS selectors defined?Basic principles:
In general, the more special The selector, the higher its priority. The more accurate the selector is, the higher its priority.
Important > Inline > ID > class > tags | Pseudo Class | Property selection > Pseudo objects > Wildcards > Inheritance
Complex calculation methods:The priority of the derived selector is expressed in 1
Use 10 to indicate class selector precedence
The priority of the ID selector is marked with 100
Div.test1. span var priority 1+10 +10 +1
Span#xxx. Songs Li priority 1+100 + 10 + 1
#xxx-li Priority 100 +1
What properties can be defined in the CSS so that a DOM element does not appear in the browser's viewable range?Most basic: Set the Display property to None, or set the visibility property to hidden
Tip: Set the width height to 0, set the transparency to 0, set the Z-index position at-1000
What is the problem with the hover style not appearing after hyperlinks have been accessed? How to solve?A clicked hyperlink style is not available with hover and active, and the workaround is to change the order of CSS properties: L-v-h-a (link,visited,hover,active)
Reference Links:
- The effect of Quirks mode on HTML pages
- What is the quirks mode? What's the difference between it and the standards model?
- Baidu Encyclopedia _WEBP format
- What is a micro-format? Should I consider micro-formats in front-end builds?
Summary excerpts of the front-end interview topics (not updated continuously)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
