天堂1111 发表于 2017-6-21 17:41:14

HTML的标签元素分类的区别

  HTML ,即Hyper Text Markup Language 超文本标记语言;
  文本:纯字符,如window中的txt文本
  超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容
  HTML的基本结构:
  <!DOCTYPE html>
  <html>
  <head>
  <title></title>
  </head>
  <body>
  </body>
  </html>
  HTML元素类型:
  (1)   区块元素:

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

[*]和其他元素都在同一行;
[*]元素的高、宽、行高以及边距均不可设置
[*]元素的高、宽均取决于它包含的文字或图片的大小
  (3)   内联块:

[*]和其他元素在同一行;
[*]元素的高度、宽度、行高及边距可以设置
  注意:元素的类型是可以改变的,通过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

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

  图2
页: [1]
查看完整版本: HTML的标签元素分类的区别