正确使用HTML标签

时间：2023-07-25 01:51:02 | 来源：网站运营

时间：2023-07-25 01:51:02 来源：网站运营

正确使用HTML标签：【摘要】华丽的乐章，通过七个音阶1234567就能实现，元素周期表的118种元素，组成了世间的物质百态；严明的军队纪律，是从【立正、稍息、齐步走】三个口令深入执行而来；二进制的0和1，组成了计算机世界的底层。 今天我们谈的标签，也正是网页脚本语言的基石，重要性，毋庸置疑。

【作者】：shuaiyin

【更新目录】

1.2020-10-06：更新使用flex布局的一个实际案例。

【建议】 继续深入探讨这些底层原理，总结出不一样的理解, Android也有类似的layout.xml, 用来布局控件， IOS体系也有类似的，可以做一些类比; 我们未来先知平台也要对元素进行布局，一旦本文写得足够优雅， 这篇基础的文章对后面帮助特别大。

最近在做移动端项目时，发现用到的HTML标签有点匮乏，所以今天特来总结一下，自己在码移动端静态页面的一些HTML标签的分享，以及为什么要使用语义化标签。


到底什么是HTML标签？HTML是一种构建互联网内容的一种语言方式。类似于交流的各国语言，实质如此。我们需要知道的是：HTML是开发互联网的一种语言即可。

语义化标签：

1.代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构。就是把css去掉之后，页面所呈现的布局状态，不会乱七八糟。

常见的块级元素：

div ，p ，ul , li ,h1-h6

常见的行内元素：

span ,a ,strong ,em ,b ,s ,i ,font

常见的语义化标签：

1.<header>表示页面中一个内容区块或整个页面的标题。

2.<section>页面中的一个内容区块，如章节、页眉、页脚或页面的其他地方，可以和h1、h2……元素结合起来使用，表示文档结构。

3.<article>表示页面中一块与上下文不相关的独立内容，如一篇文章。

4.<aside>表示<article>标签内容之外的，与<article>标签内容相关的辅助信息。

6.<hgroup>表示对整个页面或页面中的一个内容区块的标题进行组合。

7.<figure>表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

8.<figcaption>定义<figure>标签的标题。

9.<nav>表示页面中导航链接的部分。

10.<footer>表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期及联系方式。

11.目前常见的flex布局理解：

就是我们所说的弹性布局，为盒模型提供了很大的灵活性。它的出现，可以说，很大程度上定位和浮动已经被取代。

参考阮一峰官方文档：

主要的几个属性：

1.display：flex

2.justify-content:center

3.align-items:center

单单的几条属性，就可以完全实现垂直居中了。是不是相较之前的定位浮动等来的比较干脆，且比较稳定。最主要的是实现了块元素在一行展示的这种特性。在以前的时候，这种只可以依靠定位和浮动来进行实现。那么定位和浮动已经脱离了文档流，也是十分的麻烦。

flex很实用，但是在实际项目当中，也会遇到诸多小问题，下面就是我在实际项目中遇到的一个很直接却很普遍的实例。

案例一：

介绍一种flex布局实现tab菜单，两行展示，第一行展示4个tab，第二行展示三个的这种布局是如何实现的。

实现原理，flex布局可以实现每个tab之间的间隔，也就是等间距排列。

我们用到的属性为：justify-content:space-between

那么会出现一个问题：就是第二行的tab，会出现和第一行一样，等间距两端排列。然而我们想要的并非如此，那么flex就不能实现了嘛，不然，请看实例：

这种是要实现的效果：




那么我们利用flex布局实现的原理就是：添加空标签

原理大致如此。