HTML5框架
1. 框架标签(frame):
框架对于页面的设计有着很大的作用
2. 框架集标签(<frameset>):
框架集标签定义如何将窗口分割为框架
每个frameset定义一系列行或列
rows/cols的值规定了每行或每列占据屏幕的面积
3. 常用标签:
noresize: 固定框架大小
cols: 列
rows: 行
框架集标签已经被弃用, 在这里做一个大致的了解
打开netBeans, 创建一个FrameDemo的项目, 创建4个HTML文件
- index.html
- framea.html
- frameb.html
- framec.html
framea.html, frameb.html和framec.html分别为body设置不同的背景色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--把不同的frame设置不同的颜色 其它的一样, 只改变颜色-->
<body bgcolor="#5f9ea0"> </body>
</html>
在index.html中键入代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<!-- IDE已提示frameset已经被弃用 设置行的比例为20:30:50 -->
<frameset rows="20%, 30%, 50%">
<!--用src引入外部frame-->
<frame src="framea.html"></frame>
<frame src="frameb.html"></frame>
<frame src="framec.html"></frame>
</frameset>
</html>
运行起来再浏览器中查看一下效果.
4. 内联框架
iframe
为了诠释内联框架, 这里用超链接的打开方式来说明内联框架, 便于理解.
首先先看a标签的target参数:
- _blank: 在新建窗口中打开
- _self: 在当前的窗口中打开
- _parent: 在上一个父窗口中打开
- _top: 在*窗口中打开
上面的四种方式咋一看, 看不懂说的啥, 下面具体代码说明下
1. htmla.html里面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--被不同的frame设置不同的颜色 其它的一样, 只改变颜色-->
<body bgcolor="#dc143c">
frameA
<a href="http://www.baidu.com" target="_parent">没事儿就找找度娘</a>
</body>
</html>
2. htmlb.html, 在htmlb中内联一个htmla的框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#6495ed">
<!--
在htmlb里面去承载htmla
-->
frameb
<iframe src="framea.html" width="400" height="400"> </iframe>
</body>
</html>
3. htmlc.html, 在htmlc中内联一个htmlb的框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#ff8c00">
<!--
在htmlc里面去承载htmlb
-->
frameC
<iframe src="frameb.html" width="600px" height="600px"> </iframe>
</body>
</html>
4. index.html, 在index中内联一个ftmlc的框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<!--
target: 打开页面的方式
参数:
_blank: 在新建窗口中打开
_self: 在当前的窗口中打开
_parent: 在上一个父窗口中打开
_top: 在*窗口中打开
-->
<a href="http://www.baidu.com" target="_top">没事儿就找找度娘</a>
<!--
iframe: 设置内联框架
frameborder: 设置边框 0 标示没有边框
width: 宽度
height: 高度
-->
<iframe src="framec.html" frameborder="0" width="800" height="800"></iframe> </html>
依次更改htmla.html中a标签中target的参数, 然后再刷新浏览器后, 点击超链接, 看看奇迹是如何发生的.
HTML5背景
1. 背景标签:
background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--若二者同时存在会怎样-->
<body background="p.png">
</body>
</html>
2. 背景颜色:
bgcolor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--若二者同时存在会怎样-->
<body bgcolor="#dc143c">
</body>
</html>
二个同时存在, 谁在前, 以谁为准.
3. 颜色:
颜色是由一个十六进制符号来定义, 这个符号由红色, 绿色和蓝色的值组成(RGB)
颜色最小值:0(#00)
颜色最大值:255(#FF)
红色: #FF0000
绿色: #00FF00
蓝色: #0000FF
开发是最好使用这个十六进制颜色的格式, 不推荐使用RGB的方式.
HTML5实体
实体:
HTML中预留字符串必须被替换成字符实体
如: < , >, $
这些无法在网页上直接呈现出来, 需要用实体来替换, 然后才能显示, 类似其它语言中的转义.
实体有很多很多, 我们不需要去记忆, 需要用到的时候直接可以查, 例如:
<!DOCTYPE html>
<html>
<body> <h2>字符实体</h2> <p>&X;</p> <p>用实体数字（比如"#174"）或者实体名称（比如 "pound"）替代 "X"，然后查看结果。</p> </body>
</html>
实体教程参考:http://www.w3school.com.cn/html/html_entities.asp
查找字符实体: http://www.w3school.com.cn/tags/html_ref_entities.html
欢迎大家提问, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~