Web standards are composed of a series of standards. A web page is mainly composed of three parts: structure layer, presentation layer and behavior layer.

The corresponding standards are also divided into three aspects:

Structured standard languages mainly include XHTML, HTML and XML,

The standard language of the presentation layer mainly includes CSS,

Behavioral standards mainly include object model, DOM, ECMAScript, etc.

2.1 Structural layer standards

Structured standard language is what W3C stipulates and mainly includes HTML, XHTML and XML. The tags we write in the page body are all for the structure of the page.

The writing of labels needs to start and end. Except for single notes;

Block-level elements cannot be placed inside p tags. li can contain div tags.

Block elements can be placed inside block elements and inline elements. Do not place block elements inside special p and h1-h6. You can place many li and div elements. Because these two tags themselves have container properties

Put inline inside inline, not block. (nested relationship)

Separation of structure and performance

Naming must be standardized

2.2 Presentation layer standards

The performance standard language mainly includes CSS. Through CSS style sheets, CSS styles can make the structural tags of the page more beautiful.

Use external introduction methods as much as possible to achieve the purpose of separation

CSS selector, priority

Simple code

2.3 Behavioral layer standards

The page and the user have certain interactions, and the page structure or performance changes at the same time. The standard mainly includes the object model (such as W3C DOM) and ECMAScript and requires the separation of these three parts.

DOM is the abbreviation of Document Object Model.

ECMAScript is a standard scripting language (JAVAScript) developed by ECMA (European Computer Manufacturers Association)

3. What do you know about W3C?

W3C (World Wide Web) has put forward standardized requirements for web standards, which are some code specifications in actual programming.

It mainly includes the following points:

3.1 Requirements for structure

1) Label letters should be lowercase

2) The label should be closed

3) Tags are not allowed to be nested arbitrarily

3.2 Requirements for css and js

1) Try to use external link css style sheets and js scripts. Divide structure, performance and behavior into three parts and comply with specifications. At the same time, the page rendering speed is improved and the user experience is improved.

2) Use as few interline style sheets as possible in styles to separate structure and performance. The naming of tag attributes such as id and class should be clear and meaningful. The fewer tags, the faster the loading, the user experience is improved, and the code maintenance is simple and convenient. revision.

3) There is no need to change the page content, and a printed version can be provided without copying the content, which improves the usability of the website.

4. What is front-end semantics?

Semanticization is to make the content readable by machines. The parsing of web pages is performed by search engines and parsed by machines.

4.1 Tags are semantic

Tags such as h1~h6, thead, ul, and ol, early semantic tags: programmers use the id and class attributes of HTML tags to further describe HTML tags, such as adding id="footer" or "footer" to the footer HTML tag. Attribute (value) of class="footer" (use semantic variables and class, id that need to be declared)

4.2 HTML5 semantic tags

header/footer; section (chapter, header, footer)/article (content area); nav navigation; aside unimportant content; em(emphasize)/strong enhancement; i(icon) icon creation

5.What are the new contents of HTML5?

New block tags: section, article, nav, aside

Form enhancement: date, time, search (modify the type implementation); form validation; placeholder

Semantic enhancement: header/footer; section/article; nav navigation; aside unimportant content; em(emphasize)/strong enhancement; i(icon) icon creation

6..What are the classification of HTML elements?

Block-level element block (square shape, occupying a whole row): div ul ol li dl dt dd h1 h2 h3 h4…p

Inline elements inline (a certain position in a line): ab span img input select strong (emphasis tone)

inline-block (inline, with width and height attributes): selection

Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea

Block-level elements: div, ul, li, dl, dt, dd, p, h1-h6, blockquote

Empty elements: br, meta, hr, link, input, img

7.HTML nesting relationship?

Block-level elements can contain inline elements

Block-level elements may not contain block-level elements (p tags cannot contain div tags)

Inline elements "generally" cannot contain block-level elements (a contains divs is okay)

8. The default style of HTML?

The meaning of the default style
Problem with default style proxy
What CSS Reset does

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

css

1. Introduce the standard CSS box model? How is it different from the box model of lower versions of IE?

Standard box model: width = content width (content) + border + padding + margin
Low version IE box model: width = content width (content + border + padding) + margin

2. Box-sizing attribute?

The parsing mode used to control the box model of the element. The default is content-box.
context-box: W3C's standard box model. Setting the height/width attribute of the element refers to the height/width of the content part.
border-box: IE traditional box model. . Setting the height/width attributes of the element refers to the height/width of the border + padding + content part

3.What are the CSS selectors? What properties can be inherited?

CSS selectors: id selector (#myid), class selector (.myclassname), tag selector (div, h1, p), adjacent selector (h1 + p), sub-selector (ul > li), Descendant selector (li a), wildcard selector (*), attribute selector (a[rel="external"]), pseudo-class selector (a:hover, li:nth-child) inheritable attributes:
font -size, font-family, color
non-inheritable styles: border, padding, margin, width, height
Priority (proximity principle): !important > [ id > class > tag ]
!important has higher priority than inline

4. What are the new pseudo-classes in CSS3?

p:first-of-type selects the first element that belongs to its parent element
p:last-of-type selects the last element that belongs to its parent element
p:only-of-type selects the only element that belongs to its parent element
p:only- child selects the only child element that belongs to its parent element
p:nth-child(2) selects the second child element that belongs to its parent element
:enabled:disabled The disabled state of the form control.
:checked The radio button or checkbox is checked.

5. How to vertically center a div?

The first

div is absolutely positioned horizontally and vertically centered [margin:auto implements centering of absolutely positioned elements],

Compatibility: IE7 and previous versions are not supported
div{
      width: 200px;
      height: 200px;
      background: green;
      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
the second

div absolutely positioned horizontally and vertically centered [margin negative spacing]

This is perhaps the most popular method of use today.
div{
        width:200px;
        height: 200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
The third kind

Absolute positioning of div, horizontal and vertical centering [Transforms]

Compatibility: IE8 does not support;
div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }
The fourth kind

css variable width, horizontal level, vertical centering
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
     
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">zzt</div>
  </div>
</body>
</html>
The fifth type

Set the parent box to the table-cell element and use text-align:center and vertical-align:middle to achieve horizontal and vertical centering. A more perfect solution is to use a three-layer structure to simulate the parent-child structure
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: blue;
      display: table-cell;
      vertical-align: middle;
      text-align: center;

    }

    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      display: inline-block;

    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">zzt</div>
  </div>
</body>

</html>
sixth

        Implement absolute positioning of sub-boxes and use calc to calculate the position

        Parent element settings: position: relative;

        Child element settings: position: absolute;
                              left:calc((500px - 200px)/2);
                              top:calc((120px - 50px)/2);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对子盒子实现绝对定位，利用calc计算位置</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
     position: relative;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
      position: absolute;
      top: calc((400px - 200px)/2);
      left: calc((400px - 200px)/2);
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">zzt</div>
  </div>
</body>
</html>

6. What is the role of sprites (sprites) collectively referred to as CSS Sprites ?

1. Include all pictures involved in a page into one large picture.
2. Use the combination of CSS background-image, background-repeat, and background-position for background positioning.
3. Reduce http requests for web pages and improve page performance;
4. CSS Sprites can reduce the bytes of images.

7. What is the difference between pseudo-class and pseudo-element?

Pseudo elements are real elements

The former is a single colon, the latter is a double colon

<style>
  li:first-child {
    height: 20px;
    width: 100px;
    background-color: #139aff;
  }

  li:last-child {
    height: 60px;
    width: 100px;
    background-color: #89ff56;
    line-height: 60px;
  }

  p:first-of-type {
    background-color: red;
  }

  p:last-of-type {
    background-color: deeppink;
  }


  /*每个p标签之前新增一个Hello文本*/
  .container p::before {
    content: 'Hello';
  }

  .container p::after {
    content: 'Thanks';
  }

  .container p::first-letter {
    font-size: 32px;
  }

  .container p::first-line {
    background-color: #f1ffad;
  }

  /*所有选中的元素会变色*/
  .container p::selection {
    background-color: #1025ff;
    color: red;
  }
</style>

<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
  </ul>
  <div>
    <h1>h1文本</h1>
    <p>p文本1</p>
    <p>p文本2</p>
    <p>p文本3</p>
    <p>p文本4</p>
  </div>

  <div class="container">
    <p> css1 </p>
    <p> css2 </p>
    <p> css3 </p>
    <p>伪元素</p>
  </div>
</body>

</html>

8. Holy Grail Layout

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>实现三栏水平布局之圣杯布局</title>
  <style type="text/css">
    /*基本样式*/
    .left,
    .right,
    .main {
      min-height: 300px;
    }

    .left {
      width: 200px;
      background-color: thistle;
    }

    .main {
      background-color: #999;
    }

    .right {
      width: 300px;
      background-color: violet;
    }

    /* 圣杯布局关键代码 */
    .left,
    .main,
    .right {
      float: left;
      position: relative;
    }

    .main {
      width: 100%;
    }

    .container {
      padding-left: 200px;
      padding-right: 300px;
    }

    .left {
      margin-left: -100%;
      left: -200px;
    }

    .right {
      margin-left: -300px;
      right: -300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

</html>

9. Double flying wing layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="main"><div class="main-inner">中心区</div></div>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>

10. Clear the gaps between li

code show as below
<style>
*{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;    
    }
</style>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
Solution:

Directly remove line breaks (IE1 pixel residue)

Set the font-size of the parent element to 0, and reset the font size on the child element (lower version of Safari compatibility)

Set font-size for the parent element: 0; letter-spacing: -3px, and reset font-size for the child element (recommended solution)

11.What is BFC? How to trigger BFC?

What is BFC:

BFC (Block Format Context). It refers to an independent block-level rendering area that has a set of rendering rules to constrain the layout of block-level boxes and has nothing to do with the outside of the area.

How to trigger BFC:

The value of float is not none

The value of overflow is not visible

The values of display are inline-block, table-cell, table-caption

The value of position is absolute or fixed

12. How to clear floats

How to clear floats https://blog.csdn.net/m0_63873004/article/details/123169197?spm=1001.2014.3001.5501

13.What is the difference between em and rem?

The translation of rem units into pixel values is determined by the font size of the html element. This font size is affected by the font size setting in the browser unless a specific unit is explicitly overridden.

em units are converted to pixel values, depending on the font size they are used for. This font size is governed by the font size inherited from the parent element unless explicitly overridden with a specific unit

14.What is CSS preprocessor? What are the common CSS preprocessors? What's the difference? What are the pros and cons of CSS preprocessors?

1.What is CSS preprocessor?

Use a special programming language to add some programming features to CSS, use CSS as a target to generate files, and then developers only need to use this language for coding work, which can make your CSS more concise and adaptable. , better readability, easier code maintenance and many other benefits

2. What are the common CSS preprocessors?

Sass

Less

3.What is the difference between scss and less?

The compilation environment is different

The variable symbols are different, Less is @, and Scss is $, and the scope of the variables is also different.

Output settings, Less has no output settings, Sass provides 4 output options:

Sass supports conditional statements, you can use if{}else{}, for{} loops, etc. Less does not support it.

Reference external CSS files

Different tool libraries

4. What are the advantages and disadvantages of CSS preprocessors?

Advantages: Improve code reuse and maintainability

Disadvantages: The compilation process is introduced and there is a certain learning cost.

15.What are the values of display? Explain their role?

inline (default) - inline

none——hide

block - block display

table - table display

list——item list

inline-block - inline block

16. What is the value of position?

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

17. What are the new features of CSS3?

1、颜色：新增RGBA、HSLA模式
2、文字阴影：（text-shadow）
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size,background-origin background-clip(削弱)
6、渐变：linear-gradient(线性渐变):
eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);
radial-gradient (径向渐变)
7、过渡：transition可实现动画
8、自定义动画： animate@keyfrom
9、媒体查询：多栏布局@media screen and (width:800px)
10、border-image
11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12、3D转换
13、字体图标：Font-Face
14、弹性布局：flex

18. What is the principle of creating a triangle with pure CSS?

The rectangle formed by four triangles is presented before our eyes. If we only want one triangle, can we imagine making the other three invisible?

.box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:transparent transparent transparent #ef4848;
}

19. CSS3 implements 0.5px thin line

<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<div class="line"></div>

20. How to make Chrome support text smaller than 12px?

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

21. Why should we initialize css styles during development?

Due to browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, page display differences between browsers will often occur.

22. What is the difference between the style tag written after the body and before the body?

When the page is loaded from top to bottom, of course the style is loaded first.
Written after the body tag, since the browser parses the HTML document line by line, parsing the style sheet written at the end (outline or written in the style tag) will cause the browser to stop the previous rendering and wait for loading and parsing the style. After the table is completed and re-rendered, the FOUC phenomenon may occur under IE on Windows (that is, the page flickering problem caused by style failure)

23. How will content that overflows the content area of an element defined by the CSS attribute overflow be handled?

When the parameter is scroll, a scroll bar will appear.
When the parameter is auto, a scroll bar will appear when the content of the child element is larger than the parent element.
When the parameter is visible, the overflow content appears outside the parent element.
When the parameter is hidden, the overflow is hidden.

24.css sets character spacing

In CSS, you can use letter-spacing properties to set character spacing. This property controls the distance between each character. You can set a negative value to make the characters closer, or you can set a positive value to make the characters farther apart.

letter-spacing: 0.1em;

Front-end html, css high-frequency interview questions-continuously updated

HTML

1. How to understand HTML?

2. Understanding of WEB standards?

2.1 Structural layer standards

2.2 Presentation layer standards

2.3 Behavioral layer standards

3. What do you know about W3C?

3.1 Requirements for structure

3.2 Requirements for css and js

4. What is front-end semantics?

4.1 Tags are semantic

4.2 HTML5 semantic tags

5.What are the new contents of HTML5?

6..What are the classification of HTML elements?

7.HTML nesting relationship?

8. The default style of HTML?

css

1. Introduce the standard CSS box model? How is it different from the box model of lower versions of IE?

2. Box-sizing attribute?

3.What are the CSS selectors? What properties can be inherited?

4. What are the new pseudo-classes in CSS3?

5. How to vertically center a div?

6. What is the role of sprites (sprites) collectively referred to as CSS Sprites ?

7. What is the difference between pseudo-class and pseudo-element?

8. Holy Grail Layout

9. Double flying wing layout

10. Clear the gaps between li

11.What is BFC? How to trigger BFC?

12. How to clear floats

13.What is the difference between em and rem?

14.What is CSS preprocessor? What are the common CSS preprocessors? What's the difference? What are the pros and cons of CSS preprocessors?

15.What are the values ​​of display? Explain their role?

16. What is the value of position?

17. What are the new features of CSS3?

18. What is the principle of creating a triangle with pure CSS?

19. CSS3 implements 0.5px thin line

20. How to make Chrome support text smaller than 12px?

21. Why should we initialize css styles during development?

22. What is the difference between the style tag written after the body and before the body?

23. How will content that overflows the content area of ​​an element defined by the CSS attribute overflow be handled?

24.css sets character spacing

25.Continuously updated

Guess you like

15.What are the values of display? Explain their role?

23. How will content that overflows the content area of an element defined by the CSS attribute overflow be handled?