HTML的语义化标签和无语义化标签怎么使用

这篇文章主要介绍“HTML的语义化标签和无语义化标签怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML的语义化标签和无语义化标签怎么使用”文章能帮助大家解决问题。

什么是HTML语义化标签

语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。 比如：h2标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。

常用的语义化标签

header元素

是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。

nav元素 定义页面的导航链接部分区域.

  <header>
        <h2>这是标题</h2>
        <nav>
            <a>Home</a>
            <a>Other</a>
            <a>About</a>
         </nav>
    </header>

标题标签

双标签独占一行，从h2-h7字体大小逐渐减小，重要性依次降低，H1在一个页面只出现一次字体加粗、字体加大。外带介绍快捷创建的方式.

<!-- 
        快捷创建标签：
            h4*6  快速创建六个是h4的标题标签
            h$*6   快速创建h2到h7标题标签无内容
            h${我爱你中国}*6  快速创建h2到h7标题标签内容是：我爱你中国
            h${我爱你中国$}*6  快速创建h2到h7标题标签内容是：我爱你中国+数字（1-6）
      -->
      
      <h2>我爱你中国1</h2>
      <h3>我爱你中国2</h3>
      <h4>我爱你中国3</h4>
      <h5>我爱你中国4</h5>
      <h6>我爱你中国5</h6>
      <h7>我爱你中国6</h7>

footer元素 定义文档的底部区域，著作权信息，使用条款，联系信息等

<footer>
   定义文档的底部区域
 </footer>

段落标签 p

<p>lorem</p>

lorem: 快速创建一段无意义文字 段落标签 p是独占一行双标签

<p>Lorem ipsum dolor consectetur voluptatem magni numquam aperiam.</p>

hr: 横线 单标签，独占一行 br：换行 单标签，不独占一行

<hr> <hr> <br><br> <hr>

以下的都是双标签、在一行展示

加粗 b、strong（强调语义）

倾斜 i 、em（强调语义）

下划线 u、ins（强调语义）

删除线 s、del（强调语义）

 Lorem ipsum dolor sit<b>amet</b><strong>sit</strong>
    <i>dolor</i>aaa<em>dolor</em> <u>ipsum</u><ins>ipsum</ins>
    <s>Lorem</s><del>Lorem</del>

无语义化标签

div: 分区 结合css页面布局 双标签、独占一行

 <div>
  我是div标签
 </div>

span: 文本标签 双标签、在一行展示

<span>我是span标签</span>

a 标签 用于控制页面之间跳转 a标签并不算是语义标签：他没有意义，只是一个链接。

<nav>
     <a>Home</a>
     <a>Other</a>
     <a>About</a>
 </nav>

关于“HTML的语义化标签和无语义化标签怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注蜗牛博客行业资讯频道，小编每天都会为大家更新不同的知识点。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。