8

HTML页面优化

下面是页面背景图的设置

 1 <html>
 2 
 3 <frameset cols="25%,50%,25%">
 4 
 5   <frame src="/example/html/frame_a.html">
 6   <frame src="/example/html/frame_b.html">
 7   <frame src="/example/html/frame_c.html">
 8 
 9 </frameset>
10 
11 </html>

下面是效果图

 

 水平框架

 1 <html>
 2 
 3 <frameset rows="25%,50%,25%">
 4 
 5   <frame src="/example/html/frame_a.html">
 6   <frame src="/example/html/frame_b.html">
 7   <frame src="/example/html/frame_c.html">
 8 
 9 </frameset>
10 
11 </html>

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面
框架结构标签（<frameset>）
  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

    Iframe - 设置高度和宽度

    height 和 width 属性用于规定 iframe 的高度和宽度。

    属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

    实例

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

    Iframe - 删除边框

    frameborder 属性规定是否显示 iframe 周围的边框。

    设置属性值为 "0" 就可以移除边框：

    实例

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>

    使用 iframe 作为链接的目标

    iframe 可用作链接的目标（target）。

    链接的 target 属性必须引用 iframe 的 name 属性：

    实例

    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

    背景（Backgrounds）

    <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

    背景颜色（Bgcolor）

    背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

    <body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

    以上的代码均将背景颜色设置为黑色。

    背景（Background）

    背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

    <body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

    URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

    提示：如果你打算使用背景图片，你需要紧记一下几点：

    • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
    • 背景图像是否与页面中的其他图象搭配良好。
    • 背景图像是否与页面中的文字颜色搭配良好。
    • 图像在页面中平铺后，看上去还可以吗？
    • 对文字的注意力被背景图像喧宾夺主了吗？

    基本的注意事项 - 有用的提示：

    <body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

    应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

posted @ 2020-02-08 20:16  城南漠北  阅读(166)  评论(0)  编辑  收藏  举报