总结html中的一些标签的区别，希望有不全的大家指出

来源：互联网发布：使用线程池的java实例编辑：程序博客网时间：2024/05/17 23:55

button和submit有什么区别

type=button 就单纯是按钮功能

type=submit 是发送表单

但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：

使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一.

用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认enter键对页面第一个submit进行操作。

<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">

执行完onClick，转到actionsubmit:提交按钮，点击之后直接将数据提交的服务器端，不会对鼠标的mousepressed等操作进行处理，也不触发脚本。。。

button:简单的按钮，有按钮的一些事务处理，有脚本就通过脚本将参数传过去

可以自动提交不需要onClick。所以说onclick这里可以不要。<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">

执行完onClick，跳转文件在 js文件里控制。提交需要onClick。

比如：1，onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。

2，<form name="form1" method="post" action="http://www.sina.com.cn">

<input type="button" name="Button" value="Button" onClick="submit()">

</form>

3，<input type="button" name="Button" value="Button" onClick="javascript:windows.location.href="你的url"">

ubmit与button的区别

submit:提交按钮，点击之后直接将数据提交的服务器端，不会对鼠标的mousepressed等操作进行处理，也不触发脚本。。。

button:简单的按钮，有按钮的一些事务处理，有脚本就通过脚本将参数传过去

Submit是专门用于提交表单的Button，与Button的区别主要有两点：
(1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此。这一点是地球人都知道的。

(2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。这一点只有火星人知道。

type=button 就单纯是按钮功能
type=submit 是发送表单

但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：
使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一.

用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认enter键对页面第一个submit进行操作。

<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">
执行完onClick，转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">
执行完onClick，跳转文件在 js文件里控制。提交需要onClick。

例如：

type="buttom"
<form action="<%=request.ServerVariables("Script_Name")%>" method="post" name="frmAddModi" id="frmAddModi">
<input style='width:85;height:21;'id="btnconfirm" type="button" value="确定" name="btnconfirm" onClick="check(frmAddModi);"/>

type="submit"
<form id="frm1" action="<%=request.ServerVariables("Script_Name")%>" method="post" onSubmit="return check_submit(this)">
<input style='width:85;height:21;'id="btnconfirm" type="submit" value="确定" name="btnconfirm">

两者主要区别在于：submit可以提交表单（form），而button如果不指定onclick等事件处理函数，它是不做任何事情

pan标签与div的区别及结合

2007-04-13 14:50:56| 分类： HTML|字号订阅

解释1：
<span>在CSS定义中属于一个行内元素，而<div>是块级元素。
对于学过CSS的人来说一听就能明白。可对于新手来说不易理解，我主要对新手说通熟点吧!用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器了,<span>就是小容器,这样一说你也许会在脑海中有一个初步的印象了吧,如果我们想在大容器中装一些清水.但我也想在里装一些墨水怎么办?很简单,我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗.
我在举个简单的一个实际例子吧比如<div>abcdefg</div>我想用CSS定义c的样式因此我们就可以用到<span>了.<div>ab<span>c</span>defg</div>(此处省略样式代码)

解释2：
<span>本身没有任何属性，但正因为它没有任何属性，所以它可以做为添加属性的容器。

解释3：
HTML只是赋予内容的手段，大部分HTML标签都有其意义（标签p创建段落，h1标签创建标题等等）的，然而span和div标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。

它们被用来组合一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来，见CSS中级指南的类和id选择符。

span和div的不同之处在于span是内联的，用在一小块的内联HTML中，而div（想想division是什么意思）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码。

<div >
<p>This is <span >crazy</span></p>
</div>

在实践中，div，特别是span不应该滥用，尽管有其他相左的意见。比如，你要强调单词“crazy”和加粗类“paper”，可能会用这样的代码：

<div >
<p>This is <strong >crazy</strong></p>
</div>

这是做法比再加一个span比较好。

对于类class和标识id没有线索？别担心，在CSS中级指南中会接触到它们。你所需要记住的是，span和div 是“无意义”的标签。

看了上面的解释，自己琢磨了一下，大体上明白了，在以后的实践中在深入理解吧。

嗯，附上第一组css样式导航条代码，如下：

<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs--------------------------- */

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background- -42px;
}
#tabs a:hover span {
background- -42px;
}

</style>
</head>

<body>
<h2>Tab Menu</h2>
<div >
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
<br /><br />
</body>

</html>

HTML的SPAN和DIV的区别

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

<span>SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，<span>标识符允许你将一个段落分成不同的部分。　　还有一个标识符具有类似的功能，<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同，<div>工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。　

SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。　　还有一个标识符具有类似的功能， DIV也被用来在HTML文件中建立逻辑部分。但与 SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

<span>SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，<span>标识符允许你将一个段落分成不同的部分。　　还有一个标识符具有类似的功能，<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同，<div>工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN

在 HTML 视图中工作时，可以在 <DIV> 内编辑文本，将某些字包含在 <SPAN> 元素内，以强调那些字。与 <DIV> 不同，<SPAN> 和它周围的文本一起移动。
div与span的区别

我们在用CSS制作页面时，有时会感觉到对于div与span标签在某些情况下是没有区别的。div 和 span 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。div与span两者最显著的区别在于div是块元素可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而span是行内（即内嵌）元素，span 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。如果不对div元素定义任何CSS属性，其显示效果等于在前后各加一个<br>换行。

　　所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。下面给出一行代码，方便大家能更形象的理解div与span的区别。代码如下：
　　测试<span>紧跟前面的"测试"显示</span><div>从这里开始会另起一行显示</div>

　　块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成内嵌元素，同样地，给内嵌元素定义了display:block就成块元素了。如以下代码：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>

　　行内样式定义<span>元素的基本语法：<span 属性=“属性值></span>
　　<span>元素的首尾标记必须同时成对出现，且<span>元素允许多重嵌套，也就是说，一个<span>元素中可以嵌套任意多个<span>元素。

　　块级样式定义<div>元素的基本语法：<div 属性=“属性值”></div>
　　<div>元素的首尾标记必须同时成对出现，且<div>元素允许多重嵌套，也就是说，一个<div>元素中可以嵌套任意多个<div>元素。

div与span相区别的实例

　　我们建立三个div，并在每个div里面插入一张图片；建立三个span，也在每个span里面插入一张图片。代码如下：
<p>div标记不同行：</p>
<div><img src="http://www.ittribalwo.com/images/logo.gif"></div>
<div><img src="http://www.ittribalwo.com/images/logo.gif"></div>
<div><img src="http://www.ittribalwo.com/images/logo.gif"></div>
<p>span标记同一行：</p>
<span><img src="http://www.ittribalwo.com/images/logo.gif"></span>
<span><img src="http://www.ittribalwo.com/images/logo.gif"></span>
<span><img src="http://www.ittribalwo.com/images/logo.gif"></span>

　　从上面的例子我们可以看出，结果就是div排列的图片，是每张占一行。而span排列的图片，三张都在同一行。div默认的是一个行外标记，一个块对象，默认情况下，一个div是占一行,而span是一个行内标记，一个内联的对象，默认情况下，span嵌套在任何页面中，在不超过父模块边界的情况下，是在同一行显示的。

在 <div>之间区别和 <span>HTML 标记

<div>标记是用于创建一个容器来容纳和其他元素定位一个块元素。它常用于绝对定位的内容。

<span>标记是一个内联元素，用于通过使用样式表来呈现文本。它通常用于更改元素或句子或 <p>，如块中的文本的样式 <div>，或 <table>。

因为 <span>标记不能创建一个分行符，以下 HTML 不会不按预期工作： <HTML>

<HEAD>

<SCRIPT>

function DoStuff()

{

txt.innerHTML = "<UL><LI>It worked</UL>";

}

</SCRIPT>

</HEAD>

<BODY>

<P>

<SPAN ID=txt>HTML<b> to be</b> replaced</SPAN>

</P>