语义 UI

语义 UI 是一种基于语义化标记和样式设计的用户界面设计哲学。它的目的是提供一个更为可访问的、可维护的、可扩展的用户界面设计范式，使得开发人员能够更加方便地创建出符合标准并且用户友好的电话应用、网络应用等。

语义化标记

语义 UI 的关键在于语义化标记，即使用合适的 HTML 标记来表示不同的内容，而不是仅仅通过 CSS 样式表将各个区块的样式进行区分。

<h1>这是一个标题</h1>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<a href="#">这是一个链接</a>

这些标记可以明确地告诉浏览器和屏幕阅读器的设备等什么是标题、什么是段落、什么是按钮、什么是链接。因此，开发人员应当选择合适的 HTML 标记来表示内容语义，而不是盲目地使用 div 和 span 等通用标记。

样式设计

语义化标记只是语义 UI 的一部分，另一个重要的方面是样式设计。语义化 UI 的样式设计应该是基于现有的 HTML 标记和内容语义，根据用户交互和设计要求的合理化基础上进行的。

例如：

<button class="primary">提交</button>
<button class="secondary">取消</button>
<a href="#" class="button">立即下载</a>

primary 和 secondary 的类定义可以在样式表中进行定义，例如：

/* Primary Button */
.primary{
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
}

/* Secondary Button */
.secondary{
    background-color: #f8f9fa;
    color: #212529;
    border-color: #f8f9fa;
}

这种基于语义化标记进行的样式设计，可以有效地保证用户界面的可维护性、可扩展性。

总结

语义 UI 强调内容为王，样式为从。这种基于语义化标记和样式设计的用户界面设计哲学，具有明确的内容语义，提高了可访问性、可维护性、可扩展性，充分利用了 HTML 标记的意义，为用户带来更完整的浏览体验。