HTML 响应式 Web 设计

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

创建自己的响应式设计

创建响应式设计的一个方法，是自己来创建它：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>

<body>

<h1>bilibili</h1>
<h2>Resize this responsive page!</h2>
<br />

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架

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

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

下面的代码是一个例子，设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%, 75%">
<frame src="fram_a.html">
<frame src="fram_b.html">
</frameset>

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！

假如添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

实例

下面的代码是一个例子，演示：如何使用三份不同的文档制作一个垂直框架：

<html>

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

下面的代码是一个例子，演示：如何使用三份不同的文档制作一个水平框架：

<html>

<frameset rows="25%, 50%, 25%">
	<frame scr="/example/html/frame_a.html">
	<frame scr="/example/html/frame_b.html">
	<frame scr="/example/html/frame_c.html">
</frameset>
</html>

下面的代码是一个例子，演示：如何使用 <noframes> 标签：

<html>

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

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>
</html>

下面的代码是一个例子，演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中：

<html>

<frameset rows="50%, 50%">
	<frame scr="/example/html/frame_a.html">
<frameset cols="25%, 75%">
	<frame scr="/example/html/frame_b.html">
	<frame scr="/example/html/frame_c.html">
</frameset>

</frameset>
</html>

下面的代码是一个例子，演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的：

<html>

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

</frameset>
</html>

下面的代码是一个例子，演示如何创建内联框架（HTML 页中的框架）：

<html>

<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
</body>

</html>

HTML Iframe

iframe 用于在网页内显示网页。

添加 iframe 的语法

<iframe src="url"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

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

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

下面的代码是一个例子：

<!DOCTYPE html>
<html>
<body>

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


</body>
</html>

Iframe - 删除边框

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

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

<!DOCTYPE html>
<html>
<body>

<iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe>

</body>
</html>

使用 iframe 作为链接的目标

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

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

<!DOCTYPE html>
<html>
<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a" ></iframe>

<p><a href="bilibili" target="iframe_a">http://www.bilibili.com</a></p>

<p>注释:由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

</body>
</html>

流动的风与雪

HTML：一种标记语言而不是编程语言（9.0）