首页 › HTML论坛 › 关于HTML的语义化标签和无语义化标签

孙永亮 發表於 2023-4-13 09:19:21

关于HTML的语义化标签和无语义化标签

<h2>什么是HTML语义化标签</h2>
<p>语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。 比如：h1标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。</p>
<h2>常用的语义化标签</h2>
<p><strong>header元素</strong></p>
<p>是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。</p>
<p><strong>nav元素</strong> 定义页面的导航链接部分区域.</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;header&gt;
      &lt;h1&gt;这是标题&lt;/h1&gt;
      &lt;nav&gt;
            &lt;a&gt;Home&lt;/a&gt;
            &lt;a&gt;Other&lt;/a&gt;
            &lt;a&gt;About&lt;/a&gt;
         &lt;/nav&gt;
    &lt;/header&gt;
</pre></div>
<p><strong>标题标签</strong></p>
<p>双标签独占一行，从h1-h6字体大小逐渐减小，重要性依次降低，H1在一个页面只出现一次字体加粗、字体加大。外带介绍快捷创建的方式.</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;!--
      快捷创建标签：
            h3*6快速创建六个是h3的标题标签
            h$*6   快速创建h1到h6标题标签无内容
            h${我爱你中国}*6快速创建h1到h6标题标签内容是：我爱你中国
            h${我爱你中国$}*6快速创建h1到h6标题标签内容是：我爱你中国+数字（1-6）
      --&gt;
      
      &lt;h1&gt;我爱你中国1&lt;/h1&gt;
      &lt;h2&gt;我爱你中国2&lt;/h2&gt;
      &lt;h3&gt;我爱你中国3&lt;/h3&gt;
      &lt;h4&gt;我爱你中国4&lt;/h4&gt;
      &lt;h5&gt;我爱你中国5&lt;/h5&gt;
      &lt;h6&gt;我爱你中国6&lt;/h6&gt;
   

</pre></div>
<p><strong>footer元素</strong> 定义文档的底部区域，著作权信息，使用条款，联系信息等</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;footer&gt;
   定义文档的底部区域
&lt;/footer&gt;
</pre></div>
<p><strong>段落标签 p</strong></p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;p&gt;lorem&lt;/p&gt;</pre></div>
<p>lorem: 快速创建一段无意义文字 段落标签 p是独占一行双标签</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;p&gt;Lorem ipsum dolor consectetur voluptatem magni numquam aperiam.&lt;/p&gt;</pre></div>
<p><strong>hr: 横线</strong> 单标签，独占一行 <strong>br：换行</strong> 单标签，不独占一行</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;hr&gt; &lt;hr&gt; &lt;br&gt;&lt;br&gt; &lt;hr&gt;</pre></div>
<p>以下的都是双标签、在一行展示</p>
<p><strong>加粗 b、strong</strong>（强调语义）</p>
<p><strong>倾斜 i 、em</strong>（强调语义）</p>
<p><strong>下划线 u、ins</strong>（强调语义）</p>
<p><strong>删除线 s、del</strong>（强调语义）</p>
<div class="jb51code"><pre class="brush:xhtml;"> Lorem ipsum dolor sit&lt;b&gt;amet&lt;/b&gt;&lt;strong&gt;sit&lt;/strong&gt;
    &lt;i&gt;dolor&lt;/i&gt;aaa&lt;em&gt;dolor&lt;/em&gt; &lt;u&gt;ipsum&lt;/u&gt;&lt;ins&gt;ipsum&lt;/ins&gt;
    &lt;s&gt;Lorem&lt;/s&gt;&lt;del&gt;Lorem&lt;/del&gt;
   
</pre></div>
<h2>无语义化标签</h2>
<p><strong>div: 分区</strong> 结合css页面布局 双标签、独占一行</p>
<div class="jb51code"><pre class="brush:xhtml;"> &lt;div&gt;
我是div标签
&lt;/div&gt;
</pre></div>
<p><strong>span: 文本标签</strong> 双标签、在一行展示</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;span&gt;我是span标签&lt;/span&gt;</pre></div>
<p><strong>a 标签</strong> 用于控制页面之间跳转 a标签并不算是语义标签：他没有意义，只是一个链接。</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;nav&gt;
   &lt;a&gt;Home&lt;/a&gt;
   &lt;a&gt;Other&lt;/a&gt;
   &lt;a&gt;About&lt;/a&gt;
&lt;/nav&gt;
</pre></div>

查看完整版本: 关于HTML的语义化标签和无语义化标签