第三周学习日志2

Ben-bird

已于 2024-04-01 18:33:32 修改

阅读量306

点赞数 4

分类专栏：日报周报文章标签：学习

于 2024-03-27 17:18:39 首次发布

本文链接：https://blog.csdn.net/m0_74484441/article/details/137029537

版权

日报周报专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习来源：B站千锋前端 P14-P20

学习成果：了解了HTML列表，图片标签的路径（相对路径，绝对路径），图片标签的属性，超链接标签

学习记录：

1.列表

1.1无序列表

（1）<ul>里面只能放<li>，<li>里面可以放其他标签

（2）默认的是黑色实心圆

（3）type ——disc(默认黑色实心圆) ,circle(圆圈空心) , square(方块实心) , none(用的最多)
<body>
    <ul type="none">
        <li>你好</li>
        <li>世界</li>
    </ul>
</body>
1.2有序列表

（1）<li>里面可以随意放标签，但<ol>里面只能放<li>

（2）数字是自动生成的

（3）有序类型 type:1 , a , A , i , I 只有这五种排序方式，如若不是则按照默认模式进行排序1,2,3......

（4）start:取值只能是一个数字，用于改变排序的初始值
<body> 
    <ol type="a">
        <li>把冰箱打开</li> 
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>

</body>

--------------------------------------------------------
<body> 
    <ol type="A" start="3">     
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>

</body>
1.3自定义列表

（1）图文混排的方式

（2）快捷键
dl>dt按空格:

<dl>
    <dt></dt>
</dl>
------------------------------------------
dl>dt+dd按空格：

<dl>
    <dt></dt>
    <dt></dt>
</dl>

------------------------------------------
dl>dt{1111111}+dd{2222222}按空格：

<dl>
    <dt>1111111</dt>
    <dt>2222222</dt>
</dl>
（3）对应代码
<body>
    <dl>
        <dt>我是图片</dt>
        <dt>我是文字</dt>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dt>我是文字</dt>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dt>我是文字</dt>
    </dl>
    
</body>

2.图片标签的路径

路径分类：绝对路径，相对路径

（1）绝对路径：指文件在硬盘上真正存在的路径。

绝对路径在实际开发过程中很少去使用，在本地计算机可以正常使用，但是上传到Web服务器上浏览就很有可能不会显示图片。

绝对路径可以使用“\”或“/”字符作为目录的分隔字符。

（2）相对路径：相对于自己的目标文件位置。
文件夹：
>>>code
   >>BBBcode
       >3img.html
   >>AAAimg
       >1.png
   >>img.html
   >>2.png


注意注意：code作为根目录，code作为根目录！！！！！



相对路径:

1.当前(同级)目录下的文件夹下的子文件：

<img src="AAAimg/1.png">  或  <img src="./AAAimg/1.png">   


2.当前（同级）目录下：

<img src="2.png">   或  <img src="./2.png">  

3.返回上一级../  在同级目录找到子文件


<img src="../AAAimg/1.png"    或   <img src="../2.png">

3.图片标签的属性

图片属性 ——alt title width height

<img src="01.jpg" alt="因某些原因加载不出来，给出提示：如刷新页面" title="鼠标放在图片上方，显示想表达的文字">

<img src="01.jpg" width="200px" height="200px">

<img src="01.jpg" width="200px">   给出宽度，图片等比例缩放，不会失真

<img src="01.jpg" heigth="200px">

4.超链接标签

（1）能够实现不同页面的跳转

（2）超链接标签：href不写路径，相当于当前页面，即该超链接被访问过了

（3）属性：target="_self" 默认值在本窗口打开

target="_blank" 在新窗口打开
<a href="路径"  title="鼠标悬停上去之后的提示信息"  target="规定在何处打开文档">内容可以是含有标签</a>