有关HTML框架和内联框架的具体属性

上一篇文章讲到了HTML框架和内联框架的区别，其实学习完过后会发现内联框架就是一种特殊的框架，这一节就来介绍一下他们各自的属性吧。

HTML框架

框架结构标签：<frameset>

主要是定义如何将窗口分割成几部分，每一个部分都可以放置新的页面；

每个<frameset>标签都定义了一行或者是一列，rows和columns分别规定了每行和每列所占的屏幕面积；

框架的结构主要有三种：垂直结构，水平结构以及混合结构

垂直框架

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

从上面的代码可以看到，在<frameset>标签中还包含了一个<frame>标签，<frame>标签也是框架标签，它定义frameset中的一个特定的框架，它里面可以包含很多属性，比较常用的就是src,这个属性是用来显示文档的链接，比如上面的用法。上面的代码可以看出FrameA和FrameB以及FrameC所占的比例是1：2：1，可以想象一下结果是什么样子的，结果如下图

水平框架

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

和垂直框架几乎一样，只是将cols改成了rows，结果如下：

混合框架

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

混合框架相较于垂直和水平要复杂一点儿，上面的代码的意思就是先将页面分为上下两部分，且两部分平分，上面一部分放FrameA，下面一部分放FrameB和FrameC，其中B:C=1:3，效果图如下

以上三种是比较简单的HTML框架，下面的几种就是比较难理解一点儿的框架

导航框架

<frameset cols="120,*">
<frame name="index" src="index.htm" />
<frame name="content" src="frame_a.htm" />
</frameset>

上面的代码的意思就是在页面中分120px的宽度给导航栏，其他的区域用来显示content中的内容，而index区域则放导航栏的链接。

那么如何通过点击左边的导航栏的链接跳转到相应的内容呢，这个时候就需要用到target属性了，即目标的意思，在另外一个文件中写好，然后进行调用

<html>
<body>

<a href ="/example/html/frame_a.html" target ="content">Frame a</a><br />
<a href ="/example/html/frame_b.html" target ="content">Frame b</a><br />
<a href ="/example/html/frame_c.html" target ="content">Frame c</a>

</body>
</html>

这个就是index中进行调用的index.htm文件，里面有三个<a>标签，进行调用三个框架，target默认的是在当前浏览的窗口打开，也就是所通过href调用三个框架，在coment区域进行显示。

最终实现的效果图如下

左边是导航栏，右边默认显示的是A框架，当点击相应的链接时会出现相应的框架，这个就是导航栏的基本用法了。

跳转至框架内的一个指定的节

<frameset cols="20%,80%">

 <frame src="/example/html/frame_a.html">
 <frame src="/example/html/link.html#C10">

</frameset>

上面代码的意思是说左边20%给框架A，右边80%显示一个可以指定章节的框架，上面的link.html#c10指的就是在每次打开浏览器都会将Chapter 10显示在最顶部，这就是指定节的一个方法，效果图如下：

如图，前面还有很多Chapter，这里因为指定了Chapter 10，所以会直接从Chapter 10开始，这个和目标锚很像，但是又有所不同。

使用框架导航跳转至指定的节

<frameset cols="180,*">

<frame src="/example/html/content.html">
<frame src="/example/html/link.html" name="showframe">

</frameset>

这个也是将框架分成了两边，但是比较特殊，更像是上面两种框架的结合，左边是一个导航框架，右边是一个可以指定文本的框架；效果如下

<html>
<body>

<a href ="/example/html/link.html" target ="showframe">没有锚的链接</a><br />
<a href ="/example/html/link.html#C10" target ="showframe">带有锚的链接</a>

</body>
</html>

如果有认真看前面的内容的话，应该就可以理解这个的意思，就是在带有锚的链接中加上了指定的章节，这个文件就是前面调用的comment.html文件，之所以能成为导航框架，是因为调用的是带有链接的文件。

含有noresize="noresize"属性的框架

这个框架比较好理解，就是在上面的框架上加上一个属性，noresize的作用就是用来固定框架，因为默认的框架是可以通过鼠标进行移动的，如果不想进行移动的话，在<frame>中加上noresize就可以了，比如

<frameset cols="50%,*,25%">
  <frame src="/example/html/frame_a.html" noresize="noresize" />
  <frame src="/example/html/frame_b.html" />
  <frame src="/example/html/frame_c.html" />
</frameset>

这样的效果就是框架A的右侧不能进行移动。

HTML内联框架

内联框架可以说是上面那个框架中的一类，但是由于标签进行了更改，所以单独归为一类。内联框架的标签是<iframe>，这个标签和<frameset>最大的区别就在于它可以和<body>一起使用，并且是放在<body>里面进行使用，它的主要功能是在网页中划分一个特定的区域进行显示其他的网页，可能我这样说有点儿绕，接着往下看就明白了。

HTML内联框架的属性

设置高度和宽度(width,height)

这个属性主要是设置显示新网页的区域的大小，默认值是像素，也可以用百分比来设定。

<body>


<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>


<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>


</body>

效果如下

如果将src中的URL换成网页链接，就可以在这个小框框里面浏览其他的网页。

设置边框(frameborder)

这个属性是为了设置浏览区域的边框的有无，frameborder只能取值为0或1，如果想让边框的样式更加丰富，就用CSS进行设计，一般不推荐在html中直接设置样式。

设置四周的空白边距(marginheight,marginwidth)

其实这两个属性是分开使用的，marginheight是用来设置iframe的顶部和底部的空白边距的，marginwidth是用来设置iframe的左边和右边空白边距的，这两个属性的取值都是像素值。

name属性

规定iframe的名称，主要用于在JavaScript中引用元素，或者作为链接目标，以下实例可以帮助理解

<iframe src="/example/html/demo_iframe.html" name="iframe_a">
  <p>Your browser does not support iframes.</p>
</iframe>
<a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a>

注意name里面的值和target中的值要相同，因为<a>是通过target和name进行匹配，name在iframe中，而target在<a>中，即点击<a>中的链接时，会在iframe框定的区域中进行显示，效果如下：

sandbox属性

sandox属性是HTML5中的新属性，它可以保证网页的安全，它的属性值有

“ ”	应用以下所有的限制。
allow-same-origin	允许iframe内容被视为与包含文档有相同的来源。
allow-top-navigation	允许iframe内容从包含文档导航（加载）内容。
allow-forms	允许表单提交
allow-scripts	允许脚本执行

这个我就不展开了，如果觉得不太明白的可以去w3school进行实例练习，那样更容易理解。

设置是否有滚动条(scrolling)

这个属性比较好理解，默认情况下，如果内容超出了iframe，滚动条就会出现在iframe中，它可以取auto（在需要的情况下出现滚动条，也是默认值），yes（始终显示滚动条，即使不需要），no（从不显示滚动条，即使需要）。

设置显示文档的URL(src)

这个属性是最常用到的，也可以说是必须的，因为框架里面不管放什么内容，都是需要用src进行选择的，它的取值只能是URL，但是URL可以是相对和绝对两种。

好了，今天的内容也即将结束了，对于<iframe>标签的属性，我有的没有总结，只是将比较常用或者说是常见的列出来了，有什么希望可以指出。