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 ...

随机推荐

Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框加入小覆盖的内容,像在iPad上,用于存放非主要信息弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的首先我们引入 ...
SimRank协同过滤推荐算法
在协同过滤推荐算法总结中,我们讲到了用图模型做协同过滤的方法,包括SimRank系列算法和马尔科夫链系列算法.现在我们就对SimRank算法在推荐系统的应用做一个总结. 1. SimRank推荐算法的 ...
JavaScript 语法
一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...
Quartz_理解3
什么是Quartz Quartz是一个开源的作业调度框架,由java编写,在.NET平台为Quartz.Net,通过Quart可以快速完成任务调度的工作. Quartz能干什么/应用场景如网页游戏中 ...
datagridview数据绑定操作数据库实现增删改查
DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...
C#中的foreach语句与枚举器接口（IEnumerator）及其泛型相关问题
这个问题从<C#高级编程>数组一节中的foreach语句(6.7.2)发现的. 因为示例代码与之前的章节连贯,所以我修改了一下,把自定义类型改为了int int[] bs = { 2, 3 ...
浅谈css中一个元素如何在其父元素居中显示
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
如何在 Windows上编译Objective-C
Objective-C现在几乎已经变成了苹果的专利了,可以直接在苹果的Xcode上编译Objective-C程序,但是在Windows平台下的编译工具就寥寥无几了,本身这种语言用的人就不是很多.今天在 ...
阿里巴巴Java开发手册评述
2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...
Unity安装问题
在VS2012中,使用NuGet安装Unity.MVC4的时候,提示以下错误: 'Unity' already has a dependency defined for 'CommonServiceL ...

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