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

随机推荐

webSocket错误收集
关于使用WebSocket报如下错误, Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket': already in ...
linux - tar命令简单使用
tar 新建一个tar文档 touch file1 touch file2 mkdir dir1 touch dir1/file3 # 普通tar文档 tar -cf tar-file.tar fil ...
C++ Primer 笔记第一章
C++ Primer 学习笔记第一章快速入门 1.1 main函数系统通过调用main函数来执行程序,并通过main函数的返回值确定程序是否成功执行完毕.通常返回0值表明程序成功执行完毕: ma ...
笑谈ArcToolbox (4) 非我族类
笑谈ArcToolbox (4) 非我族类 by 李远祥 ArcToolbox的工具既能直接对数据源进行处理,也能对图层以及被选择要素进行处理.但有些数据看起来是空间数据,但实际上在处理的时候还是会出 ...
PHP文本处理之中文汉字字符串转换为数组
在PHP中我们可以通过str_split 将字符串转换为数组,但是却对中文无效,下面记录一下个人将中文字符串转换为数组的方法. 用到的PHP函数 mb_strlen - 获取字符串的长度 mb_sub ...
java基础知识点---size(),length(),length的区别
List<Integer> a=new ArrayList<Integer>(); a.add(1); System.out.println(a.size()); int b[ ...
linux之sed的常用操作
Sed命令: sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(patter ...
java字节数组格式化为十六进制字符串
/** * 格式化byte * * @param b * @return */ public static String byte2hex(byte[] b) { char[] Digit = { ' ...
Java内部类之匿名内部类
我们都知道Java中可以使用内部类,将一个类的定义放在另一个类的定义的内部,这就是内部类,但是匿名内部类往往使我们摸不着头脑,因为它并没有特定的名称,那么该如何使用它呢? 定义一个匿名内部类 pu ...
java 多线程之卖票两种方式
1.通过extends Thread /* 需求:简单的卖票,多个窗口同时买票 (共用资源) 创建线程的第二种方式:实现Runnable接口步骤: 1,定义类实现Runnable接口 2,覆盖/重写 ...

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