Html version:
1. In which browsers have the pages you created been tested? What are the cores of these browsers?
2. There is a very important thing at the beginning of every HTML file, Doctype. Do you know what this is for?
Answer: The declaration is located at the very front in the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses. (Key point: tell the browser according to which specification to parse the page)
3.What is Quirks mode? What is the difference between it and Standards mode
Answer:
Starting from IE6, Standards mode has been introduced. In standards mode, the browser attempts to process documents that conform to standards as correctly as in the specified browser.
CSS was not mature enough before IE6, so browsers before IE5 and other browsers had poor support for CSS. IE6 will provide better support for CSS. However, the problem arises at this time because many pages are based on the old Written in layout mode, and if IE6 supports CSS, these pages will display abnormally. How to ensure that the existing pages are not destroyed and provide a new rendering mechanism?
When writing programs, we often encounter such problems, how to ensure that the original interface remains unchanged and provide more powerful functions, especially when the new functions are not compatible with the old functions. A common approach when encountering this kind of problem is to add parameters and branches, that is, when a certain parameter is true, we use the new function, and if the parameter is not true, we use the old function, so that it does not destroy The original program provides new functions. IE6 does something similar. It treats DTD as this "parameter" because no one would write DTD on previous pages, so IE6 assumes that if DTD is written, it means that this page will use better support for CSS. layout, and if not, the previous layout will be compatible. This is Quirks mode (quirks mode, weird mode, weird mode).
Difference:
There will be overall differences in three aspects: layout, style analysis and script execution.
Box model: In the W3C standard, if you set the width and height of an element, it refers to the width and height of the element's content. In Quirks mode, IE's width and height also include padding and border.
Set the height and width of inline elements: In Standards mode, setting wdith and height for inline elements such as will not take effect, but in quirks mode, it will take effect.
Set the height of percentage: In standards mode, the height of an element is determined by the content it contains. If the parent element does not set the height of percentage, it is invalid for the child element to set a height of percentage. Use margin:0 auto to set it. Horizontally centered: Using margin:0 auto can center the element horizontally in standards mode, but it will fail in quirks mode.
(There are many more. It doesn’t matter what he answers. The key is to see whether the answers he answered came from his own experience, or whether he just read them from articles, or even didn’t know them at all.)
4. What are the advantages of div+css layout over table layout?
5.a: What are the similarities and differences between img’s alt and title? b: What are the similarities and differences between strong and em?
Answer:
a:
b:
6. Can you describe the difference between progressive enhancement and graceful degradation?
Difference: Graceful degradation starts from a complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continues to expand to adapt to the needs of the future environment. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its foundation in a safe zone.
The “graceful downgrade” perspective
The "graceful degradation" view holds that websites should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.).
Under this design paradigm, older browsers are considered to only provide a “poor, but passable” browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs.
Perspective of “Progressive Enhancement”
The "progressive enhancement" perspective believes that focus should be on the content itself.
Content is the reason why we build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. This is why it was immediately adopted by Yahoo! and used to build its "Graded Browser Support (Graded Browser Support)" strategy.
Then the question comes. Now the product manager sees that the web page effects of IE6, 7, and 8 are much less rounded corners and shadows (CSS3) than modern browsers of higher versions, and they require compatibility (use image backgrounds and abandon CSS3). How will you convince him?
(Free play)
7. Why is it more effective to use multiple domain names to store website resources?
8. Please talk about your understanding of the importance of web standards and standards-setting organizations.
(No standard answer) Web standards and standard-setting organizations are all designed to make the development of the web more 'healthy'. Developers follow unified standards, reduce development difficulty and development costs, and SEO will be better, and it will not be because of Abuse of code leads to various bugs, security issues, and ultimately improves website usability.
9.Please describe the difference between cookies, sessionStorage and localStorage?
SessionStorage is used to locally store data in a session. This data can only be accessed by pages in the same session and the data is destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
The difference between web storage and cookies
10. Briefly describe the difference between src and href.
Answer:
src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.
Src is the abbreviation of source, pointing to the location of an external resource. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as js script, img Elements such as pictures and frames.
When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.
Href is the abbreviation of Hypertext Reference, which points to the location of the network resource and establishes a link to the current element (anchor) or current document (link). If we add
to the document
Then the browser will recognize the document as a css file, download the resources in parallel and will not stop processing the current document. This is why it is recommended to use the link method to load css instead of using the @import method.
11. What image formats do you know will be used in web page production?
Answer:
png-8, png-24, jpeg, gif, svg.
But none of the above are the final answers the interviewer wants. The interviewer wants to hear Webp,Apng. (Are you paying attention to new technologies and new things)
Popular science Webp: WebP format, an image format developed by Google to speed up image loading. The image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook Ebay have begun testing and using the WebP format.
With the same quality, the volume of WebP format images is 40% smaller than that of JPEG format images.
Apng: The full name is "Animated Portable Network Graphics", which is a bitmap animation extension of PNG and can achieve dynamic picture effects in png format. It was born in 2004, but has not been supported by major browser manufacturers. Until it was recently supported by iOS Safari 8, it is expected to replace GIF and become the next generation dynamic graphics standard.
12. Do you know what microformats are? Talk about understanding. Should microformats be considered in front-end builds?
Answer:
Microformats (Microformats) is a collection of machine-readable semantic XHTML vocabulary and an open standard for structured data. It is a special format developed for special applications.
Advantages: Add smart data to web pages so that website content can display additional tips in the search engine results interface. (Application example: Douban, if you are interested, google it yourself)
13. After the css/js code is online, developers often optimize performance. Starting from the time the user refreshes the web page, where will a js request usually be cached?
Answer: dns cache, cdn cache, browser cache, server cache.
14. There are a large number of pictures on one page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a better experience.
15. How do you understand the semantics of HTML structure?
HTML itself has no performance. We see that for example,
For example, if you use semantic markup, screen readers will "spell out" your word, rather than trying to pronounce it in full.
Using semantic markup ensures that these devices render web pages in a meaningful way. Ideally, the viewing device is tasked with rendering web pages consistent with the conditions of the device itself.
Semantic markup provides the relevant information needed by the device, saving you the need to consider all possible display situations (including existing or new devices in the future). For example, a mobile phone can choose to have a paragraph tagged with a title The text is displayed in bold font. A handheld computer may display it in a larger font. Either way once you mark the text as a title, you can be sure that the reading device will display the page appropriately on its own terms. .
In the past, you may not have considered that search engine crawlers are also "visitors" to the website, but now they are actually extremely valuable users. Without them, search engines will not be able to index your website, and then it will be difficult for ordinary users to come. Visit.
Therefore, if the title of the page file is tagged instead, then this page may be positioned lower in the search results. In addition to improving ease of use, semantic markup is conducive to the correct use of CSS and JavaScript because it itself provides There are many "hooks" to apply the style and behavior of the page.
SEO mainly relies on the content of your website and external links.
W3C has set a good standard for us. Everyone in the team follows this standard, which can reduce many differentiated things, facilitate development and maintenance, improve development efficiency, and even achieve modular development.
16. Let’s talk about what needs to be considered to do a good job in SEO from the front-end perspective?
You need to know the basic working principles of some search engines, the differences between search engines, how search robots (SE robots or web crawlers) work, how search engines sort search results, etc.
Mainly including theme (Title), website description (Description), and keywords (Keywords). There are also other hidden texts such as Author (author), Category (directory), Language (encoding language), etc.
You have to use keywords when searching. Keyword analysis and selection is one of the most important tasks of SEO. First, determine the main keywords for the website (usually around 5), and then optimize these keywords, including keyword density (Density), relevance (Relavancy), prominence (Prominency), etc.
Although there are many search engines, there are only a few that play a decisive role in website traffic. For example, the English ones mainly include Google, Yahoo, Bing, etc.; the Chinese ones include Baidu, Sogou, Youdao, etc. Different search engines have different rules for crawling, indexing, and sorting pages. You also need to understand the relationship between search portals and search engines. For example, AOL uses Google's search technology for web search, and MSN uses Bing's technology.
Open Directory itself is not a search engine, but a large website directory. The main difference between it and a search engine is the way in which website content is collected. The directory is manually edited and mainly includes the homepage of the website; the search engine automatically collects it and crawls a large number of content pages in addition to the homepage.
Search engines also need to survive. As Internet commerce becomes more and more mature, paid search engines have become popular. The most typical ones are Overture and Baidu, and of course Google's advertising project Google Adwords. More and more people use search engine click ads to locate commercial websites. There is also a lot of knowledge about optimization and ranking. You have to learn to get the most clicks with the least advertising investment.
After the website is finished, don’t lie there waiting for customers to fall from the sky. The easiest way to let others find you is to submit your website to a search engine. If you have a commercial website, the major search engines and directories will require you to pay to be included (e.g. Yahoo charges $299), but the good news is that (at least so far) the largest search engine, Google, is currently free, and it dominates Controls over 60% of the search market.
Web content is linked to each other in the form of hypertext, and the same is true between websites. In addition to search engines, people surf through links between different websites every day. The more links other websites have to your website, the more traffic you will get. More importantly, the more external links your website has, the more important it will be considered by search engines, thus giving you a higher ranking.
Css:
1. Is there any way to set the CSS style of a DOM?
2.What are the selectors in CSS?
In addition to the first 3 basic selectors, there are also some extended selectors, including
Then the question is, How is the priority of CSS selector defined?
Basic principles:
Generally speaking, the more special a selector is, the higher its priority. That is, the more accurately the selector points, the higher its priority.
Complex calculation method:
Then the question is, look at the following code, what color is the text in the tag? .
1 <style>
2 .classA{ color:blue;}
3
4 .classB{ color:red;}
5 </style>
6
7
8
9 <p class="classB classA"> 123 </p>
10
11 答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
中的先后关系无关。
3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的：
设置display属性为none，或者设置visibility属性为hidden
技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000
4.超链接访问过后hover样式就不出现的问题是什么？如何解决？
答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
5.什么是Css Hack？ie6,7,8的hack分别是什么？
答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
示例如下：
1 #test {
2 width:300px;
3 height:300px;
4
5 background-color:blue; /*firefox*/
6 background-color:red\9; /*all ie*/
7 background-color:yellow\0; /*ie8*/
8 +background-color:pink; /*ie7*/
9 _background-color:orange; /*ie6*/ }
10 :root #test { background-color:purple\9; } /*ie9*/
11 @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
12 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
6.请用Css写一个简单的幻灯片效果页面
答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。
1 /**HTML**/
2 div.ani
3
4 /**css**/
5 .ani{
6 width:480px;
7 height:320px;
8 margin:50px auto;
9 overflow: hidden;
10 box-shadow:0 0 5px rgba(0,0,0,1);
11 background-size: cover;
12 background-position: center;
13 -webkit-animation-name: "loops";
14 -webkit-animation-duration: 20s;
15 -webkit-animation-iteration-count: infinite;
16 }
17 @-webkit-keyframes "loops" {
18 0% {
19 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
20 }
21 25% {
22 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
23 }
24 50% {
25 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
26 }
27 75% {
28 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
29 }
30 100% {
31 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
32 }
33 }
7.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、
8.什么是外边距重叠？重叠的结果是什么？
答案：
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
9.rgba()和opacity的透明效果有什么不同？
答案：
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
答案：
垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于letter-spacing的妙用知道有哪些么？
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
11.如何垂直居中一个浮动元素？
1 // 方法一：已知元素的高宽
2
3 #div1{
4 background-color:#6699FF;
5 width:200px;
6 height:200px;
7
8 position: absolute; //父元素需要相对定位
9 top: 50%;
10 left: 50%;
11 margin-top:-100px ; //二分之一的height，width
12 margin-left: -100px;
13 }
14
15 //方法二:
16
17 #div1{
18 width: 200px;
19 height: 200px;
20 background-color: #6699FF;
21
22 margin:auto;
23 position: absolute; //父元素需要相对定位
24 left: 0;
25 top: 0;
26 right: 0;
27 bottom: 0;
28 } 那么问题来了，如何垂直居中一个?（用更简便的方法。）
1 #container //<img alt="Front-end interview questions (HTML/CSS) from major Internet companies" >的容器设置如下
2 {
3 display:table-cell;
4 text-align:center;
5 vertical-align:middle;
6 }
12.px和em的区别。
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。
14.Sass、LESS是什么？大家为什么要使用他们？
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
15.display:none与visibility:hidden的区别是什么？
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
16.知道css有个content属性吗？有什么作用？有什么应用？
答案：
知道。css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。
最常见的应用是利用伪类清除浮动。
1 //一种常见利用伪类清除浮动的代码
2 .clearfix:after {
3 content:"."; //这里利用到了content属性
4 display:block;
5 height:0;
6 visibility:hidden;
7 clear:both; }
8
9 .clearfix {
10 *zoom:1;
11 }after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。
那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？
答案：css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。
具体实现方案：请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
