[19/05/14-星期二] HTML_body标签(列表标签和图片标签)

一、列表标签

<!-- 快捷键 1、<meta charset="UTF-8"/>  用m6可直接写出
           2、复制当前1行到下一行 ctrl+shift+R   
    
-->

<html>
    <head>
        <title> 02 body标签(列表标签)的学习</title>
        <meta charset="UTF-8"/>
    </head>
    <!--
        列表标签：
        1、有序列表 
         ol
            li：一个li标签代表一行数据 ,自动对数据进行编号,默认从1开始小到到大编号.可以通过type自定义
        2、无序列表
          u1
            li：该标签中书写的列表内容,一个li标签代表一行数据 默认数据前有个黑点.(黑点可以去除用CSS)
        3、自定义列表
          dl
            dt:数据的标题。前边没有空格
             dd:数据的内容。前边有个制表符
    
          
    -->
    <body>
        <h3>列表标签的学习</h3>
        <hr />
        <h3>业余爱好：</h3>
        <!--有序列表,3行数据之间有先后次序,默认从1开始变化.也可以设置让其从I、A、a等开始编号-->    
        <ol>
            <li>玩游戏</li>
            <li>拍篮球</li>
            <li>看电影</li>
        </ol>
        
        <ol type="A">
            <li>玩游戏</li>
            <li>拍篮球</li>
            <li>看电影</li>
        </ol>
                
        <hr />
        <h3>中国知名城市：</h3>
        <!--无序列表,3行数据之间没有先后次序-->        
        <ul>    
            <li>北京</li> 
            <li>上海</li>
            <li>南京</li>        
        </ul>
        <hr />
        <!--自定义列表-->        
         <dl>
             <dt>IT课程：</dt>
             <dd>Java</dd>
             <dd>Python</dd>
             <dd>大数据</dd>
         </dl>
        
        
        
    </body>
</html>

 二、图片标签

<html>
    <head>
        <title> 03 body图片标签学习</title>
        <meta charset="UTF-8"/>
    </head>
    <!--
        图片标签: 图片是不会自动换行的,他是行内元素
        img 
         src:图片的路径(绝对路径：从根盘符出发;  相对路径：从jpg文件(所在目录)出发查找另一个文件的路径,如果在
                  一个文件夹下,可以加载,如果没有加载失败) 一般本地资源(图片在自己电脑上)使用相对路径
          width:宽度  单独设置宽度或高度浏览器会在保证图片不失真的情况下自动缩小或放大 单位：px或 %
          height：高度
          title：当鼠标放上去可以看到图片的说明
          alt:当图片加载不成功是，会显示提示文字
          
   
   --> 
    <body>
        <!--使用本地资源-->
        <img src="../img/1.jpg" width="200px"/>
        <img src="../img/2.jpg" width="200px"/>
        <img src="../img/4.gif" width="200px" title="这是一个狗子在吹风扇"/>
        <img src="../img/5.gif" width="200px" alt="这是一个哈士奇"/>
        <hr />
        <!--使用网络资源-->
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2725440693,2929091497&fm=27&gp=0.jpg"
            width="400"/>
        
        
        
    </body>
</html>

 

posted @ 2019-05-16 21:43  ID长安忆  阅读(281)  评论(0)    收藏  举报