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 )作为一种标记语言,网页所有的内容均书写在标签内部,标签是 ...
随机推荐
- 对于一些seo查询网站的整理
个人在查找网站seo问题时所使用的一些网站整理以及一些注意事项(同时感谢在处理问题过程中给予帮助的小伙伴们): 1.seo综合查询 (爱站网/站长工具)这俩工具的计算规则不相同所以计算结果出来也 ...
- 集合之六:Map接口
Map接口概述 Map接口中的集合和Collection接口中的集合在存储数据的格式上有很大的不同,Map接口下的内容是以<K , V> ,键值对的形式存储的,我们查询API,Map接口的 ...
- thinkphp5.0 CURL用post请求接口数据
//测试 请求接口 public function index(){ $arr = array('a'=>'555','b'=>56454564); $data=$this->pos ...
- 【性能调优】:记录一次数据库sql语句性能调优过程
一,依旧很简单的一个接口,查询列表接口,发现10并发单交易场景下,数据库表4w铺底数据,每次查询2000条数据进行orderby显示,平均响应时间2秒以上,数据库的cpu使用率高达95%: 二,抓到这 ...
- CentOS7编译curl
1.下载curl源代码 https://curl.haxx.se/download.html 2.进入curl目录 ./configure --prefix=/usr/local/curl make ...
- Bunder: What does :require => nil in Gemfile mean?
https://stackoverflow.com/questions/12200215/bunder-what-does-require-nil-in-gemfile-mean Require ni ...
- AES加密的四种模式详解
对称加密和分组加密中的四种模式(ECB.CBC.CFB.OFB) 一. AES对称加密: A ...
- 深度学习(二)BP求解过程和梯度下降
一.原理 重点:明白偏导数含义,是该函数在该点的切线,就是变化率,一定要理解变化率. 1)什么是梯度 梯度本意是一个向量(矢量),当某一函数在某点处沿着该方向的方向导数取得该点处的最大值,即函数在该点 ...
- Ibatis SqlMap映射关系总结
一.一对一关系一对一关系即一对单个对象,下面举例说明:一对单个对象例如:<resultMap id="loadAResult" class="A"> ...
- Memcached分布式算法详解--转
http://xiexiejiao.cn/java/memcached-consistent-hashing.html Memcached分布式算法在网上一搜可以找到一大片了,不过对于Memcache ...