html5-7 html5语义标签和视频
一、总结
一句话总结：设计网站的时候要兼顾早期浏览器的话，最新技术要缓着用，自己可以先尝试。
1、html5所有标签共有属性有哪四种？
1.id
2.class
3.style
4.title
2、html5所有标签公有属性中的title是什么意思？
移到标签上面显示的内容
3、flash视频播放标签是什么？
embed
<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>
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>