学习html（6）
1.html学习思维导图
doctype 文档类型声明。
head 浏览器，搜索引擎看。
body 各种标签。
div 各种布局 从上到下，从左到右，从大到小。
盒子模型 各种属性 浮动布局。
CSS效果 1.选择器 2.控制效果：段落控制、文字控制、背景控制 3.引入方式：四种 4.初始化。
html标签 无语义标签 有语义标签。
2.h标签和p标签
h标签：从h1到h6，不同等级的标题，大小不同，表示文本的不同位置，子越来越小。
p标签：p表示段落，在新闻中，一般h和p经常一起出现，表示每一段的内容。
3.img图片标签
<img src=”tupian.jpg” alt=”” title=”显示效果”/>
自闭和标签，src引入一个图片文件的路径（绝对路径和相对路径）；alt显示图片信息，既给浏览器看，又给人看；title鼠标放上去，就显示出来效果。
同时可以通过src来盗链其他网站的图片，例如http://address.jpg进行索引到其他网站的图片。
4.img是内联元素还是块状元素
内联元素不换行，块状元素必须要换行。
img不换行，所以是内联元素。但是却是一个特殊的内联元素，是内联替换元素（replaced element），真正的内容来自图片本身。
一般初始化的时候，都将图片设置成块状，display:block，然后再相应对应块状元素来处理。
5.有序列表和无序列表
无序列表：<ul><li></li></ul>。
list-style-type:cricle;空心圆
list-style-type:square;方块
有序列表：<ol><li></li></ol>。
list-style-type:upper-roman;罗马字符
但是一般list-style-type都为none，为了不同的浏览器保持兼容。
通过给li加上背景图片，来添加前面的小图标，增加显示效果。
6.整齐的表格
表格：<table></table>
行：<tr></tr>
列：<td></td>
表格需要利用CSS设置边框才能够显示出效果。
border-collapse：separate（默认独立）和collapse（设置破列融合），在table中设置，边框进行分裂和融合。
border-spacing：默认边框距离。
colspan=”4”，横跨四列，在td中设置。
Rowspan=”4”，横跨四行，在td中设置。
7.table实践，课程表
<!DOCTYPE html>
<html>
<head>
<title>table课程表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
table{
border-collapse:collapse;
}
td{
border: 2px solid blue;
width: 70px;
height: 15px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>时间日期</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr >
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>