Html&css learning the heart of Germany

Learn html&css a week, every day Class 9 hours, have time to see Html+div+css video, Feel good.

Basic idea: From the big aspect (the whole structure) starts, the HTML basic knowledge "deconstruction" then uses, learns the edge to use.

Learning Effect: Master The following knowledge, basic can write the homepage of the major sites, mainly practice using div layout and CSS effect display.

First, the document structure of HTML

Strict: Contains all HTML elements and attributes, but does not include both display and deprecated elements (such as font). Frameset (framesets) is not allowed.

Transitional: Contains all HTML elements and attributes, including both display and deprecated elements (such as font). Frameset (framesets) is not allowed.

Frameset: Equates to transitional but allows frameset content. If you want to write a framework, declare this one.

Head

Title: Caption in browser toolbar, title displayed when a page is added to Favorites, page title displayed in search engine results

Meta: Metadata is not displayed on the page, but is readable for the machine.

Specify the description of the page, the keywords, the author of the document, the last modification time, and other meta-data.

The <meta> tag is always in the head element.

Meta data can be used in browsers (how to display content or reload pages), search engines (keywords), or other Web services.

Style: Tags are used to define style information for HTML documents.

Body is mainly div and all kinds of tags

Second, use Div to control the layout

Layout principles: From big to small, from top to bottom, from left to right

Box model: Wide (width) high (height), border (border), margin (margin), padding (padding)

Floating layout: div can "float" (float), can also clear floating (clear)

Can try to use simple div+ background color, to try to layout, enhance their "bigger picture".

Third, use CSS to control the display effect

Learn about the various selectors: Di, class, tag, derivation, Pseudo-class, wildcard

Learn more about how different effects are controlled

Paragraph control

Text-align Text Horizontal alignment settings
Text-decoration Marking method
Letter-spacing the word spacing in text
Text-transform Uppercase and lowercase conversions

Text control

Color settings Font-style Italic set font-weight text weight font-size text size font-family text font

Background control

Background-color Color
Background-image Pictures
Background-repeat Picture Tile
Background-attachment scrolling
Background-position the position of the image in the background

How CSS is introduced: in-page style tags, external CSS files, inline style tags,

Initialization of CSS

Cause: The browser has default CSS parameters for the elements, and may not be consistent, resulting in different display effects between browsers

Workaround: Unify the common elements commonly used CSS parameters, manually set the uniform effect

Iv. HTML Tags

No semantic Tags: div, span
Have semantic tags
H1-h6 Title
P Paragraph
IMG Pictures
A hyperlink and Anchor point
UL unordered list
OL ordered List
Table tables

Html&css learning the heart of Germany