HTML Learning Note 1

I. Special keys and shortcut keys

There are special keys in addition to letters and numbers on the keyboard: CTRL, SHIFT, ALT, Tab

The CTRL key is the meaning of the English control "controls", this button, the individual press does not have any effect, all need to press with other keys to use. For example, CTRL + C, which means holding down the CTRL key, and then knowing that the function is copied.

The SHIFT key is the English shift "gear shift" meaning, press this button at the same time hit the letter, typed is the capital letter. familiar with Shift key to write capital letters, try to use less case lock key.

The ALT key is the English alternate "adjusts" the meaning, and the CTRL, oneself presses not to use, all must and the other key presses together to use. ALT+F4, for example, means closing the current window and Alt+f4 quickly closing the window.

The TAB key is used for the meaning of the table "tab" and often implements the "toggle function". For example, we open two documents in the word software at the same time, we can use the Ctrl+tab key to switch between two documents. Of course, you can use the ALT + TAB key to switch programs.

　　

The following shortcut keys must be mastered:

CTRL + C copy

Ctrl + V Paste

Ctrl+x cut (that is, move the file, ctrl+x a file in the original folder, and then paste Ctrl + V in the new folder)

Ctrl+tab switch (specific switch what, to see what software)

ALT+F4 Closing the program

F2 renaming

F5 refresh, such as when looking at the Web page, want to refresh the page, press F5

CTRL + Z Undo, is this step dry wrong, CTRL + Z Undo

Windows+e Open Explorer

Windows+d Display Desktop

CTRL + Space switch in English, is forbidden to switch with the shift key.

Two. Some basic principles of browsing the Web

1. when surfing the internet, there is real, physical file transfer!

2. So we often feel the second time to open the page, faster than the first time, this is because the first time the page opened, all the pictures and files have been saved.

3. The server contains Web pages related files, including HTML files, CSS files, JS files, pictures and so on. When we open the browser and enter the URL, our computer will make an HTTP request to these files. After the server receives the request, the files are transferred to our computer via the HTTP protocol (saved to a temporary folder in the computer). These files will be rendered and presented on our computer's local browser.

　　3. HTTP: Hypertext Transfer Protocol, hypertext Transfer Protocol.

This is a file transfer protocol, when we surf the Internet, all the files are via HTTP this protocol is transferred from the server to the client's computer.

4.index.html is the default home file .

Three. HTML preliminary Understanding 1. A plain text file is such a file:

1) only text, no style;

2) Use Notepad and other plain text editor to read, not garbled

3) HTML, CSS, JS are pure text.

　　

2. HTML is the language responsible for describing document semantics

HTML is an abbreviation for English HyperText Markup Language, Hypertext Markup Language.

. html is the format of the Web page.

HTML provides a lot of tag pairs, which can add different semantics to text. Like what:

main title .

level two heading .

<p> </p> Tag Pairs, general paragraph .

Now the industry standards, Web technology strict three-layer separation:HTML is responsible for describing the semantics of the page, CSS is responsible for describing the style of the page, JS is responsible for describing the dynamic effect of the page.

Therefore, HTML does not allow text to be centered, you cannot change the text size, font, color. Because these belong to the style category, are all CSS dry things, HTML can not let the box movement, because these properties of the category of behavior, are JS dry things.

HTML can only do one thing, which is to add semantics to text through tag pairs. This is the only thing HTML can do.

HTML , in addition to semantics, nothing else.

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

　　

For example, what is the role of the H1 tag?

Correct answer: Add the semantics of the main title to the text

Wrong answer: bold, black, and big text

Iv. Development Tools Sublime Introduction

　　

Common shortcut keys in sublime:

CTRL + Scroll zoom to zoom out text

Ctrl+shift+d copying when moving forward

Ctrl+shift+k Delete When moving forward

Ctrl+shift+↑ up and move forward

Ctrl+shift+↓ move forward

When you hit the label later, just enter the name of the tag, and then press TAB to automatically generate the tag pair.

For example, enter P and press TAB, and the software automatically generates:

1 <p></p>

V. HTML skeleton and Basic syntax

The 1.html has a basic skeleton that can be quickly generated with sublime:

　　

Skeleton Abstract Out:

1 2 3 4 5 <body> 6 7 </body> 8

The outermost label of the Web page is the

Head tag, describe the configuration of the Web page; body Content that is visible to the user.

The complete skeleton:

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 2 3 4 <meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" > 5 <title> hahaha </title> 6 7 <body> 8 9 <p> I was a little paragraph </p> Ten </body>

The 1th line is the declaration header of the Web page. The term is called DocType defintion, document type definition, or DTD. This line of statements is very complex and implies a URL. The web is a standard organization. HTML, CSS, JS specifications are published in the definition of a. World Wide Web Coalition, the World Wide Web Consortium. Page declaration header can tell the browser, which is a standard page.

The 2nd line, is the largest HTML tag, all the content of the Web page, will be wrapped in this tag in the child.

We found that there are two attributes in the HTML tag:

xmlns= "http://www.w3.org/1999/xhtml" namespace, is a specification;

xml:lang= "en" Language is English

3rd Okay, that's head . tag is the configuration.

4th Yes, <meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" > configuration of the character set

5th Line,<title> ha ha </title> the title of the Web page, which can be displayed in the browser's tab bar.

7th Yes, body . the label is the content of the Web page that users can see.

HTML Learning Note 1