html学习(一)有序/无序列表和图片标签路径配置

最新推荐文章于 2024-09-25 02:21:10 发布

我先来一碗

最新推荐文章于 2024-09-25 02:21:10 发布

阅读量4.3k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/jack_bob/article/details/85098547

版权

（一）有序列表：

（1）数字：1（2）字母：a / A）3.（I）start：从第几位开始颠倒：倒叙排列

                <ol type="1" start="3" reversed="reversed">
                  <li>北京</li>
                  <li>上海</li>
                  <li>天津</li>
                  <li>深圳</li>
                </ol>

运行效果：

（二）无序列表

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 编码字符集charset -->
    <meta charset="utf-8" />
    <title>xxx</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      ul{
        list-style: none;
      }
      li{
        margin: 0 10px;
        float: left;
        color: #f40;
        font-weight: bold;
        font-size: 14px;
        height: 25px;
        line-height: 25px;
        padding: 0 5px;
      }
      li:hover{
        border-radius: 10px;
        background-color: #f40;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <br>
    <br>
    <br>
     <ul type="circle">
      <li>会议详情</li>
      <li>呼叫全部</li>
      <li>全部挂断</li>
      <li>全体静音</li>
      <li>静音恢复</li>
      <li>自动模式</li>
    </ul>
  </body>
 </html>

示例效果：

（三）图片标签：<img>标签

代码示例：

    <!-- 1.网络展示 -->
    <img style="width:100px;" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=c80a898806f431ada8df4b6b2a5fc7ca/38dbb6fd5266d0167399f2329d2bd40735fa3523.jpg">
    <!-- 2.本地展示 本地的绝对路径-->
    <img style="width:100px;" src="/Users/xxxx/Desktop/扫红包.jpeg">
    <!-- 3.本地展示 本地的相对路径-->
    <img style="width:100px;" src="扫红包.jpeg">

都在桌面的时候，同一个路径下的时候，只填写名字就OK了。

示例效果：

    <img style="width:100px;" src="扫红包.jpeg" alt="这是xxx">

ALT标签：图片占位符（URL找不到的时候或出错的时候）

标题标签：图片提示符

我先来一碗

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫