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)默认排列方式为从左到右
HTML标签类型的更多相关文章
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- 第五篇、HTML标签类型
<!--1.块级标签 独占一行,可以设置高度和宽度 如:div p h ul li -----display: none(隐藏标签) block(让行内标签变块级标签) inline(让块级标 ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- 创建标签的两种方法insertAdjacentHTML 和 createElement 创建标签 setAttribute 赋予标签类型 appendChild 插入标签
1. 建立字符串和insertAdjacentHTML('beforeEnd', ) 2. 通过createElement 创建标签 setAttribute 赋予标签类型 appendChild ...
- NFC 标签类型
NFC 标签类型 Type 1:Type 1 Tag is based on ISO/IEC 14443A. This tag type is read and re-write capable. T ...
- 伪类的格式重点:父标签层级 & 当前标签类型
伪类的格式重点:父标签层级 & 当前标签类型 通过例子说明: css1: span:nth-of-type(2){color: red;} css2: span :nth-of-type(2) ...
- CSS3新增特性\HTML标签类型
RGBA:透明度 作用: 设置透明度(R G B A) opacity:不透明度 文字也会被设置不透明度 圆角 border-radius:圆角{左上角,右上角.. ...
- CSS的标签类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- mybatis <collection>标签 类型为string时无法获取重复数据错误
1.场景: fyq_share_house 表 和 fyq_sh_tag 表 两张表是一对多的关系, 一个楼盘对应多个标签,在实体类ShareHouse中使用 /** * 楼盘标签 */ privat ...
- HTML标签类型及特点
关键词:块级元素 行级元素 行内块元素 一. 概述 HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是 ...
随机推荐
- CentOS6.5下samba服务
为减少错误已提前关掉了SELinux,防火墙. 安装rpm包: samba-3.6.9-164.el6.x86_64.rpm 启动检测:samba服务可以正常启动!(证明RPM安装正常) 配置文件位置 ...
- Linux系统NAT模式下设置网络网关
1.配置Vm网络编辑器 2.配置固定IP地址 命令:vi /etc/sysconfig/network-scripts/ifcfg-ens33 #下面内容直接复制进去,如果有重复的可以去除 TYPE= ...
- 并发编程>>并发级别(二)
理解并发 这是我在开发者头条看到的.@编程原理林振华 有目标的提升自己会事半功倍,前行的道路并不孤独. 1.阻塞 当一个线程进入临界区(公共资源区)后,其他线程必须在临界区外等待,待进去的线程执行完成 ...
- python科学计算与可视化
一.Numpy 库 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. 引用: import ...
- 03-树2 List Leaves (25 分)
Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...
- C#静态和实例
静态 实例 关键字static修饰类或方法 不能使用static修饰类或方法 修饰后类直接调用 需要先实例化对象,用对象调用 静态只会执行调用一次,并且在程序退出之前会一直保持状态,占领内存 实例化一 ...
- 2019.4.24 3D效果滚筒导航练习
效果图: 彩千圣天下第一!(小声bb) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- ArduinoNano卡在上传,无法烧录
卡在“上传...”.过了很久被告知失败. 上午在开发版管理器中将Arduino AVR Boards从1.6.20升级到1.6.22,出现这个问题. 再安装回1.6.20,问题未被解决. 查阅资料无果 ...
- (转)MySQL高可用解决方案
MySQL高可用解决方案 原文:http://www.ywnds.com/?p=5565 有这么两个概念,数据库的可靠性和数据库的可用性,可靠性指的是数据可靠,而可用性指的是服务可用.但是不管是可靠性 ...
- Redis快照持久化
Redis的持久化功能: redis为了内部数据的安全考虑,会把本身的数据以文件的形式保存到硬盘中一份,在服务器重启之后会自动把硬盘的数据恢复到内存(redis)里边. 数据保存到硬盘的过程就被称为” ...