Day 03：专案01 - 超简单个人履历02 | HTML基本元素

大家早安阿! 来到我们冒险的第三天了，今天我要继续来介绍HTML的其他常用元素，还没看过昨天的建议先看完再来看这篇。

HTML基本元素(续)

`<img>`

图片，src属性为图片路径，alt属性则是图片无法正常显示时，预设显示的文字。

<img src="./cat.jpg" alt="cat" style="width:400px">

显示结果为：

献上可爱猫猫图，有猫就给赞，对吧XD

图片无法正常显示时，显示alt的文字。

当然gif也可以显示。

<img src="./rainbow.gif" alt="cat" style="width:400px">

因为截图就表示不出来gif的效果了，所以我这边是直接放gif的连结上来，你在你的电脑里应该也会看到类似效果。

表格

HTML中，表格是一个复合的元素，是由好几个标签所组成的。

<table>：标示这是一个表格
<caption>：表格标题名称
<thead>：表头区域
<tbody>：表格本体区域
<tr>：一列
<th>：表头栏位
<td>：一般栏位

<table>
    <caption>2年1班</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王小明</td>
            <td>50</td>
        </tr>
        <tr>
            <td>陈小美</td>
            <td>90</td>
        </tr>
        <tr>
            <td>林阿妙</td>
            <td>75</td>
        </tr>
    </tbody>
</table>

显示结果为：

如果想要显示边框，则在<head>里面加上这个：

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

这个用到CSS的内部载入，明天就会讲到了。

显示结果为：

另外，想要合并表格栏位，使用的是colspan属性，数字表示合并几格。

<tr>
    <td colspan=2>林阿妙</td>
</tr>

显示结果为：

有关表格的详细介绍请看这里

清单

HTML的清单分成无序清单以及有序清单。

无序清单

<ul>：标示这是一个无序清单。
<li>：清单中的一项。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

显示结果为：

type属性可以设定无序清单样式。

disc：实心圆(预设)
circle：空心圆
square：正方形

<ul>
    <li type="disc">HTML</li>
    <li type="circle">CSS</li>
    <li type="square">JavaScript</li>
</ul>

显示结果为：

或者是巢状无序清单，浏览器会自动切换清单样式。

<ul>
    <li>HTML</li>
    <ul>
        <li>head</li>
        <li>body</li>
        <ul>
            <li>h1</li>
        </ul>
    </ul>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

显示结果为：

有序清单

<ol>：标示这是一个有序清单。
<li>：清单中的一项。

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

显示结果为：

也可以用type属性设定有序清单样式。

1：阿拉伯数字(预设)
A：大写英文字母
a：小写英文字母
I：大写罗马数字
i：小写罗马数字

<ol>
    <li type="1">HTML</li>
    <li type="A">CSS</li>
    <li type="I">JavaScript</li>
</ol>

显示结果为：

start属性设定从数字几开始数。

<ol start="10">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

显示结果为：

当然，也可以是巢状有序清单，但是浏览器不会自动切换清单样式。

<ol>
    <li>HTML</li>
    <ol>
        <li>head</li>
        <li>body</li>
        <ol>
            <li>h1</li>
        </ol>
    </ol>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

显示结果为：

希望改变样式也很简单，只要利用上面讲过的type属性就好了。

<ol>
    <li>HTML</li>
    <ol type="a">
        <li>head</li>
        <li>body</li>
        <ol type="i">
            <li>h1</li>
        </ol>
    </ol>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

显示结果为：