Simple finishing of the front-end HTML section

Web standards:

Web Preparation Introduction
World Wide Web Consortium, the organization used to develop Web standards (organization)
Web standards: Guidelines for making Web pages to follow
The classification of Web Preparation specification: Structure standard, performance standard, behavior standard.
Structure: HTML. Presentation: CSS. Behavior: Javascript.

Web Preparation Summary
Structural standard: equivalent to human body. HTML is used to make a Web page.
Performance Standard: the equivalent of a person's clothes. CSS is to beautify the Web page.
Standard of conduct: equivalent to a person's action. JS is to let the Web page move, with vitality of

Browser Introduction
Browser kernel:
IE---Trident
Chrome---Blink
Firefox---Gecko
Safari---WebKit

Why the compatibility issue occurs
"Browser kernel" is the "rendering engine" used by the browser,
The rendering engine determines how the browser displays the contents of the page and the formatting information of the page.
The rendering engine is the root cause of compatibility issues.

Development tools
Sublime Text


HTML Introduction
1. Overview of HTML
HTML Full name Hypertext
Mackeup
Language, translated as Hypertext Markup Language, is not a programming language, it is a descriptive markup language that describes how hypertext content is displayed. such as font, color, size and so on.
Hypertext: Audio, video, picture is called hypertext.
Tags: < english words or letters > called tags, an HTML page is made up of a variety of tags.
Role: HTML is the language that is responsible for describing the semantics of the document.
Note: The HTML language is not a programming language (there is a compilation process), but rather a markup language (no compilation process), and the HTML page is parsed directly by the browser.

HTML is the language responsible for describing document semantics
In HTML, there is nothing else but semantics.
What is the role of H1 tags?
Correct answer: Add the semantics of the main title to the text.
Wrong answer: Bold text, add black, grow larger.

Web terminology for HTML
Web page: A page made up of various tags is called a Web page.
Home page: A homepage or navigation page of a website.
Tags: <p> called the start tag,</p> is called the end tag, also called the tag. Each label has a special meaning.
Element:<p> content </p> called element.
Properties: The auxiliary information that is given to each label.

HTML Color Introduction
Color representation:
Pure words: red, green, blue, orange, gray, etc.
10 binary representation: RGB (255,0,0)
16 binary representation: #FF0000, #0000FF, #00FF00等

Specification of HTML
HTML is a weak language
HTML is case insensitive
HTML page suffix name is HTML or HTM (some systems do not support suffix names longer than 3 characters, such as DOS system)
Structure of HTML:
Declaration part: The main function is to tell the browser which standard is used by this page. is the HTML5 standard.
Head part: Tell the server some extra information about the page. Does not appear on the page.
Body part: The code we write must be placed inside this tag.


Specifications for writing HTML
(1) All markup elements must be properly nested, not cross-nested. Examples of correct wording:(2) All tokens must be lowercase.
(3) All marks must be closed.
Bilateral marking:<span></span>
One-sided mark:<br> turn into <br/> (4) All attribute values must be quoted. 
(5) All attributes must have a value. <input type= "Radio" checked= "checked"/>

Basic syntax features of HTML
(1) HTML is not sensitive to the line, the tab is not sensitive
(2) Blank folding phenomenon
(3) The label should be strictly closed

HTML structure Detailed
Document Declaration Header
<! DOCTYPE ...

Header label (head)
The head tag is placed between the header parts. This includes:<title>, <meta>, <link>,<style>

<title&gt: Specifies the title of the entire page, displayed at the top of the browser.
&LT;META&GT: Provide basic information about the page
<link&gt: Defines the relationship between a document and an external resource.
<style&gt: Defining the relationship between an internal style sheet and a Web page

Meta Tag Introduction:
The element can provide the original information about the page (mata-information), a description of the search engine and the frequency of updates, and keywords.
The label is located in the header of the document and does not contain any content.
The information provided is not visible to the user. Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.
Common META Tags:
(1) Http-equiv property
It is used to convey some useful information to the browser, to help the browser to correctly display the content of the Web page, and the corresponding property value of content,content content is actually the variable value of each parameter.

<!--redirect 2 seconds to the corresponding URL, pay attention to the semicolon--
<meta http-equiv= "Refresh" content= "2; Url=http://www.baidu.com ">
<!--the content type and encoding type of the specified document-
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<!--tell IE to render the current page in superlative mode--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

(2) Name property
Mainly used for page keywords and descriptions, is written to the search engine to see, the key word can have a number of ', ' separated, with the corresponding property value for content,content content is easy to search engine robots to find information and classification information.
<meta name= "Keywords" content= "netease, email, games, news, sports, entertainment, women, Asian Games, forum, SMS"/>
These keywords, is to tell the search engine, this page is why, can improve the search hit rate. Let others find you, search.


<meta name= "Description" content= "NetEase is China's leading internet technology company, to provide users with free mailbox, games, search engine services, open news, entertainment, sports and more than 30 content channels, and blogs, videos, forums and other interactive exchanges, The power of the web-gathering man. "/>
As long as the set description page description, then Baidu search results, you can display these statements, this technology is called SEO (search engine optimization, SEO).

<meta name=viewport content= "width=device-width, initial-scale=1" >
The above tag is to let our web page support mobile, mobile device first (understand)

Title Tag
Mainly used to tell users and search engines the main content of this page, search engines can be through the page title, quickly determine the current page theme.
<title> Home </title>

Simple finishing of the front-end HTML section