PHP Chinese online work front-end (HTML5/CSS3) test questions

---

Front-end test questions (HTML5/CSS3) reference answers

● Each question is 5 points, a total of 20 questions, the total score is 100

● You can choose to do the questions, no points will be deducted if you make a mistake, and you will get 10 points

Hurry up and see how far you can get!

---

1. HTML5 part

1.1 What are the commonly used structural tags in HTML5, and which tags does it replace before

●

,

,

,

,

,

,

●

,

,

,...

1.2 HTML documents are encoded in UTF-8 What are the advantages of the set

● utf-8: uses 3 bytes to represent a symbol, which can basically cover all languages ​​in the world

● Compared with traditional gb2312, gbk Than, there are more recognized character sets, and it is also recommended by the industry

1.3 What are the four most commonly used attributes in tags

● id, class, title, style

● These four attributes are present in almost every html tag. You need to pay special attention to

1.4 What is the difference between the title and alt attributes in the tag

● title: It is the description of the label. When the mouse is moved in, this description information will appear in a moment.

● alt: Used on replaceable elements. When external resources cannot be loaded correctly, this information will appear. It will be displayed on the placeholder

1.5 What is the difference between the href and src attributes in the tag

● Both are references to external resources

● href: used for hypertext or style, used on and tags

● src: used on external resource placeholder tags, such as ,

1.6 What are replacement elements and non-replacement elements? Give at least two cases of each type

● The content of the replacement element comes from the outside. This element is only a placeholder for external resources, such as ,

● Non-replacement The element content comes from the current document and must use double tags, such as

,

-

,

...

1.7 What is the main function of the iframe tag? , what are the advantages and disadvantages

● Advantages: The current page directly loads other pages without jumping

● Disadvantages: The content in the frame will not be read by search engines , and will increase too many HTTP requests, affecting the page loading speed

1.8 How is the name attribute in the

tag different from the name in the form control, such as

● The name attribute in

is the same as its id and is used to uniquely identify the label

● The name attribute in the form control is provided to the server The variable name of the form data read by the client application

1.9 How many types of buttons are there in the form, and what are the commonly used labels

● There are three types of buttons: Normal button, submit button, reset button

● ,,

1.10 Can unordered lists and ordered lists replace each other, and what attributes are used

● type

1.11 Form data There are several submission methods, analyze usage scenarios (optional)

● POST: Form data is sent through the request body

● GET: Form data is sent through the URL address bar

---

2. CSS3 part

2.1 What are the usage scenarios of external style sheets, internal style sheets, and inline style declarations

● External style sheet: applies to all HTML documents that reference this CSS

● Internal style sheet: only applies to the current HTML document

● Inline style sheet: only applies For the current HTML element

2.1 What is the use of the @import directive, where should it be used, and what are the restrictions

● It is only allowed to be used in CSS documents

● Must be located on the first line of the CSS document

2.3 What are block-level elements, inline elements, inline block elements, and examples

● Block-level elements: Default Vertical arrangement, such as

, ,

...

● Inline elements: Default horizontal arrangement, such as ,, ...

2.4 There are several simple selectors, write the basic syntax form

● Element: body {...}

● ID: #active {...}

● Class: .red {...}

● Attribute: [title]

● Group: h1,h2 ,h3 {...}

● Wildcard: div * {...}

2.5 There are several types of structure (context) selectors, and examples

● Descendants: main div {...}

● Child elements: section > span {...}

● Sibling adjacent: div p { ...}

● All at the same level: div ~ p {...}

2.6 :nth-child(n) and :nth-of-type(n)

● :nth-child(n): Only associated with position

● :nth-of-type(n): Associated with both position and type

2.7: Usage rules for parameter n in nth-child(n) and :nth-of-type(n)

● Used in literals, starting from 1, such as: :nth-child( 3)

● Used in expressions, starting from 0, such as: :nth-child(2n 1)

● Negative values ​​allowed

2.8 Flexibility What problems does FlexBox solve in CSS layout and where is it most suitable to use?

● It solves the problems of vertical alignment of elements in traditional layout and responsive layout

● Mainly used for cross-device page layout, especially suitable for responsive, such as mobile terminals

2.9 Common values ​​of the flex attribute of elastic elements, what are the corresponding value combinations, and explained one by one

● initial,auto, content, value

● Default value: flex: 0 1 auto

● flex: flex-grow flex-shrink flex-basis

● Various combinations, such as flex: 1 1 auto; equivalent to: flex: auto,...

2.10 vh/vw unit, what is the difference between auto and 100% Difference

● vh/vw: Viewport size ratio, related to the device

● auto: Default value, usually independent of the device

● 100% : Self-knowledge of parent container size

2.11 (optional) Why align-content can only be used in multi-line flexible containers

● In single-line containers, on the cross axis You can use the align-items attribute to set

For more interview questions, please refer to: "2019 Big Front-end Interview Questions Summary (Collection)"