任务一：零基础HTML编码

开始系统学习前端

通过好友 #HRL 的介绍

百度前端技术学院：

http://ife.baidu.com/

网站上都是以任务的形式来进行学习

网站会提供在线学习参考资料以及各种建议还有其他团队的学习成果

都是很好的资源

趁自己考研初期还有点时间就抓紧学学吧

今天开始第一课

----------学习中晚点上传代码及成果-----------

Web相关名词通俗解释：https://www.zhihu.com/question/22689579 对一些常用名词有个基本的了解

HTML： https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction 对HTML的基本介绍

MOOC：http://www.imooc.com/learn/9

我用的是 dabblet 在线编辑器，体验良好，可以动态显示结果，但有点卡，不知道是不是因为自己网卡？

其实这个任务并不难，就是了解了解一些简单的语法，各种标签，简单的用法。讲究的就是熟练，熟能生巧。

任务完成效果：http://result.dabblet.com/gist/a377e7769dcf5a23e8e6a1b96c03196d/875a079a2f87a5d7b9445edab502e000d39823b6

代码：

  1 <!-- content to be placed inside <body>…</body> -->
  2 <!-- content to be placed inside <body>…</body> -->
  3 <!doctype html>
  4 <!--2016.4.27-->
  5 <html>
  6     <head>
  7     <style type="text/css">
  8     table tr td,th{border:1px solid #000;}
  9     </style>
 10     </head>
 11     <body>
 12         <div one>
 13         <h1>Title One</h1>    
 14         <a href="http://baike.baidu.com/link?url=PsySOISu2lt3jFbTOuyoo51WNDmxr8MtA1Dczh5bvVSZQnhUmpWWm1xpbBt8R6aP1W15bMffhpQFv3yLeEVUoq" title="罗帆真帅">Page One</a><br>
 15         <a href="http://baike.baidu.com/link?url=PsySOISu2lt3jFbTOuyoo51WNDmxr8MtA1Dczh5bvVSZQnhUmpWWm1xpbBt8R6aP1W15bMffhpQFv3yLeEVUoq" title="罗帆真帅">Page Two</a><br>
 16         <a href="http://baike.baidu.com/link?url=PsySOISu2lt3jFbTOuyoo51WNDmxr8MtA1Dczh5bvVSZQnhUmpWWm1xpbBt8R6aP1W15bMffhpQFv3yLeEVUoq" title="罗帆真帅">Page Three</a><br>
 17         <a href="http://baike.baidu.com/link?url=PsySOISu2lt3jFbTOuyoo51WNDmxr8MtA1Dczh5bvVSZQnhUmpWWm1xpbBt8R6aP1W15bMffhpQFv3yLeEVUoq" title="罗帆真帅">Page Four</a><br>
 18         <h2>Title Two</h2>
 19         <h3>Title Three<h3>
 20         <p>Author:Fanyear Time:2016.4.27</p>
 21         <p>brabrabra...brabrabra...brabrabra...brabrabra...brabrabra...brabrabra...brabrabra...</p>
 22         <br>
 23         <p>brabrabra...brabrabra...brabrabra...brabrabra...brabrabra...brabrabra...brabrabra...<a href="http://www.baidu.com" title="Go to Baidu">wwww.baidu.com</a>brabrabra...brabrabra...brabrabra...</p>
 24         <p>brabrabra...brabrabra...<em>brabrabra</em>...<strong><em>brabrabra...</em></strong></p>
 25         <img src="http://p14.qhimg.com/dr/360_210_/t01aefc8fc255c8618e.jpg" > 
 26         <p>brabrabra...brabrabra..brabrabra..</p>
 27         <p><strong>brabrabra..</strong>brabrabra..brabrabra..brabrabra..<a href="http://www.baidu.com" target="_blank" >brabrabra..</a></p>
 28         </div>
 29         <div two>
 30             <h1>Title Four</h1>
 31             <h2>Title Five<h2>
 32             <p>Author: Mia Time:2016.4.27</p>
 33             <img src="http://p14.qhimg.com/dr/360_210_/t01aefc8fc255c8618e.jpg" > 
 34             <ul>
 35             <li>one</li>
 36             <li>two</li>
 37             <li>three</li>            
 38             </ul>
 39             <p>Picture</p>
 40             <img src="http://p14.qhimg.com/dr/360_210_/t01aefc8fc255c8618e.jpg" > 
 41             <img src="http://p14.qhimg.com/dr/360_210_/t01aefc8fc255c8618e.jpg" > 
 42             <img src="http://p14.qhimg.com/dr/360_210_/t01aefc8fc255c8618e.jpg" > 
 43         </div>
 44         <div three>
 45             <h2>Title six</h2>
 46             <h3>Title seven<h3>        
 47             <ol>
 48             <li>Mia</li>
 49             <li>Pual</li>
 50             <li>Dom</li>
 51             </ol>
 52             <table>
 53                 <tr>
 54                     <th>Name</th>
 55                     <th>Sex</th>
 56                     <th>Score</th>
 57                 <tr>    
 58                 <tr>
 59                     <td>mia</td>
 60                     <td>girl</td>
 61                     <td>99</td>
 62                 </tr>
 63                 <tr>
 64                     <td>paul</td>
 65                     <td>boy</td>
 66                     <td>99</td>
 67                 </tr>
 68             </table>
 69         </div>
 70         <div side>
 71             <h2>Title eight</h2>
 72             <form method="post" action="save.php">
 73             Your email :<input type="test" name="email"></input>
 74             <br><br>
 75             Password :<input type="password" name="password"></input>
 76             </form>
 77             <label>Sex:</label>
 78             <label>Man</label>
 79             <input type="radio" value="1"  name="gender" checked="checked"/>
 80             <label>Woman</label>
 81             <input type="radio" value="2"  name="gender" />
 82             <br>
 83             <label>City<label>
 84             <select>
 85                 <option name="1">Nanning</option>
 86                 <option name="2">Qin Huangdao</option>
 87                 <option name="3">Gaoming</option>
 88                 <option name="4">Foshan</option>
 89             </select>
 90             
 91             <br>
 92             <label>Hobby </label> 
 93             <label>Car</label>
 94             <input type="checkbox" value="1"  name="hobby"  />
 95             <label>Beer</label>
 96             <input type="checkbox" value="2"  name="hobby"  />
 97             <label>Basketball</label>
 98             <input type="checkbox" value="3"  name="hobby"  />    
 99             <br>
100             <label>Introduciton</label>
101             <br>
102             <textarea cols="100"rows="10">input...</textarea>
103             <br>
104              <input type="submit" value="submit" name="submitBtn" />
105              <br>
106              <label><h3><strong>All rights resevered</strong></h3></label>
107             </div>
108     </body>
109 </html>

请各位多多指教