同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 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);
            }
        }

最好把这些代码写在内部类中方便调用。