HTML标签类型

www3c学习网站

---

• HTML有N多标签，根基显示的类型，主要分为3大类

  • 块级标签：

    • 独占一行的标签

    • 能随时设置宽度和高度(比如div、p、h1、h2、ul、li)

      
      
      

      块级标签100.png

  • 行内标签：(内联标签)

    • 多个行内标签能同时显示在一行

    • 宽度和高度取决于内容的尺寸（span、a、label）

      
      
      

      行内标签.png

  • 行内-块级标签：(行内-块级标签)

    • 多个行内-块级标签能同时显示在同一行
    • 能同时设置宽度和高度（比如：input、button）

---

修改标签的显示类型

• CSS有个display属性，能改变标签的显示类型

  • none：隐藏标签

  • block：让标签变为块级标签
    

    
    
    
    

    block.png

  • inline: 让标签变为行内标签
    

    

    inline.png.png

  • inline-block： 让标签变为行内-块级标签

---

---

---

CSS属性(加粗为主要掌握，常用的)

• CSS有N多属性，根据继承性，主要分为2大类

  • 可继承性

    • 父标签的属性会传递给子标签
    • 一般是文字控制属性

  • 不可继承性

    • 父标签的属性不会传递给子标签
    • 一般是区块控制属性

---

• 所有标签度可以继承

  • visiblity：属性规定元素是否可见（Tip：display：none会把控件隐藏，还不用占用空间；而visiblity：hidden会把控件隐藏，但保留之前控件所占用的空间）

    • visiblity的用法

  • sursor：属性规定要显示的光标的类型(形状)

    
    
    

    光标的类型.png
    • sursor的用法

• 内联(行内)标签可以继承

  • letter-space、word-space、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

• 块级标签可继承

  • text-indent
  • text-align

• 列表标签可继承

  • list-style：主要掌握
  • list-style-type
  • list-style-position
  • list-style-image
    • list-style的用法

---

• 不可以继承属性

不可以继承属性.png

• display、margin、border、padding、background

  • background：包括背景和图片

    
    
    
    
    
    

    background.png
• height、min-height、max-height、width、min-width、max-width（盒子模型）
• overflow、position、left、right、top、bottom、z-index

  • overflow：相当于OC的clipToBounce

    
    
    

    overflow.png