HTML元素以及HTML元素的分类
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 | 图片 |
HTML元素以及HTML元素的分类的更多相关文章
- HTML元素分类:块级元素 内联元素和内联块状元素
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1 ...
- html 标签内联元素和块元素分类【转】
常见的块状元素与内联元素 块状元素 内联元素 address - 地址 blockquote - 块引用 center - 居中对齐 dir - 目录列表 div - 常用块级容易,也是CSS lay ...
- HTML元素分类 块级元素 内联元素 块级内联元素
概述 HTML中存在许多元素,如<h1>,<p>,<a>,<block>,<image>,这些元素可分为三类,依次是块级元素,内联元素,块级 ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- HTML行内元素、块状元素、行内块状元素的区别
HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内 ...
- HTML中的行内元素和框元素详解
定义 传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统. 其实框元素是指宏观上的框元素,它包括3种类型:1.本身就是块级元素 2.dispaly被设置为类block 3 ...
- HTML行内元素、块状元素和行内块状元素的区分
HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- Html 内联元素、外联元素 和 可变元素
块元素(block element)一般是其他元素的容器元素 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它 ...
随机推荐
- YTU 2640: 编程题:运算符重载---矩阵求和
2640: 编程题:运算符重载---矩阵求和 时间限制: 1 Sec 内存限制: 128 MB 提交: 484 解决: 190 题目描述 /* 有两个矩阵a和b,均为2行3列.求两个矩阵之和. 重 ...
- lucene .doc里存储的skiplist跳表
http://forfuture1978.iteye.com/blog/546841 见图: lucene-6.5.1-src/lucene-6.5.1$ grep "skiplistwri ...
- UVA - 12345 带修改的莫队
题意显然:给出初始序列,单点修改,区间查询元素的种类. 由于时限过宽,暴力可过. 比较优秀的解法应该是莫队. 带修改的莫队题解可以看https://www.luogu.org/blog/user126 ...
- Java IO流中 File文件对象与Properties类(四)
File类 用来将文件或目录封装成对象 方便对文件或目录信息进行处理 File对象可以作为参数传递给流进行操作 File类常用方法 创建 booleancreateNewFile():创建新文件,如果 ...
- 计算属性 computed
计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...
- [转]使用git进行版本控制
使用git进行版本控制 本文将介绍一种强大的版本控制工具,git的基本使用.与之前svn工具类似,首先给出一些常见的使用需求,然后以这些需求为中心,来展开git的学习过程.由于我也是在学习当中所以其中 ...
- bzoj 4756: [Usaco2017 Jan]Promotion Counting【dfs+树状数组】
思路还是挺好玩的 首先简单粗暴的想法是dfs然后用离散化权值树状数组维护,但是这样有个问题就是这个全局的权值树状数组里并不一定都是当前点子树里的 第一反应是改树状数组,但是显然不太现实,但是可以这样想 ...
- bzoj 1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛【dp+树状数组+hash】
最长上升子序列.虽然数据可以直接n方但是另写了个nlogn的 转移:f[i]=max(f[j]+1)(a[j]<a[i]) O(n^2) #include<iostream> #in ...
- bzoj4720: [Noip2016]换教室(期望dp)
4720: [Noip2016]换教室 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 1294 Solved: 698[Submit][Status ...
- 为什么前后端分离不利于seo
搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析. 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面, ...