These HTML, CSS knowledge points, interview and normal development all need no10-no11

Series of Knowledge points summary

These HTML, CSS knowledge points, interviews and peacetime development all need No1-no4 (knowledge points: HTML, CSS, box model, content layout)

These HTML, CSS knowledge points, interview and normal development need No5-no7 (knowledge points: Text settings, settings background, data list)

These HTML, CSS knowledge points, interviews and peacetime development all need No8-no9 (knowledge point: Media operations, build forms)

These HTML, CSS knowledge points, interviews and peacetime development all need no10-no11 (knowledge points: Table operations, code writing rules)

No10. Tabular Data manipulation

1.Table elements

(1) General elements: Table, TR (table row), TD (Table Data), th (table head).

(2) Structured elements: Caption, THEAD, Tbody, TFOOT.

(3) Element Description: Table head, body, foot can be grouped to display the table, the head information in the THEAD, the body placed in the tbody, the end of the summary information in the TFOOT. For example:

<Table>    <caption>Late Personnel statistics</caption>    <thead>        <TR>            <th>Name</th>            <th>Number of lateness</th>        </TR>    </thead>    <tbody>        <TR>            <TD>Tom</TD>            <TD>2</TD>        </TR>    </tbody>    <tfoot>        <TR>            <TDcolspan= "2">Total People: 33</TD>        </TR>    </tfoot></Table>

(4) Table border border Gap settings: Border-collapse (values include collapse, separate, inherit) border clearance is visible, border-spacing the gap width between cells and cells border. For example, the following style setting border clearance is visible and the gap width is 5px:

table{    border-collapse:separate;    border-spacing:5px;    border:1px solid Red;}

(5) How to display line Split line: first to set the border gap border-collapse to collapse, and then set the TH and TD Border-bottom. The style code is as follows:

table{    Border-collapse:collapse;} TD, Th{    border-bottom:1px solid #cecfd5;} Tfoot tr:last-child td{    border-bottom:none;}

(6) Alternate row background setting: the Pseudo-class selector: the Nth-child () method and the parameter even and odd select odd or even rows to enable alternate display of odd and even rows. The style code is as follows:

table{    Border-collapse:collapse;} thead{    background: #395870;    Color: #fff;} Tbody Tr:nth-child (even) {    background: #f0f0f2;}

The results are shown below:

(7) Border-collapse Property Description: The recommended setting value is separate, if not set to separate, the bounding body and foot are wider than the head. So it is generally recommended to set Border-collapse to separate and border-spacing to 0. The following code implements an alternating row background with a border:

table{    border-collapse:separate;    border-spacing:0;} thead{    background: #395870;    Color: #fff;} Th, td{    padding:10px 15px;} td{    border-bottom:1px solid #cecfd5;    border-right:1px solid #cecfd5;} td:first-child{     border-left:1px solid #cecfd5;} Tbody Tr:nth-child (even) {    background: #f0f0f2;}

The implementation results are as follows:

2. This document aligns

(1) Alignment properties: Sets the Cell object mode by Text-align, Vertical-align.

(2) Alignment rules: Text messages such as name and DESC are generally left-aligned, while numeric types are generally right-aligned.

3. Selector

(1): First-child,: last-child: For example, p:first-child{} selects the first child element in the parent element and the element name is P. Last-child.

(2): Nth-child (even/odd): Select odd, even elements. In the table alternately set the background color to be used more, for example: Tbody tr:nth-child (even) indicates that the TR is the even line tr in the selection tbody.

(3): First-of-type, Last-of-type, Only-of-type: Similar to First-child or Last-child, respectively, to select the first element that contains the parent class, select the last element that contains the parent class, Select the element that has only one element for the parent element. For example, the following code represents all TD elements that have only one TD element under the race selection tr:

Tbody Td:only-of-type {    padding-left:0;    padding-right:0;}

(4): First-child and: First-of-type difference: First-child The filtered element must be the first element of the parent element, and the element that is filtered by the first-of-type can be filtered without being the first element of the parent element, as long as it is contained by the parent element. The First-child value in the following code is filtered to the P element under the first Div, and the P element under the First-of-type two div is filtered.

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "Utf-8">        <styletype= "Text/css">P:first-child{Color:Red;             }P:first-of-type{Color:Blue;            }        </style>    </Head>    <Body>        <Divclass= "box">            <Div>                <P>111</P>            </Div>            <Div>                <span>                </span>                <P>222</P>            </Div>        </Div>    </Body></HTML>

No11. How to write good code

1. Common rules

(1) Add DOCTYPE: The correct document structure must contain the <doctype html> declaration.

(2) Lowercase rules: element names, attributes, and values are used in lowercase.

(3) Quote use: Use double quotes instead of single quotes.

(4) Boolean Value property: A Boolean value is omitted when the value type of the property is a Boolean type. For example: <checkbox checked></checkbox>.

(5) ID and class naming: Use actual usage scenarios to name, for example, setting a class for red,red representation instead of a scene. The code is as follows:

Bad:<class= "Red">error! Please try again. </ P > Good: <  class= "alert">error! Please try again. </ P >

(6) image tag Alt attribute: Image must mark text information in place of a picture alt attribute. For example:

Bad:<src= "puppy.jpg">good:<  src = "Puppy.jpg" alt = "A Beautiful, Two-year-old Hound mix puppy" >

(7) Content and style segmentation: Do not embed styles into HTML content. On the one hand to increase page loading, on the other hand difficult to maintain. For example:

Bad:<style= "color: #393; font-size:24px;" > Thank you! </ P > Good: <  class= "alert-success">Thank you! </ P >

(8) Less use of DIV elements: as much as possible to use structured elements, div use too much to make the page too bloated and difficult to maintain. For example:

Bad :<Divclass= "article">    <Divclass= "headline">Headlines Across the World</Div>    </Div></Div>Good:<Divclass= "Container">    <article>        <H1>Headlines Across the World</H1>    </article></Div>

2.CSS Code Rules

(1) Organizing code with annotations: organizing grouping styles with annotations

Bad:header {...} Article {...}. btn {...} good:/* Primary header */header {...} /* Featured article */article {...} /* Buttons */.btn {...}

(2) Use multi-line and space split style

Bad:a,.btn{background: #aaa; color: #f60; font-size:18px;padding:6px;} good:a,.btn {    background: #aaa;    Color: #f60;    font-size:18px;    padding:6px;}

(3) class naming: Naming to represent the actual meaning, keeping the CSS semantics consistent, using lowercase letters and hyphens. For example:

Bad:.red_box {...} Good:.alert-message {...}

(4) Selector definition: Do not use the ID to define, the selector depth should not be more than 2 to 3 levels, intermediate over-positioned selectors as far as possible to remove. The Li in. New Li a can be removed. For example:

Bad: #aside #featured ul.news li a {...} #aside #featured ul.news li a em.special {...} Good:.news a {...}. News. Special {...}

(5) Use a short attribute: a border If you set Border-bottom, Border-top, Border-right, border-left at the same time, you can use the abbreviated method of border. If border just sets One direction, the others remain inherited. Then you can use a single direction such as Border-left. For example:

bad:img {    margin-top:5px;    margin-right:10px;    margin-bottom:5px;    margin-left:10px;} button {    padding:0 0 0 20px;} good:img {    margin:5px 10px;} button {    padding-left:20px;}

(6) Color property value: Use a simple hexadecimal representation as much as possible and lowercase. For example:

Bad:.module {    background: #DDDDDD;    Color: #FF6600;} Good:.module {    background: #ddd;    Color: #f60;}

(7) value is 0 rule: delete the unit with the property value 0. For example:

bad:div {    margin:20px 0px;    letter-spacing:0%;    padding:0px 5px;} Good:div {    margin:20px 0;    letter-spacing:0;    Padding:0 5px;}

(8) Vendor attributes: Group vendor attributes into groups. Although many browsers now support the CSS3 style, it is necessary to add a vendor style to ensure compatibility. For example:

div {    background:-webkit-linear-gradient (#a1d3b0, #f6f1d3);    Background:-moz-linear-gradient (#a1d3b0, #f6f1d3);        Background:linear-gradient (#a1d3b0, #f6f1d3);    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    Box-sizing:border-box;}

These HTML, CSS knowledge points, interview and normal development all need no10-no11