HTML元素以及HTML元素的分类
2024-09-30 22:28:15
HTML元素以及HTML元素的分类
html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念
块级元素
含义:块级元素是指本身属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建
- 独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
- 可以直接控制宽度、高度以及盒子模型的相关css属性(width/height/border/margin/padding)
- 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下,块级元素的高度是它本身内容的高度
- 可以嵌套其他元素
- ul li、ol li 、dl dt dd 成组出现,p标签不能嵌套它自己本身
标签 | 作用 |
div | 常用块级容器,也是css layout的主要标签 |
h1 | 大标题 |
h2 | 副标题 |
h3 | 三级标题 |
h4 | 四级标题 |
h5 | 五级标题 |
h6 | 六级标题 |
hr | 水平分隔线 |
menu | 菜单列表 |
ol | 有序列表 |
ul | 无序列表 |
li | 列表项 |
dl | 定义列表 |
dt | 定义标题 |
dd | 定义描述 |
table | 表格 |
p | 段落 |
form | 交互表单 |
行内元素
行内(内联)元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的搭建.
- 和其他内联元素从左到右在一行显示,从左到右,达到父级元素的最大宽度时,会自动折行
- 不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
- 内联元素的宽高是由本身内容的大小决定(文字、图片等)
- 内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
- 在编辑代码时,元素之间有回车或者换行的时候,元素和元素之间有间隙
标签 | 作用 |
span | 常用内联容器,定义文本内区块 |
a | 锚点 |
b | 加粗 |
strong | 加粗强调 |
i | 斜体 |
em | 斜体强调 |
s | 中划线(不推荐使用) |
strike | 中划线 |
del | 文档中已被删除的文本 |
br | 强制换行 |
u | 下划线 |
textarea | 多行文本输入框 |
input | 输入框 |
select | 下拉列表 |
label | input 元素定义标注(标记) |
img | 插入图片 |
sub | 下标 |
sup | 上标 |
big | 大字体文本 |
small | 小字体文本 |
行内块级元素
- 在一行排布,从左到右,达到父级元素的最大宽度时,会自动折行
- 设置盒子模的CSS属性
- 默认不设置宽度和高度的时候,宽高都是由本身内容决定的
- 在编辑代码时,元素之间有回车或者换行的时候,元素和元素之间有间隙
标签 | 作用 |
textarea | 文本域 |
input | 输入框 |
img | 图片 |
最新文章
- LeetCode:Word Ladder I II
- OC基础--类的本质
- SPRING 标签库
- PetShop的系统架构设计
- js checkbox
- php中CURL技术模拟登陆抓取数据实战,抓取某校教务处学生成绩。
- Word中封面的问题
- 201521123110《Java程序设计》第12周学习总结
- IDE
- Docker最全教程之Go实战,墙裂推荐(十八)
- python3 字符编码与转码的理解
- 记一次easywechat企业付款问题
- vue+webpack 安装常见插件
- HTML 引入Css样式
- 新增async
- 20) maven 项目结构:all in one
- ASP.NET HttpModule URL 重写 (一) 【Z】
- How to Pronounce the Word SOMETHING
- Java虚拟机性能监控与调优
- Java-web-j2e学习建议路线【转】
热门文章
- curl HTTP_USER_AGENT
- 8-2 canvas专题-线条样式
- 【USACO 2017Feb】 Why Did the Cow Cross the Road
- python-----使用requirements.txt批量安装包
- Angular学习日记(一) 开发环境的搭建
- js moment.js日期操作类 datetime,日期操作,dayjs
- bzoj 1584: [Usaco2009 Mar]Cleaning Up 打扫卫生【dp】
- bzoj 1670: [Usaco2006 Oct]Building the Moat护城河的挖掘【凸包】
- Android项目模块化遇到的问题
- S - Cyclic Components (并查集的理解)