第八章：布局元素 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>元素的类型</title>
 6     </head>
 7     <body>
 8         <!--块级元素：-->
 9             <!--1.独占一行，不和其它元素呆在一起-->
10             <!--2.可以设置宽高-->
11             <!--3.用来网页进行布局，承载内容-->
12         
13         <!--行级元素-->
14             <!--1.不会独占一行，可以和其它元素呆在一行-->
15             <!--2.不可以设置宽高,宽高由里面的内容决定-->
16             
17         <!--行内块级元素-->    
18             <!--1.不会独占一行，可以和其它元素呆在一行-->
19             <!--2.可以设置宽高-->
20         
21         <!--元素类型可以相互转换，css中学习-->
22         
23             <h1 style="width: 200px;height: 50px; background: aqua;">我要自学网</h1>
24             <b  style="width: 200px;height: 50px; background: aqua;">我要自学网</b>
25             <span>我要自学网</span>
26             <p style="width: 200px;height: 50px; background: aqua;">我要自学网</p>
27             
28             <img src="logo.jpg" style="width: 400px;"/>
29             <img src="logo.jpg"/>
30         
31         
32     </body>
33 </html>
8-1 元素类型
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>div标签</title>
 6     </head>
 7     <body>
 8         <!--div标签定义文档中的区块，可以把文档分割为独立的，不同的部分-->
 9         <!--div标签可以嵌套任何元素，包括div自己-->
10         <!--div是用来承载内容，相当于一个容器。没有其它任何样式-->
11         <!--是使用最广泛的布局元素，所有浏览器都支持div标签-->
12         
13         
14         <div style="width: 1100px; background: antiquewhite; margin: 0 auto;">
15             <img src="51zxw.png" width="100%"/>
16         </div>
17         
18     </body>
19 </html>
8-2 div标签
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>header和footer标签</title>
 6     </head>
 7     <body>
 8         <!--header和footer标签:是html5中新标签-->
 9         <!--header:定义文档的页眉，通常用来定义可见内容的头部-->
10         <!--footer:定义文档的页脚，通常用来定义可见内容的尾部-->
11         <!--header和footer标签只是div标签的变种，功能和div标签一样-->
12         <!--header和footer标签有很强的语义,使得网页结构更清晰-->
13         <!--IE8以及更早的版本不支持header和footer标签-->
14         
15         
16         <header></header>
17         <div class="content"></div>
18         <footer></footer>
19         
20     </body>
21 </html>
8-3 header和footer标签
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>nav和aside标签</title>
 6     </head>
 7     <body>
 8         <!--nav和aside标签:是html5中新标签-->
 9         <!--nav:定义导航栏-->
10         <!--aside:定义侧边栏-->
11         <!--nav和aside标签只是div标签的变种，功能和div标签一样-->
12         <!--nav和aside标签有很强的语义,使得网页结构更清晰-->
13         <!--IE8以及更早的版本不支持nav和aside标签-->
14         
15         
16         <header></header>
17         <div class="content">
18             <nav></nav>
19             <aside></aside>
20         </div>
21         <footer></footer>
22         
23     </body>
24 </html>
8-4 nav和aside标签
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>section和article标签</title>
 6     </head>
 7     <body>
 8         <!--section和article标签:是html5中新标签-->
 9         <!--section:对页面上的内容进行分块，通常由内容及其标题组成-->
10         <!--article:定义独立的，完整的，可以独自被外部引用的内容-->
11         <!--section和article标签只是div标签的变种，功能和div标签一样-->
12         <!--section和article标签有很强的语义-->
13         <!--section和article标签对于初学者不建议使用-->
14         <!--IE8以及更早的版本不支持section和article-->
15         
16         
17         <header></header>
18         <div class="content">
19             <section></section>
20             <article></article>
21         </div>
22         <footer></footer>
23         
24     </body>
25 </html>
8-5 section和article标签

 

posted @ 2020-08-06 07:47  菜逼学飞  阅读(59)  评论(0)    收藏  举报