第六天的学习：框架的学习

关键字：框架 

晨跑计划：

 

学习任务：

  1. 禁用的或只读的表单控件
  2. 第六章：框架
    • 6.1 框架集简介
    • 6.2 使用框架的时机
    • 6.3<frameset>元素
      • 6.3.1 clos属性
      • 6.3.2 rows属性
      • 6.3.6 针对<frameset>元素的浏览器专用扩展
    • 6.4<frame>元素
      • 6.4.1 src元素
      • 6.4.2 name元素
      • 6.4.3 frameborder元素
      • 6.4.4 marginwidth属性和marginheight元素
      • 6.4.5 noresize属性
      • 6.4.6 srcolling属性
      • 6.4.7 longdesc属性 
    • 6.5<noframes>元素 
    • 6.6创建框架之间的链接
    • 6.7框架集的嵌套
    • 6.8利用<iframne>元素创建浮动框架或内联框架

学习记录：

  • 禁用或只读的控件：
    • readonly 属性阻止用户改变表单控件本身的值，尽管可以使用脚本修改它。readonly控件的值/名都将被发送给服务器，它的值是readonly。
    • disable 属性将禁用表单控件，从而用户不能够修改该控件。可以使用脚本重新启用该表单控件。但是，除非重新启用该表单控件，否则名/值对将不会发送给服务器，该属性的值必须是disabed。
  • 框架集的简介：
    • 通过使用框架，可以在同一个浏览器窗口显示不止一个页面。每份html文档可以称为一个框架，并且没给框架都独立于其他框架，作用是为了将页面划分成几个独立的模块。
  • 使用框架的时机：
    • 当希望在单个页面中显示大量的内容并且不能讲文档拆分为多个独立的页面时，则可以使用框架创建一个导航栏，该导航栏链接到长文档的各个子部分。
    • 当页面的一部分具有很多数据并且在页面的其他部分改变时不希望重新加载该部分时，可以考虑使用框架。
  • <frameset> 元素
    • <frameset>元素的属性指定了浏览器窗口将如何划分多个行和列
    • <frameset>元素包含用于文档中每一个框架的<frame>元素
      • cols属性：指定框架集中包含的列的数量以及每一列的大小，必须为框架集中的每一列指定一个宽度值，并且提供值的数量（不同值之间使用逗号隔开）表明文档汇总列的数量
        • 四种方式指定每一列的宽度：
          • 以像素为单位的绝对值：cols=“100,500,*”　
          • 父框架的百分比：cols=“40%,60%”
          • 通配符：cols=“400,*”
          • 列的相对高度：cols=“3*,2*,1*”
      • rows 属性：指定框架集中行的数量，默认值是100%，因此没有指定rows属性，则一行将占用100%的浏览器高度
        • 用法：rows="100,80%,*"
    • 针对<frameset>元素浏览器专用扩展
      • borde属性：指定了每个框架的边框的宽度，单位位像素 border=“10”，如果不需要边框，可以将该属性的值设置为0
      • frameborder属性：指定是否应该在框架之间显示三维边框 
        • 值：0（no）不显示/1（yes）显示
      • framespacing属性：指定了框架集中框架之间的空间量，单位是像素，如果没有指定的话默认是2　　
  • <frame>元素
    • <frame>元素用于指示框架集中每个框架的内容，<frame>元素始终是空元素，因此不应该包含任何东西，但是每一个<frame>元素必须带一个src属性，用来指示那个页面应该表示该框架
    • 注意：不存在与<framen>元素相关的CSS样式
      • src属性：指明应该用于框架中的文件，它的值是一个普通的xhtml页面，也可以是任何的URL
      • name属性：为框架指定名称，它用于指示文档应当加载到哪个框架中，注意：这里的name属性没有被id属性所替换
      • scrolling属性：为用户提供一个滚动栏，以便用户阅读更多的内容，值：yes、no、atuo：只有当框架无法容纳内容时显示滚动栏
      • longdesc属性：提供一个到其他页面的链接，该页面包含关于框架内容的较长描述，值应当是指向描述信息所在位置的URL
  • 创建框架之间的链接：
    • 在框架中放置导航栏，然后将具有内容的页面加载到另一个单独的框架中，如下三种情形：
      • 当导航栏尺寸非常大时，通过使用框架，用户不需要在查看新页面时重新加载导航栏
      • 当主文档非常长时，导航栏提供到主文档不同位置出的快捷方式
      • 当不希望重新加载整个页面时
    • 每一个<frame>元素可以附带一个name元素，以便赋予读框架一个名称，这个名称将用于链接中，以指示新页面应该加载到哪一个框架中　
    • target属性值：
      • _self：页面加载到当前框架
      • _blank：打开新的窗口
      • _parent：加载到父窗口中
      • _top：加载到浏览器窗口中，替换任何当前框架
  • 框架集的嵌套
    • 可以在<frame>元素所在的位置使用新的<frameset>元素作为替换，如下：
  • 利用<iframe>元素创建浮动框架或内联框架
    • 可以出现在html或者xhtml页面内的任何位置，这种框架不需要出现在<frameset>元素内或者使用框架集文档类型声明的文档内
    • 与图像相似，内联框架能过具有环绕其的文字，并且可以设置围绕内联框架的边框和页边空白
    • 属性：
      • 必须具有src属性，因为src属性指明了浏览器在何处找到该框架的内容所在文件，类似于其在<frame>元素的作用
      • height和width属性，值的单位可以是像素，也可以是浏览器窗口的百分比
      • frameborder属性，是否显示iframe周围的边框

扩展阅读：

问题的记录与解决：

  • 框架的缺点有哪些？
    • 搜索引擎通常会链接到独立的框架中的内容，而不是用户看到的框架集中的内容
    • 某些浏览器无法很好地打印整个框架集。
    • 浏览器的“后退”按钮可能无法像用户期望的那样工作。
    • 某些较小的设备无法处理框架，屏幕不够大，无法被划分
    • 无法获得漂亮的布局
  • 创建框架的web站点时初选问题的原因？
    • 忘记在<farme>元素中添加name属性，以及在<a>元素中添加target属性，如果忘记添加元素，那么浏览器都只会加载该框架中的链接
  • 问题3：
    •  
    • 当不支持iframe的时候 iframe 就会被当做一个普通标签 比如说<div>sadfasd</div>。那里面的内容就可以直接看到了
    • 如果是支持iframe的话，是会展示iframe的页面
posted @ 2016-07-10 11:52  桂  Views(206)  Comments(0)    收藏  举报