标签分类:

一、块标签:块标签是指本身属性为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)默认排列方式为从左到右

HTML标签类型的更多相关文章

  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  2. 第五篇、HTML标签类型

    <!--1.块级标签 独占一行,可以设置高度和宽度 如:div p h ul li  -----display: none(隐藏标签) block(让行内标签变块级标签) inline(让块级标 ...

  3. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  4. 创建标签的两种方法insertAdjacentHTML 和 createElement 创建标签 setAttribute 赋予标签类型 appendChild 插入标签

    1. 建立字符串和insertAdjacentHTML('beforeEnd', ) 2. 通过createElement 创建标签  setAttribute 赋予标签类型 appendChild ...

  5. NFC 标签类型

    NFC 标签类型 Type 1:Type 1 Tag is based on ISO/IEC 14443A. This tag type is read and re-write capable. T ...

  6. 伪类的格式重点:父标签层级 & 当前标签类型

    伪类的格式重点:父标签层级 & 当前标签类型 通过例子说明: css1: span:nth-of-type(2){color: red;} css2: span :nth-of-type(2) ...

  7. CSS3新增特性\HTML标签类型

    RGBA:透明度      作用: 设置透明度(R G B A)   opacity:不透明度     文字也会被设置不透明度   圆角      border-radius:圆角{左上角,右上角.. ...

  8. CSS的标签类型

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. mybatis <collection>标签 类型为string时无法获取重复数据错误

    1.场景: fyq_share_house 表 和 fyq_sh_tag 表 两张表是一对多的关系, 一个楼盘对应多个标签,在实体类ShareHouse中使用 /** * 楼盘标签 */ privat ...

  10. HTML标签类型及特点

    关键词:块级元素  行级元素 行内块元素   一. 概述           HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是 ...

随机推荐

  1. 总结day23 ---- 网络编程,以及计算机基础概念

    计算机网络的发展及基础网络概念 问题:网络到底是什么?计算机之间是如何通信的? 早期 : 联机 以太网 : 局域网与交换机 广播 主机之间“一对所有”的通讯模式,网络对其中每一台主机发出的信号都进行无 ...

  2. ansible api2.0 多进程执行不同的playbook

    自动化运维工具:ansible 多进程调用ansible api的应用场景:   应用系统检查 一个应用系统可能具有20—50台服务器的集群,初步的系统层面检查可以用一个统一的playbook来检查, ...

  3. Java中常见的jar包及其主要用途

    jar包        用途 axis.jar     SOAP引擎包 commons-discovery-0.2.jar     用来发现.查找和实现可插入式接口,提供一些一般类实例化.单件的生命周 ...

  4. 晦涩难懂的shell命令

    初学shell脚本,过程中发现许多不易于理解的脚本语言,网上各种查找学习之后,择优精简一番,做出以下总结,方便以后遗忘了回顾,也为像我一样的初学者提供方便——推荐给初学者的一本书:<Linux ...

  5. C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  6. Oracle数据库学习(一):虚拟机下Oracle Linux的安装与配置

    这篇博文主要以图片的形式讲述Oracle Linux在虚拟机下的安装与配置 一.前期虚拟机安装ISO文件的配置 1.创建新的虚拟机 2.选择“自定义(高级)”选项,下一步,默认“虚拟机硬件兼容性”或选 ...

  7. 常见的http错误提示

    1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 (继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101 (切换协议 ...

  8. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...

  9. (转)[小工具] Linux下列格式化工具 - column

    当你看到Linux下命令输出的列歪歪扭扭时,是不是看着很不爽?column 命令就可以方便地解决这个问题. 比如: 我们一般就只用到上面这一个用法. column的其他用法如下: 选项 含义 -c 字 ...

  10. ActiveMQ:Exception occurred while processing this request, check the log for more information!

    出现上面错误的原因有以下两种 1 jdk的版本和activemq的版本不符 安装完ActiveMQ之后,通过http://IP:8161登陆到控制台. 通过测试代码给服务端发送队列消息,在控制台点击q ...