31、HTML 框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
实例
垂直框架
本例演示:如何使用三份不同的文档制作一个垂直框架。
水平框架
本例演示:如何使用三份不同的文档制作一个水平框架。
框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
框架结构标签(<frameset>
)
框架结构标签(<frameset>
)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
编者注:frameset 标签也被某些文章和书籍译为框架集。
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中,而 HTML 文档 “frame_b.htm” 被置于第二个列中:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
基本的注意事项 - 有用的提示:
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame>
标签中加入:noresize=“noresize”。
为不支持框架的浏览器添加 <noframes>
标签。
重要提示:不能将 <body></body>
标签与 <frameset></frameset>
标签同时使用!不过,假如你添加包含一段文本的 <noframes>
标签,就必须将这段文字嵌套于 <body></body>
标签内。(在下面的第一个实例中,可以查看它是如何实现的。)
32、HTML 背景
实例
搭配良好的背景和颜色
一个背景颜色和文字颜色搭配良好的例子,使页面中的文字易于阅读。
搭配得不好的背景和颜色
一个背景颜色和文字颜色搭配得不好的例子,使页面中的文字难于阅读。
背景(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">
提示:如果你打算使用背景图片,你需要紧记一下几点:
背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后,看上去还可以吗?
对文字的注意力被背景图像喧宾夺主了吗?
基本的注意事项 - 有用的提示:
应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。
33、HTML URL 字符编码
URL 编码会将字符转换为可通过因特网传输的格式。
URL - 统一资源定位器
Web 浏览器通过 URL 从 web 服务器请求页面。
URL 是网页的地址,比如 http://www.w3school.com.cn。
URL 编码
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
34、HTML Web Server
如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上。
托管自己的网站
在自己的服务器上托管网站始终是一个选项。有几点需要考虑:
硬件支出
如果要运行“真正”的网站,您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的(一天 24 小时)高速连接。
软件支出
请记住,服务器授权通常比客户端授权更昂贵。同时请注意,服务器授权也许有用户数量限制。
人工费
不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒,以确保您的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
使用因特网服务提供商(ISP)
从 ISP 租用服务器也很常见。
大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点:
连接速度
大多数 ISP 都拥有连接因特网的高速连接。
强大的硬件
ISP 的 web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡,以及必要的备份服务器。
安全性和可靠性
ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间,最新的软件补丁,以及最好的病毒防护。
选择 ISP 时的注意事项
24 小时支持
确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地,同时还必须等待第二个工作日。如果您不希望支付长途电话费,那么免费电话服务也是必要的。
每日备份
确保 ISP 会执行每日备份的例行工作,否则您有可能损失有价值的数据。
流量
研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量,那么您要确保不会因此支付额外费用。
带宽或内容限制
研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频,请确保您有此权限。
E-mail 功能
请确保 ISP 支持您需要的 e-mail 功能。
数据库访问
如果您计划使用网站数据库中的数据,那么请确保您的 ISP 支持您需要的数据库访问。
35、HTML <!DOCTYPE>
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。提示:W3School 即将升级为最新的 HTML5 文档类型。
实例
带有 HTML5 DOCTYPE 的 HTML 文档:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
来自 W3School 的 HTML 快速参考。可以打印它,以备日常使用。
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>