03---HTML+CSS---列表、表格及iframe框架

一、列表

1、无序列表

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

网页显示：

• Coffee
• Milk

相对于有序列表，用的比较多。

2、有序列表

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

网页显示：

1. Coffee
2. Milk

3、定义列表

<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

一般用在网页底部。

补充：

• 嵌套时，注意缩进，结构清晰。

• 缩进：tab

• 回缩：shift+tab

• 复制：ctrl+shift+d

  列表嵌套时，裸露在外面的东西可以用个a标签。不想跳转的时候可以用href=” “，里面写一个#，相当于刷新页面；里面写三个#，相当于什么也没干；写javascript:void(0)，鼠标放在a标签上时，浏览器下方会有显示javascript:void(0)。

二、表格

表格标签：

中文解释	标签
定义表格	table
表格标题	caption
表格的表头	th
表格的行	tr
表格的列	td
表格的头	thead
身体	tbody
腿	tfoot（很早以前网页用表格写，浏览器会帮你自动补齐）

<table border="1" style="border-collapse:collapse;">
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
    </tr>
</table>

网页显示：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2
row 3, cell 1	row 3, cell 2

三对tr 有三行，border=“1”为了让表格的线显示。style=”border-collapse:collapse;为了让边框的线合起来。colspan：列合并。rowspan：行合并。

三、 iframe框架

<iframe frameborder="1" src="http://www.baidu.com" scrolling="auto"></iframe>

可以引入别的页面。scroling是滚动条。

网页理论上可以无限延长（body本身没有高度，可以无限延长），由内容撑开。宽度是确定，所以iframe可以继承body的宽度。除非给定html一个高度，否则不能继承高度。

四、块级元素 及 行内元素（内联元素）

块级	行内
独占一行	不会自动换行
会根据父级的大小适应宽高	给宽高无效
<h1~6>、<p>、<div>、<pre>、<ul> <li>、<ol> <li>等	<img>、 <a>、<b>、<strong>、<i>、<em>等