您的位置：首页 > 编程技术 > html  >  XHTML入门学习教程:框架标签使用

XHTML入门学习教程:框架标签使用

 更新时间：2016年9月20日 19:06  点击：1610

框架结构可以让几个网页同时显示在浏览器的一个页面内。我们不推荐您使用它来设计网站。

框架结构标签<frameset></frameset>
框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解，<frameset>其实就是一个大<table>，只不过整个页面是<table>的主体，而每一个单元格的内容都是一个独立的网页。

给框架结构分栏(”cols“和”rows“属性)
既然我们说框架结构可以被理解为一网页为单元格的表格，那么就一定要分栏了。其中cols属性将页面分为几列，而rows属性则将页面分为几行。下面来看一个例子。

 代码如下 复制代码
<html>
<frameset rows="25%,75%">
<frame src="1.html"/>
<frame src="3.html"/>
</frameset>
</html>

其中"rows="25%,75%"表示该页面共分为两行，因为它有两个属性值，而他们的大小则分别为页面高度的25%和75%。点击这里查看以上代码的显示效果。框架标签<frame>


上面的实例中已经用到了<frame>标签，它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的，如果你希望它们大小固定可以使用noresize="noresize"属性。

注意：<frame>标签是空标签，需要加上一个"/"以符合XHTML的要求。

关于<noframe>标签
该标签只有当浏览器不支持框架结构时才会起到作用，由于现在几乎所有网民的浏览器都支持框架结构，所以我们在这里就不介绍这个标签了。如果你想了解相关内容，可以查阅网络上的HTML手册。

框架结构和DTD
框架页面的DTD与一般网页不同。声明方法如下：

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

XHTML 1.0是基于HTML4.0的，因此它能够被已有的浏览器解析。就意味着可以立即开始使用XHTML。另外不管是转换一个已经存在的站点还是建立新的代码，都可以使用工具来帮助,一致事半功倍。

W3C将XHTML 1.0分为三种规范：XHTML-1.0-Strict（严格）、XHTML-1.0-Transitional（过渡）和XHTML-1.0-Frameset（框架）。

一般建议用XHTML-1.0-Transitional（过渡）进行现有站点的转换,因为在我们写html的时候可能过多的在HTML中包含很多控制外观的标记,否则要改成css控制的话工作量相对增大.还有一个就是浏览器问题,就是有些用户可能用的是不支持新版css2(建议用XHTML & CSS2)的旧式浏览器,所以用XHTML-1.0-Transitional（过渡）来分担部分控制外观是理想的.

使页符合XHTML
当您创建新页时，您可以使该页符合 XHTML。您还可以使现有的 HTML 文档符合 XHTML。

若要新建符合 XHTML 的文档，请执行以下操作：
选择“文件” >“新建”。
即出现“新建文档”对话框。

选择一种文档类型。
选择“使文档符合 XHTML”选项。
注意：不是所有的文档类型都可以使之符合 XHTML。

单击“确定”。
若要以默认方式创建符合 XHTML 的文档，请执行以下操作：
选择“编辑”>“首选参数”或 Dreamweaver >“首选参数”(Mac OS X)，然后选择“新建文档”类别。
在“新建文档”类别中，选择一种文档类型并选择“使文档符合 XHTML”选项。
单击“确定”。
若要使现有 HTML 文档符合 XHTML，请执行以下操作：
打开文档，然后执行下列操作之一：
对于不含框架的文档，选择“文件”>“转换”>“XHTML”。
对于包含框架的文档，选择一个框架并选择“文件”>“转换”>“XHTML”。若要转换整个文档，请对每个框架以及框架页文档重复此步骤。
注意：您不能转换模板的实例，因为模板的实例必须与它所基于的模板使用相同的语言。例如，基于 XHTML 模板的文档将始终是 XHTML，基于不符合 XHTML 的 HTML 模板的文档将始终是 HTML，并且不能把它转换为 XHTML 或其它语言。

本教程介绍FORM表单标记的各种属性在网页设计中的应用.

<FORM>标记的NAME属性
基本语法

 代码如下 复制代码
01 <Form name="Form＿name">
02 ……
03 </Form>

语法解释
通过为表单命名可以控制表单与后台程序之间的关系。

文件范例：11-1.htm
在页面中插入表单。

 代码如下 复制代码

01 <!-- ------------------------------ -->
02 <!-- 文件范例：11-1.htm -->
03 <!-- 文件说明：插入表单 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>插入表单</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>

11 <Form name=invest>

12 </Form>
13 </body>
14 </html>

文件说明
第11行是表单标记，表单的名称为"invest"。

HTML网页列表标记学习教程.
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。

所谓有序，指的是按照数字或字母等顺序排列列表项目。
所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。
关于列表的主要标记，如下表所示

 

标记 描述
<ul> 无序列表
<ol> 有序列表
<dir> 目录列表
<dl> 定义列表
<menu> 菜单列表
<dt>、<dd> 定义列表的标记
<li> 列表项目的标记


有序列表标记<OL>
有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。

基本语法
<ol>
   <li>项目一
   <li>项目二
   <li>项目三
      ……
</ol>
语法解释
在有序列表中，使用<ol>作为有序的声明，使用<li>作为每一个项目的起始。


文件范例：7-1.htm
通过<ol>和<li>标记建立有序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件说明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html>

 

 

HTML网页超链接标记学习教程

链接标记的属性

 

链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称作url(Uniform Resource Locator：通用资源标示符)。在地址栏输入然后回车，会打开网页教学网网站的主页面。可以看到，页面中有多个栏目，多条新闻等，最上方不同的栏目就是文字链接。

链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。本站介绍的链接应用都是基于<a>标记基础上的。

链接标记的属性见下表


属性 描述
href 指定链接地址
name 给链接命名
title 给链接提示文字
target 指定链接的目标窗口
accesskey 链接热键

 

关于路径

 

每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下，但是当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种：


绝对路径
如http://111cn.net

相对路径
如news/default.htm

 

根路径
如/website/news/default.htm


在了解这三种地址形式前先要理解另外两个概念：内部链接和外部链接

 

内部和外部都是相对于站点文件夹而言，如果链接指向的是站点文件夹之内的文件，就是内部链接。如果链接指向站点文件夹之外的，就被称做外部链接。在添加外部链接的时候，将用到下面所讲的绝对地址；而添加内部链接的时候，将用到下面所讲的根目录相对地址和文件相对地址。

下面分别介绍这3种链接：


绝对路径
绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。一般常见的有：

http://www.sohu.com


ftp://202.136.254.1

 

当链接到其它网站中的文件时，必须使用绝对链接。

相对路径
相对链接最适合网站的内部链接。只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。

相对链接的使用方法为：

如果链接到同一目录下，则只需输入要链接文档的名称。
要链接到下一级目录中的文件，只需先输入目录名，然后加" / "再输入文件名。
如链接到上一级目录中的文件，则先输入"…/ "，再输入目录名、文件名。
根路径
根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用：

当站点的规模非常大，防置于几个服务器上时
当一个服务器上同时放置几个站点时
根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。根路径以" / "开始，然后是根目录下的目录名。

 

[!--infotagslink--]

相关文章

  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25

  • ps怎么使用HSL面板

    ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。 &#8195;...2017-07-06

  • 基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

    这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14

  • Plesk控制面板新手使用手册总结

    许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10

  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31

  • 使用percona-toolkit操作MySQL的实用命令小结

    1.pt-archiver 功能介绍： 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍： pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据，不会对线上数据的OLTP查询造成太大影响，你可以将...2015-11-24

  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会...2014-06-07

  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31

  • Jquery 获取指定标签的对象及属性的设置与移除

    1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31

  • 安装和使用percona-toolkit来辅助操作MySQL的基本教程

    一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24

  • C#注释的一些使用方法浅谈

    C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25

  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24

  • php语言中使用json的技巧及json的实现代码详解

    目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30

  • PHP实现无限级分类（不使用递归）

    无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23

  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25

  • 双冒号 ::在PHP中的使用情况

    前几天在百度知道里面看到有人问PHP中双冒号::的用法，当时给他的回答比较简洁因为手机打字不大方便！今天突然想起来，所以在这里总结一下我遇到的双冒号::在PHP中使用的情况！双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08

  • .net数据库操作框架SqlSugar的简单入门

    这篇文章主要介绍了.net数据库操作框架SqlSugar的简单入门，帮助大家更好的理解和学习使用.net技术，感兴趣的朋友可以了解下...2021-09-22

  • CI框架开发新浪微博登录接口源码完整版

    首先来看下流程：流程原理： 1.通过code获得access_token通过授权，并获取用户的信息（包括用户u_id）(这个u_id在后面的第三方登录表里面叫sina_id，那个表是需要自己建的) 2.查询第三方登录表，如果不存在用户sina_id,分2...2014-05-31

  • 浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧...2021-10-21