HTML+CSS Summary

Web Standard composition:

Structure HTML

Style CSS

Behavioral JavaScript (interactive behavior)

HTML code Specification:

Statement DOCTYPE

UTF-8

Label indent

Label lowercase

Comments

<!doctypt html>

<meta charset= "Utf-8"/>

<meta name= "parameter" content= "Name property value"/>

<meta name= "keywords" content= ""/>

<meta name= "description" content= ""/>

<title> Page Title </title>

Properties of the table label:

<caption> title </caption>

<table cellpadding= "0" cellspacing= "0" >/* cellpadding equivalent to padding,cellspacing equivalent margin */

Rows of the <tr> table

<th colspan= "3" > Header cell </th>/* colspan: Cross-column, rowspan: cross-line */

<td> cells </td>

</tr>

</table>

The difference between UL and OL:

ul-unordered list

<ul>

<li></li>

<li></li>

</ul>

ol-with sequence list

<ol>

<li></li>

<li></li>

</ol>

How CSS is introduced and how it's pros and cons:

External introduction: <link rel= "stylesheet" type= "Text/css" href= "Css/index.css"/>

Advantages: A CSS file can control multiple pages, easy to revise, easy to maintain, reduce the amount of code, Code Introduction specification Easy division of labor and collaboration

Disadvantage: The pressure on the server is caused by the HREF attribute in the external ingestion relative to the single-page spam code

--often used for pages with huge access

Head Introduction:<style></style>

Advantages: Fast speed, no server request pressure, less than the external introduction of single page code

Disadvantages: not easy to revise and maintenance, code more difficult to communicate before and after the platform

--often used in large-scale Internet home such as: NetEase, Sina, etc.

Tags introduced: <div ></div>

Pros: Highest priority

Disadvantages: More code, large code, not conducive to maintenance

--use of individual special effects

CSS selectors and writing:

ID selector: #div1 {}

Class selector:. div1{}

Tag Selector: a/img/span/p/div1{}

Group selector: #div1, #div2, #div3 {}

Descendant selector: #div1. Div2 a{}

Precedence of CSS selectors:

Basic properties of HTML Tags: block property Row properties
Block attribute Tags:

H1~h6

Ol-ordered list

ul-unordered List

DL Definition List

table-form

P-Paragraph

br-line break

Row Property Label:

span-no semantic label, similar to Div,font-weight bold;

A-definition anchor, SEO optimized search engine

img-defining pictures for displaying pictures on a page

var-defines the variable part of the text

strong-Defining Accent Text

em-Defining Accent Text

form-form submission for submission of data

Block labels can nest block labels and row labels, but row labels only nest row labels!

Row labels can be display:block by giving floating or turning block attributes;

textarea: A text input control that defines multiple lines

Select-Defining a selection list (drop-down list)

option-define options in the selection list

<select>

<option>Volvo</option>

<option selected= "Selected" >Saab</option>

<option>Mercedes</option>

<option>Audi</option>

</select>

input-defines the text variables section, the common Type property values are as follows:

<input type= "text" name= "" value= "" onclick= ""/>

<input type= "button" name= "" value= "" onclick= ""/>

<input type= "Submit" Name= "value=" "onclick=" "/>

<input type= "Gile" name= "" value= "" onclick= ""/>

<input type= "Heckbox" name= "" value= "" onclick= ""/>

<input type= "Radio" name= "" value= "" onclick= ""/>

<input type= "password" name= "" value= "" onclick= ""/>

<input type= "reset" name= "" value= "" onclick= ""/>

<input type= "hidden" name= "" value= "" onclick= ""/>

CSS styles:

Text, font: You can set multiple fonts for the page at the same time, when the browser cannot find the first font is looking for the second, know to find the available fonts.

font-family: "Song Body", Arail,tabhoma,sans-serif;

Font settings: 1, Chinese page to the first choice of the song, other fonts second

2, English page to Arail/tahoma and other fonts

3. English-Chinese fonts for Chinese and English websites

4, special fonts are used pictures

font-size:px/percent/em;

Font-style:normal (normal font)/italic (italic)/oblique (tilt)

Font-weight:normal/bold/bolder (thicker)/lighter (finer)

Font-color: #ffffff;

Text-decoration:none/underline/overline (dash)/Line-through (remove line through line)

Line-height:normal/length;

Text-indent:length/px/em;

Text-align:left/center/right/justify (justified);

Vertical-align:top/bottom/middle (Upper and lower center); Support table Other tags are not recommended for use

Word-spacing:normal/length; Change word spacing

Letter-spacing:normal/length; Change word spacing

background-color:red/#ffffff;

Background-image:none/url ("") 0 0 no-repeat;

Background-position:x Axis px%/y-axis px%

Background-attachment:scroll (background graph follows page scrolling)/fixed (page scrolling and background image does not scroll);

Background:color URL ("") position repeat;

border: Pixel value line type line color;

Border-radius: Left upper right upper right lower left bottom

Box model

Padding:top right bottom left;

Margin:top right bottom left;

Border::top right bottom left;

Display:inline-block;

Standard mode: margin+padding+border+content

Quirks mode: Content (padding+border+content) +margin

CSS Layout

Float:none/left/right; Floating can cause document flow to collapse

Clear:none/left/right/both;

Overflow:hidden (out of Hidden)/visible (show out)/auto (cut content and add scroll bar when needed)/Acroll (show scroll bar)

Visibility (visible): Visible (element Visible)/hidden (element not viewable)/inherit (integration of parent element visibility);

Position:reative/absolute/static (default)/fixed (can be positioned relative to the specified coordinates of the browser window)/inherit;

Zindex:nomber/auto set the stacking order of elements, positive negative values

Opacity:number (value between 0~1)

Filter:alpha IE Translucent filter fiter:alpha (OPACITY=50);

Pseudo class of a tag

a:link{}

a:visited{}

a:hover{}

a:active{}

Common compatibility issues

Margin+float will appear double spacing-resolved: with padding

Border-radius IE8 The following invalid-resolved: Rounded corners with background figures;

HTML+CSS Summary