关于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;"><header>
<h1>这是标题</h1>
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
</header>
</pre></div>
<p><strong>标题标签</strong></p>
<p>双标签独占一行，从h1-h6字体大小逐渐减小，重要性依次降低，H1在一个页面只出现一次字体加粗、字体加大。外带介绍快捷创建的方式.</p>
<div class="jb51code"><pre class="brush:xhtml;"><!--
快捷创建标签：
h3*6快速创建六个是h3的标题标签
h$*6 快速创建h1到h6标题标签无内容
h${我爱你中国}*6快速创建h1到h6标题标签内容是：我爱你中国
h${我爱你中国$}*6快速创建h1到h6标题标签内容是：我爱你中国+数字（1-6）
-->
<h1>我爱你中国1</h1>
<h2>我爱你中国2</h2>
<h3>我爱你中国3</h3>
<h4>我爱你中国4</h4>
<h5>我爱你中国5</h5>
<h6>我爱你中国6</h6>
</pre></div>
<p><strong>footer元素</strong> 定义文档的底部区域，著作权信息，使用条款，联系信息等</p>
<div class="jb51code"><pre class="brush:xhtml;"><footer>
定义文档的底部区域
</footer>
</pre></div>
<p><strong>段落标签 p</strong></p>
<div class="jb51code"><pre class="brush:xhtml;"><p>lorem</p></pre></div>
<p>lorem: 快速创建一段无意义文字 段落标签 p是独占一行双标签</p>
<div class="jb51code"><pre class="brush:xhtml;"><p>Lorem ipsum dolor consectetur voluptatem magni numquam aperiam.</p></pre></div>
<p><strong>hr: 横线</strong> 单标签，独占一行 <strong>br：换行</strong> 单标签，不独占一行</p>
<div class="jb51code"><pre class="brush:xhtml;"><hr> <hr> <br><br> <hr></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<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>
</pre></div>
<h2>无语义化标签</h2>
<p><strong>div: 分区</strong> 结合css页面布局 双标签、独占一行</p>
<div class="jb51code"><pre class="brush:xhtml;"> <div>
我是div标签
</div>
</pre></div>
<p><strong>span: 文本标签</strong> 双标签、在一行展示</p>
<div class="jb51code"><pre class="brush:xhtml;"><span>我是span标签</span></pre></div>
<p><strong>a 标签</strong> 用于控制页面之间跳转 a标签并不算是语义标签：他没有意义，只是一个链接。</p>
<div class="jb51code"><pre class="brush:xhtml;"><nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
</pre></div> 感谢楼主的分享！这些HTML基础知识点总结得很清晰，对新手来说很有帮助呢～
想补充几点：
1楼
关于语义化的重要性：其实语义化标签不仅对浏览器友好，对搜索引擎优化（SEO）也很重要。搜索引擎的爬虫更喜欢语义清晰的代码结构。
另外，关于a标签，楼主说它"没有意义"，这个说法不完全准确哦～a标签的语义是"锚点"或者"链接"，它本身还是有语义的，只是它的语义是"这是一个可点击的链接"，而不是描述内容本身的含义。
还有一个小建议：em和strong标签虽然显示效果和i、b标签类似，但strong标签表示重要性，em表示强调语气，在语义化方面更推荐使用它们。
大家一起学习，一起进步！ 顶一个
回复 支持 反对 举报 回复
2楼
1楼 说的对！我之前就是随便用标签，现在开始注意语义化了
同感！我之前写代码也是div span 套娃，现在学会用header、nav、article、section、footer这些标签了，代码看起来清晰多了～
2024-01-15 15:30 回复 支持 反对 举报 回复
頁:
[1]