a _ img _list 标签

标签a、img、list

一、a标签

1、常用用法

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

2、相对路径

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

3、常用属性

title -- 链接说明
target -- _self | _blank -- 目标位置

4、其他用法

  • mailto：邮件给...
  • tel：电话给...
  • sms：信息给...

5、a标签reset操作

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

6、锚点

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

7、鼠标样式

{
    cursor: pointer | wait | move;
}

二、img标签

1、常用用法

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

2、常用属性

alt -- 异常解释
title -- 图片解释

三、list列表

1、有序列表

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

2、无序列表

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

3、list的reset操作

ol, ul {
	margin: 0;
    padding: 0;
    list-style:none;
}

a_img_list 标签 代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>a_img_list</title>
    <style type="text/css">
        /* reset: a标签一些默认属性的清楚 */
        a{
            color:#333;
            text-decoration:none;
            outline:0;
        }
    </style>
</head>
<body>
    <!-- 一、基本使用 -->
    <!-- 超链接标签:a -->
    <!-- 双/行/单一类型标签 -->
    <a href="https://www.baidu.com">前往百度</a>
    <a href="5 边界圆角.html">前往边界圆角</a>
    <!--  ./或省略代表当前文件所在路径，可以访问与该文件通路径下的所有文件及文件夹 -->
    <!-- ../ 代表本层路径的上层目录 -->
    <a href="./temp/1.html">hey</a>
    <!-- 二、属性 -->
    <!-- title：鼠标炫富的文本提示 -->
    <!-- target：_blank，新开启空白标签位来打开目标页面 -->
    <a href="https://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>
    <!-- 三、其他应用场景 -->
    <!-- mailto | sms |tel  -->
    <a href="mailto:zreo@163.com">发信息给zero</a>

    <!-- 四、锚点 -->
    <!-- a 与a  #锚点名 href=“#锚点名” 对应 name=“锚点名” -->
    <!-- a与标签 href=“#锚点名”  对应 id=“锚点名” -->
    <a href="#tag">前往底部</a>
    <!-- 测试锚点用 -->
    br * 100
    <!-- 设置一个锚点 -->
    <!-- bottom 做底部布局的区域 -->
    <div class="bottom">
        <a name="tag" href="">设置一个锚点</a>
        <!-- <i id="tag"></i> -->
        <!-- <div id="tag"></div> -->
    </div>

   <!-- 五.img使用 -->
    <!-- src可以连接本地及网络图片 -->
    <!-- alt:资源加载失败时的文本提示 -->
    <!-- title:图片的文本信息(鼠标悬浮时展示) -->
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20180921/f1505f486ba8492b8faaa62ac7cc3e66.png" alt="保罗" title="保罗">

    <!-- 六.list列表 -->
    <!-- reset操作 -->
    <style type="text/css">
        ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <!-- 有序列表 -->
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
    <!-- 无需列表:常用 -->
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
</body>
</html>
posted @ 2018-09-21 20:34  大张哥  阅读(309)  评论(0)  编辑  收藏  举报