美文网首页
什么是块级元素和内联元素?

什么是块级元素和内联元素?

作者: 王小才 | 来源:发表于2019-01-10 10:34 被阅读0次

1.下表列出了内联元素和块级元素的主要区别

html中内联元素和块级元素的区别

元素特点

2.按字母顺序排列块级元素主要有

<address>   定义地址

<caption>   定义表格标题

<dd>   定义列表中定义条目

<div>   定义文档中的分区或节

<dl>   定义列表

<dt>   定义列表中的项目

<fieldset>   定义一个框架集

<form>    创建表单元素

<h1><h2><h3><h4><h5><h6>    标题元素

<hr>   水平线

<legend>   给fieldset元素定义标题

<li>  定义列表项目

<noframes>  为那些不支持框架的浏览器显示文本,放置于frameset标签内

<noscript>   为那些不支持脚本的浏览器显示文本

<ol>   有序列表

  无序列表

<p>   定义段落

<pre>   定义预格式化文本

<table>    定义表格

<tbody>   定义表格主体

<td>   表格中的标准单元格

<tr>    表格中的行

<tfoot>   表格中的页脚

<th>   定义表头单元格

<thead>   定义表格的表头

3.内联元素有

<a>    可定义锚以及超链接

<abbr>   表示一个缩写形式

  表示只取title中首字母的缩写形式

<b>   字体加粗

<bdo>   可覆盖默认的文本方向

<big>   大号字体加粗

<br>    换行

<cite>   引用进行定义

<code>   定义计算机代码文本

<dfn>   定义一个定义项目

  定义为强调的内容

<i>   斜体文本效果

<img>   向网页中嵌入一张图像

<input>   输入框

<kbd>   定义键盘文本

<label>    为input进行标记/标注

<q>   定义短的引用

<s>   表示不准确不相关,却不应当给予删除的内容

<samp>   定义样本文本

<select>   定义单选或者多选菜单

<small>    呈现小号字体效果

<span>   组合文档中的行内元素

<strong>    语气更强的强调内容

<sub>   定义下标文本

<sup>    定义上标文本

<textarea>   多行文本输入控件

<tt>   打字机或者等宽的文本效果

<var>   定义变量

<input>和<img>都是行内元素,但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素,如下

块级元素和内联元素转换

通过CSS的display属性,我们可以改变元素的默认基本。

display的三种值

display:block -- 显示为块级元素

display:inline -- 显示为内联元素

inline-block -- 内联元素和块级元素特性兼而有之,既不会占满父元素,又可以设置width和height属性。


替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如: <img

src=”cat.jpg” /> <input type="submit" name="submit" value="提交"

/> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 

不可替换元素html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

例如: <p>段落的内容</p> 段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

Demo

效果如下

相关文章

  • css 元素分类

    块级元素 内联元素(行内) 内联块级元素 块级元素 等display:block inline 内联原素 内联块级元素

  • CSS布局(inline和block)

    CSS内联元素和块级元素, 内联块级元素 HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素,...

  • 内联元素和块级元素之间的嵌套关系

    首先,我们来回顾一下内联元素和块级元素内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但...

  • 你造吗?HTML 不能这么写

    目录 a标签不可以嵌套交互式元素 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元...

  • css-文档流

    文档流是什么? 内联元素和块级元素的流动方向 重要提示:内联元素和块级元素没有绝对的区分,可以通过代码displa...

  • DIV+CSS布局

    一、div和span区别 块元素与内联元素区别 块元素又称块级元素(block element)和其对应的是内联元...

  • HTML总结

    块级元素和内联元素 在HTML中有两种你需要知道的重要元素类别,块级元素和内联元素。 块级元素在页面中以块的形式展...

  • HTML学习笔记

    块级元素和内联元素 在HTML中有两种你需要知道的重要元素类别,块级元素和内联元素。 块级元素在页面中以块的形式展...

  • 深入理解块级元素

    简介 1 .内容模型。通常块级元素可能包含内联元素和其他块级元素。通常块级元素创建比内联元素更大的结构2 .默认情...

  • html中内联元素和块级元素的区别

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别块级元素 行内元素独占一行,默...

网友评论

      本文标题:什么是块级元素和内联元素?

      本文链接:https://www.haomeiwen.com/subject/qxmorqtx.html