第五周笔记

HTML框架

1.框架的作用
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。使用框架的坏处:开发人员必须同时跟踪更多的HTML文档;很难打印整张页面。

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

3.框架标签(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>

4.框架的注意事项
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 标签中加入:
noresize="noresize"。

//为不支持框架的浏览器添加 <noframes> 标签。不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。
<frameset cols="25%,50%,25%">
	<frame src="https://www.btbu.edu.cn/example/html/frame_a.html">
	<frame src="https://www.btbu.edu.cn/example/html/frame_b.html">
	<frame src="https://www.btbu.edu.cn/example/html/frame_c.html">
	<noframes>
		<body>处理框架
		</body>
	</noframes>
</frameset>

5.混合框架结构(框架的嵌套)

<frameset rows="50%,50%">
	<frame src="https://www.btbu.edu.cn/example/html/frame_a.html">
	<frameset cols="25%,75%">
		<frame src="https://www.btbu.edu.cn/example/html/frame_b.html">
		<frame src="https://www.btbu.edu.cn/example/html/frame_c.html">
	</frameset>
</frameset>

6.内联框架

<body>
	<iframe src="https://www.btbu.edu.cn/i/eg_landscape.jpg"></iframe>
</body>

7.使用框架导航
点导航框架里的超链接,使其到内容框架显示

<html>
<frameset cols="180,*">
	<frame src="temp.html" >
	<frame src="temp1.html" name="showframe">
</frameset>
</html>
temp.html文件
<html>
<body>
	<a href="http://www.baidu.com/" target ="showframe">百度</a><br/>
	<a href="temp1.html#C8" target ="showframe">带有锚的链接</a>
</body>
</html>
<html>
<body>
	<a name="C1"/><h2>标题1</h2>
	<p>这是一个段落,段落1</p>
	
	<a name="C2"/><h2>标题2</h2>
	<p>这是一个段落,段落2</p>
	...<!-- 省略部分 -->
	<a name="C20"/><h2>标题20</h2>
	<p>这是一个段落,段落20</p>
</body>
</html>

HTML头部

(1)头元素内的信息
头元素内的元素不会被浏览器显示出来。根据 HTML 标准,仅有几个标签在 HTML 的头部分是合法的。它们是:<base>, <link>, <meta>, <title>, <style> 和 <script>

(2)Head标签
标签 描述

//<head>	定义关于文档的信息。			<title>	定义文档标题。
//<base>	定义页面中所有链接的基准 URL。	<link>	定义资源引用。
//<meta>	定义元信息。
//<!DOCTYPE>定义文档类型。此标签须位于 html 标签之前。

HTML元信息

(1)Meta元素说明
大多数情况下,meta 元素用来提供与浏览器或者搜索引擎相关的信息,比方说描述文档的内容等等。
(2)针对搜索引擎的关键字
这个 Meta 元素定义了页面的关键字:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
name 和 content 属性的作用是描述页面的内容。然而,由于非常多的网管们使用 meta 标签制造垃圾信息,比方说在页面重复关键词以达到提高排名的目的,一些搜索引擎已经彻底放弃了使用它们。
6.URL(统一资源定位器)
(1)URL说明
URL地址,例如:https://www.btbu.edu.cn/html/lastpage.html,遵守如下语法规则:
scheme://host.domain:port/path/filename
scheme: 定义因特网服务的类型。最流行的类型是 http。
host(主机): 定义此域中的主机。如果被省略,缺省的支持 http 的主机是 www。
domain(域): 定义因特网域名,比如:w3school.com.cn。
:port(端口): 定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。
path(路径): 定义服务器上的路径。如果路径被省略,资源(文档)会被定位到网站的根目录。
filename(文件名):定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html,或者依据 WEB 服务器设置的其他文件名。
(2)URL Schemes
以下是其中一些最流行的 scheme:
file 本地 PC 上的文件。 ftp FTP 服务器上的文件。
http World Wide Web 服务器上的文件。 gopher Gopher 服务器上的文件。
news Usenet 新闻组。 telnet Telnet 连接。
WAIS WAIS 服务器上的文件。

HTML 4.0 事件属性

(1)窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
属性 值 描述
onload 脚本 当文档载入时执行脚本
onunload 脚本 当文档卸载时执行脚本

(2)表单元素事件 (Form Element Events)
仅在表单元素中有效。
属性 值 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

(3)图像事件 (Image Events)
该属性可用于 img 元素。
属性:onabort。
值:脚本。
描述:当图像加载中断时执行脚本

(4)键盘事件 (Keyboard Events)
在下列元素中无效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
属性 值 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

(5)鼠标事件 (Mouse Events)
在下列元素中无效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
属性 值 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本

XHTML文档类型

(1)STRICT(严格类型)
在此情况下使用:需要干净的标记,避免表现上的混乱。请与层叠样式表配合使用。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"https://www.btbu.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(2)TRANSITIONAL(过渡类型)
在此情况下使用:当需要利用 HTML 在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.btbu.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(3)FRAMESET(框架类型)
在此的情况下使用:需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"https://www.btbu.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值