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操作符（十）自定義操作符

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。