HTML Base Two

HTMLCSS Foundation 2

First, the characteristics of the label 1.1 tag in HTML

Add a label to the text that contains the semantics

More specific semantic tags should be learned

2.1 More Tags 2.1.1 H-series label (Header): H1,h2,h3,h4,h5,h6

Function: Add text on the page to the semantics of the title

H1,H2,H3,H4,H5,H6: Enlarge the text, bold and gradually become smaller. (The H1 tag is the largest.) ）

Note: A page can have only one H1 tag.

2.1.2 P Tag (Paragraph): paragraph label

Add paragraph semantics to the previous text of the page

Feature: A paragraph on a page that occupies a single line and has a distance from the top and bottom content.

<p> This is the paragraph </p>

2.1.3 hr tab (horizontal Rule)

Function: Displays a horizontal line on the page (without its own semantics).

2.1.4 B (Bold), U (underlined), I (Italic), S (strikethrough), Strong,em,del,ins

Role:

B: Bold semantics: No semantics

U: Underline

I: Tilt

S: Strikethrough

It is not recommended because these tags do not have semantics.

Role:

Strong: Bold semantics: strengthening tone

Ins: Underline

EM: Tilt

Del: Strikethrough

can use

2.1.5 img Tag (image)

Function: Displays a picture on the page

Features: Show pictures

Src	Path of picture display
Alt	If the picture is not loaded, the text in this property is displayed
Title	Introduce this picture

2.1.6 a label (Anchor): Anchor

Other name of a tag:

Super links, hyperlinks, anchor connections.

Function: You can jump to another page on one page.

Code:

<a href= "page path" ></a>

Note: You must write the text within the a tag, and if not, the label will not be found on the page.

Other uses of a tag:

1. Can not jump (jump to the current page) href= "#"

2. You can jump to another page.

3. Can be positioned on the current page.

A. Set the href attribute of the A tag to "#id名",

B. Add a Target tag (can be any tag) at the specified location on the page

C. You must set an ID name for this tag: <p id= "Mubiao" > This is the target </p>

4.0 in the jump page to locate.

5.0 can be downloaded. (strongly deprecated)

Properties of a tag:

Href	The destination address of a tag jump
Target	_blank: Keep the original page, then jump _self: Jump on current page
Base	Set the way to jump for all a tags on the page (the base tag is usually placed below the titile tag)

2.1.7 HTML Tags

A root node that functions as a label in all HTML.

2.1.8 Head Tag

Function: for storing: Title,meta,base,style,script,link

Note: Each head tag must have a title tag, and the other is optional.

2.1.9 Body Tag

Function: For storing all the HTML structure tags: p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol

2.1.10 Title Tag

Role: Let the page have a title of their own.

2.1.11 META Tags

Common usage:

1. Description: Can describe the page, can be used to use Baidu Program (web crawler) to collect key information, in order to improve the page ranking.
2. Keywords: Keywords that can be used to raise pages. The proportion of the key words of the face (a way of pre-ascending rankings.) ）
3. Character set (encoded format):

<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >

Charset (format of character set): UTF-8.

Note: The character set (the text is stored in the computer dictionary):

Computer is not directly stored text, in general, the computer is stored in the text in the "dictionary" in the corresponding location.

gb2313---->gbk;

GB 2313----> GB expansion

All the usual reasons for seeing garbled characters are because the dictionary you are looking for is incorrect:

We made a small example: the contents of the document are in the Utf-8 format, and the format of the file that we are storing the document is GBK,

2.2 Encoding the difference between 2.21 gbk,utf-8:

Same point: All characters are encoded in a format.

Difference:

Utf-8: The text in all languages of the world is included.

GBK: Included Chinese characters, katakana.

Size:

Utf-8>gbk

Performance:

Uft-8<gbk

Agreement: In the future we will use utf-8 throughout the learning process;

Utf-8 stores a Chinese character for 3 bytes,

GBK Storage of 2 bytes on a kanji

2.3 Label Classification

Double Tags: there is a beginning with the end, between the beginning and the end there is content

Beginning also the angle bracket contains the beginning of the content, with angle brackets plus/including the end of the content.

Single label: Only one label, self-closing itself.

Only one angle bracket contains the content plus a slash end.

2.4 The relationship between labels and labels

Nested relationships: One label contains another tag, and they construct a parent-child relationship.

Side-by-side relationship: Two labels tied up, they construct brotherly relationships.

Note: In the future when writing code, if the relationship between the two tags is a nested relationship, it is best to reflect the code directly (the child element has an indentation relative to the parent element). If it's a side-by-side relationship, it's best to have alignment.

Second, the current mainstream document type

Document type	Classification	Note
Html	HTML Strict DTD	Request a more restrictive HTML type
	HTML Transitional DTD	Relatively standard is not strictly prohibited
	Frameset DTD	Type of frame level
Xhtml	HTML Strict DTD	Request a more restrictive HTML type
	HTML Transitional DTD	Relatively standard is not strictly prohibited
	Frameset DTD	Type of frame level

XHtml (html2.0 version (a more rigorous HMTL of relative HTML syntax)

Note: The type of HTML5 is recommended for future use with DOCTYPE. Each page will be set to a DOCTYPE, if not set, the browser will default on quirks mode (strange pattern) Resolution (quirks mode) is the browser in order to be compatible with the previous version of the browser design, not strictly follow the A page rendering mode generated by a standard Web page.

sublime3.1 features of the choice of development tools

Dreamwaver: Biased design

Sublime: (lightweight) comes with a less-than-complete feature, but the plugin is very rich.

Webstrom: (heavyweight) self-bringing function is more comprehensive.

Sidebar	View--Sidebar
new file	File--- > new file (Ctrl + N)
Generate structure code	html:xt+ (ctrl+e)
Quick Copy a whole row	Ctrl + SHIFT + D
;   quickly delete a whole line	Ctrl + SHIFT + K
Move up a whole line	Ctrl + shift +↑
Move down a whole line	Ctrl + Shift +↓

Small features:

A. viewing in the browser

B. Open the folder where you are

C. Copying a file path

3.2 Using Sublime

A. Opening sublime,ctrl+n creating a new file

B. Save the suffix. html

Generate Structure Code: Enter HTML:XT + (ctrl+e)

Four, label properties

Property provides additional information for HTML elements, and SRC in the img tag is a property of the IMG tag.

V. Path issues

First Type: absolute path

Path with drive letter: \ n class content \ class Video \01html The first day \4-source code \1.jpg.

Disadvantage: Portability is not strong, generally not directly use absolute path.

Second type: relative path

The page is a file, the picture is a file, and now you need to output the picture on the page, so you need to get the path of the picture relative to the file.

A. If the page is under the same directory as the picture:

B. If the page is in the picture One parent directory:

C. If the picture is in the top level directory of the page:

Note: In most cases of actual development we use relative paths as long as they are not accidental, because the relative paths are more portable.

HTML Base Two