前端(五)—— 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>
原文地址:https://www.cnblogs.com/linagcheng/p/9695795.html