列表标签

  • 无序列表-ul li
    • ul li:该标签中书写列表内容,一个li标签代表列表中的一行数据
    • 特点: 默认数据前有一个黑圆圈符号.
  • 有序列表-ol li
    • ol li:该标签中书写列表内容,一个li标签代表列表中的一行数据
    • 特点:会自动的给列表进行顺序编码,格式从小到大并且是连续的.
    • 属性:type:可以改变顺序编码的值,可以是1 a A I,,默认使用阿拉伯数字进行顺序编码
  • 自定义列表-dl dt dd
    • dl dt:数据的标题 dd:数据的具体内容,一个dd表示一条数据.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <ul>
      <li>北京</li>
      <li>上海</li>
      <li>商丘</li>
      </ul>
      <ol type="I">
      <li>打游戏</li>
      <li>打球</li>
      <li>看电影</li>
      </ol>
      <dl>
      <dt>IT课程:</dt>
      <dd>java课程</dd>
      <dd>python课程</dd>
      <dd>大数据课程</dd>
      <dt>热门旅游城市:</dt>
      <dd>商丘</dd>
      <dd>周口</dd>
      <dd>新乡</dd>
      </dl>

      图片标签-img

  • img标签
  • 属性
    • src:图片路径
      • 本地资源路径:一般本地图片资源使用相对路径即可
      • 网络资源路径:图片资源的URL地址
    • width
      • 设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
      • 单位可以是px也可以是百分比
    • height
      • 设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
      • 单位可以是px也可以是百分比
    • title:图片标题,鼠标放在图片上的时候会显示
    • alt:图片加载失败后的提示语
  • 注意:图片是不会自动换行的(行内元素)
  • 相对路径:从当前文件出发查找另一个文件所经过的路径
  • 绝对路径:从根盘符出发所查找文件的路径

超链接标签-a

  • a标签-<-a>访问方式<-a/>
  • 属性
    • href:要跳转的网页资源路径
      • 本地资源:相对路径
      • 网络资源:网络资源(网页)的URL
      • href=”#” 空超链接 可以回到页面顶部
    • target:指明要跳转的网页资源的显示位置
      • _self 在当前页中刷新显示(默认)
      • _blank 在新的标签页中显示
      • _top 在顶层页面中显示
      • _parent 在父级页面中显示
  • 注意:超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片.在a标签中书写访问方式,可以嵌套一个img标签
  • 锚点学习
    • 作用:在一张网页中进行资源跳转
    • 使用:
      • 先使用超链接标签在指定的网页位置增加锚点.格式为:<-a name=”锚点名” ></-a>
      • 使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:<-a href=”#锚点名” >访问方式</-a>