【Semantic框架学习日志】（1）你好，Semantic UI

最新推荐文章于 2024-04-17 10:17:58 发布

那片世界那片海

最新推荐文章于 2024-04-17 10:17:58 发布

阅读量1.2k

点赞数 5

分类专栏： Html 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_50765519/article/details/120591792

版权

Html 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

前言

Semantic UI框架是前端的一个框架，最近在一直学习这个框架。从个人的感觉上来说，相比于其他框架，它的优势在于对于移动端页面和客户端页面的响应式布局，以及强大的UI组件库等。在页面组件设计上，它的组件灵活生动，不那么直板僵硬，冗余度和创造性较高。在语法方面，相较于前端其他框架，也容易上手理解。下面就是我的Semantic框架学习日志，虽然我的文笔有限，写的可能不太好，但我争取分享一些干货，也算是帮助大家一起学习共同进步。

争取每日一更吧，希望各位大佬能够多多指点~

一、Semantic框架是什么

首先放一下Semantic框架的官方网站：https://semantic-ui.com/
在这里插入图片描述

Semantic作为一款开发框架，它能够帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。便于开发和调试，自带简约的可继承系统和主题，可以自由的完成各式各样的元素、集合、视图、模块和行为设计，最新的版本是2.4。

要想学的好，文档要看好，官方文档传送门地址：https://semantic-ui.com/introduction/getting-started.html，下面就开始入门吧~

二、第一个Semantic框架html页面构建

要使用框架，首先得学会导入啊
大致有两种方法，一种是通过本地安装，另一种是html页面通过link rel引入
我这里以第二种为例，给大家讲一下如何引用Semantic框架。

1.引入Semantic框架

在官方文档的Introduction一栏中的Recipes板块，向下拉找到CDN Releases，便可以引入Semantic框架，这里有css样式和js，都要引用。
在这里插入图片描述代码如下（示例）：

......
<head>
	<!--引入semantic ui框架-->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
......
	<!--js-->
	<!--为了以后更好的开发，这个也引用一下，注意引用顺序-->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
</body>
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
......

2.编写页面

编写一个简单的吧,入入手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入semantic ui框架-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
	<h2>hello Semantic</h2>
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

</body>
</html>

调试一下，按f12打开开发者模式。控制台没有报错，说明引用成功！第一个页面也就完成了。
在这里插入图片描述

3.小结与注意点

引用Semantic框架的时候，要注意引用的位置，html页面要在head和script里面分别引用css和js，要注意jquery.min.js和semantic.min.js的引用顺序，先query后semantic

那片世界那片海

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
【Semantic框架学习日志】（1）你好，Semantic UI

前言 **Semantic UI**框架是前端的一个框架，最近在一直学习这个框架。从个人的感觉上来说，相比于其他框架，它的优势在于对于移动端页面和客户端页面的响应式布局，以及强大的UI组件库等。在页面组件设计上，它的组件灵活生动，不那么直板僵硬，冗余度和创造性较高。在语法方面，相较于前端其他框架，也容易上手理解。下面就是我的Semantic框架学习日志，虽然我的文笔有限，写的可能不太好，但我争取分享一些干货，也算是帮助大家一起学习共同进步。争取每日一更吧，希望各位大佬能够多多指点~
复制链接

扫一扫