HTML的标签元素分类的区别

时间:2022-11-02 09:34:22

HTML ,即Hyper Text Markup Language 超文本标记语言;

文本:纯字符,如window中的txt文本

超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容

 

HTML的基本结构:

<!DOCTYPE html>

<html>

<head>

         <title></title>

</head>

<body>

 

</body>

</html>

 

HTML元素类型:

(1)     区块元素:

  1. 每个块级元素都从新的一行开始,并且其后的元素也要另起一行。(一个块级元素独占一行)。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设置了宽度

(2)     内联元素:

  1. 和其他元素都在同一行;
  2. 元素的高、宽、行高以及边距均不可设置
  3. 元素的高、宽均取决于它包含的文字或图片的大小

(3)     内联块:

  1. 和其他元素在同一行;
  2. 元素的高度、宽度、行高及边距可以设置

 

注意:元素的类型是可以改变的,通过display属性设置。

例如:

以下代码和图片的差别揭露不同类型标签元素之间的区别

<!DOCTYPE html>

<html>

         <head>

                   <meta charset=U"utf-8">

                   <title></title>

                  <style>

                            strong,em,a,img{

                                     display:block;

                            }

                            h1,h2,p,hr,ul,ol,dl{

                                     display: inline;

                            }       

                   </style>

         </head>

         <body>

                   <strong>天下无双</strong><strong>天下无双</strong>

                   <em>海天一线</em><em>海天一线</em>

                   <h1>永无止尽</h1><h1>永无止尽</h1>

                   <h2>天涯海角</h2><h2>天涯海角</h2>

                   <p>越狱</p><p>越狱</p>

                   <hr><hr>

                   <a>蓝天白云</a><a>蓝天白云</a>

                   <img src="C:\Users\ghost\Desktop\html\378463.PNG">

                   <img src="C:\Users\ghost\Desktop\html\627857834.PNG">

                   <br><br>

                   <ul><li>透破天幕</li></ul><ul><li>透破天幕</li></ul>

                   <ol><li>接下黑暗的幕布</li></ol><ol><li>接下黑暗的幕布</li></ol>

                   <dl>

                   <dt>电脑</dt>

                   <dd>联想</dd>

                   <dd>惠普</dd>

                   <dt>手机</dt>

                   <dd>小米</dd>

                   <dd>苹果</dd>

         </dl>

                   <details>

                            <summary></summary>

                   </details>

                   <details>

                   <summary>123</summary>

                   天涯海角共几何,只为青山缘始终。

                   </details>

         </body>

</html>

 

未控制样式,各标签的默认显示方式,如图1

HTML的标签元素分类的区别

                  图1

是它们的显示样式相反,如图2

HTML的标签元素分类的区别

                  图2