本文详细介绍了HTML4及HTML5中关于框架与布局的相关内容，包括iframe、table布局、div元素及其分类和属性，以及HTML5新增的布局标签如header、footer、article、section等，探讨了新布局的优点和语义化对内容呈现的影响。
文章目录
iframe内联框架
iframe为body元素的子元素，必须放在body中使用。可以引入一个外部的页面。
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。
主要属性：src；name；id；width；height；frameborder（框架边框），scrolling（滚动条）。
应用场景：数据传输、共享代码，局部刷新、第三方介入（广告）等。
<!--scrolling="no"取消滚动条-->
<body>
<iframe src="http://www.baidu.com" width="300" height="300" frameborder="1"></iframe>
<iframe src="http://www.jd.com" width="300" height="300" frameborder="0"></iframe>
</body>
table布局
1.table布局是传统的网页布局方式：早期网页由于内容较少，布局简单，都是使用table布局
2.优点:比较简单，容易理解
3.缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便…
4.table布局思路：用表格把屏幕分成几块–不同的单元格存放不同的内容
div
div（块）：div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
元素的分类
-
块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。
块元素有：h1~h6;hr;ul;ol;p;table…
-
内联元素（行内元素）:不会产生换行效果，会和其他元素并列排列；
内联元素有：a，img，span…
div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局。span是行内元素，只占用自身大小的元素，不会占用一行。
最低0.47元/天 解锁文章
4576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
