今天我们来初步认识一下html。
html （Hyperlink Reference）意为超文本标记语言。“超文本”指的是在页面中可以有图片，链接，甚至
音乐，程序等非文字元素。超文本标记语言的结构包括头部分（head）和主体部分（body）。其中头部分提
供 关于网页的信息，主体部分提供 网页所要呈现的内容。
比如我们想显示一张图片时：
DOCTYPE 在页面中用来指定页面所使用的html版本。要想制作一个符合标准的页面，一个必不可少的关键组
成部分就是DOCTYPE声明。 <!DOCTYPE html> 声明必须在html页面的第一行，在<html>标签之前，但
<!DOCTYPE html>并不是标签。
在html 5中，声明只有一种类型。 就是 <!DOCTYPE html>。
<html></html>标签限定了文档（页面）的开始点和结束点，在它们之间的文档的头部和主体。
<head></head>标签用于定义文档的头部，它是所有头部元素（标签）的容器。<head>中的元素（标签）
可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等。绝大多数文档的头部包含的信息不会作为显示内
容呈现给读者。
<title></title>标签可以可以定义文档的标题。
<body></body>标签定义了文档的内容。
提到了标签，就要说一下，单标签和双标签。单标签：有一个标签组成，如<hr/>,<img/>,<meta/>。双标签
有两个标签组成：如<title></title>,<html></html>等。
单标签后面的“/”可以写可以不写，但是为了规范我们应该写“/”。
当我们访问本地的html页面时，访问url路径为：file:///C:/Users/huluwawa/Desktop/test.html。其中“file:///”
代表的是“本地电脑”。
src（source）本意为源头，这里指的是源文件。alt 是一个属性，当图片因某种原因不显示时，原来显示图片的地方
就会被alt后面的值代替。
<br/>(blank row) 是一个换行符。<hr/>是一条水平分割线，也用换行的作用。标题（h1-h6）标签是指网页html
中对文本标题所进行的着重强调的一种标签，以标签<h1>-<h6>依次显示重要性的递减。制作<h>标签的主要意义就
是告诉搜索引擎这是一段文字的标题，起强调作用。<h1>定义最大的标题，<h6>定义最小的标题，表现是加粗，控制
字体大小。
<ol> <li>列表标签，有序列表。
<ul><li>无序列表 只是把前面的数字变成了点的形式。
<dl><dt><dd>用于自定义列表，可以进行嵌套。
html页面有3中布局方式：1.table（表）2.div 3.ul,ol,dl(列表)。一个好的页面布局，可以使页面更加漂亮美观。
<marquee>标签可以将文本变成滚动的形式。<marquee direction="right" bgcolor="green"
scrolldelay="10" width="50%" height="10%" onmouseover=this.stop() onmouseout=this.start()>
<qiaotao style = "color:gold"> 凤凰**</qiaotao>
</marquee>。
下面我们学习html中的表格，也就是<table></table>标签。<tr><td>是table中必不可少的部分。
定义表格：<table></table>
定义表行：<tr></tr>
定义列（单元格）：<td></td> ，单元格的宽度是自适应的（其中的内容决定的）。
1.表格属性
1、<table> 属性
1、width
设置表格宽度
2、height
设置表格高度
3、align
设置 表格 在其 父元素中的水平对齐方式，取值：left,center,right
4、border
边框,边框宽度，以px为单位的数值，px可以省略
5、cellpadding
单元格内边距
单元格边框与内容之间的距离
6、cellspacing
单元格外边距
单元格与单元格之间或者单元格与表格之间的 距离
7、bgcolor
背景颜色
2、<tr> 属性
1、align
该行的内容 水平对齐方式
2、valign
该行的内容 垂直对齐方式
取值：top，middle，bottom
3、bgcolor
3、<td> 属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
4、表格中的其他标记
1、<caption></caption>
作用：为表格定义标题
位置：表格正上方居中显示
<table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
2、行标题或列标题
列标题：第一行中的每一列，加粗，水平居中的效果显示
行标题：每行里面的第一列, 加粗，水平居中的效果显示
行(列)标题:<th></th>
<th></th>作用 与 <td></td>一模一样
5、表格的复杂应用
1、行分组
表格可以被划分成3个部分
1、表头 <thead></thead>
2、表主体 <tbody></tbody>
3、表尾 <tfoot></tfoot>
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
注意：如果不对表格行进行分组的话，那么默认都属于 tbody 中
2、不规则表格
每行中的列数，不是统一化的。
1、跨列
合并列，让指定的单元格，横向向右，合并几个单元格(包含自己)
语法：
td 的 colspan 属性
2、跨行
合并行，让指定的单元格，纵向向下，合并几个单元格(包含自己)
语法：
td 的 rowspan 属性
注意：无论是跨行还是跨列，被合并的单元格一定从代码中删除出去
3、表格的嵌套
在一个表格中，又嵌入了另外一个表格
被嵌套的表格必须出现在<td>中
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
2.表格特有的样式属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
边框合并模式
2、边框边距
1、作用
设置相邻单元格边框之间的距离(类似于cellspacing)
2、属性
border-spacing
取值：
1、取1个值
表示水平和垂直间距相等
2、取2个值
第一个值表示的 水平间距
第二个值表示的 垂直间距
两个值之间用 空格 隔开
3、要求
border-collapse必须为separate
必须为分离边框模式时有效
3、标题位置
<caption></caption>
作用：将标题位置由默认的位置改到表格之下
属性：caption-side
取值：
1、top
默认
2、bottom
标题位于表格之下
4、显示规则
1、作用
指定浏览器以什么样的方式来布局一个表格。实际是指定了单元格的算法规则
默认算法：单元格的宽由内容来决定，不受设置的width值来限定。
2、属性
table-layout
取值：
1、auto
默认值，自动，列宽由内容来决定
2、fixed
固定表格布局，列宽由设定的值决定。
3、自动表格布局&固定表格布局
1、自动表格布局(auto)
单元格的大小会适应内容大小
在表格复杂时，加载会比较慢
适用于不确定每列大小时使用
传统表格表现方式
2、固定表格布局(fixed)
单元格的大小由设定的值来决定，与内容无关
会加速显示表格，浏览器在加载完第一行的时候就不用再计算了。
5、隐藏的显示效果
属性： visibility:collapse
用在表格元素上，删除一行或一列，不影响表格整个布局
