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、代码

网站布局

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         .container{

             width:1200px;

             /*background: #ccc;*/

             height:600px;

             margin:0 auto;

         }

         .header{

             height:50px;

             background: #272822;

         }

         .section{

             height:500px;

         }

         .footer{

             height:50px;

             background: #272822;

         }

         .img{

             float:left;

             margin-left:30px;

         }

     </style>

 </head>

 <body>

     <!-- 主体 -->

     <div class="container">

         <!-- 头部 -->

         <div class='header'>

         </div>

         <!-- 体部 -->

         <div class="section">

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

             <div class="img">

                 <img src="xs.png" alt="">

             </div>

         </div>

         <!-- 尾部 -->

         <div class="footer">

         </div>

     </div>

 </body>

 </html>

html5语义化的一些标签

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         .container{

             width:1200px;

             /*background: #ccc;*/

             height:600px;

             margin:0 auto;

         }

         header{

             height:50px;

             background: #272822;

         }

         section{

             height:500px;

         }

         footer{

             height:50px;

             background: #272822;

         }

         article{

             float:left;

             margin-left:30px;

         }

     </style>

 </head>

 <body>

     <!-- 主体 -->

     <div class="container">

         <!-- 头部 -->

         <header>

         </header>

         <!-- 体部 -->

         <section>

             <article>

                 <img src="xs.png" alt="">

             </article>

             <article>

                 <img src="xs.png" alt="">

             </article>

             <article>

                 <img src="xs.png" alt="">

             </article>

             <article>

                 <img src="xs.png" alt="">

             </article>

         </section>

         <!-- 尾部 -->

         <footer>

         </footer>

     </div>

 </body>

 </html>