网页设计与制作（HTML+CSS）第六课

                         **4.3 元素的类型与转换**
  4.3.1元素的类型

一般分为块标记和行内标记 也称为块元素和行内元素

1. 块元素
   块元素在页面中以区域块的形式出现。特点：每个块元素通常会独自占据一整行或多整行，可以对其设置宽度、高度、对其等属性。
   < h1>~< h6> < p> < div> < ul > < ol> < li>
   2.行内元素
   也称为内联元素或内嵌元素。特点：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显n示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性
   < strong> < b > < em> < i> < del> < s> < ins> < u> < a> < span>
   行内元素通常嵌套在块元素中使用，而块元素却不能嵌套在行内元素中
   注意：在行内元素中几个特殊的标记 < img/> < input/> < td>可以对他们设置宽高和对其属性，有些资料称其为行内元素。
   4.3.2 < div> 与< span>
   1.< div>标记
   简而言之就是一个区块容器标记，可以将网页分隔为独立的、不同的部分，以实现网页的规划和布局。
   < div> 中还可以嵌套多层< div>
   通过与id class等属性配合
   < div>标记最大的意义在于和浮动属性float配合
   2.< span>标记
   行内元素
   < span>与< /span>之间只能包含文本和各种行内标记
   4.3.3 元素的转换
   display属性常用的属性值含义如下：
   inline：此元素将显示为行内元素(行内元素默认的display属性值)
   block：此元素将显示为块元素（块元素默认的display属性值）
   inline-block：此元素将显示为行内块元素，可以对其设置宽高和对其等属性，但是该元素不会独占一行
   none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
   4.4 块元素垂直外边距的合并
   4.4.1 相邻块元素垂直外边距的合并
   当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top 则它们之间的垂直外边距是较大者
   4.4.2嵌套块元素垂直外边距的合并
   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距与子元素的伤外边距发生合并。合并后的外边距为两者较大者 ，即使父元素的上外边距为0，也会发生合并
   4.5阶段案例——制作音乐盒
   4.5.1 分析效果图
   结构分析
   样式分析
   4.5.2制作页面结构
   4.5.3定义CSS样式
   5.1 列 表 标 记
   5.1.1 无序标记 ul
   各个列表项之间没有顺序级别之分
   < ul>
   < li>列表项1< /li>
   …
   < /ul>
   
   
   5.1.3定义列表 dl
   常用于对于术语或名词进行解释和描述（定义列表的列表项谦没有任何项目符号）
   < dl>
   < dt>名词1< /dt>
   < dd>名词1解释1 < /dd>
   …
   < /dl>
   5.1.4 列表的嵌套应用
   5.2 CSS控制列表样式
   5.2.1 list-style-type属性
   用于控制无序和有序列表的项目符号
   
   5.2.2 list-style-image 属性
   其取值为图像的url(地址)
   5.2.3list-style-position属性
   inside：列表项目符号位于列表文本以内
   outside：列表项目符号位于列表文本以外。（默认值）
   5.2.4 list-style 属性
   list-style：列表项目符号 列表项目符号的位置 列表项目图像；
   5.3 超链接标记
   5.3.1创建超链接
   < a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像< /a>
   颜色特殊且带有下划线效果
   5.3.2锚点链接
   5.4 链接伪类控制超链接

超链接标记< a>的伪类	含 义
a:link{CSS样式规则；}	未访问时超链接的状态
a:visited{CSS样式规则；}	访问后超链接的状态
a:hover{CSS样式规则；}	鼠标经过、悬停时超链接的状态
a:active{CSS样式规则；}	鼠标点击不动时超链接的状态