HTML5学习笔记<六>: HTML5框架, 背景和实体

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参数:  

    1. _blank: 在新建窗口中打开
    2. _self: 在当前的窗口中打开
    3. _parent: 在上一个父窗口中打开
    4. _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

欢迎大家提问, 我尽我所能的为大家解答, 一起学习, 共同成长~

南心芭比: 热爱分享, 收获快乐~

上一篇:经典面试题-python函数之默认参数


下一篇:Visual Studio常用设置