Indicates that not only ordinary text (Text) can be inserted, but also pictures, audio, video and other content can be inserted, and hyperlinks (HyperLink) can also be expressed

4. Improve web page code

2. HTML elements (emphasis)

1. What is an element?

Elements are part of a web page

An element can contain a data item, or a piece of text, or a photo, or nothing

2. What are the elements of HTML?

Reference site: HTML Elements Reference - HTML (Hypertext Markup Language) | MDN

3. Composition of elements

The composition of the main parts of this element:

(1) Opening tag: contains the name of the element (p in this example), surrounded by left and right angle brackets. Indicates where the element begins or begins to function—in this case, the paragraph begins.

(2) End tag (Closing tag): Similar to the start tag, except that it contains a slash before the element name. This marks the end of the element -- in this case, the end of the paragraph. Beginners often make the mistake of forgetting to include the closing tag, which can have some weird results.

(3) Content (Content): the content of the element, in this case is the entered text itself.

(4) Element (Element): The combination of start tag, end tag and content is a complete element.

4. The attribute of the element (Attribute)

Attributes contain additional information about the element that does not appear in the actual content

A property must contain the following:

(1) A space, between the attribute and the element name. (If there are already one or more attributes, there is a space between the previous attribute.)

(2) The property name followed by an equals sign.

(3) An attribute value enclosed by a pair of quotation marks " ".

5. Classification of attributes

Some attributes are public, each element can be set such as class, id, title attribute

Some attributes are unique to elements, not every element can be set, such as the charset attribute of the meta element, the alt attribute of the img element, etc.

3. HTML elements (emphasis)

1. What parts does a complete HTML structure include?

(1) Document statement

(2) HTML element

head element

body element

2. Document description

The text at the top of the HTML is called the document type declaration, which is used to declare the document type

Significance and requirements (1) HTML document statement, telling the browser that the current page is an HTML5 page;

(2) Let the browser use the HTML5 standard to parse and identify the content;

(3) It must be placed at the front of the HTML document and cannot be omitted, otherwise there will be compatibility issues;

3. HTML elements

(1) The <html> element represents the root (top-level element) of an HTML document, so it is also called the root element. All other elements must be descendants of this element.

(2) The W3C standard recommends adding a lang attribute to the html element. The function is a. to help the speech synthesis tool determine the pronunciation to be used; b. to help the translation tool determine the translation rules to be used; lang="en" indicates this HTML document The language of this document is English; lang="zh-CN" indicates that the language of this HTML document is Chinese;

4. head element

(1) The HTMLhead element specifies document-related configuration information (also known as metadata), including the title of the document, referenced document styles and scripts, etc.

(2) What is metadata (meta data) is the data describing the data; here we can understand it as the configuration of the entire page:

(3) What are the common settings?

Generally, at least the following two settings will be included. The title of the page: the title element

Web page encoding: The meta element can be used to set the character encoding of the web page, allowing the browser to display each text more accurately. If it is not set or set incorrectly, it will lead to garbled characters; generally, utf-8 encoding is used, covering almost all characters in the world. Word;

5. body element

The content inside the body element will be what you see in the browser window, that is, the specific content and structure of the web page. Most of the HTML elements learned later are written and presented in the body;

4. Introduction to CSS

Make our web pages more colorful and more flexible in layout.

The biggest contribution of CSS is: let HTML be separated from the style, and realize that HTML focuses on structural presentation, and the style is handed over to css

CSS does a great job, if JavaScript is the magician of web pages, then CSS is the beautician of our web pages

concept:

CSS (Cascading Style Sheets), commonly referred to as CSS style sheets or cascading style sheets (cascading style sheets)

effect:

It is mainly used to set the text content (font, size, alignment, etc.), image shape (width, height, border style, margin, etc.) in the HTML page, as well as the layout and appearance display style of the layout.

Based on HTML, CSS provides rich functions, such as font, color, background control and overall layout, etc., and can also set different styles for different browsers.

5. Four introduction methods

1. The first import method

Inline style sheet (separation of structure and style is proposed for the first time) Usage: Add a style attribute in the tag

2. The second introduction method

Internal style sheet usage: Add a style tag inside the head tag

3. The third introduction method

External style sheets (full separation of structure and style)

4. The fourth introduction method

Imported

Note : The difference between linking and importing:

The link type is written at the html level, and the import type is written using css scripts; when the page is loaded, the link type is to load the css document first, and then display the html page; while the import type is to load the html first and display it, and then load it The effect of css script;

So: it is recommended to use the link type, not the import type, but we need to know that there is such a way;

The principle of priority and proximity (display) Inline > (link style who is behind) Execution order is executed from top to bottom, and the same attribute is executed sequentially. In the case of the same weight, the latter will overwrite the former

Summary
The above is what I want to talk about today. This article only briefly introduces some basic knowledge of html and css

html and css basics

foreword

1. Understanding HTML

1. What is HTML?

2. What is a markup language?

3. What is hypertext