html5-7 html5语义标签和视频

一、总结

一句话总结：设计网站的时候要兼顾早期浏览器的话，最新技术要缓着用，自己可以先尝试。

1、html5所有标签共有属性有哪四种？

1.id
2.class
3.style
4.title

2、html5所有标签公有属性中的title是什么意思？

移到标签上面显示的内容

3、flash视频播放标签是什么？

embed

4、常用的语义化标签有哪6个（可以从上往下数）？

1.article
2.footer
3.header
4.nav
5.section

5、html5页面布局是怎么样的？

外层container 里面是header（nav）、section（article）、footor

二、html5语义标签和视频

1、相关知识

所有标签共有属性:
1.id
2.class
3.style
4.title

语义化标签:
1.article
2.footer
3.header
4.nav
5.section

所有浏览器都支持的视频方式:
<embed src="http://www.tudou.com/a/qJtXzLi3iaY/&bid=05&iid=132798855&resourceId=0_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="1200" height="500"></embed>

HTML5视频标签:
<video src="movie.ogg" controls="controls" autoplay loop width='1200px' height='500px'>
</video>

2、代码

网站布局

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         .container{
 8             width:1200px;
 9             /*background: #ccc;*/
10             height:600px;
11             margin:0 auto;
12         }
13 
14         .header{
15             height:50px;
16             background: #272822;
17         }
18 
19         .section{
20             height:500px;
21         }
22 
23         .footer{
24             height:50px;
25             background: #272822;
26         }
27 
28         .img{
29             float:left;
30             margin-left:30px;
31         }
32     </style>
33 </head>
34 <body>
35     <!-- 主体 -->
36     <div class="container">
37         <!-- 头部 -->
38         <div class='header'>
39                 
40         </div>
41 
42         <!-- 体部 -->
43         <div class="section">
44             <div class="img">
45                 <img src="xs.png" alt="">
46             </div>
47             <div class="img">
48                 <img src="xs.png" alt="">
49             </div>
50             <div class="img">
51                 <img src="xs.png" alt="">
52             </div>
53             <div class="img">
54                 <img src="xs.png" alt="">
55             </div>
56 
57             <div class="img">
58                 <img src="xs.png" alt="">
59             </div>
60             <div class="img">
61                 <img src="xs.png" alt="">
62             </div>
63             <div class="img">
64                 <img src="xs.png" alt="">
65             </div>
66             <div class="img">
67                 <img src="xs.png" alt="">
68             </div>
69             
70         </div>
71 
72         <!-- 尾部 -->
73         <div class="footer">
74             
75         </div>
76     </div>
77 
78     
79 </body>
80 </html>

html5语义化的一些标签

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         .container{
 8             width:1200px;
 9             /*background: #ccc;*/
10             height:600px;
11             margin:0 auto;
12         }
13 
14         header{
15             height:50px;
16             background: #272822;
17         }
18 
19         section{
20             height:500px;
21         }
22 
23         footer{
24             height:50px;
25             background: #272822;
26         }
27 
28         article{
29             float:left;
30             margin-left:30px;
31         }
32     </style>
33 </head>
34 <body>
35     <!-- 主体 -->
36     <div class="container">
37         <!-- 头部 -->
38         <header>
39             
40         </header>
41 
42         <!-- 体部 -->
43         <section>
44             <article>
45                 <img src="xs.png" alt="">
46             </article>
47             <article>
48                 <img src="xs.png" alt="">
49             </article>
50             <article>
51                 <img src="xs.png" alt="">
52             </article>
53             <article>
54                 <img src="xs.png" alt="">
55             </article>
56         </section>
57 
58         <!-- 尾部 -->
59         <footer>
60             
61         </footer>    
62     </div>
63 
64     
65 </body>
66 </html>