html 指定对象为块元素,html内联(行内)元素、块级(块状)元素和行内块元素分类...

HTML可以将元素分类方式分为内联(行内)元素、块级(块状)元素和行内块元素三种。

注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内联元素,为防止不同浏览器解析不同的问题,建议通过css的display属性来规定自定义元素的属性。相信使用过UI框架的朋友,会看到一些html手册以外的一些元素,其实这些都是一些自定义的元素。

首先需要说明的是,这三者是可以互相转换的,使用css的display属性能够将三者任意转换:

CSS display 属性

属性值

描述

none

此元素不会被显示。

block

此元素将显示为块级元素,此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block

行内块元素。(CSS2.1 新增的值)

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

compact

CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

marker

CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

table

此元素会作为块级表格来显示(类似

inline-table

此元素会作为内联表格来显示(类似

table-row-group

此元素会作为一个或多个行的分组来显示(类似

)。

table-header-group

此元素会作为一个或多个行的分组来显示(类似 )。

table-footer-group

此元素会作为一个或多个行的分组来显示(类似

)。

table-row

此元素会作为一个表格行显示(类似

)。

table-column-group

此元素会作为一个或多个列的分组来显示(类似

)。

table-column

此元素会作为一个单元格列显示(类似

)

table-cell

此元素会作为一个表格单元格显示(类似

和 )

table-caption

此元素会作为一个表格标题显示(类似

)

inherit

规定应该从父元素继承 display 属性的值。

例:

p {

display: inline

}

div {

display: none

}

本例中的样式表把段落元素设置为内联元素。

而 div 元素不会显示出来!

div 元素的内容不会显示出来!

显示结果:

6b2f77a06535c5173a69a48e0b692a5b.png

1.内联(行内)元素

行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体标签,还有这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。

行内元素特征:(1)设置宽高无效

(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

(3)不会自动进行换行

2.块级(块状)元素

块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。

块状元素特征:(1)能够识别宽高

(2)margin和padding的上下左右均对其有效

(3)可以自动换行

(4)多个块状元素标签写在一起,默认排列方式为从上至下

3.行内块元素

行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

行内块状元素特征:(1)不自动换行

(2)能够识别宽高

(3)默认排列方式为从左到右

4.同一类型的元素,到底该用哪个。

其实同一类型的元素,属性是一样的,显示出的效果也一样,用哪个都可以。可是为了代码的可读性,规范化,建议特定的场景用特定的元素。

比如:盒子容器用div,文字段落用p,反过来效果一样,但不符合规范。

块级元素和行内元素的分类

html中的块级元素:

标签

描述

定义地址。

定义文章。

定义页面内容之外的内容。

定义声音内容。

定义长的引用。

定义图形。

定义表格标题。

定义定义列表中项目的描述。

定义文档中的节。

定义定义列表。

定义定义列表中的项目。

定义元素的细节。

定义围绕表单中元素的边框。

定义 figure 元素的标题。

定义媒介内容的分组,以及它们的标题。

定义 section 或 page 的页脚。

定义供用户输入的 HTML 表单。

to

定义 HTML 标题。

定义 section 或 page 的页眉。


定义水平线。

定义 fieldset 元素的标题。

定义列表的项目。

定义命令的列表或菜单。

定义预定义范围内的度量。

定义导航链接。

定义针对不支持框架的用户的替代内容。

定义针对不支持客户端脚本的用户的替代内容。

定义有序列表。

定义输出的一些类型。

定义段落。

定义预格式文本。

定义 section。

定义表格。

定义表格中的主体内容。

定义表格中的单元。

定义表格中的表注内容(脚注)。

定义表格中的表头单元格。

定义表格中的表头内容。

定义日期/时间。

定义表格中的行。

定义无序列表。

html中的行内元素:

标签

描述

定义锚。

定义缩写。

定义只取首字母的缩写。

定义粗体字

定义文字方向。

定义大号文本。

定义简单的折行。

定义按钮 (push button)。

定义引用(citation)。

定义计算机代码文本。

定义命令按钮。

定义定义项目。

定义被删除文本。

定义强调文本。

定义外部交互内容或插件。

定义斜体字。

定义图像。

定义输入控件。

定义键盘文本。

定义 input 元素的标注。

定义图像映射。

定义有记号的文本。

定义内嵌对象。

定义任何类型的任务的进度。

定义短的引用。

定义计算机代码样本。

定义选择列表(下拉列表)。

定义小号文本。

定义文档中的节。

定义强调文本。

定义下标文本。

定义上标文本。

定义多行的文本输入控件。

定义日期/时间。

定义打字机文本。

定义文本的变量部分。

定义视频。

定义可能的换行符。

注:当你不知道某一元素为什么属性时,可通过F12调用浏览器调试器查看

图例:

0e2f331c4b41138129cdfa3d21dbecb0.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/499086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

defaultdict python_在python中怎样使用defaultdict-百度经验

defaultdict是collection模块下面的一个类,用于在执行字典的时候,遇到没有设置的属性的时候,可以设置默认的值,那么在python中怎样使用defaultdict呢?下面小编就带大家来看看详细的教程!工具/原料 python版…

微型计算机除具有计算机的一般特点外,10秋学期《计算机应用基础》第1次在线作业答案免费6/15...

10秋学期《计算机应用基础》第1次在线作业答案免费6/152011-02-17 00:02:57266有学员问关于10秋学期《计算机应用基础》第1次在线作业答案免费6/15的题目的参考答案和解析,具体如下:2010秋学期《计算机应用基础》第一次在线作业试卷总分:100 …

java面试换背景颜色_三年经验Java程序员记一次失败的面试分享:鹅厂三面让我体无完肤!...

欢迎关注专栏:里面定期分享Java架构技术知识点及解析,还会不断更新的BATJ面试专题,欢迎大家前来探讨交流,如有好的文章也欢迎投稿。程序员圈内那点事​zhuanlan.zhihu.com经过半年的沉淀,加上对MySQL,redis…

git 获取最新代码_github从远程仓库获取

前面我们说明了如何将本地的代码push到远程的仓库中,现在我们将学习从远程仓库上的获取代码到本地。1,建立一个新的文件夹,以从远端获取完整的git项目命令1:git clone https://github.com/huangguojie880/git-demo.git2&#xff0…

golang 远程批量执行shell_S2061远程代码执行漏洞复现及批量检测脚本(CVE202017530)...

声明由于传播、利用此文所提供的信息或工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,博鸿科技安全服务中心以及文章作者不为此承担任何责任。博鸿科技安全服务中心拥有对此文章的修改和解释权。如欲转载或传播此文章,必须保…

准备学python用什么电脑_001-小白学python-初入python世界

计算机组成原理硬件 主机 cpu中央处理器 (运算器与控制器) 内存(只读,随机)外设 输入设备(键盘,鼠标,录影(音)机) 输出设备(屏幕&…

html 添加窗口小部件,如何:为自定义窗口小部件定义主题(样式)项

波斯汪是的,有一种方法:假设您有一个小部件的属性声明(在中attrs.xml): 声明用于样式参考的属性(在中attrs.xml): 为小部件声明一组默认属性值(在中styles.xml):声明自定义主题(在中themes.xml):将此…

excel帮助文档_可以惊艳到你的6个excel基础技巧

Excel技巧太多,也许我们一直都在学习的路上,每天掌握一点点,工作轻松一点点,今天给大家带来6个excel经常会用到的技巧,操作简单,非常实用。技巧一:给excel文件添加打开密码第一步,很…

python find 不区分大小写_学好python拿高薪系列一(5):字符串操作和python数据结构...

大家好,上一期我们分享了python函数部分的内容,那么在这一期我们将分享python中有关字符串和列表的部分。字符串字符串没有什么好说的,知道一些常用的用法就行了。#字符串操作strr "hello,world!"#1、获取字符串长度print(len(strr…

for里面调用方法 vue_Vue源码阅读连载之Vue实例

我们学习Vue都是从下面这个例子开始的new Vue({render: h > h(App), }).$mount(#app)事实上,所有的Vue项目的组成组件都是一个Vue的实例,最后由根部的Vue实例去挂载到DOM上,当然这个"挂载"的操作可以针对不同的平台而有不同的行…

计算机组装怎么备份系统,手把手教你用GHOST备份还原安装电脑系统详细图文教程...

首先我们可以利用之前安装系统时提到的带启动功能和工具的系统安装盘,比如98启动盘或番茄花园的光盘,如果你用的U盘上带有GHOST工具,那很简单,我们还是要设置由光驱为第一启动项,重新启动电脑让电脑由光驱启动&#xf…

python车牌识别系统开源代码_python利用百度云接口实现车牌识别的示例

一个小需求---实现车牌识别。 目前有两个想法 1. 调云在线的接口或者使用SDK做开发(配置环境和编译第三方库很麻烦,当然使用python可以避免这些问题) 2. 自己实现车牌识别算法(复杂) 一开始准备使用百度云文字识别C SD…

c 包含其他文件_C/C++编程笔记:C/C++的编译和链接,计算机专业大学生必备知识...

C/C文件C/C程序文件包括 .h .c .hpp .cpp,其中源文件(.c .cpp)是基本的编译单元,头文件(.h .hpp)不会被编译器编译。C/C项目构建(build)过程,分为以下几个步骤 预处理 → 编译 → 链接。预编译预编译的过程可以理解为编译器(实际上是预处理器…

python函数命名空间_Python中的函数 ​命名空间 作用域和局部函数 匿名(lambda)函数...

函数 是 Python中最重要的代码组织和复用手段函数用def关键字声明,return关键字返回: def function(x, y, z1.5): if z > 1: return z * (x y) else: return z / (x y) ##可以拥有多条return语句,如果到达函数末尾时没有遇到任何一条ret…

二建施工管理思维导图_备考二建不丢分?二建思维导图全程指导,知识点记忆快、不分散...

关键字:二建 一建 建造师考试 建造师证书 建筑 工程 建筑项目 法规 管理 市政 公路目前,距离2020年二级建造师考试的时间越来越近,很多准备参加二建考试的朋友也开始紧张起来了。二建考试分为公共科和专业科,公共科为法规和管理&a…

机器学习线性回归算法实验报告_吴恩达机器学习系列4:线性回归的梯度下降算法...

之前我们已经学过了线性回归、代价函数和梯度下降,但是他们就像一个人的胳膊和腿,只有组合在一起才会成为一个「完整的人」,这个「完整的人」就是一个机器学习算法,让我们一起来学习第一个机器学习算法吧。这个机器学习算法叫做线…

树莓派python3_【树莓派】给ubuntu18安装python3.7

准备工作 安装工具 sudo apt update sudo apt upgrade sudo apt install gcc sudo apt install g sudo apt-get install libffi-dev sudo apt install build-essential checkinstall sudo apt install libreadline-gplv2-dev libncursesw5-dev libssl-dev libsqlite3-dev tk-de…

c++mfc编写实验_零基础学Windows窗口图形界面编程(不用MFC),菜鸟学完变身高手,敢与专业媲美...

又一门新的计算机课上线啦!什么课?看下面视频(以下视频是本课第一讲)用什么语言我们声明一下(这个在我们课上也跟同学强调):不要为用什么语言掐架!那是初学者的行为,为高手所不为。第二,我们这门课讲的不是…

超级计算机阿波罗11,Apollo 8000推进超算科学发展

Apollo 8000推进超算科学发展超级计算技术将理论转移到模拟数字环境和计算机分析,一直被应用于加快科学和工程领域的突破。最新的高性能计算技术带来的创新让企业客户也能够访问这些程序和应用、强化研发能力并获得竞争优势。Apollo 8000推进超算科学发展作为散热媒…

找不到r低版本_R的多进程使用与改进

R的多进程使用与改进在R中需要使用多进程时,常见方案是使用foreach和doParallel的组合。foreachforeach包中最重要的是foreach函数,该函数创建一个foreach对象,随后串行或并行的执行表达式。library(foreach)?foreachout:foreach( ..., .c…