Semantic UI学习（一、开始使用）

文章目录

一、使用

1.CDN加速

CDN介绍

2.官网下载直接引用

semantic.css与semantic.min.css区别

3.NodeJS、Gulp方式安装

二、测试

1.测试代码
2.测试结果（成功）

三、本节完整代码

官方地址
https://semantic-ui.com
一、使用

1.CDN加速

1
2
3
4

```javascript
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

CDN介绍

CDN功能

CDN主要功能是在不同的地点缓存内容（在用户和服务器之间增加缓存层），通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容，比如说，是北京的用户，我们让他访问北京的节点，深圳的用户，我们让他访问深圳的节点。通过就近访问，加速用户对网站的访问。解决Internet网络拥堵状况，提高用户访问网络的响应速度。

CDN常见好处
- 提高网站加载速度，有利于提升网站排名。
- 网站不容易挂机，可以接收更多的用户流量。
- 减少托管成本，节约带宽，省钱！

CDN参考资料
https://blog.csdn.net/Milan_KunderLa/article/details/82108590
https://www.jianshu.com/p/7ec60b3fa9a8

2.官网下载直接引用

1
2
3

semantic.css与semantic.min.css区别

前者结构清晰，注释完整，但是文件较大，适合学习使用；
后者是前者的压缩形式，可读性较差，但是文件较小，适合部署使用。

3.NodeJS、Gulp方式安装

不熟悉，学习后测试记录。?(? ???ω??? ?)?

二、测试

1.测试代码

1	<button class="ui red button">测试</button>

2.测试结果（成功）

在这里插入图片描述

三、本节完整代码

semanticuistudy1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">



<link rel="stylesheet" href="./static/helper/Semantic-UI-CSS-master/semantic.css">
</head>
<body>
<button class="ui red button">测试</button>


<script src="./static/helper/Semantic-UI-CSS-master/semantic.js"></script>
<script src="./static/helper/jquery-3.4.1.js"></script>
</body>
</html>