Day 2nd: HTML Common Tags

Today, after learning the main points of knowledge learned to organize.

A, hyperlink a
Href:www.baidu.com (jump page); ID name (anchor point jumps to the corresponding Div position); 01.rar (compressed package)
Target:_blank (new window opens); _self (current window opens)
Second, file path
Absolute path:
(1) Online: absolute path on line
(2) Offline: Full path

Relative path:
Src=. /img/bg.jpg (.. /is a top level directory)

Third, the common HTML tags
section: sections are used to divide different areas on a page, or to divide different sections in an article

Header : page header or section header

footer: Bottom of page or (section) bottom

nav: Navigation (contains a list of links)

article: Used to represent a complete and independent piece of content in a page
A post that can be used to present a forum, a magazine or newspaper article, a blog, user-submitted comment content, an interactive page module pendant, etc.

aside: element tags can contain references to the current page or main content, sidebar, ads, nav element groups, and other similar sections that are different from the main content
1, is included in <article> as the main content of the subsidiary Information Section, wherein the content is related to the current article references, vocabulary list, etc.
2, used outside of <article> as a subsidiary information part of the page or site, the most typical form is the sidebar (sidebar), where the content can be links, ancillary navigation or ad units.

H1-h6 Title
ul unordered list
ol ordered list
List items for Li ul or ol
DL Definition List
DT definition List of items
DD Extended description of DT expansion
P Paragraph
Time
em emphasize a word or a passage
Strong emphasize a word or a passage
img Pictures
Four, selector priority
Inline styles >ID>class> types > wildcard characters

Five, in-line, block elements
Inline elements:
1, the content open wide high
2, does not support the width of the high
3. One line can display multiple labels of the same type
4, does not support the upper and lower margin
5. Code wrapping is parsed

Block elements:
1. Default Exclusive Line
2, when no width, full line
3. Support All class commands

Inline-block
1, block display on one line
2, inline support wide high
3, the default content open width high
4. The trade-off between labels is resolved (problem)
5, IE6, IE7 does not support the block attribute tag inline-block (problem)

block-level elements (block Element):
Each block-level element defaults to a single row height, and block-level elements can generally be nested in block-level elements or inline elements;

Block-level elements typically appear as containers, and are used to organize structures, but not all. Some block-level elements, such as <form> can only contain block-level elements. Other block-level elements can contain row-level elements such as <p> some can contain either block-level or row-level elements.

Div is the most commonly used block-level element, and the Display:block of element styles are block-level elements. They are always in the form of a block, and with siblings of sibling blocks in sequence, left and right full.
Common block-level elements are:
Address, BLOCKQUOTE (block Reference), center (center to aligning), dir (directory list), Div, DL (definition list), Fieldset-form (control group), form, h tag, HR, menu, OL, P, Pre (formatted text), table, UL

in-line elements (inline Element):

Inline elements can only hold text or other inline elements, and the element style display:inline is the inline element. such as text such elements, each letter is arranged horizontally, to the right end of the automatic folding line. In-line element change inside block level element set Display:inline-block;

For inline elements, be aware of the following

Setting width is not valid.

Setting height is invalid and can be set by Line-height.

Setting margin is only valid for margin, upper and lower invalid.

Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.
Common inline elements are:
A, ABBR, B, acronym (first word), B (bold), big (large font), BR, cite, code (computer code), DFN, EM, font, I, IMG, input, KBD (define keyboard text), label (table label), Q, S (middle dash), Samp, select (Project selection), Small (small font text), span, strike, strong, sub (subscript), SUP (superscript), textarea (multiline text input box), TT (telex text), U (underscore), Var

A small example:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> page Display Effects </title>
<style>
#div1 {
width:100%;
height:50px;
Text-align:center;

}
a{
Text-decoration:none;
Color: #000;
Text-align:center;
width:20px;
height:20px;
Display:inline-block;
border:1px solid #11f;
}
a:hover{
Background: #25e;
Color: #fff;
}
. prev{
width:60px;
}

</style>
<body>
<div id= "Div1" >
<a href= "#" class= "prev" > Prev </a>
<a href= "#" >1</a>
<a href= "#" >2</a>
<a href= "#" >3</a>
<a href= "#" >4</a>
<a href= "#" >5</a>
<a href= "#" >6</a>
<a href= "#" >7</a>
<a href= "#" >8</a>
<a href= "#" >9</a>
<a href= "#" >10</a>
<a href= "#" class= "prev" > Next </a>
</div>
</body>

Operating effect:

Day 2nd: HTML Common Tags