html

最新推荐文章于 2023-04-02 14:32:57 发布
最新推荐文章于 2023-04-02 14:32:57 发布
阅读量363 收藏
点赞数
分类专栏： 脚本 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanhuanq1209/article/details/72832485
版权
1、target属性指定所链接的页面在浏览器窗口中的打开方式，它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下： 
◎_blank，在新浏览器窗口中打开链接文件。 
◎_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。 
◎_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。 
但是我不太理解 

◎_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

补充一点:target=mainName

将mainName换成你的目标文件的标识,将会在目标框架中显示.

2、框架的例子：

首先：frame.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>定义框架的例子</title>
	</head>
	<frameset framespacing="1" border="1" bordercolor=#333399 frameborder="yes">
		<frameset cols="150px,*">
			<frame name="left" target="main" src="c.html" scrolling="auto" frameborder=1>
			<frame name="main" src ="b.html" scrolling="auto" noresize frameborder=1>
		</frameset>
		<noframes>
			<body>
				<p>此网页使用了框架，但您的浏览器不支持框架。</p>
			</body>
		</noframes>
	</frameset>
</html>

解析：target="main"目标文件的标识,将会在目标框架（<frame name="main" >）中显示。即框架left中c.html就在框架left中显示，而c.html中的（

<a href="a.html"target="main">a.html</a>
</br>
<a href="b.html" target="main">b.html </a>）a.html和b.html会在main框架中显示。因为他们都有名叫main的标识。

其次：c.html页面 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title> HTML内容标题</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
	<a href="a.html"target="main">a.html</a>
	</br>
	<a href="b.html" target="main">b.html </a>
	</body>
</html>

再者：a.html页面 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title> HTML内容标题</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
	<h1>a.html</h1>
	</body>
</html>

b.html页面 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title> HTML内容标题</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
	<h1>b.html</h1>
	</body>
</html>
运行结果展示：






3、框架的演示（结合js）：

首先Frame1.html的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset cols="159px,*"> 
 <frame name="a1" src="link.html" noresize="yes"  border="1px"  scrolling="auto" bordercolor="blue" > 
 <frame name="a2" src="firstPage.html">  
</frameset>
</html>
其次、link.html的代码如下： 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
 font-family: arial, 宋体, serif;
 font-size:12px;
}
#nav {
 width:180px;
    line-height: 24px; 
 list-style-type: none;
 text-align:left;
    /*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {
 width: 160px; 
 display: block;
 padding-left:20px;
 /*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
 background:#CCC; /*一级目录的背景色*/
 border-bottom:#FFF 1px solid; /*下面的一条白边*/
 float:left;
 /*float：left,本不应该设置，但由于在Firefox不能正常显示
 继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
 background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link  {
 color:#666; text-decoration:none;
}
#nav a:visited  {
 color:#666;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二级目录===================*/
#nav li ul {
 list-style:none;
 text-align:left;
}
#nav li ul li{ 
 background: #EBEBEB; /*二级目录的背景色*/
}
#nav li ul a{
         padding-left:10px;
         width:160px;
 /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link  {
 color:#666; text-decoration:none;
}
#nav li ul a:visited  {
 color:#666;text-decoration:none;
}
#nav li ul a:hover {
 color:#F3F3F3;
 text-decoration:none;
 font-weight:normal;
 background:#CC0000;
 /* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left; 
}
#nav ul.collapsed {
 display: none;
}
-->
#PARENT{
 width:180px;
}
*#PARENT{
 width:100%;
}
</style>
<div id="PARENT">
 <ul id="nav">
  <li><a href="#Menu=ChildMenu1"  οnclick="DoMenu('ChildMenu1')">我的网站</a>
   <ul id="ChildMenu1" class="collapsed">
    <li><a href="firstPage.html" target="a2">第一个页面</a></li>
    <li><a href="secondPage.html" target="a2">第二个页面</a></li>
  </ul>
  </li>
  <li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">我的帐务</a>
    <ul id="ChildMenu2" class="collapsed">
     <a href="#">支付</a></li>
     <li><a href="#">管理</a></li>
     <li><a href="#">网上支付</a></li>
     <li><a href="#">登记汇款</a></li>
     <li><a href="#">在线招领</a></li>
     <li><a href="#">历史帐务</a></li>
    </ul>
  </li>
  <li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">网站管理</a>
    <ul id="ChildMenu3" class="collapsed">
     <li><a href="#">登录</a></li>
     <a href="#">角色管理</a></li>
     <li><a href="#">用户管理</a></li>
    </ul>
  </li>
 </ul>
</div>
<script type=text/javascript>
<!--
var LastLeftID = "";
function menuFix() {
 var obj = document.getElementById("nav").getElementsByTagName("li");
 
 for (var i=0; i<obj.length; i++) {
  obj[i].οnmοuseοver=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].οnmοuseοut=function() {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
function DoMenu(emid)
{
 var obj = document.getElementById(emid); 
 obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
 if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
 {
  document.getElementById(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}
function GetMenuID()
{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 
 if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 else
 {
  _paramStr = "";
 }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");
  if (_paramArr.length>0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
 }
 
 if(MenuID!="")
 {
  DoMenu(MenuID)
 }
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
-->
</script>

再者、firstPage.html的代码如下： 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
<title>第一个页面</title> 
<style>
</style>
</head>
<body>
<h1>第一个页面</h1>
</body>
</html>

结果为：




该示例有参考相关链接：

http://www.jb51.net/web/17402.html

4、html基础标签的演示

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title> HTML内容标题</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body bgcolor="#00FFFF" >
		<font face="黑体" size="4"></font>
		<!--HTML文件内容-->
		<!--img border ="0" dynsrc="hh.swf" start="fileopen" width="321" height="321"-->
		<a name="top" id="top"></a>
		<a href="https://www.baidu.com" >在相同打开百度网站</a>
		<a href="https://www.baidu.com" target="_bank">			在新窗口打开百度网站</a>
		<a href="https://www.baidu.com" target="_parent">			在父框架打开百度网站</a>
		<a href="https://www.baidu.com" target="_self">					在相同打开百度网站</a>
		<a href="mailto:xujingxuxue123@sina.com">我的邮箱</a>
		<p align="center"><b>加粗</b> <i>倾斜</i> <u>下划线</u></p>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h3>这是标题3</h3>
		<h6>这是标题6</h6>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h3>这是标题3</h3>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h3>这是标题3</h3>
		<h6>这是标题6</h6>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h6>这是标题6</h6>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h3>这是标题3</h3>
		<h6>这是标题6</h6>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h3>这是标题3</h3>
		<h6>这是标题6</h6>
		<a  href="#top">返回到name=top顶部</a>
		<table width ="200" border="1">
			<tr>
			<td > </td>
			<td > </td>
			<td > </td>
			</tr>
			<tr>
			<td > </td>
			<td > </td>
			<td > </td>
			</tr>
			<tr>
			<td > </td>
			<td > </td>
			<td > </td>
			</tr>
		</table>
		<table border="1" width="100%" id="table1">
			<tr>
				<td colspan="2" bgcolor="#C0C0C0">
				<p align="center">表格</td>
			</tr>
			<tr >
				<td bgcolor="#C0C0C0"><p align="center">域名</td>
				<td bgcolor="C0C0C0"><p align ="center">说明</td>
			</tr>
		</table>
	</body>
</html>
效果展示：

解决的问题：为什么自己写的网页一运行到Chrome上中文就显示的是乱码呐？

解决：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>......</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

</body>

</html>




0914_h
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML黑客帝国字母雨
兔子王
05-12 3万+
《黑客帝国》同款炫酷字母雨，无需安装软件，下载即可使用！
HTML想见你
最新发布
兔子王
05-23 8万+
这一次，就让小编用html语言绘制一场雪中的相遇，送给屏幕前的黄雨萱和李子维们。
this.className的使用
after_you的博客
12-22 5632
onmouseover与onmouseout事件处理器，分别对应为鼠标移上去和鼠标移开时触发。 onmouseover="this.className='menu_title2';"是鼠标移到该单元格上去时应用的css样式为“.menu_title2”的样式 onmouseout="this.className='menu_title';"是鼠标离开单元格后应用的css样式为“.menu_
html中classname的作用,科技常识：HTML中name、id、class的区别介绍
weixin_29094979的博客
06-19 1701
今天小编跟大家讲解下有关HTML中name、id、class的区别介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML中name、id、class的区别介绍 的相关资料，希望小伙伴们看了有所帮助。在一个页面中 有许多的控件(元素或标签)。为了更方便的操作这些标签 就需要给这些标签标识一个身份牌。在html中有name、id、class等属性区分一个元素 下面我们就来看一下这几种...
CSS + Div + JS　二级菜单
weixin_34197488的博客
04-24 87
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8&q
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML基本标签
m0_57898822的博客
04-02 1万+
HTML标签
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
web前端 html+css+javascript网页设计实例 企业网站制作
weixin_44790790的博客
08-17 8万+
(案例源码链接在文章末尾，仅供学习参考) 一、在浏览器中的运行结果： 二、部分代码 1.HTML： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="stylesheet" href="style.css"/> <script src="myjs.j
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
一个BBS论坛的html模板
06-14
**BBS论坛HTML模板详解** BBS，全称Bulletin Board System，即电子公告板系统，是一种网络交流平台，用户可以通过它进行信息发布、讨论和互动。一个BBS论坛的HTML模板是构建这种在线社区的基础框架，它包含了实现...
91个HTML小游戏源码集合
12-14
HTML小游戏是一种基于网页技术开发的轻量级游戏，它们通常使用HTML、CSS和JavaScript这三种核心技术构建。这个压缩包集合了91个HTML小游戏源码，对于初学者来说，这是一个非常宝贵的资源，可以帮助他们理解游戏开发...
HTML标签
qq_31465789的博客
05-21 8557
目录 语法规范 基本结构标签 常用标签 标题标签 - 段落标签 换行标签 语法规范 HTML标签是由尖括号包围的关键词，如<html> HTML标签通常是成对出现的，如<html>和</html>，称为双标签（开始标签和结束标签） 有些特殊标签必须是单个标签，如<br />，称为单标签 双标签关系分为两种：包含关系和并列关系 <html> <head></head>...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
HTML作业-仿网易云音乐项目
04-29
HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。在这个“HTML作业-仿网易云音乐项目”中，我们可以深入探讨HTML在构建交互式音乐应用中的运用。 首先，HTML是网页的基础，用于定义页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值