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

随机推荐

CSS实现的几款不错的菜单栏
前言自从做了智慧城市这个项目之后,我一个做后端的开发者,瞬间转为前端开发,不过我还是很喜欢前端的.前端那些事,其实蛮有意思的,HTML实现的是静态的,使用ajax之后就可以和数据库交互了,加上js和 ...
【福利大放送】不止是Android，Github超高影响力开源大放送，学习开发必备教科书
一.写在前面最近项目重构,时间贼多,也没什么时间更新博客,个人的开源项目也是多时没有更新了:github地址,然而没有更新不代表我不在乎,后面一有空还是会继续提交的. 还是来冒个泡,给大家献上一些福 ...
文件下载类型__response
response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据. 例如web浏览器就是通过MI ...
Windows下搭建HTTP/HTTPS服务器及测试过程
1 安装Apache http://www.apachehaus.com/cgi-bin/download.plx 选择合适的版本下载本次下载的是 Apache 2.4.x VC14 Apache版 ...
iOS 启动页后广告Demo
重点! 对于启动页后的广告,相信大家也都看到过很多很多的,比如我自己常看到的有 QQ音乐,爱奇艺了.你点击了APP,它会启动就会随之启动..其实这些APP的启动页是没有消失的,你去认真的观察一下!所以 ...
java流和文件保存字节级数据(写）
重要的知识点: 流的概念: 从数据源到I/O类的输入流(in) 从I/O类到数据接收器的输出流(out) I/O包含子类较多的有四大家族:InputStream,OutputStream,Re ...
Match类解析
Matcher类:使用Matcher类,最重要的一个概念必须清楚:组(Group),在正则表达式中()定义了一个组,由于一个正则表达式可以包含很多的组,所以下面先说说怎么划分组的,以及这些组和组的下标 ...
js加载XML文件
// XML文件 <?xml version="1.0" encoding="gb2312"?> <root> <father n ...
Java 重写hashCode 方法和equals方法
package Container; import java.util.HashSet; import java.util.Iterator; /* Set 元素是无序的(存入和取出的顺序不一定一致) ...
cli/php.ini和fpm/php.ini的区别
1. 当从命令行执行PHP binary时,cli/php.ini会被使用,你可以通过在命令行运行php --ini来查看. 2. 当PHP运行做为FPM时,会使用fpm/phh.ini,其中一种情况 ...

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