Web前端基础标签第二讲

列表

无序列表

用 ul, 每一个小内容用 li

<ul>
       <li>一个内容</li>
       <li>另一个内容</li>    
       <li>另另个内容</li>    
</ul>

效果如下：

那么前面的实心圆点可以改变吗？
可以！
在 type 中，“disc” 表示实心圆点，“circle” 表示空心圆，“square” 表示实心方块

	<ul type = "disc">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ul>

    <ul type = "circle">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ul>

    <ul type = "square">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ul>

效果如下：

有序列表

用 ol, 每一个小内容用 li

	<ol>
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ol>

效果如下：

那么前面的数字可以改变吗？
可以！
在 type 中，“1” 表示数字排序，“i”, “I” 表示罗马字母排序， “a”, “A” 表示字母排序

	<ol type = "1">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ol>

    <ol type = "i">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ol>

    <ol type = "I">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ol>

    <ol type = "a">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ol>

    <ol type = "A">
        <li>一个内容</li>
        <li>另一个内容</li>    
        <li>另另个内容</li>    
    </ol>

效果如下：

图片

图片导入

• 如果电脑中有图片，就在 src 里写文件所在的路径位置，这种路径叫做绝对路径；

• 如果图片在项目中，同级别可以直接使用，这叫相对路径；

  • / 表示取下级目录
  • ./ 表示同级目录
  • …/ 表示返回上级目录
  • …/…/ 表示返回上上级目录

• 针对 img 标签

  • width 可调节宽度，同时高度也会同比例改变；若想同时定义宽度和高度，会使图片变形
  • title 里设置鼠标放在图片上时显示的文字
  • alt 里设置图片加载失败时显示的文字

<img src="./images/wenjianjia.jpg" width="60px" title="鼠标放在图片上" alt="图片加载失败">

图片超链接

那么怎么点击图片进入链接呢？
还记得上篇文章中的超链接应用吗？同理，将图片替换文字的位置就可以啦！还可以在图片后面加上文字，他们都在点击的范围内。
上篇文章链接：

https://blog.csdn.net/Web_blingbling/article/details/107415408

<a href="http://www.baidu.com">
     <img src="./images/wenjianjia.jpg" width="60px">百度
</a>

效果如下：（这里的文件夹是个图片哦）