zoukankan      html  css  js  c++  java
  • HTML标签类型

    标签分类:

    一、块标签:块标签是指本身属性为display:block;的元素。

                          1.默认占一行可以设置宽高,

                          2.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

                          3.在不设置高度的情况下,块级元素的高度是它本身内容的高度

                          4.块标签的居中问题:块级标签左右居中:先设置自身width;然后,margin: 0 auto;

    常用的块标签

    标签描述
    div 常用块级容器,也是css layout的主要标签
    h1 大标题
    h2 副标题
    h3 三级标题
    h4 四级标题
    h5 五级标题
    h6 六级标题
    hr 水平分隔线
    menu 菜单列表
    ol 有序列表
    ul 无序列表
    li 列表项
    dl 定义列表
    dt 定义术语
    dd 定义描述
    table 表格
    p 段落
    form 交互表单


    二、行标签:行标签是指本身属性为display:inline;的元素。

                          1.默认不占一行,不可以设置宽高,大小根据内容来

                          2.内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

                          3.子级行标签之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size

                             行标签居中:由于行标签自身不支持width,使用在父级元素设置text-alian : center

    常用的行标签

    标签描述
    span 常用内联容器,定义文本内区块
    a 锚点
    b 加粗
    strong 加粗强调
    i 斜体
    em 斜体强调
    s 中划线(不推荐使用)
    strike 中划线
    del 文档中已被删除的文本
    br 强制换行
    u 下划线
    textarea 多行文本输入框
    input 输入框
    select 下拉列表
    label input 元素定义标注(标记)
    img 引入图片
    sub 下标
    sup 上标
    big 大字体文本
    small 小字体文本


    三、行内块标签:

    1.默认不占一行,可以设置宽高

    2.通过设置float属性也会将元素转换为行内块标签

       通过定位属性fix, absolute都可以将元素转换为行内块标签

       设置样式 display: inline-block;转换为行内块标签

    总结:HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:

      (1)display:inline;转换为行内元素

      (2)display:block;转换为块状元素

      (3)display:inline-block;转换为行内块状元素

    1.块状元素特征:(1)能够识别宽高

            (2)margin和padding的上下左右均对其有效

            (3)可以自动换行

            (4)多个块状元素标签写在一起,默认排列方式为从上至下

    2.行内元素特征:(1)设置宽高无效

            (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

            (3)不会自动进行换行

    3.行内块状元素特征:(1)不自动换行

              (2)能够识别宽高

              (3)默认排列方式为从左到右

  • 相关阅读:
    ThinkPHP where方法:设置查询或操作条件
    微信小程序showToast延迟跳转页面
    uniapp微信小程序授权登录
    什么是二维码,什么是QR码?
    微信小程序授权登录开发流程图
    微信小程序提交审核并发布详细流程(一)
    微信小程序提交审核并发布详细流程2
    uniapp医院预约挂号微信小程序
    《爆款文案》写文案只需要四个步骤
    Spark学习笔记——读写ScyllaDB
  • 原文地址:https://www.cnblogs.com/lxx2014/p/9896704.html
Copyright © 2011-2022 走看看