HTML学习笔记四——HTML常见标签二

一、常见标签

1. 块标签div

div标签，用来划分页面区域，独占一行。

格式：<div>文本内容</div>

2. span标签

span标签，对文本独立修饰，例如：在一段文本中，部分文本需要不同样式时，可套一层span进行样式修改，且内容多大，其占据位置就多大。

格式：<span>文本内容</span>

3. 列表

• 有序列表
  ol标签，内部只能放li标签，li标签内可以放任意标签。
  特点：自动生成数字
  属性：
   type——设置排序形式，一般默认为1、2、3排序，取值只有1、a、A、i、I
   start——设置排序从哪开始，与type搭配使用，且取值只能为一个数字，表示从第几个开始
   当type为a，start为27时，序号从aa开始
  格式：
    <ol type=“属性值” start=“属性值”>
      <li>第一条内容</li>
      <li>第二条内容</li>
    </ol>

• 无序列表
  ul标签，内部只能放li标签，li标签内可以放任意标签。
  属性：
   type——设置文本前的标记形式，一般默认为黑色的实心圆，取值有disc（默认）、circle（空心圆）、square（正方形）、none（取消标记）
  格式：
    <ul type=“属性值”>
      <li>第一条内容</li>
      <li>第二条内容</li>
    </ul>

• 自定义列表
  dl标签，内部能放dt标签和dd标签，常用于图文混排，即上图下文形式，dt为图片部分，dd为文字部分且dd有默认间距。
  一般情况下，一个dl中只放一个dt和一个dd，多个图文分为多个dl创建。
  格式：
    <dl>
      <dt>图片</dt>
      <dd>文字</dd>
    </dl>

4. 图片标签

img标签属于单标签
属性：
  src——设置图片路径；
  alt——图片加载失败时，展示给用户的提示；
  title——鼠标悬停在图片上时，展示图片标题，该属性无论图片加载成功与否都有效；
  width——图片宽度；
  height——图片高度；
 只设置图片宽度或者高度时，另一属性会等比例更改
标签格式：
  <img src=“属性值” alt=“属性值” />
图片路径格式：
 一、相对路径
  1、同级目录
  图片与代码文件位于同一目录中，有两种形式：code.gif 和 ./code.gif
  ./表示当前路径
  2、下一级目录
  图片在该代码文件的任一同级文件夹内部，有两种形式：brother/code.gif 和 ./brother/code.gif
  2、上一级目录
  图片与该代码文件的上一级目录位为同一目录，形式为../code.gif
  ../表示返回上一级
 二、绝对路径
  指的是文件在硬盘中真正存在的路径，例如：D:\123\Pictures\1.jpg。
  分隔符号用 “/” 或 “\” 均可
  该路径只有在自己的计算机中才能显示正常，上传至服务器后图片很可能无法显示，因此几乎不用。
  原因：协议不同，file协议与http协议

二、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！