框架对于页面的设计有着很大的做用html
框架集标签订义如何将窗口分割为框架浏览器
每一个frameset定义一系列行或列框架
rows/cols的值规定了每行或每列占据屏幕的面积学习
noresize: 固定框架大小spa
cols: 列设计
rows: 行code
框架集标签已经被弃用, 在这里作一个大体的了解htm
打开netBeans, 建立一个FrameDemo的项目, 建立4个HTML文件blog
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>
运行起来再浏览器中查看一下效果.
iframe
为了诠释内联框架, 这里用超连接的打开方式来讲明内联框架, 便于理解.
首先先看a标签的target参数:
上面的四种方式咋一看, 看不懂说的啥, 下面具体代码说明下
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的参数, 而后再刷新浏览器后, 点击超连接, 看看奇迹是如何发生的.
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的方式.
实体:
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
欢迎你们提问, 我尽我所能的为你们解答, 一块儿学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~