SPAN元素和DIV元素有什么区别
- 格式：doc
- 大小：37.00 KB
- 文档页数：6
下载文档原格式
合集下载
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 ）时的状态。
- 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文件中建立逻辑部分。