The box model is used to layout the entire web page. In HTML5, the box model uses div tags.

div tag: invisible by default, default width = browser display width, default height is 0, there is no border or background color, so it is invisible initially

Definition: Add decorative elements and CSS style modifications to tags

To use CSS styles, the code needs to be written in a fixed place, and the style tag must be written in the head tag.

How to define css style?

Selector

div: division, separated part

Involves basic attributes

Define width and height

spacing

position

Html tag: This tag is used to indicate that the file is an html file, and all code written must be included in this tag

Head tag: This tag is used to store basic information on web pages and externally introduced CSS and JS information.

Meta tag: used to set basic information of web pages, such as web page character encoding, automatic loading, refresh...

Title tag: used to set the title of the web page

Body tag: used to draw the main content of the web page

HTML5 tags: Build web page layout and add web components, but no style

CSS3 style: Add static styles to HTML5 tags in web pages to make web pages more beautiful.

JavaScript code: Add dynamic styles to web pages to make them more beautiful

<!-- *** -->

/* #$%^& */

Save in time every time you finish writing

Ordinary items

Project naming (see the name to know the meaning)

Basic HTML format (JS, IMG, index.html)

Method 1: Find the directory where the project is located (right-click) and open the HTML file

Method 2: Select Run------Go to the browser to run

Right click on the selected project - New - HTML file - Enter the file name (Chinese can be used)

HyperText Markup Language

Markup language, which uses markup tags to describe web pages

The document contains HTML tags and text content

Web page