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

开发环境:

我选择的是: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>


Html5学习---选用开发环境和学习资源_第1张图片Html5学习---选用开发环境和学习资源_第2张图片


你可能感兴趣的:(html5,浏览器,input,div,import,button)