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

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

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

HTML5学习笔记<六>: HTML5框架, 背景和实体的更多相关文章

HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
HTML5学习笔记<三>: HTML5样式, 连接和表格
HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...
HTML5学习笔记：HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]
使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存 ...
HTML5学习笔记1 HTML5 新元素
自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能 ...
HTML5学习笔记之表格标签
HTML5学习笔记之表格标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
# go微服务框架kratos学习笔记六(kratos 服务发现 discovery)
目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...
【Visual C++】游戏编程学习笔记之六：多背景循环动画
本系列文章由@二货梦想家张程所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...

随机推荐

关于flash擦除的方法
一般的Flash,只允许写时将1变成0,而不允许0变成1:仅当擦除时将0变成1.所以写全0xff是没什么意义的以前对flash只能进行一次写很困惑,这句话解释了原因. norflash就是对bit ...
CodeForces462B
Appleman and Card Game Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & % ...
flask蓝图的使用
首先,我对蓝图的理解相对通俗,就是觉得蓝图对于视图方法模块化.大项目协同开发过程中的一个很好的工具. 1.下图是我们通常情况下使用的项目组织结构
jquery 高级学习笔记
--jquery 和原生js可以共存,但不能混用.jquery 可以通过get()方法转换为原生js. $("#div1").get(0).innerHTML; get() 需 ...
Android实现屏蔽微信拉黑和删除联系人功能
实现效果: 让微信永远弹不出那个删除的对话框不就相当于屏蔽掉该功能了吗?哈哈效果如图: 实现原理: 同样是利用AccessibilityService辅助服务,关于这个服务类还不了解的同学可以先看下我 ...
ADODB——RecordSet对象
转自网友,看着挺全就转了,供大家学习研究. Recordset 对象的属性 1.CursorType 属性 AdOpenForwardOnly: 仅向前游标,默认值.除了只能在记录中向前滚动外,与静态 ...
matlab中同一文件定义子函数的方法
在matlab中一个.m文件中可以有多个的子函数,但仅能有一个主函数,并且M文件名必须和主函数相同在一个m文件中通常有两种定义子函数的方法: 1.嵌套定义 myfunc1会和主函数共享变量名.这种情况 ...
beautifulsoup 获取a(tag)的属性href
一开始使用使用attrs(“href”) 出现错误TypeError: 'dict' object is not callable 由于attrs字典类型 atrrs["href" ...
Java语言基本语法（一）————关键字&标识符（Java语言标识符命名规范&Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则）
一.关键字关键字的定义和特点定义:被Java语言赋予特殊含义,用做专门用途的字符串(单词). 特点:关键字中所有字母均为小写下面列举一些常用的关键字. 用于定义数据类型的关键字:byte.sho ...
C#数组和集合
一维数组概述:数组是通过指定数组的元素类型.数组的(秩)维数及数组每个维度上的上限和下限来定义的,及一个数组的定义需要包含以下几个要素. 类型数组的维数每个维的上限下限声明:数据类型 ...

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