HTML第四天

HTML表格

表格由<table>标签来定义，每行由<tr>来定义，每行的每个单元由<td>来定义td代表table data表格数据，表格数据可以包含文本、图片、列表、段落、表单、水平线、表格等

表格和边框属性

如果不定义边框属性，表格将不显示边框

border为边框属性，属性值从1开始，属性值越大，边框越粗

表的表头<th>

用<th>来定义表的表头，一般浏览器会将表头加粗并居中显示

表格中的空单元格

在表格中空的单元格浏览器可能会不显示边框，为了避免这种情况，可以在单元格中添加一个空格占位符&nbsp;

<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>100</td><td>100</td></tr><tr><td> </td><td>100</td></tr></table>

<colspan="列数">这个属性值可以使一个单元格占多列的空间

<rowspan="行数">则可以使一个单元格占多行的空间

<h4>横跨两列的单元格：</h4><table border="1"><tr>  <th>姓名</th>  <th colspan="2">电话</th></tr><tr>  <td>Bill Gates</td>  <td>555 77 854</td>  <td>555 77 855</td></tr></table><h4>横跨两行的单元格：</h4><table border="1"><tr>  <th>姓名</th>  <td>Bill Gates</td></tr><tr>  <th rowspan="2">电话</th>  <td>555 77 854</td></tr><tr>  <td>555 77 855</td></tr></table>

<cellpadding="整数">cellpadding属性值可以添加在table标签中，设置表格的边距

<cellspacing="整数">则可以设置表格的间距

border属性和background属性都可以用在table，th和td中设置表格或者单元格的背景颜色或背景图片

align属性可以设置单元格中的数据的对其方式。

<caption>标题文本</caption>可以在表格的上方添加标题

HTML列表

HTML支持有序和无序列表

无序列表是一个项目列表，使用粗体圆点进行标记

无序列表始于<ul>标签，每个列表项始于<li>

列表项内部也可以是段落，图像，链接等

有序列表

有序列表的项目使用数字进行标记

有序列表始于<ol>标签，每个列表项始于<li>

有序列表还可以添加start属性设置列表序号的开始。

使用type属性可以改变每一项前面的标记，可用于ul标签中设定总的标记，也可以用于单个li中改变单个标记

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合

自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表的定义以<dd>开始

<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>

结果：

Coffee

Black hot drink

Milk

White cold drink列表也可以相互嵌套

HTML<div>和<span>

通过<div>和<span>可以将HTML元素组合起来

HTML块

大多数HTML元素被定义为块级元素（block level element）域或内联元素(inline element)

块级元素在浏览器显示时，通常会以新行来开始和结束

如：<h1>,<p>,<ul>,<table>

HTML内联元素

内联元素在现实时通常不会以行开始

如:<b> ,<td>,<a>

HTML<div>元素

HTML<div>元素是块级元素，他是可以用于组合其他HTML元素的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据

HTML<span>元素

HTML<span>元素是内联元素，可用作文本的容器。

<span>元素也没有特定的含义

当与css一同使用，<span>元素可用于为部分文本设置样式属性。