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

随机推荐

Angularjs^1.2.9 搜索关键字高亮显示
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情 ...
I/O模型浅析
引入首先来说一下进程: 进程在就是一段执行中的代码,他是由一条条指令和数据组成的一个具有生命周期的有头有尾的实体. 进程根据权限大体上可以分为两类:用户进程和内核进程. 这两者的主要区别在于权限 ...
iOS之内存分析
静态内存分析(Product->Analyze) 静态内存分析是不运行程序,直接对代码进行分析. 但是没有真正分配内存,根据代码的上下文的语法结构,来分析是否有内存泄露缺点:不一定准确,但是如 ...
内功心法 -- java.util.ArrayList<E> (6)
写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...
PS切图篇（一）---界面设置
#工作区设置四大主要面板:信息字符图层历史记录打开必要属性: 选择工具设置选择图层的方式:ctrl+鼠标左击想选择的图层
php in_array语法
bool in_array ( mixed $needle , array $haystack [, bool $strict ] ) 返回值为直或假 var_dump(in_array( ...
Docker网络代理设置
背景在一些实验室环境,服务器没有直接连接外网的权限,需要通过网络代理.我们通常会将网络代理直接配置在/etc/environment./etc/profile之类的配置文件中,这对于大部分操作都是可 ...
HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
SpringBoot实践 - SpringBoot+mysql
关于springBoot是个神马东西以及优缺点,请自行搜索了解. LZ看到很多关于SpringBoot的Demo,单看一篇总是没法整合SpringBoot与Mysql.没法子,还是自己操刀来一发为妙. ...
Loadrunner 在controller中运行socket脚本时报错：Abnormal termination, caused by mdrv process termination 的原因和解决方法
原因: 网上给出的可能的原因大致有两个: 1. 压力负载机器的资源不足(CPU,内存) 2. 分配内存和释放内存的语句不匹配. 并给出了一些解决方案,最开始我以为是加了IP地址的原因,不断尝试增加 ...

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