01-html Introduction and head tags

Main content

• Web standards
• Browser Introduction
• Introduction to Development tools
• HTML Introduction
• HTML Color Introduction
• HTML specification
• HTML structure Detailed

First, 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

Second, the browser introduction

Browser is the platform to run the Web page, commonly used browsers are IE, Firefox, Google (Chrome), Cheetah Browser, Safari and opera, etc.

Browser kernel:

Browser	Kernel
Ie	Trident
Chrome	Blink
Firefox	Gecko
Safari	Webkit

The ps:"browser kernel" is the rendering engine used by the browser, and 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.

Iii. Introduction of development tools

Use of Sublime text

Reference Link: Sublime text usage Tips

Iv. Introduction of HTML

1. Overview of HTML

HTML Full name Hypertext Mackeup Language, translated into Hypertext Markup Language, which is not a programming language, 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 various 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 .

HTML is a pure text file (is renamed with TXT file), with some tags to describe the semantics of the text, these tags are not visible in the browser, so called "hypertext", so it is "Hypertext Markup Language."
So, next, we're definitely going to learn a bunch of tags in HTML that can give different semantics to text.

For example, when asked about the interview, what does the H1 tag do?

• Correct answer: Add the semantics of the main title to the text.
• Wrong answer: Bold text, add black, grow larger.

2. 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> called the end tag, also called the tag. Each label has a special meaning.
• element: <p>内容</p> called element.
• Properties: The auxiliary information that is given to each label.

Five, 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等

We will first remember the color of a few pure words, CSS lessons are detailed in 10 and 16 binary.

RGB Color Mode:

• In nature, all colors can be used in red, green, Blue (RGB) The three color wavelength of different intensity combinations, which is often said the principle of three primary colors.
• RGB tricolor is also called additive color mode, this is because when we add different wavelengths of light together, we can get a different blend color. Example: Red + green = yellow, red + blue = purple, green + blue = Cyan
• In digital video, 8-bit encoding of the RGB tri-color is about 16.78 million colors, which is what we often call true color. The RGB color mode is used for all display devices.
• RGB each has 256 level (0-255) brightness, 256 levels of RGB color can be combined out about 16.78 million colors, namely 256x256x256=16777216.

VI. 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.

1, the specification of 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 markings:<span></span>
• One-sided marking: <br> turn into <br /> turn , and

(4) All attribute values must be quoted.




(5) All attributes must have a value.<input type="radio" checked="checked" />

2, the basic grammatical characteristics of HTML (1) HTML is not sensitive to the line, the tab is not sensitive

HTML only cares about the nested structure of tags, nested relationships. Who nested who, who was nested, and line-wrapping, tab-Independent. No line break, tab not tab, does not affect the structure of the page.

In other words, HTML does not rely on indentation to represent nesting, that is, to look at the label's parcel relationship. However, we find that there is good indentation and the code is easier to read. Ask everyone to indent the label correctly.

(2) Blank folding phenomenon

All the text in the HTML, if there are spaces, line breaks, tab will be collapsed to a space display.

(3) The label should be strictly closed seven, HTML structure detailed

Create a new HTML file, enter Html:5, and press the TAB key to automatically generate the following code:

<! DOCTYPE html>"en">"  UTF-8">    <title>Document</title>
1. Document Declaration Header
Any standard HTML page, the first line must be a
<! DOCTYPE ...
The beginning of this line is the document declaration header, DocType Declaration, referred to as DTD. This tag tells the browser which HTML or XHTML specification to use for the document.
Ps:
Xhtml:extensible hypertext Markup Language, extensible Hypertext Markup Language.
The main purpose of XHTML is to replace HTML, or it can be understood as an upgraded version of HTML.
HTML tag writing is very irregular, causing other devices (ipad, mobile phone, TV, etc.) to not display properly.
XHTML is basically the same as HTML4.0 's markup.
XHTML is strict, pure HTML
The following content is only understood:
What are the specifications of HTML4.01?
First we determine one thing, we are now learning HTML4.01 This version, this version is IE6 start compatible. HTML5 is compatible with IE9 start . But IE6, 7, 8 these browsers can not be prematurely eliminated, so these years the web should be used HTML4.01 to make. Today, mobile phones, mobile Web pages, you can use HTML5, because of its higher compatibility.
Aside from that, HTML1 to HTML3 is used by the U.S. military and advanced research institutes and is not publicly available.
There are two major kinds of norms in HTML4.01, each of which has 3 kinds of small specifications. So there are 6 different specifications (see below):

 
   

  
    
 
     
The HTML4.01 contains two general and XHTML specifications.
 
    
 
   
 
   

  
    
 
     
HTML feel that some of the rules are not rigorous, such as the label can be used in uppercase?<H1></H1>
 
    
 
   
 
   

  
    
 
     
So, the HTML feel, put some standard strict standards, and set up a XHTML1.0. The letter X in XHTML, which means "strict".
 
    
 
   
Summing up, HTML4.01 altogether has 6 kinds of DTD, plainly speaking, the first line of HTML statement a total of 6 kinds:
The following three types of small specifications are explained:

 
   

  
    
 
     
strict: "Strict", this model is more stringent requirements. Where is this strictly manifested? Some tags are not available.
For example, the U tag is to underline a text, but this is in conflict with the nature of HTML, because HTML is responsible only for semantics, not for styles, and U is a style. Therefore, you cannot use the U-tag in strict.
How do you add an underscore to the text? Future CSS will be resolved using CSS properties.
XHTML1.0, then, is stricter because the system itself stipulates that the label must be lowercase, must be tightly closed, the attribute must be quoted, and so on.
 
     
transitional: "Ordinary", this pattern is not a few other specifications.
 
     
Frameset: Represents "frames", which are used on the frames page.
 
    
 
   
The html:xt,x indicated in the sublime input indicates that xhtml,t represents transitional.
The HTML5 greatly simplifies the DTD, which means that there is no XHTML in HTML5 (it is a face-up):
<! DOCTYPE html>
OK, here's the point.
2. Head tag
The head tag is placed between the header parts. This includes: <title>、 <meta> ,<link>，<style>

 
   

  
    
 
     
<title>: Specifies the title of the entire page, displayed at the top of the browser.
 
     
<meta>: Provides basic information about the page
 
     
<link>: Defines the relationship between a document and an external resource.
 
     
<style>: Defining the relationship between an internal style sheet and a Web page
 
    
 
   
2.1 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, note the semicolon--><meta http-equiv="refresh" content="2 ; url=http://www.luffycity.com"><!--Specify the content type and encoding type of the document--><meta http-equiv="  Content-type "content="text/html;charset=utf-8 "/><!-- Tell IE to render the current page in top-level 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, forums, 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, providing users with free mailbox, games, Search engine services, the creation of news, entertainment, sports and more than 30 content channels, and blogs, videos, forums and other interactive exchanges, the power of the network.  " />
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). 
The effect is as follows:
<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)
2.2 Title tag is mainly used to tell the user and search engine the main content of this page, search engine can through the page title, quickly determine the current page theme.
<title> Luffy City </title>
The effect is as follows:
01-html Introduction and head tags