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 )作为一种标记语言,网页所有的内容均书写在标签内部,标签是 ...
随机推荐
- mxonline实战-1,创建应用及相应模型
前言 环境说明:python3.5 + django2.0, 用的pycharm4.04专业版 课程视频地址 https://coding.imooc.com/learn/list/78. ...
- django实战-留言板
对应github链接:https://github.com/pshyms/django/tree/master/liuyanban 第一天 1. 创建一个新项目后,新建一个应用程序 python ma ...
- react onclick传递参数
最近在做react项目的时候,被一个小问题绊了一脚,记录一下 onClick 传入参数 onClick={e=>{this.Mallclose(e,index)} onClick={this.M ...
- POJ 2209
#include<iostream> #include<stdio.h> #include<algorithm> #include<math.h> #d ...
- 【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
- 最新版chrome浏览器如何离线安装crx插件?(转载)
原文链接:https://newsn.net/say/chrome-crx-offline.html mac新版chrome开启离线插件安装 对于mac新版chrome,注意,大家一定要按照顺序来.m ...
- FileRecv VNCViewer 使用方法
版本 区别 一路点点点 . 就ok了 看到这个页面 点击 vnc viewer 输入 老师 会告诉你 IP地址 点击 就ok
- hiho# 1398 最大权闭合子图 网络流
题目传送门 题意:给出n个活动,m个人,请人需要花费$a[i]$的钱,举办一次活动可以赚$b[i]$的钱,但是需要固定的几个人在场,一个人只需要请一次后就必定在场,问最大收益. 思路: 下列结论来自h ...
- 完美解决Bootstrap4 导航栏 fixed-top 后,锚点定位时遮挡问题
利用锚点改变事件\(onhashchange\),使用jQuery的\(scrollTop\)向前滚回导航栏的高度(比如我的100个像素) HTML: <body onhashchange=&q ...
- nRF51822EK_PRO
ARMCC5LIB = C:\Keil\ARM\ARMCC\lib dd if=/dev/zero of=tmp.500M bs=500M count=1 Developer Home