HTML中的标签和元素的区别详解

2020-09-21 科技 82阅读

比如

这就是一个标签;

这里是内容

这就是一个元素,也就是说元素由一个开始的标签和结束的标签组成,用来包含某些内容;
这里有一个值得注意的例外,即
本身既是开始标签也是结束标签,但不包含任何内容,所以这只是个标签。
1. 元素:
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
2. 标签:
标签就是、、等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如
、。当然还有少部分不是成对出现的,如

等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
3.
属性:
为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。
示例:

 
      示例标题  
      
             

这是示例页面

 
      

在这个示例中,

这是示例页面

就是HTML元素,其中“这是示例页面”就是元素的具体内容了。
<body>等就是HTML标签,这是标签构成了HTML元素。 <body <br />bgcolor="red">中的bgcolor="red"就是标签的属性,它定义了标签应该如何具体配置。 <br />总之,元素和标签的区别也不必太在意,实际工作中我们都直接以标签统称。而属性就很容易明白了, 它就是为HTML标签添加各种附加信息或者配置选项的参数。 <br /></p> </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('1959001585641011980')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普(HP)LaserJet MFP M436n打印怎么总提示纸盘1没纸,纸盘2设置保存了也不打印,怎么设置"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普(HP)LaserJet MFP M436n打印怎么总提示纸盘1没纸,纸盘2设置保存了也不打印,怎么设置">惠普(HP)LaserJet MFP M436n打印怎么总提示纸盘1没纸,纸盘2设置保存了也不打印,怎么设置</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 2.5万阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场">如何做好把一个新产品推向市场</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 86阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱">西门子冰箱</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 112阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/1959001585641011980.html" title="HTML中的标签和元素的区别详解" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="HTML中的标签和元素的区别详解"> </a> <a href="https://w.sf024.com/info/1959001585641011980.html" target="">HTML中的标签和元素的区别详解...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-21 </span><span> <i class="iconfont bx bx-show"></i> 82阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/73803444.html" title="在HTML中的行内元素和块状元素有哪些?以及区别" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="在HTML中的行内元素和块状元素有哪些?以及区别"> </a> <a href="https://w.sf024.com/info/73803444.html" target="">在HTML中的行内元素和块状元素...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-08 </span><span> <i class="iconfont bx bx-show"></i> 84阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/509316785.html" title="html哪些标签元素有换行的效果?要求是所有带换行效果的标签元素" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="html哪些标签元素有换行的效果?要求是所有带换行效果的标签元素"> </a> <a href="https://w.sf024.com/info/509316785.html" target="">html哪些标签元素有换行的效果...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 06-24 </span><span> <i class="iconfont bx bx-show"></i> 98阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1988012763773636867.html" title="html 行级元素和块级元素标签列表分别有哪些" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="html 行级元素和块级元素标签列表分别有哪些"> </a> <a href="https://w.sf024.com/info/1988012763773636867.html" target="">html 行级元素和块级元素标签...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 10-28 </span><span> <i class="iconfont bx bx-show"></i> 120阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1546376184182918867.html" title="html中a标签中的name有什么用,和href什么区别,求解" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="html中a标签中的name有什么用,和href什么区别,求解"> </a> <a href="https://w.sf024.com/info/1546376184182918867.html" target="">html中a标签中的name有什...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 07-10 </span><span> <i class="iconfont bx bx-show"></i> 193阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/458125102.html" title="javascript中的window对象是html对象还是页面元素对象还是内置对象呀,他们有什么区别" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="javascript中的window对象是html对象还是页面元素对象还是内置对象呀,他们有什么区别"> </a> <a href="https://w.sf024.com/info/458125102.html" target="">javascript中的wind...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 06-21 </span><span> <i class="iconfont bx bx-show"></i> 116阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/182211435545606404.html" title="html5的标签中,哪些是行内元素,哪些是块级元" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="html5的标签中,哪些是行内元素,哪些是块级元"> </a> <a href="https://w.sf024.com/info/182211435545606404.html" target="">html5的标签中,哪些是行内元...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 07-25 </span><span> <i class="iconfont bx bx-show"></i> 67阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/685331587892355732.html" title="如何利用Vue.js库中的v-html指令添加html元素" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何利用Vue.js库中的v-html指令添加html元素"> </a> <a href="https://w.sf024.com/info/685331587892355732.html" target="">如何利用Vue.js库中的v-h...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-01 </span><span> <i class="iconfont bx bx-show"></i> 146阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/692509514849879604.html" title="如何利用Vue.js库中的v-html指令添加html元素" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何利用Vue.js库中的v-html指令添加html元素"> </a> <a href="https://w.sf024.com/info/692509514849879604.html" target="">如何利用Vue.js库中的v-h...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-14 </span><span> <i class="iconfont bx bx-show"></i> 96阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/366263552554810972.html" title="如何利用Vue.js库中的v-html指令添加html元素" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何利用Vue.js库中的v-html指令添加html元素"> </a> <a href="https://w.sf024.com/info/366263552554810972.html" target="">如何利用Vue.js库中的v-h...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-09 </span><span> <i class="iconfont bx bx-show"></i> 229阅读 </span> </p> </li> </ul> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div> </footer> <script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>