1. HTML Overview

What is HTML 1.1

HTML called HTML, is a logo of the language. It includes a series of tabs. These tags can be unified document format on a network, and the dispersion of Internet resources connected to a logical whole. HTML text is descriptive text consisting of HTML commands, HTML commands can be illustrated text, graphics, animation, sound, tables, links and so on.

Hypertext is a way of organizing information, it is the method by hyperlink in the text of text, graphics and other information associated with the media. These interrelated information media may be in the same text, it could be other documents, or geographically dispersed files on a remote computer. This way of organizing information will be distributed in different locations of information resources to connect with random way for people to find, easy retrieval of information provided.

1.2 HTML can do

HTML for writing web pages. Usually the Internet through a browser we have seen most of the html pages are written. When a browser to access web pages, you can "View page source right /" to see the specific html code through.

Page content contains: Content HTML code, CSS codes, JavaScript code, etc.

HTML code: for displaying data to be displayed.

CSS code: the data show that the more attractive.

JavaScript code: the data show the entire page animate.

Web page content based on whether the change is divided into: static pages, dynamic pages.

Static page: After writing in the browser no longer change the page. HTML is used to write static pages.

Dynamic pages: will display different content depending on the situation. For example: After a successful login page displays the user name.

1.3 HTML language features

HTML files do not need to compile, can be read directly from the browser

HTML file extension is * .html or * .htm

HTML structure is composed by a label

Pre-defined label name, we just need to understand its function.

Label names are not case sensitive

Tags usually start and end tags from the composition. For example: <a> </a>

If there is no end tag suggestions / end with. For example: <img />

HTML structure consists of two parts: the head and the head member body

2. HTML structure

For a web page, we major in HTML to learn some commonly used labels. By learning these labels, we can get 90% of the site can slowly build.

Front-end software HBuilder knowledge we use to program, first open the sublime, the new index.html, enter html Enter:

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

Generate a lot of content, it is not looking very ignorant force. So then let's dissect this code.

2.1 html tag

The structure of each page, there will be a outermost tag, which indicates the start of the document content.

html tag consists of two parts: the head of the statement ( <head>) and the content portion ( <body>).

If the web compared to the onion, layer coated with a layer, that <html>label is the outermost layer of the onion skin, <html> element is the root tag of a page, so all the other elements are the descendants of this element.

2.2 head tag

To a web page compared to a person, then head tag is the basic information about this person, although this can not be directly observed, but the content does exist, and is essential in a web page. Information for indicating a head base in the web (meta information)

2.3 body tag

To a web page compared to a person, then the body tag is this person's body, color, hemorrhoids. The content inside it is visible and tangible. For the person's character, the idea of obscenity, sexual orientation and other body is no control of. Then the body tag page contains all the visible elements, such as display the contents of text pages, pretty meinv, beautiful music, cool movies belong to the body of the tube.

Well, I believe we have a certain knowledge of the html document structure, then we are going, we learn every one of them in the head and body of related content.

3. HTML specification and notes

3.1 HTML specification

HTML is not case sensitive, meaning <head>and <HEAD>can be.

Extension of the HTML page is html or htm (win32 era, the system only recognizes the use of extension 3 is now generally use .html.

HTML structure:

Declarations section: The main role is to tell the browser to use this page Which standards. HTML5 is standard.

head part: some extra information page tells the server. It will not be displayed on the page.

body parts: we have written code must be placed within this tag.

Writing HTML 3.2 specification

All tags must be properly nested, nesting can not cross.

Cross-nesting:

<html><head></html><head>

Correct wording:

<html><head><head></html>

All tags are in lower case as far as possible, of course, also be capitalized, because html is not case sensitive, but uppercase lowercase contrast, it is easier to read.

All labels to be closed:

Double closing example<html></html>

For example a single closed<meta />

3.3 HTML comments

In the page, who commented-out code that browsers are not going to resolve.

html in comments:

<! - This is my critical content ->

Notes the role:

To see for himself. With more content pages, efficient annotation allows our code easier to read, and we can use the key code comments marked out.

For others to see. For example, to write html code, the code needs to explain in some places, while others look to be transferred to analysis and interpretation, and this time it is necessary to use html comments.

Proper use Note:

<! - <! - This is my critical content -> ->

Not a html comments, add a comment html, otherwise the browser will resolve as follows.

Notes shortcut: on windows Ctrl + /

4. head related tags

associated head tab label is invisible, it is only applied to some basic information page (meta information).

4.1 common meta tag properties

There are two meta tag attributes, they are http-equiv and name attributes, different attributes have different parameter values, these different parameter values to achieve a different page functions.

4.1.1 http-equiv attribute

It is used to convey useful information to the browser help browser correctly displays Web page content, the corresponding attribute value content, the content is actually the content of the variables of each parameter value.

In html4.01 version, we use the following configuration to specify the character encoding of an HTML document.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

But in the html5 version, we use a more streamlined way to specify the character encoding of an HTML document.

<meta charset="UTF-8">

4.1.2 name attribute

Mainly for the keywords and description of the page, the search engine is written to see, there may be a plurality of keywords with ',' number of spaced, content attribute values corresponding thereto, the content of the main content is to facilitate the search engine robot find information and use of classified information.

< Meta name = "Keywords" Content = "Netease, email, games, news, sports, entertainment, female, Asian Games, forums, message" />

These keywords is to tell the search engine, the website is doing, can improve search hits. So that others can find you, search.

< Meta name = "the Description" Content = "NetEase is China's leading Internet technology company, to provide users with free e-mail, games, search engine services, the creation of news, more than 30 content channels and entertainment, sports, and blog, videos, forum and other interactive exchanges, Wang Ju people power. " />

Just set Description page description, then the Baidu search results can be displayed these statements, this technique is called SEO (Search Engine Optimization, Search Engine Optimization).

4.2 title tag

What are the main mainly used to tell users and search engines This page is a search engine page title can quickly determine the theme of the current page.

< Title > love programming small gray </ title >

Web front-end basis (1): HTML (a)