第十章：内联框架和标签嵌套 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>内联框架</title>
 6         <style type="text/css">
 7             iframe{
 8                 width: 100%;
 9                 height: 500px;
10             }
11         </style>
12     </head>
13     <body>
14         <!--iframe元素会创建包含另外一个文档的内联框架。-->
15         
16         <!--属性：
17             1.src：指定在框架中显示的文档的URL
18             2.frameborder:规定是否显示框架周围的边框  1/0    
19             -->
20         <!--在<iframe></iframe>中写入文字，来应对无法解析iframe标签的浏览器-->
21         
22         <h1>我要自学网</h1>
23         
24         
25         <iframe src="http://www.xx.com" frameborder="1">
26             你的浏览器不支持
27         </iframe>
28         
29         
30     </body>
31 </html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标签嵌套</title>
    </head>
    <body>
        <!--1.块级元素
            常见有：div,所有的布局元素，h1-h6,p,ul,li..-->
        <!--2.行级元素
            常见有：a,span,strong,b,i,sub,sup.....-->
        <!--3.行内块级元素
            常见有：img,input,video,audio...-->
        
        <!--嵌套关系：-->
            <!--1.块级元素：
                块级元素可以嵌套块级元素，行级元素，行内块级元素
                <div><div></div><h1></h1><p></p></div>
                <div><span></span><a ></a><b></b></div>
                <div><img /><input /></div>-->
                
            <!--2.行级元素:
                <a > <span></span> <img src="" alt="" /></a>
                行级元素不能嵌套块级元素，如要嵌套，需要把行级元素转成块级元素再嵌套-->
            
            <!--3.行内块级元素:
                <video > <span></span></video>
                只能嵌套行级元素-->
                
            <!--注意：
                h1-h6,p不能嵌套块级元素-->
                
                
                
    </body>
</html>

 

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