同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 CSS 框架。

關于 Pico.css

Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點是樣式都基于 HMTL 原始的標簽名和內置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護性強，能夠幫助開發者構建自己的 UI 系統，也可以直接用于快速的小型項目中。

截止發文日期，Pico.css 在 Github 上已經有高達 3898 個 Star。

Pico.css 框架的特點

• 去 class 以及原生語義化的代碼。Pico.css 盡可能使用原生的 HTML 元素的標簽名稱來定義樣式，整個框架使用的 class 名稱不到10個
• 純 CSS 實現。所有組件都由一個 10KB（壓縮后）的 CSS 文件實現，無包管理，沒有依賴和外部文件，甚至連 javascript 代碼都沒有
• 響應式布局。內置響應式的柵格系統，在 PC / 手機 / 平板等不同屏幕大小的設備上排版美觀一致
• 支持深色主題。附帶兩個漂亮的顏色主題，根據用戶喜好一鍵啟用

開發上手

引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：

當然也可以通過 npm 安裝：

然后就可以編寫 html 代碼了。

HTML 原生語義化的編程

想要做一個輸入框和提交表單，往往需要這樣的代碼：

而使用 Pico.css，只需要：

Pico.css 內置了很多基礎的組件，包括常用表單控件、表格、彈窗、導航菜單、卡片等，代碼非常簡潔，比如實現一個美觀的進度條，只需要這點代碼：

使用深色主題

Pico.css 內置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。

官網還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學習 html 語法的時代。

通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標簽名、內置的屬性以及自定義屬性來命中，這樣就規避了常規的只使用 class 來區分的“命名地獄”，是一種非常好的網頁編程思路。

面向對純粹 HTML 有極致追求的開發者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標簽名和屬性編寫網頁。

使用 Pico.css 的原因

在項目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點笨重了，如果使用當前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項目的標配，考慮到目前市面上大多數 UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。

css 樣式的寫法很自由，目前前端開發存在一個趨勢，為了做精美的界面，需要花費大量的時間來寫樣式，為了樣式可以復用，絞盡腦汁給 class 起名字，甚至網上還有各種 class 命名規范，這可能導致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護。

Pico.css 的出現給這樣的開發現狀提供了一種新思路，不僅可以直接用在實際項目中，也能夠作為構建自己的 UI 庫的基礎樣式。

免費開源說明

Pico.css 是一個免費開源的項目，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面｜那些免費的磚

tml用什么開發

html用什么開發？例如：Adobe Edge：目前還處于預覽階段的Adobe Edge是用HTML5、CSS、JavaScript開發動態互動內容的設計工具。內容可以同時兼容移動設備和桌面電腦。下面是html開發工具介紹，希望對您有所幫助。

一、Adobe Edge

目前還處于預覽階段的Adobe Edge是用HTML5、CSS、JavaScript開發動態互動內容的設計工具。內容可以同時兼容移動設備和桌面電腦。Edge的一個重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構一致性，此外Edge還將整合TypeKit這樣的字體服務。

動畫和圖形可以添加到HTML元素中，程序也能通過Edge自身的代碼片段庫或者JavaScript代碼進行擴展。動畫可以在獨立的時間線上進行嵌套，還能實現互動功能。符合可以服用并通過API和代碼片段控制。通過Edge設計的內容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器。

二、Adobe Dreamweaver CS6

Adobe Dreamweaver CS6作為一個Web設計軟件，提供了對HTML網站和移動程序的可視化編輯界面。其Fluid Grid排版系統整合CSS樣式表功能，提供自適應版面的跨平臺兼容性。開發者可以完全實現Web設計的可視化操作，無需為代碼所困。

用戶不但還能在Live View中預覽，還提供多屏幕預覽功能。開發者可以通過MultiScreen預覽面板查看HTML5內容的渲染效果。Live View通過WebKit渲染引擎支持HTML5。

三、Adobe ColdFusion 10

ColdFusion是用來開發企業Web程序的服務器端技術，通過Websockets、互動表單、視頻和地理標簽等HTML5技術創建富媒體用戶體驗。

四、Sencha Architect 2

在開發移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發。開發團隊可以在一個單一集成的環境中完成應用的設計、開發和部署。開發者還可以開發Sencha Touch2和Ext JS4 JavaScript應用，并實時預覽。

五、Sencha Touch 2

Sencha Touch2是移動應用框架，也被看作是Sencha的HTML5平臺。開發者可以用它開發面向iOS、Android和Blackberry、Kindle Fire等多種平臺的移動應用。

六、Dojo Foundation Maqetta

來自于IBM的一個項目，Dojo Foundation Maqetta是為桌面和移動設備開發HTML5應用的開源工具，支持在瀏覽器中查看HTML5界面。用戶體驗設計師可以通過拖放組裝UI樣板

七、微軟Visual Studio 2010 ServicePack 1

雖然一開始并不支持HTML5，但微軟在2011年三月發布的Visual Studio 2010 SP1中提供了IntelliSense，追加了針對HTML5的一些元素。

八、JetBrains WebStorm 4.0

作為擁有HTML編輯器的JavaScript集成開發環境，WebStorm4.0提供了開發web應用的HTML5樣板。開發者可以在創建HTML文檔時可獲得對HTML5文件的支持。例如砍伐者鍵入。開發者還可以在chrome瀏覽器中實時預覽HTML文檔。

html5用什么開發工具

1.Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 網頁設計軟件提供了一套直觀的可視界面，供您創建和編輯網站和移動應用程序。使用專為跨平臺兼容性設計的自適應網格版面創建網頁。在發布前，使用"多屏幕預覽"來審閱您的設計。

2.Adobe Edge

Adobe Edge是Adobe公司的一款新型網頁互動工具。允許設計師通過HTML5、CSS和Java制作網頁動畫。無需Flash。Adobe Edge的目的是幫助專業設計師制作網頁動畫乃至簡單游戲。該工具的重點放在動畫引擎上，但adobe承諾將增加更多HTML5功能，比如Canvas、HTML5音頻/視頻標簽等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各個平臺。Adobe于2014年正式推出Adobe Edge AnimateCC[1] 集成了html5、js、css的開發工具。人們也許會問，這一舉措是不是表明Adobe正在向蘋果等公司讓步?蘋果認為Flash是一種過時的技術，而HTML5才是未來。蘋果的iPad和iPhone等產品中無法顯示Flash動畫。其實，Adobe Edge并不會替代Flash。該軟件只是為網頁設計人員提供了一種工具，幫助他們在不支持Flash的設備(比如蘋果iOS設備)上制作網絡動畫。Adobe Edge項目負責人馬克·安德斯(Mark Anders)在接受電話采訪時表示，應開發者的要求，Adobe推出了新的非Flash軟件。他表示：“開發者社區確實希望有這樣的軟件。”

3. DevExtreme

DevExtreme Complete Subion是性能最優的 HTML5,CSS 和 Java 移動、Web開發框架，可以直接在Visual Studio集成開發環境，構建iOS，Android，Tizen和Windows Phone 8應用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個原生UI組件，并且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發環境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動平臺，是Visual Studio開發人員開發跨平臺移動產品的首選工具。

4. JetBrains WebStorm

WebStorm 是jetbrains公司旗下一款Java 開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的Java IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

5. Sencha Architect

Sencha Architect 2是個可視化的應用構建器，它使用Sencha Touch 2來構建移動應用，使用ExtJS 4來構建桌面應用。Sencha Architect 2構建在該公司的HTML5布局工具Ext Designer之上，并擴展了其功能以為桌面與移動Web應用的構建提供更為廣泛的應用設計環境。通過聯合使用Sencha Touch 2與ExtJS 4，Sencha Architect 2旨在提升開發者的生產率并驅動應用設計模式上的最佳實踐。

HTML基礎知識總結

一、HTML的定義

HTML，超文本標記語言，寫給瀏覽器的語言，目前網絡上應用最廣泛的語言。HTML也在不斷的更新，最新版本已經出現了HTML5。在HTML5中出現了許多新特性，也遺棄了一些舊元素。我們寫好html文件后，在瀏覽器中打開。主流的瀏覽器包括IE、Firefox、Chrome、Goole等。

二、HTML標簽元素

HTML元素由開始標簽和結束標簽組成。雖然現在我們還不知道具體標簽代表的意思，但標簽一定是這樣的格式：有一對開始<>和結束。一般標簽名推薦用小寫。標簽具有屬性，屬性用來表示標簽的特征。比如，我們用大小這個屬性，來衡量一個蘋果。所以，大小可以用來表示蘋果的特征。屬性時寫在標簽里面的，而且是開始標簽內。

三、規范的html頁面

1、文檔聲明

在前，要寫文檔聲明語句: ，當然也可以用小寫表示。文檔聲明的作用是告訴瀏覽器該文檔遵循html規范。

2、標題

一般情況下，我們都會設定html文檔的標題。這樣的作用是使用戶看起來感覺友好。標簽為,標簽內放標題名稱。

3、頁面編碼

編碼的種類有多種，但常用的是utf-8和gb2312。utf-8為多國語言編碼，gb2312為中文簡體編碼。對于編碼的詳細問題，可以瀏覽博客。設置網頁編碼的語句為，是在標簽內定義的。

4、頁面關鍵字，內容

我們可以在文檔中設置一些關鍵詞，內容介紹。這樣的好處是，當我們的網頁發布在網上，用戶可以通過在搜索框中輸入關鍵字，找出一些比較符合的網頁。這樣一來，我們的網頁便可以更容易地被別人訪問。

HTML5應用須知

它可能會消滅Flash

許多業內人士表示，HTML將會最終代替多媒體框架，如Adobe的Flash，但是短期看來還不是時候。HTML5估計到2014年才能逐步成熟，而且將現有應用Flash的網絡開發完全轉向HTML5還需要一段時間。盡管HTML5提出了許多優點，但是還可能有某些應用更適合于更靈活的框架。一些主流的大公司都逐步轉向使用HTML5，谷歌于2015年2月26日開始自動將Flash廣告轉換為HTML5格式，這可能會加速HTML5替代Flash的進程，但是這個轉變的過程也不是一蹴而就的。

它新并不表示它安全

網絡應用開發工程師們在學習新技術的同時需要時刻記住網絡安全。HTML5所構建的網頁和其他語言編寫的網頁一樣容易泄露一些敏感數據。歐洲網絡信息安全機構(European Network and Information Security Agency，ENISA)已經警告說HTML5可能并不夠安全。

它承諾帶來一個無縫的網絡

HTML5會帶來一個統一的網絡，無論是筆記本，臺式機，還是智能手機都應該很方便的瀏覽基于HTML5的網站。因此在設計網站的時候，開發者需要重新考慮用戶體驗，網站瀏覽，網站結構等因素使得這個網站對任何硬件設備都通用。

它會變成企業的SaaS平臺

一些重量級的企業，如微軟，Salesforce，SAP Sybase正在開發HTML5的開發工具。如果你正在構建企業應用，很可能不久的將來你就要用到HTML5。所以當構建公司的SaaS戰略遷移的時候也不要忘記HTML5。

它將會變得很移動

幾乎所有人都熱衷于開發獨立的移動應用，但是HTML5很可能會是獨立移動應用的終結者。由于HTML5將應用的功能直接加入其內核，這很可能引導移動技術潮流重新回到瀏覽器時代。HTML5允許開發者在(移動)瀏覽器內開發應用，所以如果你正在制定一項桌面或者移動應用的長期發展策略，你可能需要考慮這一點。

點擊左下角了解更多課程資訊

簡易富文本編輯

讓HTML標簽的contenteditable屬性設為true即可直接修改內部內容，但是Android和在pc網頁上使用可能存在差異。這里分享一個簡單的富文本編輯，需要配合Android使用。

這個富文本編輯目前通過于Android端交互可以向其中添加圖片、添加超鏈接、普通文本。主要靠js驅動（我的基礎不行，只能寫成這樣）。詳細解釋看代碼即可，需要配合Android知識。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本編輯</title>
    <script type="text/javascript">
		/*每一個被添加的標簽（也就是圖片、超鏈接）都會被一層div包裹，固定其具體位置，并且每次添加完一個都會在其下部添加一個div用于輸入文本（可忽略）*/
        /*添加外層標簽*/
        function outDiv(inLabel)
        {
            var outdiv=document.createElement("div");
            outdiv.style.textAlign="center";
            outdiv.contentEditable=true;
            outdiv.appendChild(inLabel);
            document.getElementById("main").appendChild(outdiv);
            var nextDiv=document.createElement("div");
            document.getElementById("main").appendChild(nextDiv);
            nextDiv.outerHTML="<div style='margin-left: 30px; margin-right: 30px;' contenteditable='true'><br></div>"
        }

        /*添加圖片*/
        function addPhoto(path)
        {
            var addImg=document.createElement("img");
            outDiv(addImg);
            addImg.outerHTML="<img src='" + path + "' alt='圖片存在問題' id='" + path + "'/>";

        }

		/*Android端存在圖片傳輸問題，是先將圖片保存到文件夾內，再在html中調用，而在html中使用退格鍵即可刪除標簽，所以Android端在適當的時候清除沒有用到的圖片*/
        /*確定圖片是否存在于html頁面中*/
        function isExistedPhoto(id)
        {
            if(document.getElementById(id))
            {
                return 1;
            }
            else
            {
                return 0;
            }
        }
		/*受Android端影響，啟用預覽模式時，將整體網頁所有標簽設為不可編輯（代碼在下面），同時為了確保同步，每次預覽都會在Android端存儲，因為js沒法直接存儲文件，所以將網頁代碼整體返回到Android端接收并保存到文件內，注意Android端應對得到的結果轉碼，因為得到的是unicode碼，即使js已經轉過了。*/
        /*返回整體網頁*/
        function wholeHtml()
        {

            return unescape(document.getElementsByTagName('html')[0].outerHTML.toString());
        }

        /*添加鏈接*/
        function addHref(href)
        {
            var a=document.createElement("a");
            a.href=href;
            a.innerText=href;
            a.contentEditable=true;
            outDiv(a);
        }
		
		/*開啟預覽模式則不可編輯，此時可以驗證鏈接*/
        /*可編輯設置*/
        function setEditAble(type)
        {
            if(!type)
            {
                getEdit("div", type);
                getEdit("img", type);
                getEdit("a", type);
            }
            else
            {
                getEdit("div", type);
                getEdit("img", type);
                getEdit("a", type);
            }
        }
        /*獲取對象*/
        function getEdit(label, type)
        {
            var aa=document.getElementsByTagName(label);
            if(!type)
            {
                for( var a1=0; a1 < aa.length; a1++)
                {
                    aa[a1].contentEditable=false;
                }
            }
            else
            {
                for( var a1=0; a1 < aa.length; a1++)
                {
                    aa[a1].contentEditable=true;
                }
            }
        }
    </script>
</head>
<body>
	<!--只要一個基礎div就行，甚至可以直接用body添加id代替-->
    <div id="main" contenteditable="true" style="margin-left: 30px; margin-right: 30px;"></div>
</body>
</html>

由于本人技術能力限制，無法很好的寫出代碼，只能提供一個簡易的編輯。

對應Android端的簡易介紹

Android端根據js代碼設置對應內容。

webview建立

//根據id查找
webView=rootView.findViewById(R.id.makeArticle);
		//啟用js支持
        webView.getSettings().setJavaScriptEnabled(true);
//下面有一堆設置內容，我也不太明白，大致是啟用js支持、支持網絡傳輸、支持html5格式存儲、支持本地存儲        webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
		//網頁處理，內部可根據網頁開始、網頁完成等狀態做處響應
        webClient=new WebClient();
        webView.setWebViewClient(webClient);
        //允許操作文件
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webView.getSettings().setBlockNetworkLoads(false);
        webView.getSettings().setBlockNetworkImage(false);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        //添加js可調用的函數類，函數使用javascriptinterface注釋，內部函數可以被js所調用
        webView.addJavascriptInterface(new MakeArticleWeb(getContext(), username, articleId, webView), "makeArticle");

使用Android調用js代碼

//webview使用要在同一進程中
//基礎格式
webView.loadUrl(url);//注意此調用異步加載，可能比后續loadUrl方法加載慢
//加載js代碼
webView.loadUrl("javascript：js函數(參數)");//傳入一個字符串，前面javascript固定，后面為要調用的函數名，注意當參數要傳入字符串時，加上單引號。
//loaddata
webView.loadData(文本，文本格式(mimetype)（例如text/html為html文本），編碼格式（例如UTF-8）);

WebView的loadUrl異步加載問題

因loadUrl加載順序不一致導致錯誤，因為webview使用必須在統一進程中，最好避免。如果實在需要，可以通過WebViewCilent中onPageFinsihed方法，在其中運行js可避免頁面未完全加載導致js無法執行的異常。

示例：

 //網頁監控
    public class WebClient extends WebViewClient
    {
		//頁面加載完成調用該方法
        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            onCreateViewUpdate();
            //不為空，更新數據
            if(addList.size() > 0 && number <=30)
            {
                for (Bitmap value : addList.values()) {
                    String savePath=MakeUUID.makeUUID(username + "-" + articleId) + ".png";
                    saveThePhotoWithBitmap(value, savePath);
                    //此處調用了js，而且該js必須在頁面完全加載后才能有效使用
                    webView.loadUrl(addTo(savePath, 0));
                }
            }
            //保存網頁數據
            saveHtml();
        }

webview調用goback方法返回亂七八糟的東西(例如返回url）

單擊webview中超鏈接進入其它網頁再調用goback返回時可能出現問題，可通過修改默認的gobakc返回流程改善。

代碼：

public String startUrl=thePath;//記錄一開始的url，直接通過內部類寫死，或在構造方法中定義
        private int pageNumber=0;//頁面計數，判斷當前網頁是不是主網頁
        
        //重寫該方法，適配Android高版本
		@Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
        {
            System.out.println(startUrl);
            //如果頁面不是主頁面且當前url不是一開始的url，跳轉會主界面
            if(!request.getUrl().equals(startUrl) && pageNumber !=0)
            {
                System.out.println(pageNumber);
                pageNumber=0;
                view.loadUrl(startUrl);//返回主界面
                return true;
            }
            else
            {
                pageNumber=1;
                //使用原流程
                return super.shouldOverrideUrlLoading(view, request);
            }
        }

最好把這些代碼寫在內部類中方便調用。