Html5学习---选用开发环境和学习资源

来源：互联网发布：js隐藏hide 编辑：程序博客网时间：2024/05/17 01:56

开发环境：

我选择的是：Maqetta 。

它是另一个基于浏览器的HTML5编辑器，支持各种设备和浏览器，非常易用。Maqetta 是个全功能的 WYSIWYG 编辑器。开发者可以创建web页面，拖曳元素到页面，设计或源码模板来编辑。线框图功能也很方便。可定制化大量不同类型风格的widgets。

下载地址是：http://maqetta.org/

学习资源：

http://www.w3school.com.cn/html5/index.asp

开始学习的时候怕的就是面面俱到，先选择好环境，和最初始的demo，以及学习资源，上手后再去接触其他的。这样就可以事半功倍。

下面我列举一下它自带的例子：

附上源码：

<!DOCTYPE html><html><head><title>Sample1.html</title><style type="text/css">@import "themes/claro/claro.css";@import "app.css";@import "lib/dojo/dojo/resources/dojo.css";</style><script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script><script type="text/javascript">dojo.require('dijit.layout.TabContainer');dojo.require('dijit.layout.ContentPane');dojo.require('dijit.form.Button');dojo.require('dijit.form.ComboBox');dojo.require('dijit.form.MultiSelect');dojo.require('dijit.form.TextBox');</script><script src="maqetta/States.js"></script><script src="maqetta/maqetta.js"></script></head><body class="claro" data-davinci-ws="collapse" dvFlowLayout="true" dvStates="{'Add Task':{'origin':true},'Task Added':{'origin':true}}" id="myapp"><span dojoType="dijit.layout.TabContainer" style="width: 300px; height: 250px; min-width: 1em; min-height: 1em;" controllerWidget="dijit.layout.TabController"><div dojoType="dijit.layout.ContentPane" title="Tasks" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" style="width: 376px; height: 180px;" doLayout="false"> <div style="text-align: right;">  <input type="button" dojoType="dijit.form.Button" disabled="false" intermediateChanges="false" label="New" iconClass="dijitNoIcon" onclick="davinci.states.setState('Add Task')"></input>  <input type="button" dojoType="dijit.form.Button" disabled="false" intermediateChanges="false" label="Del"></input></div> <div style="padding-top: 10px; padding-bottom: 10px;"><label>Sort by:</label>  <select dojoType="dijit.form.ComboBox" value="Name" disabled="false" readOnly="false" intermediateChanges="false" trim="false" uppercase="false" lowercase="false" propercase="false" required="false" style="width: 126px; margin-left: 5px;">    <option dvwidget="html.option" value="Name" selected="true">      Name</option>    <option dvwidget="html.option" value="Due date" selected="false">      Due date</option>  </select></div> <select multiple="true" dojoType="dijit.form.MultiSelect" disabled="false" readOnly="false" intermediateChanges="false" style="display: none; width: 200px;" dvStates="{'Task Added':{'style':{'display':''}}}">   <option dvwidget="html.option" value="Task 1" selected="false">     Task 1</option> </select></div><div dojoType="dijit.layout.ContentPane" title="Projects" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" style="width: 376px; height: 180px;" doLayout="false"></div><div dojoType="dijit.layout.ContentPane" title="Roles"></div></span><div dojoType="dijit.layout.ContentPane" title="Pane" doLayout="false" style="border-color: #053ef8; border-width: 1px; border-style: solid; background-color: #ffffff; display: none; width: 350px; height: 75px; position: absolute; left: 72px; top: 79px;" dvStates="{'Add Task':{'style':{'display':''}}}"> <div style="font-weight: bold; text-align: center; padding-top: 6px; padding-left: 6px;">   Add new task</div> <div>  <label>    Task name:</label>  <input type="text" dojoType="dijit.form.TextBox"></input>  <input type="button" dojoType="dijit.form.Button" disabled="false" intermediateChanges="false" label="Add" onclick="davinci.states.setState('Task Added')"></input></div></div></body></html>