html标签中元素显示模式

素显示模式就是元素（标签）以什么方式进行显示，比如div标签自己占一行，一行可以放多个span标签。

HTML 元素分为块元素、行内元素、行内块元素，它们具体的用法和区别如下：

块元素：

块元素是用于定义一个独立的区域，比如一个段落、一个标题、一个表格等。

常见的块元素有：h1-h6、div（最典型）、p、ol、ul、li等。

特点

块元素独占一行。
高度、宽度、外边距、内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。
文字类的块元素内不能使用块级元素，如h1-h6 和 p 标签，里面不能放其他类型的块级元素。

行内元素：

行内元素是用于在同一行内显示文本，并不需要包含在其他元素内。

常用的行内元素有：a、strong、em、del、ins、b、i、u、span（最典型）等。

特点：

相邻行内元素在一行上，一行可以显示多个行内元素。
宽、高直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本和其他行内元素。

注意：

链接里面不能再放链接。
特殊情况下a标签中可以放块级元素，但给a标签转换一下块级模式最安全。

行内块元素：

行内块元素是用于在同一行内显示文本，并不需要包含在其他元素内，但是可以包含图片或其他多个文本元素。

常用的行内块元素有：

<blockquote>：用于引用其他文档中的文本，可以设置引用文本的样式。
<figure>：用于在同一行内显示图片或其他多个文本元素，可以设置图片或其他多个文本元素的样式。

特点：

在行内元素中有几个特殊的标签，img、input、td，它们同时具有行内元素和块元素的特点。

这三种元素的主要区别是：

1.块元素定义了一个独立的区域，不会和其他元素融合在一起，而行内元素和行内块元素都属于行内元素，它们都可以包含其他元素。

2.块元素可以设置高度和外边距，而行内元素和行内块元素都不能设置高度和外边距。

3.块元素只能包含文本或其他图片等元素，而行内元素和行内块元素都可以包含其他任意类型的元素。

4.块元素的外边距、填充、宽度等属性可以根据实际需求设置，而行内元素和行内块元素的样式则完全根据实际需求设置。

显示模式转换

特殊情况下，我们需要元素模式的转换，比如要增加a标签链接的触发范围。

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

我们访问网站成功后,网站服务器会发送给我们网页代码,浏览器看到代码后,就解释成,我们平时看到的,有文字、图片、视频等的网页了.

上面这个过程,可以简单理解为我们访问网站,网站服务器发送给我们普通人看不懂的数据,浏览器这个时候充当我们的翻译官,给我们翻译成了我们最终看到的网页.

服务器发送过来的网页数据主要由三个部分组成HTML、CSS、JavaScript

HTML是描述网页的一种语言,这种语言是程序员和浏览器沟通的语言,全名叫超文本标记语言.

它有很多标签,网页中的文字、按钮、图片、视频等等复制元素都可以用标签表达,如图片就用img标签,视频用video标签等

网页的结构来决定网页内容显示的先后,网页的结构则需要div标签来布局,一般用div标签的嵌套和各种标签组合来构建网页结构.

CSS它的全名叫层叠样式表,可以指定网页中的文字大小、颜色、间距-即元素之间的距离、元素的排列等

只有HTML网页是不美观的,而CSS就决定了网页的颜值.

JavaScript,简称JS,是一种脚本语言,它用来做一些和我们互动的行为,如进度条、提示框等.

总的来说,HTML定义显示的内容和结构,CSS描述网页外观和布局,JavaScript完成网页的行为.

网页基本结构的源代码

浏览器的网页显示

avaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 window.alert()</title>
</head>
<body>
<script>
    window.alert(5 + 6);
</script>
</body>
</html>

运行结果：

在线咨询

上一篇：做HTML5，需要哪些工具？
下一篇：5 个顶级的 JavaScript Ajax 组件和

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商