HTML框架标签的实例应用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML框架标签的实例应用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4918字，纯文字阅读大概需要8分钟。

内容图文

1.HTML中主要的基础标签如下：

注释标签；

段落标签<p></p>；

标题标签<h1></h1>，该标签的参数从h1~h6；

换行标签<br/>或者<br>；

（字体）粗体标签<b></b>；

（字体）斜体标签<i></i>；

下标<sub></sub>；

上标<sup></sup>；

预格式标签<pre></pre>；

地址标签<address></address>；

删除标签<del></del>；

插入标签<ins></ins>；

连接标签<a></a>；

下水平线标签<hr/>；

2.连接标签的语法：<a href=连接地址>名字</a>

例如，要想连接到百度首页：

[html] view plain copy

将图片作为按钮连接到指定路径，其中alt为移动鼠标显示的名字，src为图片的路径：

[html] view plain copy

</a>

在新的浏览器打开连接：

[html] view plain copy

<a href="http://www.baidu.cn" target="_blank">百度

</a>

跳转到当前页面的指定段落：

[html] view plain copy

</a>

<p>

</p>

<p>

</p>

<p>

</p>

3.HTML中的框架结构

例1.垂直框架结构，将页面垂直分为三个部分。

目录结构如图：

HTML框架标签的实例应用 - 文章图片

f1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    最左边框架  
</body>  
</html>

f2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    中间框架  
</body>  
</html>

f3.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    最右边框架  
</body>  
</html>

frame.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>框架结构</title>  
<!-- 框架结构，frameset不需要写在body里面 -->  
</head>  
<!-- 垂直结构框架用cols，水平框架用rows -->  
<frameset cols="30%,40%,30%">  
    <frame src="f1.html">  
    <frame src="f2.html">  
    <frame src="f3.html">  
</frameset>  
</html>

运行结果图

HTML框架标签的实例应用 - 文章图片

例2.混合结构框架。

目录结构如图：

HTML框架标签的实例应用 - 文章图片

f1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <h1>这是一个导航框架</h1>  
</body>  
</html>

f2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <p>菜单</p>  
    <!-- 单击菜单一跳转到menu1.html页面，并将该页面在menu框架里面打开 -->  
    <p>  
        <a href="menu1.html" target="menu">菜单一</a>  
    </p>  
    <p>  
        <a href="menu2.html" target="menu">菜单二</a>  
    </p>  
</body>  
</html>

f3.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    菜单内容  
</body>  
</html>  
menu1.html代码
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    我是菜单一的内容  
</body>  
</html>

menu2.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    我是菜单二的内容  
</body>  
</html>

frame.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>混合框架结构</title>  
</head>  
<!-- 最开始为水平框架 -->  
<frameset rows="20%,*">  
    <!-- 水平框架里面最开始是一个frame和另一个垂直框架 -->  
    <!-- noresize="noresize"属性限制框架大小，设置为固定值 -->  
    <frame src="f1.html" noresize="noresize">  
    <frameset cols="20%,*">  
        <!-- 垂直框架里面有两个frame -->  
        <!-- 该框架为菜单，单击内容可以跳转页面 -->  
        <frame src="f2.html" noresize="noresize">  
        <!-- 将该框架命名为menu -->  
        <frame src="f3.html" noresize="noresize" name="menu">  
    </frameset>  
</frameset>  
  
</body>  
</html>

运行结果图

HTML框架标签的实例应用 - 文章图片

以上就是HTML框架标签的实例应用的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的HTML框架标签的实例应用全部内容，希望文章能够帮你解决HTML框架标签的实例应用所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/393349.html

来源：【匿名】

【上一篇】总结div和span的区别与用法【下一篇】PHP 和 HTML

更多 ►

【HTML框架标签的实例应用】教程文章相关的互联网学习教程文章

1 localstorage和sessionstorage sessionStrage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。localStorage：将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。两者区别就是一个作为临时保存，一个拥有长期保存。2本地数据库使用SQLLite数据库，需要两个必要步骤：创建数据库访问对象使用事务处理创建对...

HTML高级标签（3）————表单的应用【图】

在HTML开发中，标签的种类和数量很多，不可能说每一种都研究透。很多可以用CSS来控制的标签，我们基本没有必要在上面浪费时间。所以，我们只要掌握在HTML开发中比较常用的标签就完全可以了。首先，先写一个最简单的登录表单。<html><head><title>表单的应用</title></head><body><table border="1" width="500" align="center"><form name="frm" action="login.php"><caption>表单的应用</caption><tr><th>文本域(<u>U</u>)</th><t...

10款强大的jQuery/HTML5应用新鲜出炉【图】

1、CSS3/jQuery自定义弹出窗口多种弹出动画这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html，十分灵活。另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的。在线预览源码下载2、jQuery适合移动页面和PC页面的分页插件今天我们要为大家分享一款非常出色的jQuery分页插件，这款分页插件的外观挺一般的，它的一个最大特点是不仅适...

10几个HTML5经典动画应用回顾让你大饱眼福【图】

1、HTML5 Canvas画板画图工具可定义笔刷和画布HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定义笔刷的类型、粗细、颜色，也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展，让它的画图功能更加完善。在线预览源码下载 2、HTML...

HTML5适合移动应用开发的几大特性

1.离线缓存为HTML5开发移动应用提供了基础　　HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。　　同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。　　在线app支持边使用边下载离线缓存，或者不下载离线缓存；而离线app必须是下...

html5之Canvas路径绘图、坐标变换应用实例【图】

在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。 ff下效果图：代码：复制代码代码如下:<h...

绘制SVG内容到Canvas的HTML5应用【图】

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:...

HTML基础—一般标签、常用标签和表格的应用

<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body> 页面显示的内容 </body></html> --结束标签 注释body的属性： bgcolor 页面背景色 text 文字颜色（规定所有文本颜色） topmargin 上页边距 leftmargin 左页边距 rightmargin 右页边距 botto...

四种途径将HTML5 web应用变成android应用

作为下一代的网页语言，HTML5拥有很多让人期待已久的新特性。HTML5的优势之一在于能够实现跨平台游戏编码移植，现在已经有很多公司在移动设备上使用HTML5技术。随着HTML5跨平台支持的不断增强和智能手机的迅速普，HTML5技术有着非常好的发展前景，甚至有人预言HTML5将引燃移动平台游戏开发技术的新革命。越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过，HTML5 Web APP的出现能否在未来取代移动应用，就目前来说...

HTML下标签之应用【图】

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body>  <input type="text" name="玉手" placeholder="请描述你的手" readonly="readonly" >左手</i...

html5+css3之动画在webapp中的应用

动画在webapp的现状 webapp模式的网站追求的就是一个体验，是HTML5&CSS3浪潮下的产物，抛开体验不说，webapp模式门槛比较高；而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点。但也是一个难点，一个痛点，主要原因是：移动端手机的碎片化严重。设备、型号、版本、分辨率等差异导致移动端需要考虑的主流情况达10多种，而Hybrid带来的webview可以让情况更加糟糕所以说，近两年想在移动端大范围的使用动画，或者使用weba...

（四十七）自动化测试高级应用之HTML测试报告-更易读的测试报告【代码】【图】

随笔记录方便自己和同路人查阅。#------------------------------------------------我是可耻的分割线-------------------------------------------　　学习selenium自动化之前，最好先学习HTML、CSS、JavaScript等知识，有助于理解定位及操作元素的原理。关于python和selenium安装请自行搜索别的资料，这里就不多做介绍了，所有例子均使用python3.6+selenium执行的。#------------------------------------------------我是可耻的...

html5实际和离线应用分析【代码】

离线检測想要开发离线Web应用第一步就得知道用户的设备的上网情况。HTML5为此定义了一个navigator.onLine属性，这个属性值为true的时候表示设备可以上网，表示false的时候表示设备不能上网。?这个属性的关键在于浏览器必须知道设备可以訪问网络，从而返回正确的值。在实际情况的应用下，navigator.onLine在不同浏览器之间有着差异。IE6+和Safari 5+可以正确检測到网络已经断开，并将navigator.onLine的值转换成false。Firefox 3+和...

HTML中多媒体的应用【代码】【图】

HTML中多媒体的应用_falsh动画 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<title>HTML中多媒体的应用_falsh动画</title> 6<script src="Scripts/swfobject_modified.js" type="text/javascript"></script> 7<...

HTML 5 学习之应用程序缓存【图】

什么是应用程序缓存（Application Cache）？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。 Cache Manifest 基础如需启用应用程序缓存...

首页 / HTML / HTML框架标签的实例应用

HTML框架标签的实例应用

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML框架标签的实例应用】教程文章相关的互联网学习教程文章

html5离线应用和缓存【代码】【图】

HTML高级标签（3）————表单的应用【图】

10款强大的jQuery/HTML5应用新鲜出炉【图】

10几个HTML5经典动画应用回顾让你大饱眼福【图】

HTML5适合移动应用开发的几大特性

html5之Canvas路径绘图、坐标变换应用实例【图】

绘制SVG内容到Canvas的HTML5应用【图】

HTML基础—一般标签、常用标签和表格的应用

四种途径将HTML5 web应用变成android应用

HTML下标签之应用【图】

html5+css3之动画在webapp中的应用

（四十七）自动化测试高级应用之HTML测试报告-更易读的测试报告【代码】【图】

html5实际和离线应用分析【代码】

HTML中多媒体的应用【代码】【图】

HTML 5 学习之应用程序缓存【图】

HTML - 相关标签

框架 - 相关标签

实例 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程