SPAN元素和DIV元素有什么区别
cssdiv标记
一、<div>标记<div>简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片、乃至章节、摘要和备注等各种XHTML元素。
因些，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。
声明时只需要对<div>进行相应的控制，其中的各种标记元素都会因些而改变<div>标记与<span>标记<div>与<span>的区别在于，<div>是一个块级元素，它包围的元素会自动换行。
而<span>仅仅是一个行内元素，在它的前后不会换行。
<span>有没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。
此外，<span>标记可以包含于<div>标记之中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记通常情况下，对于页面中大的区块使用<div>标记，而<span>标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片和一个超链接等。
二、元素的定位：floatfloat定位是CSS排版中非常重要的手段，在前面章节中已经有所提及。
属性float的值很简单，可以设置为left、right、或者默认值none。
当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。
清除float的影响clear:left 清除float对左侧的影响clear:right 清除float对右侧的影响clear:both 清除float对两侧的影响在进行整个网页排版时，最下端的“脚注”部分通常就需要设置clear属性，从而消除正文部分各种排版方法对它的影响三、元素的定位：position定位position定位与float一样，也是CSS排版中非常重要的概念。
DIV标签详细介绍
DIV标签详细介绍DIV标签详细介绍div 是 division 的简写，division 意为分割、区域、分组。
⽐⽅说，当你将⼀系列的链接组合在⼀起，就形成了⽂档的⼀个 division。
<div> 可定义⽂档中的分区或节（division/section）。
<div> 标签可以把⽂档分割为独⽴的、不同的部分。
它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。
如果⽤ id 或 class 来标记 <div>，那么该标签的作⽤会变得更加有效。
id与class的区别class⽤于元素组（类似的元素，或者可以理解为某⼀类元素），⽽id⽤于标识单独的唯⼀的元素。
class可以在页⾯⾥⾯重复使⽤，id由于在页⾯⾥⾯只能出现⼀次，所以不能重复使⽤，所以尽量⽤class来写，这样能在页⾯⾥⾯重复引⽤你写的css，减⼩⼯作量和代码量。
这种情况尽量⽤id：页⾯⼤的模块⾥⾯，⽤id来区分不同的模块，⽐如页⾯⾥⾯有这样的模块：最新新闻，推荐新闻等，就可以考虑⽤id来区分。
还有⼀点，由于id是页⾯中唯⼀的，更多的是定义来留给给页⾯⾥⾯的javascript⽤。
补充：class和id在页⾯⾥⾯的使⽤⽅法：－－－－－－－－－－－－－－－－－－－class：footerid：footer定义class的css是⽤点：“.”，如.footer定义id的css是⽤井号“#”，如#footer如下⾯：* {margin: 0px;padding: 0px;}body{width:910px;height:auto;margin-left:auto;/*左右⾃动可以居中*/margin-right:auto;}.header{background-color: #F6F;float: left;height: 80px;width: 910px;}.content{background-color: #FCF;float: left;height: auto;width: 910px;margin-top: 20px;padding-bottom:20px;}.left{background-color: #930;float: left;height: 500px;width: 290px;margin-top: 20px;margin-left: 10px;display:inline;/*先把这个去掉看下，边距的问题，在IE6下双边据。
CSS第十章理解CSS定位与DIV布（2）
例52 <html> <head> <title>DIV与SPAN区别</title> </head> <body> <p style="color:#CC0000;font-size:40px; ">div标记不同行：</p> <div><img src="01.jpg"border="0"></div> <div><img src="01.jpg"border="0"></div> <div><img src="01.jpg"border="0"></div> <p style="color:#CC0000;font-size:40px; ">span标记同行：</p> <span><img src="01.jpg"border="0"></span> <span><img src="01.jpg"border="0"></span> <span><img src="01.jpg"border="0"></span> </body> </html>
<p style="padding-bottom:5px;margin-bottom:10px;fontsize:40px;color:red;">两个元素在同一行：</p>
SPAN元素和DIV元素有什么区别
SPAN元素和DIV元素有什么区别1.外观：-SPAN元素是一个内联元素，不会独占一行，只会根据内容自动换行。
-DIV元素是一个块级元素，会独占一行，可以设置宽度和高度。
2.默认行为：-SPAN元素默认情况下没有任何样式和行为，不改变文档结构。
-DIV元素默认情况下也没有任何样式和行为，但会自动换行。
3.语义化：-SPAN元素没有语义，它只是一个用于包裹文本或其他元素的容器，不提供任何关于内容自身的信息。
-DIV元素也没有特定的语义，但它常用于将一组相关的元素划分为一个独立的区块，可以用来表示页面中的不同部分。
4.概念：-SPAN元素是一个行内元素，可以在文本中的任意位置使用，常用于设置文字的样式（如颜色、字号等）或者选取文本的一部分进行操作。
-DIV元素是一个块级元素，它可以包含其他块级元素或内联元素，并用于将一组相关元素划分为一个独立的区块，方便进行样式控制。
5.用途：-SPAN元素常用于对文本进行样式设置，比如给一个字或者一个词添加特殊样式，或者为一段文字设置超链接。
-DIV元素常用于对页面的结构进行布局和样式控制，比如创建多列布局、设置页面的背景色或边框样式等。
6.嵌套方式：-SPAN元素可以嵌套在其他元素内部，比如可以将SPAN元素包裹在一个段落（P）内。
-DIV元素也可以嵌套在其他元素内部，但它通常作为一个独立的容器元素，嵌套其他元素。
总结：根据上述的比较，可以得出以下结论：-SPAN元素适用于对文本进行样式设置或操作选中的文本片段。
-DIV元素适用于对页面结构进行布局和样式控制。
-SPAN元素是一个内联元素，不会独占一行。
-DIV元素是一个块级元素，会独占一行。
javascript面试题
1、form中的input有哪些类型？各是做什么处理使用的？text radio c heckbox file button image submit reset hiddensubmit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit 改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。
button具有name、v alue属性，能触发onclick事件submit继承了buttonsubmit增加了触发表单onsubmit事件的功能、增加了执行表单的submit()方法的功能INPUT type=submit按回车提交表单button提交的是innerTEXT2、table标签中border,c ellpadding td标签中c olspan,rowspan分别起什么作用？border边界cellpadding边距cellpadding，是补白，是指单元格内文字与边框的距离cellspacing，两个单元格之间的距离colspan跨列数rowspan跨行数3、form中的input可以设置readonly和disable，请问这两项属性有什么区别？readonly不可编辑,但可以选择和复制disable不能编辑复制选择4、JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么？alertconfirmprompt5.题目：当点击按钮时，如何实现两个td的值互换？用jav asc ript实现此功能。
分析：这个题主要是考变量传值。
其次是考如何取元素的值。
第一种代码如下：Code1<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns="/1999/xhtml">3<head>4<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>5<title>无标题文档</title>6<script type="text/javascript">7//<![CDATA[8function submitbtn() {910var tText1=document.getElementById('txt1');11var SubmitBtn1=document.getElementById('submitBtn1');12var tText2=document.getElementById('txt2');13var SubmitBtn2=document.getElementById('submitBtn2');14 SubmitBtn1.onclick=function() {15var temp=tText1.value;16 tText1.value=tText2.value;17 tText2.value=temp;18 };19 SubmitBtn2.onclick=function() {20var temp=tText2.value;21 tText2.value=tText1.value;22 tText1.value=temp;23 };24}25window.onload=function() {26 submitbtn();27}28//]]>29</script>30</head>3132<body>33<input type="text"value="12345666"id="txt1"/>34<input type="submit"id="submitBtn1"/>35<input type="text"value="12345222"id="txt2"/>36<input type="submit"id="submitBtn2"/>37</body>38</html>复制代码第二种代码如下：Code1<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns="/1999/xhtml">3<head>4<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> 5<title>无标题文档</title>6<script type="text/javascript">7//<![CDATA[8function submitbtn() {910var tText1=document.getElementById('txt1');11var SubmitBtn1=document.getElementById('submitBtn1');12var tText2=document.getElementById('txt2');13var SubmitBtn2=document.getElementById('submitBtn2');14 SubmitBtn1.onclick=function() {15var temp=tText1.innerHTML;16 tText1.innerHTML=tText2.innerHTML;17 tText2.innerHTML=temp;18 };19 SubmitBtn2.onclick=function() {20var temp=tText2.innerHTML;21 tText2.innerHTML=tText1.innerHTML;22 tText1.innerHTML=temp;23 };24}25window.onload=function() {26 submitbtn();27}28//]]>29</script>30</head>3132<body>33<table width="200"border="1"cellpadding="0"cellspacing="0">34<tr>35 <td id="txt1">321445</td>36 <td><input type="submit"id="submitBtn1"/></td>37</tr>38<tr>39 <td id="txt2">123133</td>40 <td><input type="submit"id="submitBtn2"/></td>41</tr>42</table>43</body>44</html>45复制代码6. "闭包"问题Code<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>Untitled Page</title><script type="text/javascript">window.onload=function(){var ii,a="";var d=document.getElementsByTagName("DIV");for(ii=0;ii<d.length;ii++){if(d[ii].id=="top"){a=d[ii].getElementsByTagName("li");for(var i=0;i<a.length;i++){//a[i].onmouseover=function(){show(i)}; //此处的i是一个变量,在运行show取i的值,很显示你的i每次都会最终变成a.lengtha[i].onmouseover=new Function("show("+i+")");//这里的i是一个常量,就是此刻i是值}}}}function show(z){alert(z);}</script></head><body><div>div1</div><div id="top"><ul><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li></ul></div></body></html>复制代码使用注释行的时候，总是提示5.在一般编程语言中, 参数都是"传值", 假设一个C函数的原型是int Fun(int value);当你调用这个函数时, Fun函数首先会在自己的函数栈上copy一份参数, 就是这个函数的副本, 当你在Fun 外部修改value值, 并不会影响Fun内部的v alue.而Jav asc ript的内嵌函数很特殊, 它并不会copy一个参数副本, 所有函数公用一套参数, 所以你在函数外部修改了参数值, 函数内部也会受影响.这就是为什么你的show函数, 它的z参数是最后一个值, 因为每一次循环, z都被更改了. 传值和传址的问题一、单选题1、以下哪条语句会产生运行错误：（）A.var obj = ( );B.var obj = [ ];C.var obj = { };D.var obj = / /;2、以下哪个单词不属于javascript保留字：（）A.withB.parentC.classD.void3、请选择结果为真的表达式：（）A.null instanceof ObjectB.null === undefinedC.null == undefinedD.NaN == NaN二、不定项选择题4、请选择对javascript理解有误的：()A.JScript是javascript的简称B.javascript是网景公司开发的一种Java脚本语言，其目的是为了简化Java的开发难度C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同上D.AJAX技术一定要使用javascript技术5、foo对象有att属性，那么获取att属性的值，以下哪些做法是可以的：（）A.foo.attB.foo(“att”)C.foo[“att”]D.foo{“att”}E.foo[“a”+”t”+”t”]6、在不指定特殊属性的情况下，哪几种HTML标签可以手动输入文本：（）1 2 3 4A.<TEXTAREA></TEXTAREA>B.<INPUT type=”text”/>C.<INPUT type=”hidden”/>D.<DIV></DIV>7、以下哪些是javascript的全局函数：（）A.escapeB.parseFloatC.evalD.setTimeoutE.alert8、关于IFrame表述正确的有：()A.通过IFrame，网页可以嵌入其他网页内容，并可以动态更改B.在相同域名下，内嵌的IFrame可以获取外层网页的对象C.在相同域名下，外层网页脚本可以获取IFrame网页内的对象D.可以通过脚本调整IFrame的大小9、关于表格表述正确的有：（）A.表格中可以包含TBODY元素B.表格中可以包含CAPTION元素C.表格中可以包含多个TBODY元素D.表格中可以包含COLGROUP元素E.表格中可以包含COL元素10、关于IE的window对象表述正确的有：（）A.window.opener属性本身就是指向window对象B.window.reload()方法可以用来刷新当前页面C.window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面D.定义了全局变量g；可以用window.g的方式来存取该变量三、问答题：1、谈谈javascript数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制2、简述DIV元素和SPAN元素的区别。
第10章 理解CSS定位与div布局
CSS+DIV
3. 元素的定位
7. z-index空间位置，用于调整定位时重叠块 的上下位置（实例：10-28.html）
CSS+DIV
CSS+DIV
4. 定位实例
1.轻轻松松给图片签名（实例：10-29.html） 2.文字阴影效果（实例：10-30.html）
CSS+DIV
2. 盒子模型
CSS+DIV
2. 盒子模型 2.Border 小知识：border会占据空间，所有在技术精细的 版面时，一定要把 border的影响考虑进去。 border的属性主要有个： （1）color边框的颜色 （2）width边框的粗细 （3）style边框的样式 实例：10-3.html 如果要设置某一个边框则使用border-bottom （left、right、top）来完成 实例：10-4.html
3. 元素的定位
3. Position定位，即相对于其父块的位置和相对于它自身应 该在的位置。 position属性一共有4个值：static（默认值：它表示块保持 在原来应该在的位置上，即该值没有任何移动效果。）、 absolute（觉得定位）、relative（相对定位）和fixed（固 定定位）。 4. position:absolute绝对定位（相对页面来说的）（实例： 10-20.html）说明：块的位置和父块无关，和页面有关。 P247技术背景。 小知识：top、right、bottom、left这4个属性不但可以设置 为绝对的像素，还可以设置百分数。（实例：10-21.html） 当窗口大小，发生改变的时候。。。 小知识：top和bottom属性发生冲突（实例：10-22.html） P249经验之谈
组织元素(span和div)
组织元素（span和div）span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。
在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。
∙用span组织元素∙用div组织元素用span组织元素span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。
但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：<p>早睡早起使人健康、富裕又聪颖。
</p>假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。
然后，我们将这几个span设置为相同的class。
这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
<p>早睡早起使人<span class="benefit">健康</span>、<span class="benefit">富裕</span>和<span class="benefit">聪颖</span>。
</p>相应的CSS代码如下：span.benefit {color:red;}∙显示示例当然，你也可以采用id来为span元素添加样式。
不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。
用div组织元素如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
除去这点区别，div和span在组织元素方面相差无几。
让我们来看一个例子。
我们将历届美国总统按其所属的政营分别组织为两个列表：<div id="democrats"><ul><li>富兰克林·D·罗斯福</li><li>哈利·S·杜鲁门</li><li>约翰·F·肯尼迪</li><li>林登·B·约翰逊</li><li>吉米·卡特</li><li>比尔·克林顿</li></ul></div><div id="republicans"><ul><li>德怀特·D·艾森豪威尔</li><li>理查德·尼克松</li><li>杰拉尔德·福特</li><li>罗纳德·里根</li><li>乔治·布什</li><li>乔治·W·布什</li></ul></div>在这里，我们可以采用跟上例同样的方法来处理样式表：#democrats {background:blue;}#republicans {background:red;}显示示例在上例中，我们仅仅将div和span使用在一些很简单的方面，譬如文本和背景色等。
Web基础考题(html+css)(优选.)
一、不定项选择题（每题3分，共63分）1.参看以下的HTML代码:<html><head><title>表格</title><head><body><table border="1"><tr><td >1</td><td >2</td></tr><tr><td >3</td><td >4</td></tr></table></body></html>对以上代码，以下描述正确的是（C ）A、该网页内容的第一行显示“表格”B、1和2的表格在同一列C、1和2的表格在同一行D、1和3的表格在同一列2.以下的HTML代码片段中：……<table><caption align="top">文具</caption><tr><th>铅笔</th><th>圆珠笔</th><th>水笔</th></tr>……</table>以下哪些是正确的判断（A）A、铅笔一定位于首行中的第一列B、圆珠笔一定位于首列中的第一行C、文具应位于首列首行D、水笔与圆珠笔在不同的行3.根据以下的HTML代码片段：<body ><table border="2"><caption align="top">月度报表</caption><tr><th>月份</th><td bgcolor= red>1月</td><td>2月</td><td bgcolor=green>3月</td></tr></table></body>正确的显示结果是（D ）A、页面中会有一个默认的表格标题，显示出“月度报表”B、第一个单元格的背景色是红色C、第二个单元格的的背景色为绿色D、“月份”显示为粗体4.根据以下的HTML代码片段：<h1 style="font-style:italic;color:limegreen; font-size:30pt";>hello!Nice to meet you!</h1><h1>this is the default display of an h1 element</h1>以下描述不正确的是（D ）A、第一个h1设置了特定的属性B、第二个h1用了系统默认的属性C、“hello!Nice to meet you!”的字体颜色是浅绿色D、“this is the default display of an h1 element”的字体大小为30pt5.根据以下的HTML代码：h1{color:limegreen;font-family:arial}可以知道（C ）A、此段代码是一个类选择器B、选择器的名称是colorC、{ }部分是对h1这个选择器的样式说明D、limegreen 和font-family都是值6.已知services.html与text.html在同一服务器上，但不在同一文件夹中。
CSSdiv和css布局
CSSdiv和css布局⼀.div和span DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应⽤CSS样式 DIV和span的区别在于，span是内联元素，div是块级元素。
div占⽤整⾏，span只会占⽤内容⼤⼩的部分。
div可以改变size，span不可以改变size⼆.盒模型 margin 盒⼦外边距，增加的话，内盒⼤⼩不会变 padding 盒⼦内边距，增加的话，border向外扩⼤，内盒⼤⼩本⾝不会变 border 盒⼦边框宽度 width 盒⼦宽度 height 盒⼦⾼度三.布局相关的属性 1.position定位⽅式 relative 正常定位 absolute 根据⽗元素进⾏定位 fixed 根据浏览器窗⼝进⾏定位 static 没有定位 inherit 继承 2.定位 left，right，top，bottom离页⾯顶点的距离 3.覆盖顺序优先级 z-index 其值是从0，1，2... 数值越⼤，优先级越⾼，那么显⽰就在最上⾯ 4.display显⽰属性 display:none 层不显⽰ display:block 块状显⽰，在元素后⾯换⾏，显⽰下⼀个块元素。
将内联转换成块状 display:inline 内联显⽰，多个块可以显⽰在⼀⾏内。
将块状转换成内联 5.float浮动属性 left 左浮动 right 右浮动 6.clear清除浮动 clear:both 7.overflow溢出处理 hidden 隐藏超出层⼤⼩的内容 scroll ⽆论内容是否超出层⼤⼩都添加滚动条 auto 超出时⾃动添加滚动条四.兼容问题及⾼效 1.兼容性测试⼯具 IE Tester Multibrowser 2.常⽤浏览器 Google chrome Firefox opera 3.⾼效的开发⼯具 轻量级 notepad++ sublime text 记事本 重量级 webstorm Dreamweaver 4.⽹页设计⼯具 fireworks photoshop 5.判断IE的⽅法 条件判断格式 <!--[if 条件版本]> 那么显⽰ <![endif]--> 不等于 [if !IE 8] 除了IE8都可以显⽰ ⼩于 [if lt IE 5.5] 如果IE浏览器版本⼩于5.5的显⽰ ⼤于 [if gt IE 5] 如果IE浏览器版本⼤于5的显⽰ ⼩于或者等于 [if lte IE 6] 如果IE浏览器版本⼩于等于6的显⽰ ⼤于或者等于 [if gte IE 6] 如果IE浏览器版本⼤于等于6的显⽰ ⼩于和⼤于之间 [if (gt IE 5)&(lt IE 7)] 或 [if (IE 6)|(IE 7)] 仅 <!--[if IE 8]><!doctype html><html><head><title>Div+Css布局(div+span以及盒模型)</title><meta charset="utf-8"><style type="text/css">body{margin:0px;padding:0px;}/*div{background-color:green;color:#fff;}span{background-color:green;color:#fff;}div{width:500px;height:500px;padding:0px;margin:0px;border:solid 10px;}*/.div{width:600px;height:600px;margin:0 auto;background-color:green;}.diva{float:left;width:240px;height:240px;background-color:red;}.divb{float:left;width:240px;height:240px;background-color:yellow;}.div div{margin:10px;padding:10px;border:solid 10px;}</style></head><body><!--div>麦⼦学院DIV</div><div>麦⼦学院DIV</div><span>麦⼦学院SPAN</span><span>麦⼦学院SPAN</span--><div class="div"><div class="diva"></div><div class="divb"></div></div></body></html><!doctype html><html><head><title>Div+Css布局(布局相关的属性)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}/*.div{width:300px;height:300px;background-color:green;position:relative;left:10px;top:10px;z-index:0;}span{position:absolute;background-color:#ff6600;color:#fff;top:-10px;right:0;}.fixed{position:fixed;background-color:#ff6600;color:#fff;top:100px;z-index:1;}*/div{background:green;display:inline;width:200px;}span{background-color:red;display:block;width:200px;}</style></head><body><!--div class="fixed"><p>联系电话：1111111</p><p>联系QQ：782590844</p><p>联系地址：四川省成都市</p></div><div class="div"><span>浏览次数：222</span></div></div--><div>麦⼦学院</div><div>麦⼦学院</div><div>麦⼦学院</div><span>麦⼦学院</span><span>麦⼦学院</span><span>麦⼦学院</span><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html><!doctype html><html><head><title>Div+Css布局(浮动以及溢出处理)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}.div{width:960px;height:600px;margin:0 auto;background-color:#f1f1f1;}.left{float:left;width:260px;height:460px;background:#ccc;}.right{float:right;width:690px;height:460px;background:#ddd;}.clear{clear:both;}.bottom{margin-top:10px;height:200px;width:960px;background:red;}.jianjie{width:260px;height:120px;background:red;overflow:auto;}</style></head><body><div class="div"><div class="left"><div class="jianjie">麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br /></div></div><div class="right"></div><div class="clear"></div><div class="bottom"></div></div></body></html>。
网页制作选择填空复习题-有答案
一、填空题（共6小题）1、目前常用的WEB 标准静态页面语言是xhtml 。
2、div 与span 的区别是div 是块级元素，span 是内联元素。
3、改变元素的外边距用margin_，改变元素的内填充用__padding_。
4、Color:#666666;可缩写为_color:#666_。
5、合理的页面布局中常听过结构与表现分离，那么结构是xhtml ，表现是_css_。
6、在Table 中，TR 是_行_，TD 是__ 列_。
7、 如果给一行两列的表格（table ）定义高度样式，在__table_标签中定义最合理，最能减少代码的臃肿。
8、 对ul li 的样式设成无，应该是用什么属性_list -style -type______属性值__ ______none_____。
9、在新窗口打开链接的方法是___ _tar____。
10、CSS 是利用__ div ___XHTML 标记构建网页布局？11、在CSS 语言中"左边框"的语法是_border -left: <值>_。
12、用来更改背景颜色的CSS 属性是background -color:。
13、更改样式表的字体颜色的css 属性是_ color: _？14、更改文本字体的css 属性是font -family:。
15、CSS二、选择题（共14小题）1、下列属于静态网页的是（ A ）A.index.htmB.index.jspC.index.aspD.index.php2、在 HTML 文档中，引用外部样式表的正确位置是？（ D ）A.文档的末尾B.文档的顶部C.<body> 部分D.<head> 部分3、在下面的 XHTML 中，哪个可以正确地标记折行？（ A ）A.<br />B.<break/>C.<br>D.<p>4、如何在新窗口中打开链接？(D)A.<a href=”#”new>B.<a href=”#”target=”_blank”>C.<a href=”#”target=”_self”></a>D.<a href=”#”target=”_blank”></a>5、选出你认为最合理的定义标题的方法(C)A.<span class="heading">文章标题</span>B.<p><b>文章标题</b></p>C.<h1>文章标题</h1>D.<strong>文章标题</strong>6、a:hover表示超链接文字在（ C ）时的状态。
DIV和SPAN的区别
DIV与SPAN的区别<div>和<span>用来为内容指定样式或绑定脚本。
虽然大多数HTML元素可以通过style属性来设置样式信息，但是许多HTML元素有自己默认的样式，该样式可能和style定义的样式混合甚至冲突，是我们不希望看到的。
如：<strong style = “color: red”>I am strong!</strong>。
和其他html元素不同，<div>和<span>没有默认的显示样式。
所以可以通过它们来指定样式。
（1）<div>（division）是块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。
由于是块级元素，在段落开始、结束处会插入一个换行。
<div align=””>…</div>用来设置内容块的位置。
可以使用<div>来为文档的任意部分绑定脚本或样式。
（2）和<div>不同，<span>是一个行内元素，不会引起换行。
它是一个逻辑化的内嵌分组元素。
最常见的使用方式是用它来为一段文本中的几个单词甚至某几个字符指定样式。
（3）可以将需要居中的内容放到<center></center>中间。
<center>与<div align = ”center”>作用相同。
举例：<span>元素的使用。
<p>In this sentence <span “important”>some of the text isimportant!</span></p>定义DIV分析一个典型的定义div例子：#sample{ MARGIN: 10px 10px 10px 10px;PADDING-LEFT: 20px;PADDING-TOP: 20px;PADDING-RIGHT: 10px;PADDING-BOTTOM: 10px;BORDER-RIGHT: #CCC 2px solid;BORDER-BOTTOM: #CCC 2px solid;BORDER-LEFT: #CCC 2px solid;BORDER-TOP: #CCC 2px solid;BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;COLOR: #666;TEXT-ALIGN: center;LINE-HEIGHT: 150%; WIDTH:60%; }说明如下：∙层的名称为sample，在页面中用<div id="sample">就可以调用这个样式。
XHTML+CSS试题有答案
学院班级姓名一、单项选择题(每套20题，每题2分，共40分)1、关于web标准以下说法错误的是（b ）A、Web标准是一个复杂的概念集合，它由一系列标准组成B、这些标准全部都由W3C起草与发布C、Web标准可以分为3个方面D、Web标准里的表现标准语言主要包括CSS2、以下是<!DOCTYPE>元素作用的是（a ）A、该元素用来定义文档类型B、该元素用来声明命名空间C、该元素用来向搜索引擎声明网站关键字D、该元素用来向搜索引擎声明网站作者3、以下可将一对象的背景色透明度改为80%的声明是：（d ）A、filter:alpha:(opacity=80);B、filter:alpha: opacity=80;C、filter:alpha:(opacity:80);D、filter:alpha(opacity=80);4、以下选项中，可以解决超链接访问过后hover样式不出现问题的是：（b ）A、重新书写关于连接状态的CSS样式B、改变关于链接状态的CSS属性排列顺序: L-V-H-AC、将关于链接状态的CSS属性全部写再a中D、以上说法都不对5、阅读以下代码：<style type="text/css">body {margin:0}div {float:left;margin-left:10px;width:200px;height:200px;border:1px solid red }</style>解析正确的是：（C ）A、浮动后外边距10px,但FF解释为20pxB、浮动后本来外边距20px,但IE解释为10px,解决办法是加上display:block;C、浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inlineD、以上说法都不对6、“滑动门技术”的原理是（b ）学院班级姓名A、命名锚点链接的作用B、使用背景图片位置滑动C、将a元素转换为块元素D、将span元素转换为块元素7、关于背景，以下描述错误的是：(c)A、background-img:B、background-img:C、background-widthD、background-attachment8、以下声明中，可以取消加粗样式的有( c )A font-weight:bolder；B font-weight:bold；C font-weight: normal;D font-weight:600；9、以下声明中，可以控制单词间距的是：( b )A letter-spacing:B word-spacing:C font-weight: normal;D font-weight:600；10、display属性的属性值共有：( a )A 18个B 4个C 6个D 12个11、XHTML基本元素类型不包括( d )A 块状元素B 内联元素C 可变元素D 浮动元素12、关于float描述错误的是( b )A float:left;B float:centerC float:rightD float:none;13、为了解决浮动双倍间距问题，我们可以在相应元素上添加( c )A float:left;B display:block;C display:inline;D margin:0;14、以下哪种现象在FF2.0中会存在：（c）A 双倍边距的问题B 图片间隙的问题C 父元素不能自适应子元素高度D 以上说法都不对15、外部样式表文件不可以由以下哪个标签导入(c)学院班级姓名A 、link B、import C、style16、以下标签哪个不是空标签：(d)Ａmeta B input C hr D form17、标签<p> 的对齐属性是：(b)Ａ、style B 、align C、angle D、padding18、以下哪个选项是设置底边框的：(a)A、Border-bottomB、Border-topC、Border-leftD、Border-right19、以下关于CLASS和ID的说法，错误的是：(d)A、class的定义方法是：. 类名{样式};B、id的应用方法：<指定标签id="id名">C、class的应用方法：<指定标签class="类名">D、id和class只是在写法上有区别，在应用和意义上没有任何区别20、关于ID选择符说法错误的是: ( c )A ID选择符的语法格式是“#”加上自定义的ID名称B 当我们使用ID选择符时，应先为当前元素定义一个id属性，如：<div id="top"></div>C 选择符更适合定义类样式D 一个id名称只能对应于文档中一个具体的元素对象21.以下哪个选项是对对象进行定位的：(c)A、PaddingB、MarginC、positionD、display22.关于div以下描述正确的是（ a ）.A. div是类似于一行一列表格的虚线框B. div由行列形成的单元格构成，可执行合并拆分等操作C. 由div布局的网页结构与表现不分离D. div不要求我们严格css支持23.关于使用CSS以下说法错误的是（ c ）A. 选择符：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.B. 选择属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性。
熟悉Span与Div
来源：Span标签和Div标签都是HTML中很常用的组织标签之一，我们可以在绝大部分的页面中找到他们的身影。
和其他绝大多数的HTML标签兄弟一样，这两个标签各自也是要成对使用的，就像这样：<span>成双</span>和<div>成对</div>。
这样的设计其实也是符合咱们人类的说话方式的，毕竟说话得有头有尾，前后呼应，不能虎头蛇尾，否则对方不知道你的意思会有误解，计算机再聪明也还是机器，就更不知道了。
Span和Div标签是页面中的组织标签，在浏览器中观察并没有什么直接的显示效果，但是对于内容的安排、网页的布局等却能发挥了很大作用，特别是Div标签，它在现代网页排版中起到了决定性的作用。
有关这部分的内容，将在后续文章进行详细介绍。
1、属性与事件本文首先介绍标签的属性与事件这两个概念，理解这两个概念是今后学习使用CSS制作个性网页很重要的基础。
本章开头就说了，属性和事件是绝大多数HTML标签都具有的，好比我们人类所都具有的会思考、能劳动、能直立行走等特点一样。
了解了这两个概念和具体的使用方法，我们就可以在网页上随心所欲的实现一些很有趣的效果和功能。
2、什么是属性我们学习一件新鲜的事物前，大概都遵循这样一个过程：先了解它是什么，它能为我们做什么，它怎么才能为我们所用。
因此我们学习属性，也从属性是什么说起。
【属性是什么】首先我们来学习什么是属性。
属性就是一些能够描述一种物体特征的词语。
这句话可能抽象一些，还是用我们自己来打个比方吧。
你打算把漂亮的女同学小丽介绍你的铁哥们儿张三认识。
你可能会对小丽说，小丽啊，张三是一个很好的中国男生。
这句描述张三的简单的话中就包含了张三的多个特征，也就是说出了张三这件“事物”的多种属性：国籍是中国的，性别是男生的，性格是很好的。
国籍、性别、性格就是人的属性。
再比如，我们在参加考试的时候，开始答题之前都要填写很多信息，姓名、籍贯、准考证号等等，这些要填写的项目都是不同属性的名称。
行内元素和块级元素的区别,并举例
行内元素和块级元素的区别,并举例HTML标记分为两种：行内元素和块级元素，它们在样式和行为上有着很大的不同。
一、块级元素块级元素是指一个占据整行的元素，它们通常独立存在，包含默认的宽度、高度和边距，不能被其他元素所包含，而且可以容纳其他块级或行内元素。
它们可以随时通过 CSS 修改其宽度、高度、边距等属性。
常见的块级元素有：1. <div>：定义一个包含块，通常用于结构化的布局。
例子:<div><h1>这是一个标题</h1><p>这是一个段落</p></div>2.<h1>...<h6>：定义标题，作为结构化文本使用。
3.<p>：定义一个段落。
4.<ul>, <ol>和<li>：定义一个无序列表、有序列表和列表项。
<ul><li>苹果</li><li>香蕉</li><li>梨</li></ul>5.<table>,<tr>,<th>,<td>：定义表格和表格的行、列、单元格。
<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>小明</td><td>20岁</td><td>男</td></tr><tr><td>小红</td><td>18岁</td><td>女</td></tr></table>2.<em>,<strong>：定义一个带有强调语气的文本。
javascript基本面试题
一、单选题1、以下哪条语句会产生运行错误：（a ）A.var obj = ();//语法错误B.var obj = [];//创建数组C.var obj = {};//创建对象D.var obj = //;原因：var obj = new Array ();是对的；JavaScript 中大括号表示创建对象。
var obj = { id:1, name:"jacky" };alert();上例表示创建一个具有属性 id （值为 1）、属性 name （值为 jacky ）的对象。
属性名称可以用引号引起来成 "id"、"name"，也可以不引。
当然除了属性，也可以创建方法。
试验代码/* window.onload=function(){ // var obj = ();var obj1 = [];//objectvar obj2 = {};//objectvar obj3 = //;//undefinealert(typeof(obj1));alert(typeof(obj2));alert(typeof(obj3));}*/function showName(){ alert(); }var obj = { id:1, name:"jacky", showName:showName };obj.showName();2、以下哪个单词不属于javascript 保留字：（b ）A.withB.parentC.classD.void以下的保留字不可以用作变量,函数名,对象名等,其中有的保留字是为以后JAV ASCRIPT 扩展用的.abstract boolean break byte case catch char class const continue default do double elseextends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try var void while with3、请选择结果为真的表达式：（c）A.null instanceof Object（if(!(null instanceof Object))是真的）B.null === undefinedC.null == undefinedD.NaN == NaN(1) null确实可以理解为原始类型，不能当Object理解！null,int,float.....等这些用关键字表示的类型,都不属于Object.至于可以把null作为参数,只是特殊规定而已.可以这么理解: 对象的引用代表的是一个内存的值,null是一个空引用,可以理解为内存的值为0;按这个意思对代码(2) function f1(){ }1. alert(f1 instanceof Function);//true2. alert(f1 instanceof Object);//true3. alert(Function instanceof Object);//true4. alert(Object instanceof Function);//trueFunction 是Object的实例,Object又是Function的实例Function是函数的构造函数，而Object也是函数，Function自身也是函数Object.prototype是一切原型链的顶点，instanceof会查找整个原型链alert(Function);alert(Function.prototype);alert(Function.__proto__);alert(Object);alert(Object.prototype);alert(Object.__proto__);alert((function(){}).prototype);alert((function(){}).__proto__);alert((function(){}).__proto__.prototype);alert((function(){}).prototype.__proto__);alert(Array.__proto__);alert((123).__proto__);alert((Number).__proto__);alert(("test").__proto__);alert((String).__proto__);alert((true).__proto__);alert((Boolean).__proto__);/* window.onload=function(){if(NaN == NaN){alert("ddd");}}*/二、不定项选择题4、请选择对javascript理解有误的：(abcd)A.JScript是javascript的简称B.javascript是网景公司开发的一种Java脚本语言，其目的是为了简化Java 的开发难度C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同上D.AJAX技术一定要使用javascript技术5、foo对象有att属性，那么获取att属性的值，以下哪些做法是可以的：（ACE）A.foo.attB.foo(“att”)C.foo[“att”]D.foo{“att”}E.foo[“a”+”t”+”t”]6、在不指定特殊属性的情况下，哪几种HTML标签可以手动输入文本：（a ce）A.<TEXTAREA></TEXTAREA>B.<INPUT type=”text”/>C.<INPUT type=”hidden”/>D.<DIV></DIV>7、以下哪些是javascript的全局函数：（abc）A.escapeB.parseFloatC.evalD.setTimeoutE.alert8、关于IFrame表述正确的有：(abcd)A.通过IFrame，网页可以嵌入其他网页内容，并可以动态更改B.在相同域名下，内嵌的IFrame可以获取外层网页的对象C.在相同域名下，外层网页脚本可以获取IFrame网页内的对象D.可以通过脚本调整IFrame的大小9、关于表格表述正确的有：（abcde）A.表格中可以包含TBODY元素B.表格中可以包含CAPTION元素C.表格中可以包含多个TBODY元素D.表格中可以包含COLGROUP元素E.表格中可以包含COL元素10、关于IE的window对象表述正确的有：（acd）A.window.opener属性本身就是指向window对象B.window.reload()方法可以用来刷新当前页面C.window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面D.定义了全局变量g；可以用window.g的方式来存取该变量三、问答题：1、谈谈javascript数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制sort的实现的功能类似JAVA的比较器，数据排序从多维数组的第一维开始排序可以自己定义排序方法，很不多的函数2、简述DIV元素和SPAN元素的区别。
行内元素span和块级元素div的区别
⾏内元素span和块级元素div的区别区别：注：⾏内元素会再⼀条直线上，是在同⼀⾏的。
//我是⾏内元素SPAN标签//我是⾏内元素strong标签//注：块级元素各占⼀⾏。
是垂直⽅向的！我是块级元素div标签我是块级元素P标签如果你要将⾏内元素变成块级元素，那么就只需要在该标签上加上样式 display:block;块级元素可以⽤样式控制其⾼和宽。
⾏内元素不可以控制宽和⾼。
除⾮你想将它转变成为块级元素。
它的宽和⾼，是随标签⾥的内容⽽变化。
所有⾏内元素和块级元素标签（⽐较懒，别⼈整理的）:块级元素列表<address>定义地址<caption>定义表格标题<dd>定义列表中定义条⽬<div>定义⽂档中的分区或节<dl>定义列表<dt>定义列表中的项⽬<fieldset>定义⼀个框架集<form>创建 HTML 表单<h1>定义最⼤的标题<h2>定义副标题<h3>定义标题<h4>定义标题<h5>定义标题<h6>定义最⼩的标题<hr>创建⼀条⽔平线<legend>元素为 fieldset 元素定义标题<li>标签定义列表项⽬<noframes>为那些不⽀持框架的浏览器显⽰⽂本，于 frameset 元素内部<noscript>定义在脚本未被执⾏时的替代内容<ol>定义有序列表<ul>定义⽆序列表<p>标签定义段落<pre>定义预格式化的⽂本<table>标签定义 HTML 表格<tbody>标签表格主体（正⽂）<td>表格中的标准单元格<tfoot>定义表格的页脚（脚注或表注）<th>定义表头单元格<thead>标签定义表格的表头<tr>定义表格中的⾏⾏内元素列表<a>标签可定义锚<abbr>表⽰⼀个缩写形式<acronym>定义只取⾸字母缩写<b>字体加粗<bdo>可覆盖默认的⽂本⽅向<big>⼤号字体加粗<br>换⾏<cite>引⽤进⾏定义<code>定义计算机代码⽂本<dfn>定义⼀个定义项⽬<em>定义为强调的内容<i>斜体⽂本效果<img>向⽹页中嵌⼊⼀幅图像<input>输⼊框<kbd>定义键盘⽂本<label>标签为 input 元素定义标注（标记）<q>定义短的引⽤<samp>定义样本⽂本<select>创建单选或多选菜单<small>呈现⼩号字体效果<span>组合⽂档中的⾏内元素<strong>语⽓更强的强调的内容<sub>定义下标⽂本<sup>定义上标⽂本<textarea>多⾏的⽂本输⼊控件<tt>打字机或者等宽的⽂本效果<var>定义变量可变元素素列表--可变元素为根据上下⽂语境决定该元素为块元素或者内联元素<button>按钮<del>定义⽂档中已被删除的⽂本<iframe>创建包含另外⼀个⽂档的内联框架（即⾏内框架）<ins>标签定义已经被插⼊⽂档中的⽂本<map>客户端图像映射（即热区）<object>object对象<script>客户端脚本。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
SPAN元素和DIV元素有什么区别解决思路：最明显的区别是：DIV是块元素，SPAN是内嵌元素。
块元素相当于内嵌元素在前后各加一个<br>换行。
其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inlin e，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。
具体步骤：代码示例：<style>div,span{border:1px solid #000;margin:2}</style><div>div1</div><div>div2</div><span>span1</span><span>span2</span><br><div style="display:inline">div3</div><div style="display:inline">div4</div><span style="display:block">span3</span><span style="display:block">span4</span>技巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为“层”，只需要给对象定义posit ion属性(值为absolute或relavite)。
例如，要让图片成为“层”，可以这样写代码：<img src="demo.gif" style="posibion:absolute;left:20;top:20">特别提示本例代码运行效果如图2.1.6.3所示，为了更能说明问题，这里给块元素和内嵌元素都加了1像素宽的黑色实线边框，从图中可以看到，DIV默认为块元素，定义display属性值为in line后以内嵌元素显示，而SPAN默认为内嵌元素，定义display属性值为block后则以块元素显示。
＝＝＝＝＝＝＝＝div>和<span>的区别span:允许网页制作者给出一个样式表,但无须加在HTML元素之上,也就是说span是独立于HTML元素的.span在样式表做是做为一个标识符使用,而且也接受style class 和ID属性如<span class="xx">.....</span>span是一个内联元素,它纯粹是为了应用样式表面成立的,所以当样式表无效时,它的存在也就没有意义了DIV:基本上与span相似,或者说具有SPAN所有的功能,此外还具有SPAN不及的特色.DIV是一个块,也就是所谓的"容器",它具有自己独立的段落,独立的标题,独立的表格,就如<htm l>.....</html>一样包括了一切.如:<div class="mydiv"><h1>独立的标题</h1><p>独立的段落</p><table>......</table>...................</div>而这些SPAN是没有的!SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。
而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
下面以一个实例来说明这两个属性的区别。
代码：＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。
在此例中，＜span＞标识符允许你将一个段落分成不同的部分。
还有一个标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。
但与＜div＞S PAN不同，＜div＞工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。
效果：SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。
在此例中，标识符允许你将一个段落分成不同的部分。
还有一个标识符具有类似的功能，DIV也被用来在HTML文件中建立逻辑部分。
但与SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。
4楼我记得版主都回答好多次了.以后记得先搜一下啊块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。
“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。
而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。
而不是每次都愚蠢的另起一行。
需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。
但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。
基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。
从这个角度来说，css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。
我们先把需要的文章从各种报纸、杂志总剪下来。
每块剪下来的内容就是一个bl ock。
然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。
这样就形成了你自己独特的文摘快报了。
作为一种技术的延伸，网页布局设计也遵循了同样的模式。
.内联元素(inline element)一般都是基于语义级(semantic)的基本元素。
内联元素只能容纳文本或者其他内联元素，常见内联元素“a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。
块元素和内联元素的基本差异是块元素一般都从新行开始。
而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
比如，我们完全可以把内联元素cite加上display:bl ock这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。
可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
大致的元素分类见全文。
ps:关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。
基本上没有统一的翻译，爱怎么叫怎么叫吧。
块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet* button - 按钮* del - 删除文本* iframe - inline frame* ins - 插入的文本* map - 图片区块(map)* object - object对象* script - 客户端脚本SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。
而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
下面以一个实例来说明这两个属性的区别。
代码：＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。
在此例中，＜span ＞标识符允许你将一个段落分成不同的部分。
还有一个标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。