HTML中的三类元素关系

最新推荐文章于 2022-02-22 14:12:03 发布
最新推荐文章于 2022-02-22 14:12:03 发布
阅读量650 收藏
点赞数
分类专栏： html 文章标签： html 标签 浏览器 计算机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heart_dust/article/details/17259997
版权

1.块元素(block element)

* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

 

2.内联元素(inline element)

* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

xhtml规范：inline元素只能嵌套inline元素，并也不能再嵌套相同的inline元素（a标签里不能放block元素div，a标签里不能再嵌套a标签）

 

3.可变元素（可变元素为根据上下文语境决定该元素为块元素或者内联元素）
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

<html>  
<head>  
<title>block and inline test</title>  
</head>  
<body>  
<div>div1</div>  
<div>div2</div>  
<div>div3</div>  
<span>span1</span>  
<span>span2</span>  
<span>span3</span>  
</body>  
</html>

上面代码的现实效果如下：

div1
div2
div3

span1 span2 span3

可见，div（块元素）是自动占一行的；而span（内联元素）是共占一行的。 

 

块元素和内联元素可以进行转换（通过设置CSS样式中的display属性）

<html>  
<head>  
<title>block and inline test</title>  
</head>  
<body>  
<div style="display: inline" style="display: inline">div1</div>  
<div style="display: inline" style="display: inline">div2</div>  
<div style="display: inline" style="display: inline">div3</div>  
<span style="display: block" style="display: block">span1</span>  
<span style="display: block" style="display: block">span2</span>  
<span style="display: block" style="display: block">span3</span>  
</body>  
</html>

上面代码的显示效果如下：

div1
div2
div3
span1 span2 span3

可见块元素转换成了内联元素，内联元素转换成了块元素

 

内联元素在不设置高和宽时，显示出了内联元素的特性。但是设置了高或宽时，又显示出了块元素的特性……

未设置高/宽：

<html>  
<head>  
<title>block and inline test</title>  
</head>  
<body>  
<div style="background-color: silver; border-bottom: 1px solid #000;">div1********<br />  
******</div>  
<div style="">div2</div>  
<div style="">div3</div>  
<span style="background-color: yellow; border-bottom: 1px solid #000;">span1********<br />  
******</span>  
<span style="">span2</span>  
<span style="">span3</span>  
</body>  
</html>

效果图：

 

设置了高/宽：

<html>  
<head>  
<title>block and inline test</title>  
</head>  
<body>  
<div style="background-color: silver; border-bottom: 1px solid #000;">div1********<br />  
******</div>  
<div style="">div2</div>  
<div style="">div3</div>  
<span style="background-color: yellow;height:30; border-bottom: 1px solid #000;">span1********<br />  
******</span>  
<span style="">span2</span>  
<span style="">span3</span>  
</body>  
</html>

效果图：

 




 

心尘90
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Hibernate 中文 html 帮助文档
12-29
Bag和list是反向集合类中效率最高的 19.5.4. 一次性删除（One shot delete） 19.6. 监测性能（Monitoring performance） 19.6.1. 监测SessionFactory 19.6.2. 数据记录（Metrics） 20. 工具箱指南 20.1. ...
html中元素之间的关系
weixin_46683645的博客
08-14 706
html中云素之间的关系 父元素:直接包含子元素的元素 子元素:直接被父元素包含的元素 祖先元素:直接或间接包含后代元素的元素，父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素，子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素 ...
html文档基本结构元素它们之间的关系,JavaScript基础之 DOM简介
weixin_42425967的博客
06-07 181
Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中，我们将理解什么是 DOM 以及如何用 Javascript 去操作它。本文还可以作为基本 DOM 操作的参考。什么是 DOM？基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型(DOM)。它使 Javascript 能够访问和操作页面的元素和样式。该模型构建...
html元素之间的关系有哪两种关系,HTML标签根据特点分类以及标签之间的关系
weixin_36074271的博客
06-08 519
HTML标签根据特点分类首先是块标签：行标签(内联标签)：行内标签：标签和标签之间的关系HTML里有多种标签让初学者眼花缭乱，那我们怎么给它分分类，划到一起，让我们更快速的记住它们？在这里我主要根据它们的特点进行分类首先是块标签：**块标签是什么，简单点来说，块标签默认宽度占据它父级标签宽度的100%，可以设置宽高，但是就是设置了小于父级标签的宽度，它剩下的位置也不会给别的标签占用，会存在一片留白...
html网页基本组成部分组成部分组成,HTML简介与网页组成基本元素
weixin_39616287的博客
06-20 810
1、HTML简介：HTML，Hyper Texture Markup Language，超文本标记语言。在计算机中以.html、.htm作为扩展名，浏览器可以访问在页面。简单来说就是网页。2、HTML语法：语法非常简洁、比较松散，以相应的英语单词关键字进行组合，不区分大小写，大多数有开始有结束，成对出现。有些标签不是成对的出现，这个标签(元素element)称为短标签，比如图片或3、网页组成的基本...
003-HTML元素之间常见的包含关系
ppwwp的专栏
03-05 667
有些HTML元素之间可以相互嵌套，例如&amp;amp;lt;div……&amp;amp;gt;元素可以相互嵌套；但有些HTML元素则不可以相互嵌套，例如&amp;amp;lt;td……/&amp;amp;gt;元素只能作为&amp;amp;lt;tr……/&amp;amp;gt;元素的子元素，&amp;amp;lt;option……/&amp;amp;gt;元素只能作为&amp;amp;lt;select……/&amp;amp
html入门到放弃笔记
05-15
3、class ：引用 类选择器时使用(CSS中) 4、style ：定义 内联方式方式使用(CSS中) 4、注释 语法：<!-- --> 注意： 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C ：Word Wide Web ...
java jdk-api-1.6 中文 chmd
03-22
javax.sql.rowset.spi 第三方供应商在其同步提供者的实现中必须使用的标准类和接口。 javax.swing 提供一组“轻量级”（全部是 Java 语言）组件，尽量让这些组件在所有平台上的工作方式都相同。 javax.swing....
JAVA_API1.6文档（中文）
05-28
javax.sql.rowset.spi 第三方供应商在其同步提供者的实现中必须使用的标准类和接口。 javax.swing 提供一组“轻量级”（全部是 Java 语言）组件，尽量让这些组件在所有平台上的工作方式都相同。 javax.swing....
标签和其属性构成HTML元素,详解HTML元素标签属性之间的关系,
weixin_35223575的博客
06-05 544
详解HTML元素标签属性之间的关系详细解释了HTML元素的标签属性之间的关系，一、html元素，标签和属性之间的关联与区别？什么是html标签：p、div等。通常成对出现。h1/h1是第一个开始标记，第二个结束标记，当然也有诸如br/的单个标记。什么是html属性：div style=’ height :100 px ‘/div，以“attribute name=attribute va...
HTML学习06：HTML标签、类型、关系、元素
Blog of Lytracy
07-15 379
文章目录HTML标签双标签（双标记）单标签（单标记）标签的关系嵌套关系并列关系HTML元素 本节主要介绍HTML标签、HTML元素的概念及HTML标签的分类。 HTML标签 超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，是 HTML最重要的组成部分。HTML 标签的大小写无关的，例如 和 表示的意思是一样的，都代表“主体”，推荐使用小写。 双标签（双标记） 双标记也称对标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如
学习笔记(04):html+css入门-元素之间的关系
m0_47005860的博客
04-22 171
本课程是专门为初级量身定制的入门课程，我们不讲学了以后就年薪几十万的鸡汤，也不拿成功学员说事情，我们只讲干货，我们把知识点详细拆分，各个击破，希望对初级的你有帮助。课程主要分为以下几个部分 1.html入门 2.css入门 3.div+css布局 4.css选择器加强 5.百度云下载页实战 6.表格 7.表单...
html元素之间的关系有哪两种关系,html、css、js之间的关系是什么？
weixin_39960116的博客
06-08 336
html、css、js之间有什么关系？下面本篇文章给大家介绍一下HTML、CSS、javascript之间的关系。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。html、css、js 三者间的关系网页主要有三部分组成，结构(HTML)、表现(CSS)、行为(Javascript)。html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用...
12、HTML基础——元素包含关系
lvh98的博客
10-12 243
元素包含关系 以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。 元素的包含关系由元素的内容类别决定，具体包含关系可以在MDN中查找。 总结： 容器元素可以包含任何元素 a元素中几乎可以包含任何元素 某些元素有固定的子元素（ul/ol>li, dl>dt+dd） 标题元素和段落元素不能相互嵌套，并且不能包含容器元素 ............
HTML中父元素、子元素、后代元素和兄弟元素
qq_46241430的博客
08-01 7413
HTML文档中的元素有着明确的关系。 包含另一个元素的元素是被包含元素的父元素；反过来说，被包含元素是包含元素的子元素。 一个元素可以有多个子元素，但只能有一个父元素。 包含在其他元素中的元素也可能包含有别的元素，这些别的元素是其他元素的后代元素。 但这些后代元素并不是其他元素的子元素，子元素是关系最近的后代元素。 具有同一个父元素的几个元素互为兄弟元素。 <!DOCTYPE HTML> <html> <head> <title>.
html网页基本组成结构（DOM节点、元素、属性和文本）
Javaesandyou的博客
02-22 3014
先来看html网页的代码和浏览器展现的结果（下图1和图2）： 图1 图2 然后对照着下图的DOM树，分析DOM的节点层次和定义： 除了html中的<!DOCTYPE>和<meta>声明外， 1.第一级是html文件中的根元素：<html></html>标签 2.第二级是根元素html下面的子元素：<head></head>和<body></body>标签 3.第三级是<head>
HTML：元素包含关系
雷爷的博客
08-28 548
元素包含关系 以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。 元素的包含关系由元素的内容类别决定。 例如，查看h1元素中是否可以包含p元素 总结： 容器元素中可以包含任何元素 a元素中几乎可以包含任何元素 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd） 标题元素和段落元素不能相互嵌套，并且不能包含容器元素 ...
WEB标准系列-HTML元素嵌套
weixin_30305735的博客
09-22 367
转：http://www.smallni.com/element-nesting/ 先来看以下这样一段代码： <ul> <li><h4><a href=""><div></div></a></h4></li> </ul> 当然，我是不会告诉你这段代...
页面中多个不相关的元素推荐使用哪个选择器
最新发布
05-30
在页面中如果有多个不相关的元素，可以使用类选择器（class selector）来为它们添加样式。类选择器以点号（.）开头，后面跟着类名，类名可以自己定义。例如： ```html <p class="description">这是一个段落</p> <div class="box">这是一个div</div> <button class="btn">点击按钮</button> ``` 上面的代码中，`class`属性被用来添加类名，而`.description`、`.box`、`.btn`则是类选择器。 使用类选择器的好处是可以同时为多个元素添加相同的样式，而不需要为每个元素分别设置样式。可以使用同一个类名为多个不相关的元素添加相同的样式。例如： ```css .description { font-size: 14px; color: #333; } .box { border: 1px solid #ccc; padding: 10px; } .btn { background-color: #007bff; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } ``` 上面的代码中，使用了`.description`、`.box`、`.btn`三个类选择器分别为不同的元素添加样式，这些元素之间没有任何关系，但可以共用同一个类名来添加样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值