HTML5 Beginner Tutorial, writing the first page using Notepad

• Background

While in the student dog era is also during the summer vacation, we just good use this time to learn another for I have not touched the field, that is, web programming. Although I wanted to be an Android engineer, the cross-platform of Android development now makes Android programming no longer confined to native development. I have been learning Android for almost a year, remember from last summer, I took the school lectures on the side of the book to learn the Android Foundation. Later, because of the limited content of the book, I bought the first line of the second edition of the Code from the school, now the basic knowledge of Android has been basically finished.

Because of the high interest in Android, I also want to be able to work in the future Android development, so in the Android field spent all the time to learn Android programming knowledge. After a year of learning, it's hard to make progress on Android, which is what we need to do for our Android primary development.

During this time, I bought several online recommended Android advanced books. For example:"Advanced Android Development, from small to expert","Android Elite Biography","Android Development Art exploration" and so on. But these books, after all, are advanced books,"Android Elite Biography" This will be slightly understood than others. Although I have learned a year of Android code, but read these books, in my sense of view or partial theory a little. Although there is some code in the book to explain the example, but the advanced knowledge after all can not be partial, want to understand deeply, but also need our own in-depth research.

It may be a bit off the mark, but it's something I've learned in the last one months and we've recommended a few Android books for you to learn. Online has a lot of related books recommended, but these are I have read, although some knowledge I this stage difficult to understand, but after the study career I will slowly overcome these difficulties.

· HTML5 Learning

Have to admit the fact that the program ape this profession is really live to learn old! Now a lot of Android may be biased to have Android + H5 mixed development experience in the program ape. H5 is the HTML5 (Hypertext label language). This kind of tag language is almost like our Android XML file, the so-called same parents born, always a bit similar.

Since we have this basic concept, it will be a lot easier to learn. There are two types of software architectures, which are summarized as follows:

1. C
2. b/S

C/S: That is client/server (client/server, for example: QQ, NetEase cloud Music, Youdao dictionary, etc.)

b/S: That is brower/server (browser/server, for example: Chrome, IE, Firefox, etc.)

So, our web page is this b/s architecture software, this software has an important feature: cross-platform.

With our QQ client as an example, we need to develop a Windows edition in the Windows environment, Linux needs to develop a Linux version, and Mac needs to develop a Mac version, Android, IOS, WindowsPhone and so on. This gives our software a much greater degree of difficulty in putting into use. We need to recruit a lot of engineers to develop different versions, and the cost of course is more.

In this way, our web page shows its great advantage. We run the browser on any platform it shows the results basically no difference. We are in Windows, Android, Mac, iOS and other platforms open [Baidu] basically no difference.

Since we study the Web page, we need to understand its basic composition. We take the human body here as an abstraction to understand our web page.

1, HTML (structure: Meaning for the main frame, constitute the basic structure of the Web page. For example: The skeleton of a person)

HTML has gone through several versions of our journey, and now we are basically unified in the use of HTML5. The HTML language is called the Hypertext label Language .

What is hypertext? Beyond the limit of text, we can only enter/display text in our text (commonly used Notepad). Hypertext can display both text and images, links, dynamic graphs, and so on.

2, CSS (performance: meaning for the display effect, good-looking, beautiful. For example: People's skin, clothing)

CSS is a CSS style sheet that is decorated with our HTML theme skeleton, such as: we give the font color, size, position, etc. It has to be decoupled from our HTML language and is generally not written in the HTML language, usually with tags introduced into our CSS stylesheet.

3, JavaScript (behavior: Meaning for general action, like click events, pop-up window behavior. For example: Human behavior action)

This is nothing to introduce, we will certainly have certain behavior on the page. For example: Click events, Input, bullets, and so on. This is what we call a Dynamic Web page, and what we call a static web page without behavior is like dying.

Said so many theoretical knowledge, in fact, this is quite useful, we from its thought can be found that its three division in fact no contact, to say really no contact, it is impossible. Just drew it off and divided it into three parts, in effect, to understand the decoupling. The hardest part is JavaScript. We put in the last study.

· HTML5 structure

Speaking so much, let's take a look at the code. First, we look at the most basic HTML skeleton, this is also the most necessary, based on this skeleton, a layer of development of our beautiful Web page.

· Development tools: Hbuidler (free, people build), we mainly use this software for development.

Today, we do not use the Hbuidler first, we have the simplest note to write a page, so as to facilitate the memory tag. The code is as follows:

<!doctype html><html><head> <meta charset= "Utf-8" ><title> my first page: Html</ title></head> <body> < h1> I am the title of the Web page </h1></body></HTML>      

• Label Introduction

<!doctype html>

The beginning of the specified document type is HTML, in order to allow our browser to better decode our web page, to avoid an unknown exception.

This is a necessary label, full text and only one, is the entire HTML body, all child tags must be written inside.

There is no more code browser to show the effect, this is for developers or search engines to use, usually configure some HTML properties, such as our CSS style.

<title>

This title shows the location of our browser's title bar, its main role: for example, Baidu first time the search engine will go through the title contains this content.

<meta charset= "Utf-8" >

This is very important, CharSet specifies the character set encoding, there are common ASCLL (encoding used in the United States), GBK (code used in China), UTF-8 (Universal code). As long as we are developing on Earth, we use UTF-8.

<body>

All the code in this will be displayed in our browser. In other words, it is displayed to the user with visible effects.

Here a total of 6 heading levels, size in turn, we commonly used in general to

<br/> line break

Split Line

<center> Center Display

<font color= "Red" size= "7" > font Color and size, size range 1~7

<p> Paragraph content </p> another paragraph with spacing between paragraphs

<a href= "link Address" target= "_self" > link Displays the name </a> hyperlink that is used to jump the page.

_self for this page jump (default), _blank for a new page jump.

</img> display picture (PNG, JPG, GIF are all available.) ）

ALT attribute must remember to write. For example, our search engine will traverse the ALT attribute, we write a cat, then search for cat pictures will appear, even if the picture is not a cat.

This tag also comes with the width, height property, which specifies the image size (px pixels). If only one width/height is specified, it is scaled at a wide, higher scale, and the specified two is scaled at the specified size. If you don't understand, you can try it yourself.

• Picture format differences

Since we have mentioned the image format, we have a variety of options. For example,. jpg,. png,. gif, and so on, let's take a look at these three differences and prioritize which one to choose.

One, jpg format Picture:

JPG format Picture The biggest drawback is that it does not support transparency, but it has the advantage of supporting more colors, rich and realistic colors.

Second, PNG format Picture:

PNG complements the image in JPG format, it supports the transparency effect, and supports many colors.

Three, GIF format Picture:

GIF distinguishes two other kinds, which are animated pictures. While it supports transparency, it is simply linear transparent, which is less transparent and supports fewer colors than it is with a high degree of complexity.

Our developers need to make the appropriate choices according to our needs. For example: The picture shows the same effect, we choose to occupy the smallest memory, if the display effect is good, we certainly choose to display the effect first, in order to increase the user experience.

Tag Properties we introduced here first, we might as well copy our code into Notepad, and then change the suffix to. html file to see the effect, we will drop our page effect.

?

· HTML5 Combat

According to some of the tags we just learned, now we're going to do a Web page. For convenience, I used Li Bai's two poems to serve as our web content, we can preview the effect of our web page.

This simple example covers a few of the points we have just learned, so-called ingenious. This is our pure HTML without any CSS style, looks a bit ugly. But between beginners, can also make a study. Take a look at our website source code, self-pondering, familiar with our label it.

First look at the effect of our web page, this picture is a bit abnormal scaling, we try to try the source of the effect will be better:

?

target="_blank" >&copy; All rights reserved </a></p><p><a href= "81505627
HTML5 Beginner Tutorial, writing the first page using Notepad