html里的框架集学习记录
2015-05-05 23:40
429 查看
如图
你可能看见过这种网站的构造，里面是一个空白的网站，然后在空白的网站内嵌入三个网站。
下面用一个例子来说明。首先创个文件kuangjia.html的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<frameset rows="200px,*"> //网页分配为上下两部分，上为200px，下为剩下的填充。
<frame src="hander.html"></frame> //网页的上面部分
<frameset cols="30%,*"> //把网页下面的部分分为左右两部分
<frame src="lside.html"></frame>
<frame src="rside.html" name="rside"></frame> //链接到rside.html，并给你命名为rside。
</frameset>
</frameset>
</html>
里面需要注意的是头部的DOCTYPE一定要是这个<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
才行。还有此文件的body也不能有。看上面的代码注释理解上面的代码意思。
然后创个hander.html文件，代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>头部</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body>
<div> 有着“超级推销员”之称的李克强随时不忘推销中国高铁。5月4日在会见马来西亚陆路公共交通委员会主席赛·哈密德时，李克强指出，中国政府支持中方联合体积极参与马来西亚—新加坡高铁项目合作，充分利用在规划设计、综合开发、融资支持、建设运营等方面的经验和实力，拿出有竞争力的竞标方案。
这篇看似普通的外事新闻报道背后，其实有着深刻的国家战略。4月3日，李克强在中南海主持召开中国装备走出去和推进国际产能合作座谈会，强调要推动中国外贸从“大进大出”转向“优进优出”，形成开放型经济新格局。
人民网记者梳理发现，这是我国首次在对外贸易领域提出“优进优出”的说法。
</div>
</body>
</html>
创个lside.html文件，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>左边</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body>
<a href="rside.html" target="rside">链接</a>
<a href="#" target="#">链接1</a>
</body>
</html>
最后创个rside.html文件，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>右边</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body>
<div>我是右边</div>
</body>
</html>
网页的结果图片如下：
--------------------------------------------------------------------------------
这里面需要说下的是lside.html里面的链接。<a href="rside.html" target="rside">链接</a> ，target这个关键字使用的效果是，当你点链接这个按钮时，会显示的是rside.html的网页，因为在kuangjia.html中把rside.html命名为rside。所以tardet="rside"其实就是在本页显示出rside.html的网页。如上图点链接，就会直接在右面显示出rside.html中的内容“我是右边”。
此学习记录完毕，如果有错欢迎指出。
你可能看见过这种网站的构造，里面是一个空白的网站，然后在空白的网站内嵌入三个网站。
下面用一个例子来说明。首先创个文件kuangjia.html的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<frameset rows="200px,*"> //网页分配为上下两部分，上为200px，下为剩下的填充。
<frame src="hander.html"></frame> //网页的上面部分
<frameset cols="30%,*"> //把网页下面的部分分为左右两部分
<frame src="lside.html"></frame>
<frame src="rside.html" name="rside"></frame> //链接到rside.html，并给你命名为rside。
</frameset>
</frameset>
</html>
里面需要注意的是头部的DOCTYPE一定要是这个<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
才行。还有此文件的body也不能有。看上面的代码注释理解上面的代码意思。
然后创个hander.html文件，代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>头部</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body>
<div> 有着“超级推销员”之称的李克强随时不忘推销中国高铁。5月4日在会见马来西亚陆路公共交通委员会主席赛·哈密德时，李克强指出，中国政府支持中方联合体积极参与马来西亚—新加坡高铁项目合作，充分利用在规划设计、综合开发、融资支持、建设运营等方面的经验和实力，拿出有竞争力的竞标方案。
这篇看似普通的外事新闻报道背后，其实有着深刻的国家战略。4月3日，李克强在中南海主持召开中国装备走出去和推进国际产能合作座谈会，强调要推动中国外贸从“大进大出”转向“优进优出”，形成开放型经济新格局。
人民网记者梳理发现，这是我国首次在对外贸易领域提出“优进优出”的说法。
</div>
</body>
</html>
创个lside.html文件，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>左边</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body>
<a href="rside.html" target="rside">链接</a>
<a href="#" target="#">链接1</a>
</body>
</html>
最后创个rside.html文件，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>右边</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body>
<div>我是右边</div>
</body>
</html>
网页的结果图片如下：
--------------------------------------------------------------------------------
这里面需要说下的是lside.html里面的链接。<a href="rside.html" target="rside">链接</a> ，target这个关键字使用的效果是，当你点链接这个按钮时，会显示的是rside.html的网页，因为在kuangjia.html中把rside.html命名为rside。所以tardet="rside"其实就是在本页显示出rside.html的网页。如上图点链接，就会直接在右面显示出rside.html中的内容“我是右边”。
此学习记录完毕，如果有错欢迎指出。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- PHP(6)只记录我的学习历程 html(链接和框架标志)
- 2017.6.30 学习记录 html<form>标签和框架
- 6、HTML 学习记录——表单、框架
- 【web学习记录】项目框架搭建一
- 记录学习laravel框架过程中遇到的问题
- HTML/CSS学习记录（4）
- php Laravel框架学习(四) 之 表单与HTML
- web框架学习前复习——html
- Web安全学习记录-HTML
- aardio学习记录-2.使用json实现aardio与html界面的数据互动
- 游戏编程框架学习记录
- 前端学习 -- Html&Css -- 框架集
- HTML学习记录4
- PHP(4)只记录我的学习历程 html(图片标志)
- Activiti框架学习记录-01
- Activiti框架学习记录-02
- 新浪微博Android客户端学习记录二：系统主框架搭建
- html学习记录1
- Linux USB框架学习记录
- HTML学习笔记三表单和框架