📌  相关文章
📜  语义-UI 标签标签组(1)

📅  最后修改于: 2023-12-03 15:41:46.705000             🧑  作者: Mango

语义-UI 标签标签组

简介

语义-UI 是一种基于语义 HTML 概念的前端框架，它强调使用有意义的 HTML 标签和代码结构来构建网页，以便于搜索引擎、代码维护和可访问性。

标签组是语义-UI 中一个重要的组件，它提供了一系列的标签来构建网页中的基础组件和布局，同时也支持自定义样式和属性。标签组的特点是它的代码结构清晰简洁，易于维护和扩展。

使用方法
引入语义-UI

在 HTML 文件的 head 部分引入语义-UI 的 CSS 文件和 JavaScript 文件。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>
</head>
使用标签组

标签组通常以类名 ui 开头，之后跟着组件名和样式名。例如，一个简单的按钮可以这样定义：

<button class="ui button">点击我</button>

标签组提供了很多标签来构建网页中的不同组件，例如：

  • 文本：<p> <h1> <h2> <h3> <h4> <h5> <h6> <blockquote>
  • 列表：<ul> <ol> <li>
  • 表格：<table> <thead> <tbody> <tr> <th> <td>
  • 表单：<form> <input> <textarea> <label> <select> <option> <button>
  • 按钮：<button> <i class="icon">
  • 图标：<i class="icon">
  • 图片：<img>

除了以上基本组件以外，标签组还提供了大量的扩展组件，例如导航栏、面包屑、标签页、模态框等等。

标签组还支持许多属性来控制组件的样式和行为，例如：

  • 数据属性（data-）：用于在 HTML 标签上添加自定义数据，例如 data-tooltip="Click me"。
  • 类名属性（class）：用于添加特定样式和 CSS 类，例如 class="disabled"。
  • 样式属性（style）：用于添加内联样式，例如 style="color: red;"。
  • 事件属性：用于绑定 JavaScript 事件，例如 onclick="alert('Clicked!')"
示例代码

下面是一个简单的例子，演示了如何使用标签组来构建一个带有导航栏、面包屑、内容区和页脚的页面。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>
  </head>
  <body>
    <header>
      <nav class="ui inverted fixed menu">
        <div class="ui container">
          <a href="#" class="header item">My Website</a>
          <a href="#" class="item">Home</a>
          <a href="#" class="item">About</a>
          <a href="#" class="item">Contact</a>
        </div>
      </nav>
      <div class="ui container">
        <div class="ui breadcrumb">
          <a class="section">Home</a>
          <i class="right chevron icon divider"></i>
          <a class="section">About</a>
          <i class="right chevron icon divider"></i>
          <div class="active section">Contact</div>
        </div>
      </div>
    </header>
    <main class="ui container">
      <h1>Contact Us</h1>
      <p>Fill out this form to get in touch with us.</p>
      <form class="ui form">
        <div class="field">
          <label>Name</label>
          <input type="text" placeholder="Your Name">
        </div>
        <div class="field">
          <label>Email</label>
          <input type="email" placeholder="Your Email">
        </div>
        <div class="field">
          <label>Message</label>
          <textarea placeholder="Type your message here"></textarea>
        </div>
        <button class="ui button" type="submit">Send</button>
      </form>
    </main>
    <footer class="ui inverted vertical segment">
      <div class="ui container">
        <p>Copyright © 2021
          <a href="#">My Website</a>
        </p>
      </div>
    </footer>
  </body>
</html>
参考资料
  • 官方网站：https://semantic-ui.com/
  • 中文文档：https://fomantic-ui.cn/
  • GitHub 仓库：https://github.com/Semantic-Org/Semantic-UI