html语义化标签和无语义化标签

什么是HTML语义化标签

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

常用的语义化标签

header元素
是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。
nav元素
定义页面的导航链接部分区域.

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

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

<!-- 快捷创建标签：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>

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>