HTML basis (1)

1. Recognizes page

Constitute the page: text, images, hyperlinks, audio, video and flash like

Web page code needed by the browser to parse and render

2. Common browsers

1.IE browser

2. Google Chrome

3. Firefox

4.safari browser

5.Opear browser

Each browser core comprises two parts: a rendering engine (for rendering html + css) and parsing engine (javascript code to parse)

3.WEB standard (Key)

WEB page specific components has three parts:

Skeleton html tags page: Structure

Style: css styles make the page look more beautiful

Behavior: javascript js let referred pages can have dynamic effects, you can also interact with data and server-side

Also known as the front page of three layers: a structural layer, layer styles, layer behavior

4. Writing of a web page

1. On the desktop, or right-click a file in Notepad to create a new folder index.txt

2. Double-click to open the Notepad file

3. Write the basic content of this document

4. modify this file index.txt as index.html, this time will find this plain text file into a html page

5. Double-click this html page, you can open the view in a browser

5. coded website

Internationally accepted is "UTF-8" includes almost all the literal language of the world

Domestic general is generally "GBK", "GB2312" to resolve the country more friendly text

Remember: let us find unity after use "UTF-8" encoding format on this

6. common editor

sublime

webstorm

HBuilder

vscode current base class stage is vscode use this editor plug-in is very easy to use, open source, free

7. The basic page framework structure

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

8. Why tag?

To page more beautiful, and good layout and post-maintenance, require the use of labels on the page text, images, and hyperlinks a control.

9.h series of labels

h Series title tag is generally used to set the content

h1 general for the biggest title or logo, a page can have only one h1

h series of labels only h1 --- h6

h series of tags are block-level tag, it is characterized by its own line in the browser itself.

10. paragraph tag p

Page tag for the tag segment is p, which is a ditag, pairs exist

If you want a sentence, paragraph, line feed may also be added in<br/>

<br />

11. The horizontal dividing line

<hr />

12. The relationship between the label

1. nesting of the current tab there is also a sub-label, which is a nesting relationship

< Body > 
    < P > This is a paragraph tag </ P > 
</ body >

2. The relationship between the two side by side at the same level label is tied

<head></head>
<body></body>

13. label classification

According to written classification carried out:

Double label

<head></head>
<body></body>

Single-label

<br/>
<hr/>

Text formatting tags are generally used in the modification of the page, such as displaying a sprite

< B > </ B > < strong > </ strong >       may be shown in bold text
 < I > </ I > < EM > </ EM >                         the text shown in italics
 < S > </ S > < del > </ del >                         the underlined text is added or deleted line
 < U > </ U > < INS > </ INS >                       the text underline

According to display a page of classified:

Block-level elements: their own separate line, do not allow other label displays such as in the Bank: h series div tag list tag p ul li ol li dl dt dd

Inline elements: a plurality of one row may be displayed for example: b, strong, em, s, span a

Inline block elements: input button img

14. semantic tags

In summary, the appropriate label is placed on the page in place.

benefit:

Easy to read and maintain code
While allowing the browser or web crawler can be well resolved, in order to better analyze its contents
Using semantic tags will have a better search engine optimization

Two important but there is no semantic tags:

div for content tagging pages a chunk, which can be text, images, as well as paragraphs, hyperlinks, video ...

span span is generally used to designate a small area of text styles can be provided the necessary piece of text, for example, text size, color, ...

15. The use of a hyperlink tags

a label used to jump to another page, not only can jump to any page in the network, you can also jump to any one of us in this project page

The basic grammatical structure:

< A href = "to jump to target the URL of" target = "_ Self" > link content </ A >

target attribute default values are: _selft there is another attribute _blank open in a new page

16. The image tag img

Page picture you want to use img tags to display

< IMG the src = "path picture address" Alt = "image description when loading failed" title = "Description of ordinary image" >

alt: failed to load images only when the content will be displayed, if the picture is displayed correctly, then the content will not display alt

title: Regardless of the picture failed to load or not, will display the contents of title

17. Picture Path

relative path:

./ ../ beginning of a path is called a relative path is the path relative to the current directory .html files are located and to find;

Relative path because of the position change .html file changes

Absolute path:

The system starts with a drive letter or a path to the domain name or IP address, known as an absolute path;

Benefits absolute path is regardless of the position change .html file, will display pictures

vscode commonly used shortcuts

ctrl + c to copy the current content

ctrl + x Cut current content

ctrl + v to paste the current content

ctrl + / annotation piece of content

ctrl + z undo this operation

ctrl + shift + d copy the contents of the current line to the next line

vscode common plug-ins

1. Auto Close Tage automatic closing HTML / XML tags

2. Auto Rename Tag rename automatically paired HTML / XML tags

3. AutoFileName file path tips

4. EaseServer let's open a file opened with http prefix location, rather than a file shortcuts: ctrl + shift + enter

5. open in brower open in the browser, right-click will open in browser option in the left pane after installation

6. Path Autocomplete path Done Tip

7. Path Intellisense file path Smart Tips

8. Sublime Material Theme sublime theme style

9. Sublime Text Keymap and Settings Importer similar sublime keyboard shortcut set

10. vscode-icons file icon

11. Material Icon Theme vscode icon theme, support the replacement of different color icon