html基礎(chǔ)框架（html的基礎(chǔ)框架）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于html基礎(chǔ)框架的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、前端常用的框架有哪些？

• 2、HTML、CSS、JavaScript的學(xué)習(xí)順序應(yīng)該是什么？

• 3、常用的前端框架有哪些？

• 4、html5 app開發(fā)框架有哪些

一、前端常用的框架有哪些？

給大家介紹幾個在Web前端界比較優(yōu)秀的前端框架。

1、Bootstrap

Twitter出品的Bootstrap在業(yè)界是非常受歡迎的，以致于有很多前端框架都在其基礎(chǔ)上開發(fā)，如我們熟悉的WeX5就是在Bootstrap源碼基礎(chǔ)上優(yōu)化而來的。我相信大多數(shù)接觸過前端開發(fā)的同學(xué)多少都了解過這個優(yōu)秀的前端框架。Bootstrap是基于HTML、CSS和Javascript的，它簡潔靈活，可以使得Web開發(fā)更加敏捷。

它提供優(yōu)雅的HTML和CSS規(guī)范，在jQuery的基礎(chǔ)上進(jìn)行更加個性化和人性化的完善。兼容大部分jQuery插件，并包含了豐富的Web組件，如下拉菜單、按鈕式下拉菜單、導(dǎo)航條、按鈕組、分頁、縮略圖、進(jìn)度條和媒體對象等。自帶了13個jQuery插件，其中有模式對話框、標(biāo)簽頁、滾動條和彈出框等。

2、Foundation框架

Foundation框架總體來看要比Bootstrap略顯高大上一點，但他們倆的設(shè)計理念都是非常清楚的，Bootstrap有引導(dǎo)的意思，它嘗試處理你項目中的一切所需。Foundation有基礎(chǔ)、地基及支柱的意思，給你項目中強(qiáng)有力的創(chuàng)造與支持。相對于Bootstrap豐富的組件及插件，F(xiàn)oundation僅提供了有限的幾種元素，其目標(biāo)是，即使你使用預(yù)定義的UI元素，也不應(yīng)該與大家的網(wǎng)站長得太像。

而Bootstrap則致力于提供所有定義好的元素，這樣使得看起來許多網(wǎng)站都差不多。Foundation默認(rèn)不帶圖標(biāo)集，它推薦使用開源字體圖標(biāo)。與Bootstrap一樣，F(xiàn)oundation使用網(wǎng)格流式布局將網(wǎng)頁劃分為12列，針對不同的設(shè)備顯示不同的列數(shù)，實現(xiàn)響應(yīng)式布局。但Foundation不支持舊版本瀏覽器。其他特性如有興趣可進(jìn)一步了解。

3、Curl

Curl 是一個命令行工具，用于通過 HTTP(s)、FTP 和數(shù)十種其它協(xié)議進(jìn)行請求。使用Curl可以進(jìn)行文件下載、檢查響應(yīng)標(biāo)題和自由訪問遠(yuǎn)程數(shù)據(jù)。

在 Web 開發(fā)中，Curl 經(jīng)常和 RESTful API 一起使用，用于測試連接。

# Fetch the headers of a URL.curl -I http://google.comHTTP/1.1 302 FoundCache-Control: privateContent-Type: text/html; charset=UTF-8Referrer-Policy: no-referrerLocation: http://www.google.com/?gfe_rd=cr&ei=0fCKWe6HCZTd8AfCoIWYBQContent-Length: 258Date: Wed, 09 Aug 2017 11:24:01 GMT# Make a GET request to a remote API.curl http://numbersapi.com/random/trivia29 is the number of days it takes Saturn to orbit the Sun.

Curl 命令可能比上述代碼更復(fù)雜。有許多選項用于控制 headers、Cookie、身份驗證等。了解更多，請閱讀Everything curl。

4、Tree

Tree 是一個小型的命令行實用程序，它將目錄中的文件以可視化的方式進(jìn)行顯示。它采用遞歸運行的方式，遍歷每個級別的嵌套并繪制所有內(nèi)容的格式樹。這樣就能快速的瀏覽并查找需要的文件。

tree.├── css│ ├── bootstrap.css│ ├── bootstrap.min.css├── fonts│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2└── js ├── bootstrap.js └── bootstrap.min.js

還可以使用簡單的 regEx 模式來過濾結(jié)果：

tree -P '*.min.*'.├── css│ ├── bootstrap.min.css├── fonts└── js └── bootstrap.min.js

5、Tmux

根據(jù)維基的解釋，Tmux 是一個終端復(fù)用器。通俗的說，它是一個能將多個終端連接到單個終端會話的工具。

Tmux允許用戶在終端中的程序之間切換，添加屏幕窗格，并將多個終端連接到同一個會話，使其保持同步。在遠(yuǎn)程服務(wù)器上工作時，Tmux 特別有用，因為它允許用戶創(chuàng)建新的選項卡，而無需再次登錄。

6、du

du命令用于生成關(guān)于文件和目錄的空間使用情況的報告。du很容易使用，可以遞歸地運行，遍歷每個子目錄并返回每個文件的大小。

du 的常見用例是：當(dāng)某個驅(qū)動器的空間不足，用戶不清楚每個存儲器的大小。使用此命令可以快速查看每個文件夾所占用的存儲空間，從而找到占用最大空間的存儲器。

7、AUI

AUI是最近流行起來的，作者聲稱是專為APIClound設(shè)計的一套框架，解決了許多移動端開發(fā)實際中遇到的許多問題，是一個純CSS框架。使用容器+布局+模塊的構(gòu)建方式，JS輔助，更自由更靈活更易于擴(kuò)展使用。遵循Google Material設(shè)計規(guī)范，完美適配各個機(jī)型。面向HTML5，使用CSS3實現(xiàn)動畫交互，輕量級高性能。AUI是使用MIT License授權(quán)，你可以復(fù)制、出售。目前最新版本2.0。

8、Amaze UI

這是稱為妹子UI的開源框架，據(jù)稱是中國首個開源HTML5跨屏前端框架。妹子UI以移動優(yōu)先為理念，從小屏逐漸到大屏，實現(xiàn)響應(yīng)式網(wǎng)頁。Amaze UI包含20+個CSS組件、20+個JS組件，更有多個包含不同主題的Web組件。相比國外框架，妹子UI關(guān)注中文排版提供本地化支持。面向HTML5開發(fā)，使用CSS3來實現(xiàn)動畫交互，輕量級高性能。

9、Frozen UI

Frozen UI是一款開源，簡單易用，輕量敏捷的移動端框架?；谑諵樣式規(guī)范，目前全面應(yīng)用于企鵝手Q增值業(yè)務(wù)中?；A(chǔ)樣式效果簡單色調(diào)清爽，社區(qū)活躍，組件自然不少。包括按鈕、列表、表單、通知、提示條、彈出框、選項卡等等常用組件。還包括一個FrozenJs的JS組件庫。可以在主流的Android和IOS上應(yīng)用?；緲邮绞褂秒x線包的方式減少請求提供快速接入方案。當(dāng)然，根據(jù)網(wǎng)友反映，也存在大大小小的bug。不過總體來說，還是值得一用的。奇怪的是，Github上顯示的最后更新時間是一年前，難道已經(jīng)沒人維護(hù)了嗎？

# Running this will show the space usage of each folder in the current directory.# The -h option makes the report easier to read.# -s prevents recursiveness and shows the total size of a folder.# The star wildcard (*) will run du on each file/folder in current directory.du -sh *1.2G Desktop4.0K Documents40G Downloads4.0K Music4.9M Pictures844K Public4.0K Templates6.9M Videos

還有一個相似的命令 df（Disk Free），使用df會返回有關(guān)可用磁盤空間的各種信息。

以上介紹了現(xiàn)在熱門的幾個Web前端框架，以及它們的主要功能，希望對大家學(xué)習(xí)Web前端有所幫助。

二、HTML、CSS、JavaScript的學(xué)習(xí)順序應(yīng)該是什么？

最先需要學(xué)習(xí)的是 HTML，HTML 是開發(fā)設(shè)計網(wǎng)頁頁面最基礎(chǔ)的語言表達(dá)，CSS 和JavaScript 的使用是根據(jù) HTML 的，因此務(wù)必先學(xué)習(xí)培訓(xùn) HTML，將網(wǎng)頁頁面的基本上框架搭建下去，在使用 CSS 開展裝飾。學(xué)習(xí)培訓(xùn) HTML 以后，在開展 CSS 的學(xué)習(xí)培訓(xùn)，或是二者同時進(jìn)行學(xué)習(xí)培訓(xùn)。如果將 HTML 構(gòu)建的網(wǎng)址比成是毛胚房，那樣 CSS 便是對它開展室內(nèi)裝修。

CSS 是用于變更款式設(shè)計方案的，裝飾網(wǎng)址，提高客戶體驗度。最終學(xué)習(xí)培訓(xùn) JavaScript。JavaScript 用于界定網(wǎng)頁頁面的個人行為，提高網(wǎng)頁頁面的互動性。在我們將一個房屋裝修完成后，就必須考慮到其程序模塊，也就是想讓它完成哪種實際操作。HTML、CSS、JavaScript 三門語言表達(dá)的學(xué)習(xí)培訓(xùn)并沒分為很清楚的主謂層級，完全可以交叉學(xué)習(xí)培訓(xùn)，提升印像，且可以讓你更快的知道源代碼的應(yīng)用。

但是需要注意的是，大家學(xué)習(xí)時必須從最基礎(chǔ)的英語的語法標(biāo)識開始學(xué)習(xí)，循序漸進(jìn)，提高學(xué)習(xí)效率。如果只是做一個靜止的網(wǎng)頁頁面，上邊的是徹底足夠了，可是假如想要做動態(tài)性的，這個時候就要逐漸學(xué)習(xí)php了。 新手入門php相比于JS會更不便一些, 由于運作php必須有許多關(guān)鍵點要解決, 因此一本好的入門書籍是非常重要的, 這一w3school上面的php幫不上什么忙了。

入掌握J(rèn)avaScript：因為你是想傾向于前端工程師，因此務(wù)必深入了解JavaScript，對JavaScript原型鏈、功效域鏈、程序設(shè)計模式都深入分析。多參照順利的OOP程序設(shè)計模式，多研究框架源代碼：如jQuery、prototyp、Ext等，都會有非常好的研究價值。

三、常用的前端框架有哪些？

1. Twitter BootStrap （Apache v2.0；響應(yīng)式）

時髦、直觀并且強(qiáng)大的前端框架，讓W(xué)eb開發(fā)變得更加容易。

2. Foundation （MIT；響應(yīng)式）

最先進(jìn)的響應(yīng)式前端框架。

3. 960gs（GPL&MIT；響應(yīng)式）

960gs提供了一個簡單的網(wǎng)格系統(tǒng)，適合快速開發(fā)。

4. Skeleton（MIT；響應(yīng)式）

非常漂亮的Web模板，適合響應(yīng)式、移動友好的開發(fā)。

5. 99lime HTML KickStart（Free）

適合網(wǎng)站快速開發(fā)的極簡HTML構(gòu)建模塊。

6. Kube（Free；響應(yīng)式）

面向?qū)I(yè)人員的CSS框架。

7. Less Framework（MIT；響應(yīng)式）

自適應(yīng)的CSS網(wǎng)格系統(tǒng)。

8. Flameinwork（Free）

適合懶人開發(fā)者的前端微框架。

9. G5 Framework（Free）

(x)HTML5、CSS、PHP前端開發(fā)框架。

10. Easy Framework（Free）

Easy Framework是一個一體化前端解決方案，分structural、 presentational、interactive三層。

11. Blueprint（Free）

一個旨在減少開發(fā)時間的前端框架。

12. YAML（Creative Commons）

(x)HTML+CSS框架，適合開發(fā)現(xiàn)代化浮動布局。

13. BlueTrip（Free）

一個功能全面、并且美麗的CSS框架，適合于Blueprint搭配使用。

14. YUI3:Grids CSS（BSD）

YUI Grids CSS是最著名的CSS框架之一，是由Yahoo開發(fā)小組開發(fā)而成。 YUI Grids CSS為開發(fā)者提供了預(yù)先設(shè)置的四種不同頁面寬度，六種不同的模板。

15. 52framework（Creative Commons）

對HTML5支持非常好，簡單易用。

16. elastiCSS（MIT）

一個基于Web接口和印刷布局的簡單CSS框架。

17. Emastic（Free）

一個與眾不同的CSS框架。

18. Fluid 960 Gride System（GPL/MIT）

Fluid 960 Grid System的模版是根據(jù)Nathan Smith之前的作品而創(chuàng)建的。即960 Grid System：傳承了MooTools和jQuery JavaScript libraries的效果。

19. xCSS（MIT）

一個面向?qū)ο蟮腃SS框架，能讓你的工作流更加簡潔。xCSS基于CSS，可以在開發(fā)復(fù)雜樣式時，提供面向?qū)ο蟮墓ぷ髁鳌?/p>

20. EM CSS Framework（MIT/GPL）

EM CSS Framework提供了一個960px寬 + 12 列網(wǎng)格系統(tǒng) + CSS的通用樣式。

四、html5 app開發(fā)框架有哪些

①：PhoneGap

PhoneGap 恐怕是最老的一個框架了，相信很多人都已經(jīng)聽說過甚至使用過它，但是PhoneGap是基于開源的cordova 商業(yè)版本。

②：Ionic

IONIC 是目前最有潛力的一款HTML5手機(jī)應(yīng)用開發(fā)框架。通過SASS構(gòu)建應(yīng)用程序，它提供了很多UI組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。它使用 JavaScript MVVM框架和 AngularJS來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為Web和移動開發(fā)者的共同選擇。

③：Mobile Angular UI

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應(yīng)式移動開發(fā)HTML5框架。

Mobile Angular UI的關(guān)鍵字有：

• Bootstrap 3

• AngularJS

• Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。

• AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate

響應(yīng)式媒體查詢是將bootstrap作為單獨的文件，你只需要包含你所需要的東西。Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過一些AngularJS指令創(chuàng)建友好的用戶體驗。

④：Intel XDK

Intel XDK 是Inter開發(fā)的一款跨平臺開發(fā)工具，我們可以很容易的通過Intel XDK開發(fā)應(yīng)用，你需要做的只是下載他們的應(yīng)用開發(fā)工具 ，有Linux、Windows和Mac版，它還提供了很多個開發(fā)框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat.

⑤：Appcelerator Titanium

 Appcelerator’s Titanium 不同于其它框架的是，它是一個開源的框架。

 Titanium是混合式移動應(yīng)用開發(fā)的一站式解決方案，你只需要下載 Titanium studio就可以解決所有的事情，Titanium SDK包含了很多手機(jī)平臺的APIs和后端云服務(wù)。

 Titanium使用 Alloy，Alloy是一個快速開發(fā)的手機(jī)應(yīng)用MVC框架， 模塊式開發(fā)可以大大減小開發(fā)時間，提高代碼復(fù)用。

⑥：Sencha Touch

Sencha Touch 同樣也是HTML5手機(jī)應(yīng)用跨平臺開發(fā)框架，運行iOS/Android/Blackberry。它已經(jīng)誕生很多年了，現(xiàn)在已經(jīng)成為很常用的混合式編程開發(fā)框架。

Sencha Touch可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的 WEB標(biāo)準(zhǔn)，全面兼容Android和Apple iOS設(shè)備。

⑦：Kendo UI

Telerik’s Kendo UI 是一個強(qiáng)大的框架用于快速HTML5 UI開發(fā)?；谧钚碌腍TML5、CSS3和JavaScript標(biāo)準(zhǔn)。

Kendo UI包含了開發(fā)現(xiàn)代JavaScript開發(fā)所需要的所有一切，包括：強(qiáng)大的數(shù)據(jù)源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。

以上就是關(guān)于html基礎(chǔ)框架相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

html自動生成工具（html代碼自動生成器）

cmd命令跳舞代碼（html流星雨代碼）

html網(wǎng)頁的基本結(jié)構(gòu)（html網(wǎng)頁的基本結(jié)構(gòu)包括哪些部分）

抖音巨量本地推（抖音巨量本地推怎么關(guān)閉）

杭州高中學(xué)校有哪些（杭州美術(shù)高中學(xué)校有哪些）