第二章第三小节——元素类型知识点、笔记、练习题

最新推荐文章于 2023-12-08 15:37:27 发布

ROMdayfish

最新推荐文章于 2023-12-08 15:37:27 发布

阅读量148

点赞数

分类专栏： web网页美化和布局文章标签： html

本文链接：https://blog.csdn.net/ROMdayfish/article/details/109309816

版权

web网页美化和布局专栏收录该内容

5 篇文章 1 订阅

订阅专栏

2.3 HTML元素类型

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。一般情况下，行内元素只能包含数据和其他行内元素，而块级元素可以包含行内元素和其他块级元素，这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
任何HTML (超文本标记语言) 元素都有其默认的display属性，大多数都是行内元素（inline）或块级元素（block）。一个行内元素只占据它对应标签的边框所包含的空间，而一个块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换。
(1) display:inline;转换为行内元素。
(2) display:block;转换为块状元素。
(3) display:inline-block;转换为行内块状元素。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标签元素转换</title>
   <style type="text/css">
              span {
                  display: block;
                  width: 120px;
                  height: 30px;
                   background: red;
              }
               div {
                 display: inline;
                  width: 120px;
                  height: 200px;
                  background: green;
              }
              i {
                display: inline-block;
                  width: 120px;
                 height: 30px;
                  background: lightblue;
             }
         </style>
 </head>
 <body>
  <span>行内转块状</span>
  <div>块状转行内 </div>
  <i>行内转行内块状</i>
 </body>
</html>

2.3.1 块状元素特点
块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理，特点如下：
1.总是从新的一行开始。
2.高度、宽度都是可控的。
3.宽度没有设置时，默认为100%。
4.块级元素中可以包含块级元素和行内元素。
常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>等。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>块状元素</title>
  <style type="text/css">
   div{background-color: palegoldenrod;}
   p {background-color: paleturquoise;}
   h4 {background-color: papayawhip;}
   ul{background-color: peru;}
  </style>
 </head>
 <body>
  <div>这是div标签元素行</div>
  <p>这是div标签元素行</p>
  <h4>这是h4标签元素行</h4>
  <ul>
   <li>这是ul标签元素行</li>
   <li>这是ul标签元素行</li>
  </ul>
 </body>
</html>

2.3.2 行内元素特点
行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。
常用于控制页面中文本的样式，我们通常会使用行内元素来进行文字、小图标（小结构）的搭建，其特点如下：
一、和其他元素都在一行。
二、高度与宽度以及内边距都是不可控的。
三、宽高就是内容的高度，不可以改变。四、行内元素只能行内元素，不能包含块级元素。常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>。
例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>行内元素</title>
  <style type="text/css">
   span{background-color: palevioletred;}
   p{background-color: paleturquoise;}
  </style>
 </head>
 <body>
  <span>这是span标签元素行1</span>
  <span>这是span标签元素行2</span>
   <p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。
   我是一段测试代码，<i>被i标签变成斜体</i>。</p>
 </body>
</html>

2.3.3 行内块状元素特点
普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，常用的行内块状元素有：<img>、<input>、<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。
1．和相邻行内元素在同一行，但是之间会有空白缝隙。
2．默认宽度是他本身内容的宽度。
3．宽度、高度、行高、外边距以及内边距都可以手动设置。
例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>行内块元素</title>
  <style>
   input{
    width:200px;height: 30px;
   }
  </style>
 </head>
 <body>
  <input type="text"  value="行内块元素1" />
  <input type="text"  value="行内块元素2" />
 </body>
</html>

* .扩展：display属性——display属性在前端中大致分为html dom display 属性和css display属性。

这里主提css display属性。display 属性规定元素城的显示框类型，常用于页面布局，比较常见的属性值包括none 、 block、inline和inline-block。

display:block 规定元素以块级元素形式显示，可以设置宽高，但排斥其他元素与其同行
display：inline 规定元素以行内元素形式显示，无法设置宽高，可与其他行内元素同行
display：inline-height 规定元素以可设置宽高的行内元素显示

html dom display 属性通常用于html 和js的互动，如在js定义移除元素的函数

ROMdayfish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章第三小节——元素类型知识点、笔记、练习题

2.3 HTML元素类型HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。一般情况下，行内元素只能包含数据和其他行内元素，而块级元素可以包含行内元素和其他块级元素，这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。任何HTML (超文本标记语言) 元素都有其默认的display属性，大多数都是行内元素（inline）或块级元素（block）。一个行内元素只占据它对应标签的边框所包含的空间，而一个块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。首先需要说
复制链接

扫一扫