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

2021-10-03 10:32:43 阅读：138 来源： 互联网

标签：Semantic 框架 html UI 引用 semantic 日志页面

前言

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

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

一、Semantic框架是什么

首先放一下Semantic框架的官方网站：https://semantic-ui.com/
Semantic作为一款开发框架，它能够帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。便于开发和调试，自带简约的可继承系统和主题，可以自由的完成各式各样的元素、集合、视图、模块和行为设计。

要想学的好，文档要看好，官方文档传送门地址：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

标签：Semantic,框架,html,UI,引用,semantic,日志,页面
来源： https://blog.csdn.net/weixin_50765519/article/details/120591792

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9