Html和Css学习笔记-html进阶-div与span

此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开html的书略读，后记录了标签，元素，属性的具体意义。

这里所介绍的html和css的版本为html5与css3

Html是超文本标记语言（英语全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

Css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Html和Css验证工具的地址：http://validator.w3.org/

一.div元素

<div>就相当于一个容器，可以把元素一同放在这个容器里，这个容器也可以成为逻辑区，div可以嵌套使用，并配合使用id属性，例子如下：

<div id="id属性名字">

逻辑区的内容

</div>

书语：在页面中要使用<div>，但不要滥用。如果这样做有助于你将页面分解为逻辑区，从而保证结构清晰并便于指定样式，那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加<div>，就只会让页面复杂，而没有任何实际好处

二.span元素

<div>元素允许你为块级内容创建逻辑划分，<span>元素则采用类似的方式建立内联内容的逻辑分组，使用方式，举例如下：

<span class="类的名字">xxxx</span>

三.新增css属性

1.width：xxxx;设置元素内容区的宽度

2.float：xxx;定义元素在哪个方向浮动

3.clear:xxxx;定义了元素的哪边上不允许出现浮动元素

4.position:xxxx;属性规定元素的定位类型。

5.vertical-align:xxxxx;属性设置元素的垂直对齐方式

6.left:xxxx;属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移

7.display：xxxx;属性规定元素应该生成的框的类型，可用属性值如下：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

四.css中如何选择子元素

所谓子元素就是元素中的元素，具体指定方法举例如下：

第一种，未使用id元素

父元素名字 子元素名字{

}

第二种 使用id元素

#id属性名字 子元素:
"

五.a元素的css配置方法

a元素在前面的博文中提到过，是设置链接的，链接不点击是为蓝色有下划线，点击后是红色有下划线，悬停会显示链接内容，那这部分内容的css样式更改方式如下：、

第一种方法

a:link{
这是选择器应用于处于未访问状态的链接
}
a:visited{
这是选择器应用于已访问的链接
}
a:hover{
悬停在一个链接上时会应用这个选择器
}

第二种方法，运用伪类

#类的名字 a:link{
这是选择器应用于处于未访问状态的链接
}
#类的名字 a:visited{
这是选择器应用于已访问的链接
}
#类的名字 a:hover{
悬停在一个链接上时会应用这个选择器
}