01-html and head Introduction

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

Iii. Introduction of development tools

Use of Sublime text

Reference Link: Sublime text usage Tips

https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/02-Sublime%20Text%E4%BD% Bf%e7%94%a8%e6%8a%80%e5%b7%a7.md

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

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等

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.

Show multiple spaces to use &nbsp;

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

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Document</title></Head><Body>    </Body></HTML>

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.

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 after jumping to the corresponding URL, note the semicolon -<Metahttp-equiv= "Refresh"content= "2; Url=http://www.luffycity.com "><!--Specify the content type and encoding type of the document -<Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" /><!--tell IE to render the current page in superlative mode -<Metahttp-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.

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

<name= "Description"  content= "NetEase is China's leading internet technology company, providing users with free email, 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).

<namecontent= "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.

01-html and head Introduction