常用HTML标签（一）

1）块级标记

• div标签
  搭建网页结构的基本标签——盒子；无语义标签

• - 特性
      - 宽度默认撑满整个父元素
      - 高度默认由内容撑开
      - 独立成行——垂直布局
  
      作用：可以用来划分页面的区块，里面嵌套任何的标签

 

• h系列标签：标题标签
  标题标签中文字大小依次减小，重要程度依次减弱。
  注意事项：h1标题一个页面中只有一个，h2~h6是可以有多个的。

• - 特性
      - 宽度默认撑满整个父元素
      - 高度默认由内容撑开
      - 独立成行——垂直布局
      - 自带外间距
      - 自带加粗效果
      
      应用场景：
      - logo
      - 文章页标题、内容章节标题
      - 产品标题
      - 模块标题等

• p标签：段落标记

• - 特性
      - 宽度默认撑满整个父元素
      - 高度默认由内容撑开
      - 独立成行——垂直布局
      - 自带外间距
      
      应用场景：文章中的段落、页面中的文字块
      
        注意：p标签不能嵌套块级标签，例如：div，p,h1~h6

•  hr标签：水平分割线 块级标记

 

- 特性
      - 默认自带间距、自带边框 
      
      作用：在页面中显示一条水平线

2）行级标记 

• span标签:无语义标签，用于区分样式
  • 没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容
  • 应用场景：控制局部文本的样式
• b标签：一个实体标签，它里面包围的文本显示粗体效果
• strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果
• i标签：它里面包围的文本显示斜体效果
• em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果
• del标签：删除线
• sup标签：上标
• sub标签：下标
• a标签：超链接标签

- 特性
  - 宽度默认由内容撑开
  - 高度默认由内容撑开
  - 默认横向显示——水平布局，一行排不下，自动折行
  - 换行和空格会被解析 

a:超链接标签
        href:跳转的路径；
        网址，本地文件，空链接（#占位，跳转到当前页的顶部），伪链接（href="javascript:"假链接，不跳转的）
        title:提示信息的作用
        target:被链接文档在哪里显示
              1.target='_self' 在当前窗口跳转,默认值
              2.target='_blank'在新窗口跳转
          语法：
          <a href="">内容</a>
          特性：
          1.宽度默认由内容撑开
          2.高度默认由内容撑开
          3.默认横向显示，水平布局，一行排不下，自动折行
          4.换行和空格会被解析
          5.自带文字颜色
          6.自带下划线
          7.鼠标指针的形状为手型
          8.去掉a标签下划线text-decoration: none;

3）行内块级标记 

img标签：图像标签 

img标签
        语法：<img src="" alt="">
        src:图片的路径
        ../../表示上上级目录
        alt:用来为图片定义预备的替换文本，当图片路径错误时或者浏览器无法加载图片时显示这个文本
        title:提示信息的作用,鼠标悬停在图片时显示提示信息
        width：宽度
        height:高度
        特性：
        1.默认横向显示，水平布局，一行排不下，自动折行
        2.换行和空格会被解析
        3.可以设置宽高