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 标示没有边框 宽度 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
欢迎大家提问, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~