Web standards

Web standards are not a certain standard, but a collection of a series of standards developed by the W3C organization and other standardization organizations.

Web standard composition

Composition : It mainly includesthree aspects : structure (Structure), performance (Presentation) and behavior (Behavior) .

standard Description

structure The structure is used to sort and classify web page elements . We mainly learn HTML.

which performed Performance is used to set the layout, color, size and other appearance styles of web page elements , mainly referring to CSS

behavior Behavior refers to the definition of web page model and the preparation of interaction , we mainly learn Javascript

Want to state our source code: .HTML .css .js

web standard summary

The web standard has a three-layer structure, namely structure (html), performance (css) and behavior (javascript)

The structure is similar to the human body, the appearance is similar to human dress, and the behavior is similar to human behavior

Ideally, their three layers are independent, put in different files

standard	Description
structure	The structure is used to sort and classify web page elements . We mainly learn HTML.
which performed	Performance is used to set the layout, color, size and other appearance styles of web page elements , mainly referring to CSS
behavior	Behavior refers to the definition of web page model and the preparation of interaction , we mainly learn Javascript

HTML first knowledge

basic concepts

It refers to an HTML hypertext markup language ( H yper T EXT M arkup L anguage) language is used to describe a web page.

HTML is not a programming language, but a markup language (markup language)

Markup language is a set of markup tags

A web page is composed of web page elements, which are described by html tags, and then parsed by the browser, and then displayed to the user.

The so-called hypertext has two meanings:

Because it can add images, sounds, animations, multimedia and other content ( beyond text limitations )

Not only that, it can also jump from one file to another, linking with files on hosts all over the world ( hyperlink text ).

html summary:

html is a hypertext markup (tag) language

Learn html mainly learn html tags

Use html tags to describe web page elements. Such as image tags, text tags, link tags, etc.

Tags have their own grammatical specifications, all html tags are represented by <>

HTML skeleton tags

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>
html skeleton tag summary

Label name definition Description

<html></html> HTML tags The biggest label on the page, we become the root label

<head></head> The head of the document Note that the label we must set in the head label is title

<titile></title> Title of the document Let the page have its own page title

<body></body> The body of the document The element contains all the content of the document, and the page content is basically placed in the body

Schematic diagram:

Note: HTML tag names, class names, tag attributes and most attribute values are unified in lowercase

Label name	definition	Description
<html></html>	HTML tags	The biggest label on the page, we become the root label
<head></head>	The head of the document	Note that the label we must set in the head label is title
<titile></title>	Title of the document	Let the page have its own page title
<body></body>	The body of the document	The element contains all the content of the document, and the page content is basically placed in the body

HTML element tag classification

label:

In HTML pages, elements with "< >" symbols are called HTML tags

As mentioned above, <html>, <head>, and <body> are all HTML skeleton structure tags.

classification:
<标签名> 内容 </标签名>  比如 <body>  我是文字  </body>
Regular elements (double label)

In this grammar, " <tag name> " indicates the start of the tag's role, generally called " start tag ", " </tag name> " indicates the end of the tag's role, generally called " end tag (end tag) tag) ", beginning and end.

Compared with the start tag, the end tag just adds a closing character "/" in front .

In the future, basically all the double tags

Empty element (single label)
<标签名 />  比如  <br />
An empty element is represented by a single tag. To put it simply, it does not need to contain content, only one opening tag does not need to be closed .

There are very few single dog tags, there are not many in total, we can remember more

HTML tag relationship

There are two types of interrelationships mainly for double tags : Be sure to be familiar with and remember this tag relationship, because we have a lot of tags nested later, it is easy to confuse their relationship.

Nested relationship
<head>  
    <title> </title> 
</head>
Constellation
<head></head>
<body></body>

`文档类型<!DOCTYPE>`

usage:
<!DOCTYPE html> 
effect:

The declaration is at the top of the document, before the label. This tag tells the browser which HTML or XHTML specification the document uses.

It tells the browser to parse the page according to the HTML5 specification .

HTML files must add a DOCTYPE declaration, and use the HTML5 document declaration uniformly

Page language lang

<html lang="en">  指定html 语言种类
The 2 most common:

enDefinition language is English

zh-CNDefine language as Chinese

<html lang="zh-CN"> Specify the language used in the html tag content as Chinese

Considering the compatibility of the browser and operating system, the zh-CN attribute value is still used currently

You can tell browsers, search engines, and some programs that process Html to do some corresponding processing or things on page language content . Such as

Set css styles or fonts in different languages according to the lang attribute

Tell search engines to do accurate identification

Let the grammar checker do language recognition

Help translation tools to do recognition

Help web page readers to do recognition, etc.

character set

<meta charset="UTF-8" />
Character set (Character set) is a collection of multiple characters .

To accurately process the characters of various character sets, the computer needs character encoding so that the computer can recognize and store various characters.

utf-8 is currently the most commonly used character set encoding method. Commonly used character set encoding methods include gbk and gb2312

gb2312 Simple Chinese includes 6763 Chinese characters GUO BIAO

BIG5 Traditional Chinese for Hong Kong, Macao and Taiwan

GBK contains all Chinese characters and is an extension of GB2312, adding support for traditional characters, compatible with GB2312

UTF-8 basically contains characters that all countries in the world need to use

This code is very critical, it must be written, otherwise it may cause garbled code.

This sentence allows the html file to be saved in UTF-8 encoding, and the browser decodes the corresponding html content according to the encoding.

Generally use " UTF-8 " encoding uniformly, please try to write it uniformly as standard "UTF-8", not "utf-8" or "utf8" or "UTF8".

Semanticization of HTML tags

Vernacular: The so-called semantic labeling refers to the meaning of labels .

According to the semantics of the label, give the most reasonable label in the right place to make the structure clearer

Convenient code reading and maintenance

At the same time, the browser or web crawler can parse well, so as to better analyze the content

Using semantic tags will have better search engine optimization

Is the semantics good: When we remove the CSS, the web page structure is still organized and has good readability . (It's as good-looking as streaking)

The principle to follow: first determine the semantic HTML, and then select the appropriate CSS .

(HTML learning record): Web standards, HTML first acquaintance

Web standards

Web standard composition

web standard summary

HTML first knowledge

HTML skeleton tags

HTML element tag classification

HTML tag relationship

`文档类型<!DOCTYPE>`

Page language lang

character set

Semanticization of HTML tags

Guess you like