参考资料

  1. 如何添加按钮的过渡动画效果？
  2. HTML 用于著作标题的
  3. HTML 用于双向重写
  4. HTML/MarkDown互转有哪些
  5. HTML 表格表头单元格
  6. html文本标签详细说明以及案例
  7. HTML 超链接
  8. HTML 符号实体

HTML 框架

简介

HTML框架允许在同一个浏览器窗口中显示多个HTML文档。每个HTML文档称为一个框架，所有框架组合在一起构成框架集。

主要标签

<frameset>

  • 定义框架集

  • 属性：

    • cols：垂直分割窗口（列）

    • rows：水平分割窗口（行）

    • border：框架边框宽度

    • frameborder：是否显示边框（1/0）

<frame>

  • 定义单个框架

  • 属性：

    • src：框架中显示的文档URL

    • name：框架名称

    • noresize：禁止调整大小

    • scrolling：滚动条设置（yes/no/auto）

<noframes>

  • 为不支持框架的浏览器提供替代内容

基本用法

<!DOCTYPE html>
<html>
<frameset cols="25%,75%">
  <frame src="menu.html" name="menu">
  <frame src="content.html" name="content">
  <noframes>
    <body>您的浏览器不支持框架</body>
  </noframes>
</frameset>
</html>

实例

垂直分割

<frameset cols="100,*,50%">
  <frame src="left.html">
  <frame src="middle.html">
  <frame src="right.html">
</frameset>

水平分割

<frameset rows="20%,60%,20%">
  <frame src="header.html">
  <frame src="main.html">
  <frame src="footer.html">
</frameset>

混合分割

<frameset rows="20%,80%">
  <frame src="header.html">
  <frameset cols="30%,70%">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</frameset>

功能特点

  1. 独立加载和刷新不同框架

  2. 框架间可以相互通信

  3. 可以固定某些部分（如导航栏）

  4. 减少服务器负载（部分刷新）

CSS扩展

虽然框架集本身不使用CSS，但框架内的HTML文档可以使用CSS：

<!-- 在框架内的HTML文件中 -->
<style>
  body {
    margin: 0;
    padding: 10px;
    background-color: #f0f0f0;
  }
  
  /* 针对特定框架的样式 */
  frame[name="menu"] {
    border-right: 2px solid #333;
  }
</style>

注意事项

  1. 现代HTML5已不推荐使用框架（<frameset>、<frame>）

  2. 替代方案：使用<iframe>或CSS布局（Flexbox/Grid）

  3. 框架可能影响SEO和可访问性

  4. 某些移动设备不完全支持框架

TAG：框架文档浏览器定义属性水平边框替代部分同一个