1. Head
<header></header>
2. Tail
<footer></footer>
3. Navigation
<nav></nav>
4. Media file introduction
<embed src=""></embed>
5. Content block
<section></section>
6. Auxiliary information
<aside></aside>
7. Articles
<article></article>
8. Independent content block
<figure>
< figcaption > this is a bear sized animal < / figcaption >
<img src="xiongda.png" />
</figure>
9. Highlight text
<mark></mark>
10. Title Group
<hgroup></hgroup>
11. Dialog box
< dialog open > this is the open dialog window < / dialog >
12. Define graphics
<canvas> </canvas>
13. Define video
< video src="video/dongbei.mp4" controls autoplay "loop="loop "preload="auto "poster="img / Enterprise Station 1_03. JPG "> < / video >
Where: controls display controls
autoplay plays automatically, but can only be compatible with IE browser
Loop loop
preload prepare load
poster defines the picture of the first frame
In addition, video allows multiple source elements. The source element can connect different video files. The browser selects the first recognizable format for playback
<video>
<source src="1"></source>
<source src="2"></source>
<source src="3"></source>
</video>
14. Define audio
< audio "src="music / Zhao Dage - I eat fried chicken (Live).mp3 "controls" loop preload="auto" autoplay > < / audio >
Controls display controls
autoplay plays automatically, but can only be compatible with IE browser
Loop loop
preload prepare load
Relevant codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
nav{
width: 100%;
height: 60px;
}
ul{
width: 1200px;
height: 60px;
background-color: burlywood;
margin: 0 auto;
}
li{
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: chartreuse;
list-style: none;
float: left;
}
section{
width: 100%;
height: 400px;
background-color: rgb(218, 138, 138);
}
article{
width: 1200px;
height: 60px;
line-height: 60px;
margin: 0 auto;
background-color: cadetblue;
}
aside{
width: 200px;
height: 60px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text
<p>text</p>
<p>text</p>
<img src="img/section_two_4.jpg" alt="" width='400px'>
<nav>
<ul>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
<li>home page</li>
</ul>
</nav>
<section>
<article>
<h3>On who is the most beautiful</h3>
I'm looking at the card machine, huh SV Call me VB Send me uwujnosvnowivhow I have a nest of my brother IQ I love ultrasound from the river convoy v
<aside>Article source</aside>
</article>
</section>
<hgroup><h1>Title</h1></hgroup>
<figure>
<figcaption>title</figcaption>
<img src="img/section_two_4.jpg" alt="">
</figure>
<mark>Highlight</mark>
<dialog open >display a dialog box</dialog>
</body>
</html>CSS3 browser prefix
-ms - ms box shadow # the CSS attribute specific to IE browser needs to be prefixed with - ms
-moz - moz box shadow ， all CSS properties specific to Gecko engine based browsers (such as Firefox) need to be prefixed with - moz
-O - - o-box-shadow # the CSS attribute specific to Opera browser needs to be prefixed with - O -
-webkit - webkit box shadow - all CSS exclusive to webkit engine based browsers (such as Chrome and Safari) need to be prefixed with - webkit
CSS3 elegant degradation and progressive enhancement
transition {/ * progressive enhancement writing from small to large * /
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s; }
transition {/ * elegant downgrade writing from large to small * /
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s; }
Text shadow
text shadow:10px 10px 5px red;
The first value: horizontal shadow distance, which can be negative
The second value: vertical shadow distance, which can be negative
Third value: ambiguity
Fourth, color
Box shadow
box-shadow:10px 10px 5px 3px red inset;
The first value: horizontal shadow distance, which can be negative
The second value: vertical shadow distance, which can be negative
Third value: ambiguity
Fourth value: extension radius
Fifth: color
Sixth: inner shadow or vulva shadow. The default is inner shadow