顧名思義 這是一款語義化的UI架構，代碼可讀性與可了解性很強，界面簡潔美觀，與bootstrap風格接近，基于jquery，适用響應式布局，提供一些基本模闆，相容Firefox、Chrome、safari,IE 10+等浏覽器。
使用方法
引入js與css檔案:
使用:給元素添加對應class即可使用相關元件，若需使用相關元件的動态效果 如tab切換，下拉等，使用相關元素調用對應的js即可；semantic元件調用方法中都包含各類callback和相關配置項,根據需要可進行調用
常用元件
1按鈕，圖示，标簽
按鈕可設定大小、顔色、形狀等；
圖示有多種分類，按正常英文都能搜到對應icon;
标簽 可設定顔色、形狀、固定位置等;
2list,item,card(image,content,header,description,meta,extra )
清單類：list中的item預設為垂直排列(vertical)，可水準(horizontal)，可帶無序圓點(bulleted),可帶有序序數(ordered)；list可嵌套、可帶分割線，item可帶圖示，item内容可左右浮動；
卡片相關：可成組嵌套在 cards中，content包含header、meta、description;可增加extra content、 bottom attached buttons等；
3 grid與table
semantic預設網格數為16，可直接嵌入column，也可中間嵌入row;column可按比例拆分；
值得注意的一點是 semantic的grid自帶-14的margin值,寫css踩過的坑...
table 包含thead,tbody,tfoot支援各種樣式(celled 、stripped、warning、active、single line、selectable)，th/td可像網格那樣按比例配置設定；
4表單相關input,filed
calss為form的元素 的子元素 fields可包含field，可按網格比例配置設定，支援行間樣式 inline class；input有多種類型，支援搜尋、下拉選項、可自帶标簽等，可通過class設定大小；另外semantic的 form表單還支援各種類型的單選按鈕、複選框、開關等，使用時添加對應class并調用相關js即可；
5 模态框，下拉菜單，tab切換與手風琴效果
modal框:結構分為header、content、actions(底部，一般放操作按鈕) 部分， 調用方法不能直接用show()或hide()，semantic的調用方式為 $('.ui.modal').modal('show') / $('.ui.modal').modal('show');
下拉菜單：有文本下拉菜單(dropdown -> menu -> item)和輸入框下拉菜單(option)，可帶搜尋，選項内容方向自适應，内容可多選(multiple)可單選；
tab切換：tab項一般為menu中的item，data-tab屬性與對應 tab内容中的data-tab屬性要一緻；tab可多級嵌套，多層tab調用時需指明context屬性,data-tab屬性值也需與多層結構一緻；
手風琴：list的一種，結構包含title和content,點選title時content會展開或者收縮；可多層嵌套；調用：$('.ui.accordion') .accordion();
常用class
fluid:自适應，設定時元素充滿父級容器；——适用于圖檔、卡片等
centered 内部元素水準居中；——适用于卡片、網格等
center aligned 元素文字居中；——适用于卡片
middlel aligned(top aligned,bottom aligned) 目前元素相對父級容器垂直居中；——适用于list中的item
left floated,right floated ——适用于button、content、image等
left attached,top right attached ——适用于button、label等
大小：huge(巨大)、large(大)、 medium(中、一般預設為該值)、small(小)、tiny(微小)、mini(超小)；——适用于image、button、label、list等
horizontal、vertical —— 用于list、buttons等group類元件
英文數字(one，two,……，sixteen +'wide')——适用于網格類(grid的column、fields的field、table的th或td)。