html5-7 html5语义标签和视频

时间 2020-05-22

标签 html5 html 语义标签视频栏目 HTML5 繁體版

原文原文链接

html5-7 html5语义标签和视频

1、总结

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

一、html5全部标签共有属性有哪四种？

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

二、html5全部标签公有属性中的title是什么意思？

移到标签上面显示的内容html5

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

embed浏览器

四、经常使用的语义化标签有哪6个（能够从上往下数）？

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

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

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

2、html5语义标签和视频

一、相关知识

全部标签共有属性:
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>布局

二、代码

网站布局

 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>

1. HTML5 语义标签
2. HTML5-音频audio和视频video标签
3. HTML5之语义化标签
4. HTML5语义化标签
5. html HTML5语义化标签
6. html5 语义化标签
7. HTML5 语义化标签
8. html5-语义化标签（一）
9. HTML5之语义标签
10. html5语义化标签
更多相关文章...
• insert、update、delete和sql标签 - MyBatis教程
• MyBatis if标签 - MyBatis教程
• Kotlin学习（一）基本语法
• RxJava操作符（十）自定义操作符