前端（五）—— a、img、list标签

a标签、img标签、list标签

一、a标签

1、常用用法

<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>

相对路径：以当前文件作为参考，.代表当前路径，..代表上一级目录

2、常用属性

title   链接说明，鼠标悬浮式的文本提示
target:_self | _blank  目标位置，如果是_self表示当前页面直接转换，如果是_blank表示新建空白页来打开目标页面
eg： <a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>

3、其他用法

• mailto：邮件给...

• tel：电话给...

• sms：信息给...

<a href="mailto:zero@163.com">信息给Tom</a>

4、锚点

（1）什么是锚点

页面内的超链接，通过点击锚点，能够快速重定向网页特定的位置

（2）锚点的使用

<a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>

<a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>

5、鼠标样式

{
    cursor: pointer | wait | move;
}

6、reset操作

a {
    color: #333;
    text-decoration: none;
    outline: 0;
}

 

二、img标签

1、常用用法

str可以连接本地及网络图片

<img src="https://image/icon.gif" />
<img src="./icon.gif" />

2、常用属性

alt   异常解释，资源加载失败时的文本提示
title   图片解释，鼠标悬浮图片上显示的文本提示信息

 

三、列表

1、有序列表（ordered）

<ol>
    <li></li>
    <li></li>
</ol>

2、无序列表（unorder）

<ul>
    <li></li>
    <li></li>
</ul>

3、列表的reset

<style type="text/css">
        ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>