下载文档原格式
练习1一、填空题1、网站由网页构成，并且根据功能的不同，网页又有静态网页和动态网页之分。
2、Web标准是一系列标准的集合，主要包括结构、表现和行为。
3、HTML中文译为超文本标记语言，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
4、HTML语言主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
5、在网站建设中，HTML用于搭建页面结构，CSS用于设置页面样式，JavaSCript用于为页面添加动态效果。
二、判断题1、因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。
（X ）2、网页主要由文字、图像和超链接等元素构成，但是也可以包含音频、视频以及Flash等。
（√）3、“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
（√）4、URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。
URL其实就是Web地址，俗称“网址”。
（√）5、DNS（英文Domain Name System的缩写）是域名解析系统。
但是，在Internet上域名与IP地址之间并不是对应的。
（X）6、Firebug是IE浏览器中常用的一个插件，属于IE强力推荐的插件之一。
（X）7、在网站建设中，JavaScript用于搭建页面结构。
（X ）8、实际网页制作过程中，最常用的网页制作工具是Dreamweaver。
（√）9、在Dreamweaver中制作网页，在菜单栏中选择【文件】→【保存】选项，或使用快捷键Ctrl+S，即可完成文件的保存。
（√）10、所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。
（X）三、选择题1、在Dreamweaver中，使用主浏览器预览网页的快捷键是（B）A、Ctrl+SB、F12C、F5D、Ctrl+F122、使用内嵌式添加CSS样式，CSS样式需要写在（D）A、<title></title>标记之间B、<head></head>标记之间C、<body></body>标记之间D、<style></style>标记之间3、下面选项中，对JavaScript语言描述正确的是（ABD ）A、JavaScript是Web页面中的一种脚本语言文字。
元素分类-块级元素元素分类在讲解CSS布局之前，我们需要提前知道⼀些知识，在CSS中，html中的标签元素⼤体被分为三种不同的类型：块状元素、内联元素(⼜叫⾏内元素)和内联块状元素。
常⽤的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常⽤的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常⽤的内联块状元素有：<img>、<input>元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。
设置display:block就是将元素显⽰为块级元素。
如下代码就是将内联元素a转换为块状元素，从⽽使a元素具有块状元素特点。
a{display:block;}块级元素特点：1、每个块级元素都从新的⼀⾏开始，并且其后的元素也另起⼀⾏。
（真霸道，⼀个块级元素独占⼀⾏）2、元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本⾝⽗容器的100%（和⽗元素的宽度⼀致），除⾮设定⼀个宽度。
实例：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>内联块状元素</title><style type="text/css">div,p{background:pink;}</style></head><body><div>div1</div><div>div2</div><p>段落1段落1段落1段落1段落1</p></body></html>输出的内容为粉红⾊底。
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后则以块元素显示。
元素类型的转换
⽬录：
1.
2.
⼀. 元素类型
元素类型有块元素、内联元素。
内联元素也称为⾏内元素。
块元素有 div、h1-h6、p、ul、ol、li 等。
内联元素有 span、strong、em、b、a、u 等。
块元素独占⼀⾏、能设置宽⾼。
内联元素不独占⼀⾏，不能设置宽⾼。
⼆. 元素类型的转换
先举个例⼦，默认情况下 <span> 是内联元素，不能给它设置宽⾼，也不能让它独占⼀⾏显⽰，如果想要让他显⽰为块元素，那么，我们可以在 CSS 中给 <span> 的 display 属性设置为 block，这样就能让 <span> 显⽰为块元素了。
下⾯是 display 常⽤属性值的作⽤：
下⾯举⼏个元素类型转换的例⼦。
1. 块元素转换为内联元素
使⽤ inline 属性值实现将块元素 div 转换为内联元素。
转换元素类型为内联元素之后，div不独占⼀⾏，不可以设置宽⾼。
转换为内联元素前：
转换为内联元素后：
2. 内联元素转换为块元素
使⽤ block 属性值实现将内联元素 span 转换为块元素。
转换元素类型为块元素之后，span 独占⼀⾏，可以设置宽⾼。
转换为块元素前：
转换为块元素后：
3. 内联元素转换为⾏内-块级元素
使⽤ inline-block 属性值实现将内联元素 span 转换为⾏内-块级元素。
转换元素类型为⾏内-块级元素之后，span 不独占⼀⾏，可以设置宽⾼。
转换为⾏内-块级元素之前：
转换为⾏内-块级元素之后：。
简述内联元素与块元素的区别HTML元素可以分为内联元素和块元素两种，它们拥有不同的特性和用途。
内联元素是行内元素，只会影响自身的排版；而块元素是块状元素，会影响排版整个文档布局，是构成网页框架的重要元素。
首先，内元素字体大小一般为默认值，不受改变，而块元素可以自行设定字体大小，变更字体大小会影响到元素的空间尺寸。
其次，内联元素只能以文本框的形式出现，而块元素可以填充任何大小的空间。
内联元素的宽度、高度只能由内容撑开，而块元素则可以设定宽高。
此外，内联元素在显示时，仅仅会改变自身和后面紧接着的标签，会被当成一个整体处理，因此多个内联元素在显示时，会按照他们在HTML文档中的顺序一行显示，而块元素会断行，每一个块元素都是一个新的行开头，即使没有设置尺寸，也会撑满整行并独占一行。
内联元素通常用于插入文本，结构层级低，而块元素比较适用于框架布局，结构层级更高，可以分割整个文档。
总结起来，内联元素和块元素有如下区别：一、内联元素是行内元素，以文本框形式出现，只会影响自身排版；而块元素是块状元素，会影响整个文档布局。
二、内联元素的字体大小一般为默认值，不受改变，而块元素可以自行设定字体大小，变更字体大小会影响到元素的空间尺寸。
三、内联元素的宽度、高度只能由内容撑开，而块元素则可以设定宽高。
四、内联元素在显示时，仅仅会改变自身和后面紧接着的标签，而块元素则会撑满整行并独占一行。
五、内联元素通常用于插入文本，结构层级低，而块元素比较适用于框架布局，结构层级更高，可以分割整个文档。
从上述不同之处可见，内联元素与块元素有着非常显著的差异，在实际开发中，可以根据元素的特性及需求，合理选择和使用内联元素或块元素，以满足不同的开发需求。
CSS块元素、⾏内元素、⾏内块元素的转换⼀、块元素转⾏内元素：display:inline⼆、⾏内元素转块元素：display:blockdiv{display: inline;/*⽆效width: 500px;height: 500px;*/background-color: red;}p{display: inline-block;}span{display: block;width: 400px;height: 300px;background-color: blue;}</style></head><body><div>块内元素转⾏内元素</div><span>⾏内元素转块元素</span>三、块和⾏内元素转⾏内块元素：display:inline-block<style type="text/css">div,a,span,strong{display: inline-block;width: 200px;height: 200px;background-color: yellow;text-align: center;vertical-align: top;}</style></head><body><div>块元素转⾏内块元素</div><a href="#">a⾏内元素转⾏内块元素</a><span>span⾏内元素转⾏内块元素</span><strong>strong⾏内元素转⾏内块元素</strong>。
div与span的区别和使用示例
近年来网站如雨后春笋般大批的出现在网络上,对于网站来说web后端开发也变得越来越重要。
下面就让我们来了解一下div与span的区别和使用。
DIV 和SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。
主要用于应用样式表。
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
具体步骤：
1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：
测试紧跟前面的”测试”显示
这里会另起一行显示
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试
紧跟前面的”测试”显示
这里会另起一行显示
提示：如果不对DIV元素定义任何CSS属性，其显示效果将行将于P元素。
因为DIV与SPAN元素的特殊性，所以一般用于应用样式表，比如说用CSS定义为层，而需要分清的是块元素和行内元素的区别，还有两者间的相互转化。
常见的块级元素和⾏级元素常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；常见的⾏内元素有：a；span；strong；em；br；img；input；label；button；select；textarea；i；注意点：1）块级元素会独占⼀⾏，其宽度⾃动填满其⽗元素宽度⾏内元素不会独占⼀⾏，相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排不下，才会换⾏，其宽度随元素的内容⽽变化2）块级元素可以设置 width, height属性，⾏内元素设置width, height⽆效。
【注意：块级元素即使设置了宽度，仍然是独占⼀⾏的】3) 块级元素可以设置margin 和 padding。
⾏内元素的⽔平⽅向的padding-left,padding-right,margin-left,margin-right 都产⽣边距效果但是竖直⽅向的padding-top,padding-bottom,margin-top,margin-bottom都不会产⽣边距效果。
（⽔平⽅向有效，竖直⽅向⽆效）4)p元素虽然是块级元素，但⾥⾯不可以再嵌套块级元素；a元素虽然是⾏内元素，但⾥⾯可以嵌套块级元素，但a标签⾥⾯不可以再嵌套a标签；img、button和input既是⾏内元素，也是替换元素，有内在的宽度和⾼度，所以可以直接设置宽度和⾼度，⽤js也可以直接读取到相应的⾼度和宽度；5)⾏内元素中间有间隙：产⽣原因：换⾏符、tab（制表符）、空格产⽣间隙；解决⽅法：1、元素写成⼀⾏；2、设置font-size：0；采⽤⽅法1代码会⽐较乱，⼀般不使⽤；采⽤⽅法2：直接给⾏内元素的⽗元素设置font-size：0，然后针对具体的⾏内元素设置相应的字体⼤⼩。
浅谈CSS块级元素与⾏内元素（内联元素）的区别和联系在css盒⼦模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。
那么它们究竟是什么呢？其实，这两种元素都是html规范中的概念。
块元素(block element)⼀般是其他元素的容器元素，能容纳其他块元素或内联元素。
最常见的就是P和div这两个，说的简单点，块元素就好⽐⼀个四⽅块，可以放其他的四⽅块，并可以呈现在页⾯上任何地⽅。
默认情况下块元素，是独占⼀⾏的。
常见的块元素：div、h1-h6标题、form（只能⽤来容纳其他块元素）、hr、p、table、ul、ol等。
内联元素(inline element)也叫内嵌元素或⾏内元素，⼀般都是基于语义级(semantic)的基本元素。
内联元素只能容纳⽂本或者其他内联元素，常见内联元素有a和span。
块元素与内联元素的区别？1.块元素，总是在新⾏上开始；内联元素，和其他元素都在⼀⾏上。
2.块元素，能容纳其他块元素或内联元素；内联元素，只能容纳⽂本或者其他内联元素。
3.块元素中⾼度，⾏⾼以及顶和底边距都可控制；内联元素中⾼，⾏⾼及顶和底边距不可改变。
(这上⾯的区别，指的是默认情况下的，不包括CSS的刻意控制。
也就是说当使⽤css控制时，块元素和内联元素的属性差异会越来越⼩。
)block（块）元素的特点：①总是在新⾏上开始；②⾼度，⾏⾼以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除⾮设定⼀个宽度。
④它可以容纳内联元素和其他块元素inline元素的特点：①和其他元素都在⼀⾏上；②⾼，⾏⾼及外边距和内边距不可改变；③宽度就是它的⽂字或图⽚的宽度，不可改变④内联元素只能容纳⽂本或者其他内联元素CSS⽂档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少⽂章，看到所多的是零碎的CSS布局基本知识，⽐较表⾯。
HTML标签的三种类型
HTML标签的类型分为三种:⾏内元素,⾏内块元素,块级元素
⽽标签的属性是可以转换的
display:inline: 转换为⾏内元素
display:linline-block 转换为⾏内块元素
display:block 转换为块级元素
特性:
⾏内元素:
1.⽆法设置宽⾼
2. margin上下⽆效,只有左右有效果,padding都有效果,会撑⼤空间;
box-sizing:border-box;⽆效,因为该属性针对盒模型
3.不会⾃动换⾏
⾏内块元素:
1. 不会⾃动换⾏
2.能够设置宽⾼
3.默认排列⽅式为从左到右
4.可以使⽤text-align:center使内容相对于⽗盒⼦⽔平居中对齐,例如img标签,可以使⽤text-align:center,相对⽗盒⼦居中对齐.,margin:0 auto⽆效
5.⽔平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换⾏,浏览器解析会将其解析成⼀个空格.
块级元素:
1.能够识别宽⾼
2.margin和padding的上下左右均对其有效
3.可以⾃动换⾏
4.多个块状元素标签写在⼀起，默认排列⽅式为从上⾄下
5.可以使⽤margin:0 auto居中对齐。
它可以让行内显示为块的元素，变为行内显示，例如
<div> DIV1 </div>
<div> DIV2 </div>
这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2这时候显示在同一行了，试试看吧。
和display:inline 对应的是display:block，block 会让应用了该CSS 属性的HTML 标记变成块级别元素，例如SPAN 是行内显示的，但是你加了display:block 属性就不一样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
display:inline比较经典的用法是用在<ul> 下的<li> 中内联block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。
display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span）而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。
display:inline 对应不显示为display:none
display:block 对应不显示为hidden
说通俗点样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
