I.. HTML5 Document Type description
second, head section-Basic label
1.
the head focuses on the related statements about the page settings. 2. <title> label
3. <link> label
linked files, with attributes and attribute values
example, link small icon code:
4. <meta> label
1. Set the character set encoding format for Web pages:
GB2312: GB code. The encoding format for Simplified Chinese.
GBK: Extended GB code. More encoding format than the GB.
Utf-8, the universal code. Can be compatible with the language of most countries.
before html4.01, declare the format of the character set encoding:<meta http-equiv= "Content-type" content= "textml; charset=utf-8" />2. Set Page keywords<meta name= "keywords" content= "Jerry Education, Html5,web development"/>
name= "keywords" indicates that the current statement is used to set page keywords
content= "" represents the keyword content of a Web page. Multiple keywords are separated by commas.
3. Set Page description
<meta name= "description" content= "This is the first page I developed. "/>
The description of the Web page, in search engines when searching the site, the title of the following paragraph of text, is the description of the content of the page. third, the body part
1. <body> label
HTML tags, divided into " block-level labels " and " row-level labels ."
"difference between block-level labels and row-level labels"
1, block-level label automatic line, front and back row, row-level labels will not be automatically wrapped, from left to right display;
2, block-level label width by default is absolute, row-level label width by the text content open;
3, block-level labels can set the width, height, margin and other properties, row-level labels cannot set the above properties.
from the notation, the HTML tag is divided into "paired label" and "Self-closing label (empty label)"
paired Tags: paired, with start tag, must have end tag, content wrapped between two tags.
such as:
Self-closing label/Empty label: Only one label, with/indicates the automatic closing of the label (/Can be omitted).
For example
2.
h Tags: title tags, default bold, the smaller the number title larger
Show Effect3.
Horizontal Line Label
4. <br/> Label
A newline tag, hitting enter in the code, does not work on the page. You must use <br> break.
5. <p> label
6. <blockquote> Label
7. <pre> Label
pre-formatted labels
Show Effect
Basic line-level/block-level labels
Common row-level labels
1.span Label
2.[em/i/b difference]
1) Both Em and I can tilt, strong and B can be bold. However, EM and strong more than a layer of emphasis on the meaning. (Emphasize the role: can let the search engine quickly crawl the key part of the webpage.) Implement the semantics of the code. )
2) Both EM and strong have an emphatic effect, but the EM is tilted and the strong is bold. Moreover, Strong's emphasis is higher than EM.
3. Common reference Tags
Common reference tags are: blockquote, q, cite
difference:
① Display Effect: BLOCKQUOTE Whole paragraph indentation, Q plus quotes, cite tilt
② Functionally: BLOCKQUOTE is used to refer to an entire paragraph of content, which is a block-level label. Q is used to quote a sentence, which is a row-level label. Cite is often used to quote work names and calligraphy and painting names.
4.small tags and Big tags
5.img Label
1). SRC attribute: Indicates the path where the picture is located.
[How the path is represented]
① Network image address. It is not recommended.
http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
② can use the absolute path of the picture. However, absolute paths are strictly forbidden. Because the absolute path uses the FILE://protocol, the Web page uses the http://protocol to open a file that cannot access the FILE://protocol.
file:///C:/sunyang.jpg--Absolute path notation: file:///drive:/file path
③ uses relative paths. The only way to recommend it.
A. The picture is on the next level of the current file, "folder name/Picture name"
B. The picture is on the same level as the current file, write "picture name" directly
C. The picture is on the current file, ".. /Picture name ".
Note: Images must be included in the project and cannot exit the project root directory
2). Width, height widths, height properties
3). Title: Text that appears when the mouse is pointing up
4). alt: The text displayed when the picture cannot be loaded. Omit Alt, the title content is displayed by default
5). Align: The text around the picture, relative to the arrangement of the picture;
Top Text Center Center text centered bottom text bottom
6.a label
1) Hyperlinks
2) Functional Links
6. Other line-level tags (not important, understand)
block-level labels
1.h tags, hr tags, p tags, blockquote tags, pre tags (previously mentioned)
2. List
1) ordered list
2) unordered list
3) Definition List
3. Combination label figure
4.div Label
HTML5 Basic Label
