【Eclipse】HTML基础（五）-HTML标签（特殊标签与分区标签）

5.7 特殊字符和分区标签

        在我们学习的HTML中，有些字符是有特殊含义的，但是如果想让这些特殊字符在页面上显示，需要按照特殊的格式进行书写。

5.7.1 特殊字符

  • 空格 ：& nbsp;

    • 注意：HTML代码中存在空格折叠的现象，多个空格只能识别一个

  • 小于：& lt; less than的缩写

  • 大于：& gt; great than的缩写

 

5.7.2 分区标签

作用：将多个相关性的标签放到一起便于统一管理

  • div：独占一行

  • span：攻占一行

     

HTML5新增的分区标签：

  • header：头

  • footer：脚

  • article：正文

  • section：区域

  • nav：导航

优点：提高代码的可读性

 

代码书写：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>特殊符号</title>
 </head>
 <body>
     <!-- 空格折叠现象：多个空格只能识别一个 -->  
     小崔，你好！              你好呀！<br>
     <!-- 空格：&nbsp; 如果需要显示多个空格，需要连续写多个&nbsp -->
     小崔 ，你好！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你好呀    
     <br>
     
     <!-- 小于：< -->
     a小于b：a&lt;b
     <br>
     
     <!-- 大于：> -->
     a大于b：a&gt;b
     <br>
     
     <!-- 双引号：“” -->
     &quot;Really?&quot;
     <br>
     
     <!-- Copyright -->
     &copy;
     <br>
     
     <!-- 分区标签 -->
     <!-- div：独占一行 -->
     <div>此处编写网页头部内容</div>
     <div>此处编写网页主体内容</div>
     <div>此处编写网页页脚内容</div>
     
     <!-- span：共占一行 -->
     <span>一行中的第一个部分</span>
     <span>一行中的第二个部分</span>
     <span>一行中的第三个部分</span>
     
     <!-- html5新增标签写法  -->
     <header>头</header>
     <article>体</article>
     <footer>脚</footer>
     
 </body>
 </html>

输出结果：

 

 

 

posted @ 2021-07-03 14:11  Coder_Cui  阅读(448)  评论(0)    收藏  举报