HTML&CSS learning summary (1)_html/css_WEB-ITnose

I spent a week last week, averaging 2-3 hours a day from Monday to Friday, and 8 hours a day on Saturday and Sunday, watching the HTML div CSS video of NetEase Cloud Classroom Yan Shiba , I feel pretty good. Let’s make a summary based on the lecture ideas in the video.

Basic idea: start from the big aspect (overall structure), "deconstruct" the basic knowledge of HTML (4.0) and then apply it. Don't learn everything first, learn to use it first.

Learning effect: After mastering the following knowledge, you can basically write the homepages of major websites. The main thing is to practice using div layout and CSS effect display.

1. HTML document structure

doctype document type

Strict: Contains all HTML elements and attributes, but does not include presentational and deprecated elements (such as font ). Framesets are not allowed.

Transitional: Contains all HTML elements and attributes, including presentational and deprecated elements (such as font). Framesets are not allowed.

Frameset: Same as Transitional but allows frameset content. If you want to write a framework, you must declare this.

head

Title: The title in the browser toolbar, the title displayed when the page is added to favorites, the page title displayed in search engine results

meta : Metadata will not be displayed on the page, but will be machine-readable.

Specifies the page description, keywords, document author, last modified time, and other metadata.

　 The tag is always located within the head element.

Metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.

Style: tag is used to define style information for HTML documents.

body is mainly divs and various tags

2. Use divs to control layout

Layout principles: from large to small, top to bottom, left to right

Box model: width, height, border, margin, padding

Floating layout: div can "Float" (float), or clear float (clear)

You can try using a simple div background color to try out the layout and enhance your "big picture".

3. Use CSS to control display effects

First understand the various selectors: di, class, tag, derived, pseudo-class, wildcard

Then understand the various types How to control the effect

Paragraph control

text-align text horizontal alignment setting
text-decoration line drawing method
letter-spacing spacing between words in the text
text-transform Case conversion

Text control

Color color setting font-style italic setting font-weight text thickness font-size text size font-family text font

Background control

background-color color
background-image picture
background-repeat image tiling
background-attachment scroll
background-position image position in the background

CSS Introduction method: in-page style tag, external CSS file, inline style tag, import import

Initialization of CSS

Reason: The browser has default CSS parameters for elements, and they may be inconsistent. Resulting in different display effects between browsers

Solution: Unify common CSS parameters for common elements and manually set unified effects

4. HTML tags

No semantic tags : div, span
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　int  　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　>
　　table table