<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* reset */
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0;padding:0;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none;overflow:auto;}
/* end reset */
a:link{
color:black;
}
a:visited{
color: pink;
}
a:hover{
color: red;
}
a:active{
color: plum;
}
a{
color: yellow;
}
/*
Pseudo-classes add special effects to elements
:link Initial color of link not visited
:visited Link color after access
:hover Mouse in (hover)
:active The color of the link when the mouse is pressed
*/
</style>
</head>
<body>
<h1>h1 Title - commonly h1 Play in the website logo，Optimize the website search engine. It's better to have only one current page. h1 Label</h1>
<h2>h2 Title - Weight is inferior to h1</h2>
<h3>h3 Title - Weight is inferior to h2</h3>
<h4>h4 Title - Weight is inferior to h3</h4>
<h5>h5 Title - Weight is inferior to h4</h5>
<h6>h6 Title - Weight is inferior to h5</h6>
<p>paragraph</p>
<strong>It is emphasized that the form of expression is intensification.</strong>
<em>It is emphasized that the form of expression is italic.</em>
<ul>
<li>ul - Unordered list</li>
<li>List item</li>
<li>ul A subset (the next level element) can only be li. li Other elements can be escaped according to label nesting rules</li>
</ul>
<ol>
<li>ol - Ordered list</li>
<li>List item</li>
<li>ol A subset (the next level element) can only be li. li Other elements can be escaped according to label nesting rules</li>
</ol>
<dl>
<dt>dl-Custom list; dt-Custom List title. One dl There can only be one below. dt</dt>
<dd>dd-A list item (information) of a custom list. dl Only under dl and dd</dd>
</dl>
<a href="http://Www.baidu.com "target="_blank">a hyperlink.
Common attributes:<br/>target:_blank(Links open in a new window)；_self(Open on the current page)；stay head China Canada<base target="_blank">,All links are opened in the new window. If there is a special case, only in the special case. a Individual instructions in the label will do..<br/>href Value: File path, click this link for download; div Of id，Click on this link and jump to the corresponding div；Website, click and jump to the corresponding page<br/>Views on the Change of State style in</a>
<mark>sign</mark><span>span Usually used to differentiate styles, such as a The label is blue as a whole, and one of the individual characters is red. We can set it up. a Labelling color by blue，The use of red characters span Wrap it up, set it up span Of color by red</span>
<a href="http://Www.baidu.com: "style=" color: blue; "> the destination address of this link is < span style=" color: red; "> Baidu</span></a>
<img src="" alt="Text to be switched when the picture is displayed incorrectly. This property is good for search engines."/>src The value is the picture address. It's better not to be the photo address of another website, because you may be rejected when you request resources.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* reset */
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0;padding:0;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none;overflow:auto;}
/* end reset */
a:link{
color:black;
}
a:visited{
color: pink;
}
a:hover{
color: red;
}
a:active{
color: plum;
}
a{
color: yellow;
}
/*
Pseudo-classes add special effects to elements
:link Initial color of link not visited
:visited Link color after access
:hover Mouse in (hover)
:active The color of the link when the mouse is pressed
*/
</style>
</head>
<body>
<h1>h1 Title - commonly h1 Play in the website logo，Optimize the website search engine. It's better to have only one current page. h1 Label</h1>
<h2>h2 Title - Weight is inferior to h1</h2>
<h3>h3 Title - Weight is inferior to h2</h3>
<h4>h4 Title - Weight is inferior to h3</h4>
<h5>h5 Title - Weight is inferior to h4</h5>
<h6>h6 Title - Weight is inferior to h5</h6>
<p>paragraph</p>
<strong>It is emphasized that the form of expression is intensification.</strong>
<em>It is emphasized that the form of expression is italic.</em>
<ul>
<li>ul - Unordered list</li>
<li>List item</li>
<li>ul A subset (the next level element) can only be li. li Other elements can be escaped according to label nesting rules</li>
</ul>
<ol>
<li>ol - Ordered list</li>
<li>List item</li>
<li>ol A subset (the next level element) can only be li. li Other elements can be escaped according to label nesting rules</li>
</ol>
<dl>
<dt>dl-Custom list; dt-Custom List title. One dl There can only be one below. dt</dt>
<dd>dd-A list item (information) of a custom list. dl Only under dl and dd</dd>
</dl>
<a href="http://Www.baidu.com "target="_blank">a hyperlink.
Common attributes:<br/>target:_blank(Links open in a new window)；_self(Open on the current page)；stay head China Canada<base target="_blank">,All links are opened in the new window. If there is a special case, only in the special case. a Individual instructions in the label will do..<br/>href Value: File path, click this link for download; div Of id，Click on this link and jump to the corresponding div；Website, click and jump to the corresponding page<br/>Views on the Change of State style in</a>
<mark>sign</mark><span>span Usually used to differentiate styles, such as a The label is blue as a whole, and one of the individual characters is red. We can set it up. a Labelling color by blue，The use of red characters span Wrap it up, set it up span Of color by red</span>
<a href="http://Www.baidu.com: "style=" color: blue; "> the destination address of this link is < span style=" color: red; "> Baidu</span></a>
<img src="" alt="Text to be switched when the picture is displayed incorrectly. This property is good for search engines."/>src The value is the picture address. It's better not to be the photo address of another website, because you may be rejected when you request resources.
</body>
</html>Tag default style reset
First, explain why you need to reset the label style. Each user agent (browser) gives the label a different default style. For example, body's margin, Google's margin is 8, lower version of ie's margin is 15, or so margin is 10.
css reset principle: Never use the default style when browsing. All styles should be artificially unified (cleared), and then set according to the actual situation (design draft).
Styles that need to be reset:
Bah, style border, margin, padding related to box model
Uh, the unique style of label UL > li; ol > Li
Writing Principle: Clear the default style of the label when using any label. It is recommended that all labels should not be added directly. Do not reset all tags uniformly, but classify the settings according to the default style features of tags.
Tag type
1. Characteristics of Block Elements
Default exclusive line
2. When there is no width, the default line is full. When there is a width, the content is displayed in the width range, but the element itself occupies a row.
3. Supporting all css commands
4. Common block-level elements: <h1></h1>-><h6></h6>, <ol><li> ordered list content by content </li></ol>, <ul><li> ordered list content by content </li></ul>, <dl><dt> table by Title </dt><dd> list content </dd> </dl>, <div> </div>, <p>.</p>
2. The characteristics of common inline elements (or block-level elements changed to inline):
The same row can continue to follow the same label
Length is determined by content; Length attribute is not supported;
It does not support up and down margin;
Line breaks are parsed into spaces half the size of the font.
The above characteristics disappear after being changed to block-level elements.
Common inline elements: <a href="***"> text to be displayed </a>, < strong > emphasizes, the form of expression is bold </strong >, < EM > emphasizes, the form of expression is italic</em>
3. The Characteristics and Problems of Inline-block
Characteristic:
1. Blocks are displayed in one line, and the same row can continue to follow the same label.
2. In-line attribute tags support width and height;
3. Width of content unfolding without width
4. Elements: <img src=">
Question:
1. Code line breaks are parsed.
2,ie6 ie7 inline-block does not support block attribute tags;
4. Label Type Conversion
Block elements are inlined: display: inline, so that block labels have the characteristics of inline elements
Inline elements are converted to blocks: display: block, which enables inline elements to have the characteristics of block attribute labels
Make elements appear as inline-block features: display: inline-block
display converts a tag to the type displayed on a page without changing the nature of the tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
display: inline;
}
span{
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
Label nesting rules
Bah, p, dt, h tags cannot be nested with block attribute tags
Bah a tag cannot nest a tag
Bah. Inline cannot nest block labels