【HTML学习】——列表和图像！了解一下

HTML列表

1. 无序列表
2. 有序列表
3. 自定义列表

---

【1】无序列表

• 无序列表标签：<ul>（unordered list）
• 每个列表项标签：<li>（list item）
• 默认每行前符号为圆点，可以通过样式属性修改符号

<!无序列表>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

---

【2】有序列表

• 有序列表标签：<ol>（order list）
• 每个列表项标签：<li>

<!有序列表>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

---

【3】定义列表

• 自定义列表标签：<dl>（definite list）

自定义列表是列表项和注释的结合

• 每个列表项标签：<dt>（definite title）
• 每个注释：<dd>（definite description）

<!自定义列表>
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk<dt>
    <dd>White cold drink</dd>
</dl>

---

【4】列表属性

标签	含义
<ol>	有序列表
<ul>	无序列表
<li>	列表项
<dl>	定义列表（列表项+注释）
<dt>	定义列表——列表项
<dd>	定义列表——注释

---

HTML图像

---

【1】图像标签img和源属性src

• 图像标签：<img>

<img>是空标签，只包含属性，并且没有闭合标签

• src（‘source’）= 图像的url地址
• 语法：<img src='url' />

---

【2】替换文本属性alt

• alt属性给图像定义一段预留的可替换文本

<img src='url' alt='我是小杨我就这样' />

当图像加载不出来时，替换文本可以告诉用户丢失了什么信息

---

【3】map和area

• <map>：定义一个客户端图像映射，有可以点击区域的一副图像
• <area>：定义图像映射中的区域，带有可点击区域的图像

<area>在html中没有结束标签，并且总是嵌套在<map>标签中

<!map和area图像>
<img src="plants.jpg" border="0" usemap="#plantmap" alt="Plants" /> 
<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href="venus.html" alt="" />
    <area shape="circle" coords="129,161,10" href="mercur.html" alt="" />
</map>