HTML学习系列------列表、图像、超链接标签

写在前面

• HTML列表标签
  • 无序列表
  • 有序列表
  • 定义列表
• 图像标签
• 超链接标签
  • 内部链接&外部链接
  • 空链接
  • 锚链接

---

一、HTML列表标签

1、无序列表

（1）语法

<ul>
	<li>列表项</li> 
 	<li>列表项</li>
</ul>

（2）type属性值

• disc 原点（实心），默认为此
• square 正方形
• circle 空心圆

2、有序列表

（1）语法

<ol> 
	<li>列表项</li>  
	<li>列表项</li>
</ol>

（2）type属性值

• 1 数字1 , 2…
• A 字母（大写）A , B…
• a 字母（小写）a , b…
• I 罗马数字（大写）I
• i 罗马数字（小写）i

3、定义列表

（1）语法

<dl>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	<dd>列表项描述</dd>
	......
</dl>

注意：

• 定义标签内可以有多个<dt>

• 对于每一个<dt>可以有多个<dd>

一般开发中，带摘要的新闻列表、或者是带缩略图或者是其他描述的一些列表等等,可以使用定义列表。

---

二、图像标签

（1）语法：<img src = "" alt = "" .../>

（2）属性：

• src：必需，显示图像的url
• alt：当由于网速太慢、src属性中的错误、浏览器禁用图像等导致用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容
• height：图像的高度，可为数值或者是百分比
• width：图像的宽度，可为数值或百分比

---

三、超链接

1、内部链接&外部链接

（1）语法：< a href = "" > 内容</a>
（2）href:链接地址，可以是内部链接或外部链接。i：内部链接：可以为绝对路径或者是相对路径。ii： 外部链接：是指从当前网站跳转到另外一个网站中，站外链接，输入外部链接地址就可以了。
（3）属性：

• href：链接地址
• target：_self、_blank、_top、_parent ，表示链接的目标
  • target=_self，默认值，在当前窗口打开新的页面。
  • target = _blank，表示创建一个新的窗口，打开一个新的页面。
• title：链接提示文字：当浏览者的光标停留在超链接上时，提示的内容才会出现。
• name：链接命名

2、空链接

（1）语法：< a href = "#">

当想要有链接效果，但是又确定不了链接目标的时候，就可以先使用空链接来代替。

3、锚链接

（1）语法：

同一页面：

<a href = "#锚名"目录1</a>
<a href = "..." name = "锚名">内容</a>

不同页面：

<a href = "网页名称#锚名">内容</a>
<a name = "锚名">内容</a>

注意：

• 锚名建议使用英文，锚名的位置定义就是跳转到的位置。

• 先定义锚的位置和锚名称，然后设置寻找锚的链接