Currently engaged in front-end work, especially written summary of interview questions for them to learn knowledge, the front face questions need answers of the students, you can add the front group I created 937 268 047
First, the choice
-
HTTP is ()
(A) File Transfer Protocol (B) Hypertext Transfer Protocol
(C) Extensible File Transfer Protocol (D) the height of the File Transfer Protocol - HTML is ()
(A) HTML (B) structured data markup language
(C) Extensible Markup Language (D) markup language documents
3.CSS is ()
(A) cascading style sheets (B) Nested style sheet
(C) structure of stylesheets (D) Inherited Stylesheet
4. The following statement is correct ()
(A) in XHTML, can not be used b, u, i and other labels
(B) HTML and XHTML are two completely different languages
(C) requires that all of the XHTML tag names must be lowercase letters, all properties must be enclosed in quotation marks
(D) when we do site often used XHTML1.0 strict version, because it most stringent
5 represents an ordered list of semantic tag is ()
(A) OL (B) List (C) UL (D) DL
6. their own tags can be nested ()
(A) B (B) P (C) div (D) h1 of
7. The correct statement is inserted picture ()
(A) <IMG the src = "Image / 1.jpg"> </ IMG>
(B) <IMG SCR = "Image / 1.jpg" />
(C) < the src = IMG "Image / 1.jpg" /> </ IMG>
(D) <IMG the src = "Image / 1.jpg" />
8. Open hyperlinks in a new window should be set any attributes and values of a tag ()
(A) target = "_ blank" (B) _target = "blank"
(C) blank = "_ target" (D) _blank = "target"
* Please note, the following options are 9 to 11 questions, are:
(A) (B) (C) (D)
- If the HTML code below, showing why? (B)
<Table>
<TR>
<TD>. 1 </ TD>
<TD> 2 </ TD>
</ TR>
<TR>
<TD colspan = "2">. 3 </ TD>
</ TR>
< / table>
10. If the HTML code below, showing why? (A)
<Table>
<TR>
<TD colspan = "2">. 1 </ TD>
</ TR>
<TR>
<TD> 2 </ TD>
<TD>. 3 </ TD>
</ TR>
< / table>
11. If the HTML code below, showing why? (C)
<Table>
<TR>
<TD rowspan = "2">. 1 </ TD>
<TD> 2 </ TD>
</ TR>
<TR>
<TD>. 3 </ TD>
</ TR>
< / table>
-
The following options, correct "box" label? (A)
(A) <INPUT type = "CheckBox" /> (B) <INPUT name = "Radio" />
(C) <INPUT name = "CheckBox" /> (D) <INPUT type = "Radio" / > -
以下选项中，正确的“下拉列表”标签结构为？（B）
（A）<option><select></select><select></select><option>
（B）<select><option></option><option></option></select>
（C）<swicth><option></option><option></option></swicth>
（D）<option><swicth></swicth><swicth></swicth><option> -
Type the submit button is? (C)
(A) RESET (B) Button (C) Submit (D) Check -
The CSS style tags wrapped with children, write in the page head, such an approach we call? ()
Introducing (A) - Selector #box p, the following statements is correct? ()
(A) is selected for the id of the first box element descendant elements P
(B) is selected for the box element id all descendant elements P
(C) is selected as the id of a first box element sub-elements p
(D) is selected for the box element id all child elements p
On page 17. There are two #box selectors, as follows :()
#box {
font-size: 20px;
font-weight: Bold;
}
#box {
font-size: 30px;
}
The following statement is correct:
(A ) #box size 30px, not bold (B) #box size 50px, bold
(C) #box size 30px, bold (D) #box size 20px, bold
18. Which of the following CSS properties are not inherited? ()
(A) font-style (B) Color (C) width (D) text-align = left
19. Read the following CSS code, how this box model width is the number of real possession? ()
Div {
width: 120px;
height: 120px;
border-left-width: 30px;
border: 20px Solid Red;
padding: 30px 40px 50px;
padding-right: 60px;
}
(A) 210px; (B) 250px; ( C) 260px; (D) 270px ;
20. With regard to inline elements and block-level elements, the following statement is only correct? ()
(A) only block-level element to set the border attribute
(B) the line element can not set the width, height, can not be provided padding
element (C) fixedly positioned, we must deliberately write width: 100%; otherwise it is not automatically stays full father
(D) of the fixed element, the element will no longer branches and regions within the block elements, having a "two row blocks of image"
21. With regard to floating, the following statement is the only error? ()
(A) a floating element can not be text stays high internal (B) with a floating element may be positioned opposite
(C) Branch floating element does not block the region (D) Standard floating elements from stream
22. Set a pseudo-class label, we have to be arranged in a certain order, the correct order? ()
(A) A: visited, A: Active, A: hover, A: Link
(B) A: visited, A: Link, A: hover, A: Active
(C) A: hover, A: visited, A : Link, A: Active
(D) A: Link, A: visited, A: hover, A: Active
23. Image size 200px 200px, box size 800px 800px, the statement background-position: center center; equivalent to :()
(A) background-position: 300px by 300px by;
(B) background-position: 200px 200px;
( C) background-position: 37.5% 37.5%;
(D) background-position: 25% 25%;
- div [class | = "haha" ] can select which of the following elements ()
(A) <div class = ". 1-haha"> </ div> (B) <div class = "haha1"> </ div>
(C ) <div class = "haha 1 "> </ div> (D) <div class = "haha-1"> </ div>
25. The non-breaking space character entity is? ()
(A) & NBPs; (B) & nSBP; (C) & nspb; (D)
Second, the short answer
1.CSS dictation properties: ① ② Set the text underlined italic text segment ③ first two character spaces
. 1-Decoration text: underline;
2 font-style: Italic;
. 3 text-indent: 2em;
2. Write Only IE6,7 browser displays "Your browser version, please upgrade!" The html hack.
1 <-! [IF lt IE 8]>
2 <the p-> Your browser version, please upgrade! </ P>
. 3 <[endif] -!>
3. Description of the front page which has three layers, what are? What is the role?
1 structure layer effect: to build a html page from the perspective of
a two-layer effect style: style of writing from the perspective of beautification
Layer 3 role behavior: from the perspective of interaction describe our page behavior
4. What is the reference point briefly absolutely positioned elements are? Please elaborate classification.
The answer: ①body.
There are top participation, the reference point is the top left or top right corner.
There are bottom participate, the reference point is the first screen lower left corner or lower right corner
② closest, while ancestor element positioning.
5. How to set the vertical center, horizontal center element of absolute positioning? Description of code samples.
Answer: Method a:
. 1 div {
2 width: 400px;
. 3 height: 400px;
. 4 border: 1px Solid #ddd;
. 5 position: relative;
. 6}
. 7 {P div
. 8 position: Absolute;
. 9 background: Pink;
10 width: 100px;
. 11 height: 40px;
12 is left: 50%;
13 is Top: 50%;
14 margin-left: -50px;
15-Top margin: -20px;
16}
method two:
. 1 div {P
2 position: Absolute;
. 3 background: Pink;
. 4 width: 100px;
. 5 height: 40px;
. 6 left: 50%;
. 7 Top: 50%;
. 8 Transform: Translate (-50%, - 50%);
. 9}
6. Consider the following HTML structure and the corresponding CSS, ask why the color of the text? Please briefly describe the reasons.
<div the above mentioned id = "box1" class = "div1">
<div the above mentioned id = "BOX2" class = "div2">
<div the above mentioned id = "BOX3" class = "div3">
<the p-> How text color Why? </ P>
</ div>
</ div>
</ div>
the CSS follows:
#box {P Color: Blue;}
.div1 div.div2 .div3 {P Color: Blue;}
div.div1 BOX2 # P {Color : Green;}
.div1 .div2 {P Color: Pink;}
1 correct answer: Green
1 First they have selected the target element, so look at the weight, because the green weights (1,1,2) high.
7. Consider the following HTML structure and the corresponding CSS, ask why the color of the text? Please briefly describe the reasons.
<div the above mentioned id = "box1" class = "div1">
<div the above mentioned id = "BOX2" class = "div2">
<div the above mentioned id = "BOX3" class = "div3">
<the p-> I am a paragraph </ the p->
< / div>
</ div>
</ div>
the CSS follows:
.div1 .div3 {Color: Blue;}
# {box1 # BOX2 Color: Red;}
The correct answer: blue blue. Because not selected, so look from near and far.
8. Set a div from the lower right to the upper left corner of a gradual change in color from red to green. Red and green color ratio is 6: 4. Represented by the code
2div {
. 3 width: 200px;
. 4 height: 200px;
. 5-background Image: -webkit-Linear-gradient (bottom right, 60% Red, Green);
. 6}. 7
9. define an animation (animation effect has uniform rotation. A completion time of one second animation animation), and calls. Write only critical statement
1 / custom animations /
2 @ {-webkit zhuan-keyframes
. 3 from {
. 4 Transform: Rotate (0deg);
. 5}
. 6 to {
. 7 Transform: Rotate (360deg);
. 8}
. 9}
10 / call animation /
. 11-WebKit-Animation: Linear zhuan lS Infinite 0s;
10. What are the different ways to clear float? Their advantages and disadvantages Why? Draw such illustration similar secondary and simple text description to:
Answer: Sets the parent box height.
{Height 1div: 200px}
② facades Method: Add the intermediate wall box has two parent of height, cleared of floating wall
1.cl {
2 Clear: both;
. 3 height: 10px;
}
③ interior Method: added the lowest portion of the floating element
1CL {Clear: both}
④overflow: hidden
⑤after :( interior pseudo-class method)
1div After :: {
2 Content: "";
. 3 the display: Block;
. 4 Clear: both;
. 5}