75camp · Melody0326 · Dec 7, 2016 · Dec 7, 2016 · Dec 7, 2016 · Dec 8, 2016
diff --git a/student/Melody/README.md b/student/Melody/README.md
@@ -0,0 +1,30 @@
+## My homework:memo:
+
+### Thank the teacher for a busy schedule to view my homework:heart:
+
+There are deficiencies also asked the teacher to help correct me:pray:
+
+## task-one
+
+* 1-FIND.md
+* 2-my_resume.html
+* 3-form_design.html
+* 3-FORM.md
+* 4-class_schedule.html
+
+## task-two
+
+* 1-my_resume.html
+* 1-resume.css
+* 2-drop_menu.html
+* 2-menu.css
+
+## task-web
+
+* 1-index.css
+* 1-financial.html
+* 1-financial.css
+* 1-service.html
+* 1-service.css
+* 1-online.html
+* 1-online.css
diff --git a/student/Melody/task-one/FIND.md b/student/Melody/task-one/FIND.md
@@ -0,0 +1,49 @@
+# HTML 代码中不合理之处
+
+### 以下总结依据为最新的HTML5严格标准和规范
+
+## 一、语法上分析
+* img 属性内的 alt 没有写全
+* img 指明 宽 `width` 和 高 `height` 时，单独写在样式表中
+* button 作为 `type=button` 时，没有合理指明 type
+* 在使用属性上，有一些网站使用单引号
+* 属性名全小写，用中线“-”作为分隔符，有一些网站没有按照此标准
+* 不需要在自闭合标签结尾处使用斜线（HTML5 规范），存在 `<br/>`
+
+## HTML5 doctype
+* 虽然 doctype 不区分大小写，但是按照惯例，doctype 应该大写
+  <!DOCTYPE html>，有一些网站存在小写形式
+
+## lang 属性
+* 根据 HTML5 规范，应在 html 标签上加上 lang 属性（给语音和翻译工具帮助），有一些网站上并未指明 lang 属性
+
+## 字符编码
+* 通常声明一个明确的字符编码，指定为 UTF-8，有一些网站是gb2312编码格式
+
+## IE 兼容模式
+* 用 <meta> 标签指定页面用什么版本的IE来渲染，有一些网站并没有写此项
+ `<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">`
+
+## 引入 CSS, JS
+* 根据 HTML5 规范，引入 CSS 和 JS 时不需要指明 type（因为 text/css 和 text/javascript 分别是他们的默认值）
+
+## 样式结构
+* 样式结构未分离，代码混乱，命名规则存在一定的问题
+* 大多数网站并没有做到语义化，结构布局的元素命名不规范
+
+## 属性顺序（网上搜集）
+### 属性应该按照特定的顺序出现以保证易读性：
+* class（class是为高可复用组件设计的）
+* id（id更加具体且应该尽量少使用）
+* name
+* data-*
+* src, for, type, href, value , max-length, max, min, pattern
+* placeholder, title, alt
+* `aria-*`, role
+* required, readonly, disabled
+
+## 标签数量
+* 有一些网站上存在多余的父节点，存在代码冗余（多div，多span），应尽量减少标签
+
+## 找茬网站如下
+沪江网校、站长工具-站长之家、新浪汽车、腾讯网、阳光高考、凤凰资讯等其他小网站
diff --git a/student/Melody/task-one/FORM.md b/student/Melody/task-one/FORM.md
@@ -0,0 +1,38 @@
+# 总结表单优化的几个点
+
+## 表单应该只有一列
+多列布局会扰乱用户垂直方向的视线移动
+
+## 把标签与输入框成组排列
+把标签和输入框贴近排列，确保项目之间留有足够的高度，防止用户迷惑
+
+## 避免全大写标签
+全大写标签更难阅读和浏览，应大小写结合来命名
+
+## 如果选项小于6个，全部展示出来
+把选项放入下拉菜单需要用户进行两次点击，还会把选项隐藏起来
+如果超过5项使用下拉选框
+如果超过选项25个，就要在下拉菜单中加入搜索
+
+## 纵向排列勾选框（和单选框）以保证易读性
+纵向排列勾选框可以加快勾选速度
+
+## 行动指令要具有描述性
+比如提交按钮不要用 submit，要描述出具体行为，比如登录，即为 sign up
+
+## 逐行说明错误
+告诉用户哪里错了，尽早的提示
+
+## 逐行验证要在用户填完一行之后进行
+除非填写中验证更有帮助
+
+## 用输入框长度来反映内容
+输入框的长度暗示了答案的长度。对于字数固定的输入框，例如电话号码、邮政编号等
+
+## 把相关信息编组
+用户分块思考，更容易理解表单
+
+## 合理化表单结构
+使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点
+文本框不使用size属性定义宽度，而使用css的width属性
+添加maxlength属性限制输入字符的长度
diff --git a/student/Melody/task-one/class_schedule.html b/student/Melody/task-one/class_schedule.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
+  <title>课程表</title>
+</head>
+<body>
+  <table border="1" bordercolor="#579AEE" cellspacing="1" cellpadding="10" align="center" width="1050">
+    <thead>
+      <tr bgcolor="pink">
+        <th align="center" width="5">时间</th>
+        <th>周一</th>
+        <th>周二</th>
+        <th>周三</th>
+        <th>周四</th>
+        <th>周五</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr align="center">
+        <th rowspan="2" width="5">1</th>
+        <td rowspan="2">自习</td>
+        <td rowspan="4" width="200">操作系统<p>2节/周(1-15)</p><p>金虎</p><p>3号楼-324</p></td>
+        <td rowspan="4">软件工程概论<p>2节/周(1-12)</p><p>陈立岩</p><p>3号楼-415</p></td>
+        <td rowspan="2">自习</td>
+        <td rowspan="4" width="200">UML与面向对象分析与设计<p>2节/周(1-13)</p><p>陈立岩</p><p>3号楼-105</p></td>
+      </tr>
+      <tr>
+      </tr>
+      <tr align="center">
+        <th rowspan="2" width="5">2</th>
+        <td rowspan="2">自习</td>
+        <td rowspan="2">自习</td>
+      </tr>
+      <tr>
+      </tr>
+      <tr align="center">
+        <th rowspan="2" width="5">3</th>
+        <td rowspan="4" width="200">大学英语四级<p>2节/周(1-15)</p><p>程德宇</p><p>3号楼-324</p></td>
+        <td rowspan="2">自习</td>
+        <td rowspan="4" width="200">UML与面向对象分析与设计<p>2节/周(1-13)</p><p>陈立岩</p><p>3号楼-120</p></td>
+        <td rowspan="4" width="200">编译原理<p>2节/周(1-15)</p><p>付立平</p><p>3号楼-304</p></td>
+        <td rowspan="4">离散数学<p>2节/周(1-14)</p><p>周广田</p><p>3号楼-323</p></td>
+      </tr>
+      <tr>
+      </tr>
+      <tr align="center">
+        <th rowspan="2" width="5">4</th>
+        <td rowspan="2">自习</td>
+      </tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr></tr>
+      <tr align="center">
+        <th rowspan="2" width="5px">5</th>
+        <td rowspan="2">自习</td>
+        <td rowspan="4">编译原理课程设计<p>2节/周(1-16)</p><p>付立平</p><p>4号楼-[413]计算机一机房</p></td>
+        <td rowspan="2">自习</td>
+        <td rowspan="4">第二外语(日语)<p>2节/周(1-13)</p><p>许寒</p><p>3号楼-203</p></td>
+        <td rowspan="2">自习</td>
+      </tr>
+      <tr>
+      </tr>
+      <tr align="center">
+        <th rowspan="2" width="5" >6</th>
+        <td rowspan="2" >自习</td>
+        <td rowspan="2" >自习</td>
+        <td rowspan="2" >自习</td>
+      </tr>
+      <tr>
+      </tr>
+      <tr align="center">
+        <th rowspan="2" width="5">7</th>
+        <td rowspan="2" >自习</td>
+        <td rowspan="4"  width="180">J2EE(JSP技术)<p>2节/周(10-17)</p><p>常城</p><p>3号楼-220</p></td>
+        <td rowspan="4" >操作系统课程设计<p>2节/周(4-18)</p><p>金虎</p><p>4号楼-[134]软件3机房</p></td>
+        <td rowspan="4" >大学体育<p>2节/周(1-15)</p><p>朱成</p><p>网球场-A区网球场</p></td>
+        <td rowspan="2" >自习</td>
+      </tr>
+      <tr>
+      </tr>
+      <tr align="center">
+        <th rowspan="2" width="5" >8</th>
+        <td rowspan="2" >自习</td>
+        <td rowspan="2" >自习</td>
+      </tr>
+      <tr>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>
diff --git a/student/Melody/task-one/form_design.html b/student/Melody/task-one/form_design.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
+  <title>注册表单</title>
+</head>
+<body>
+  <!-- 优化前 -->
+  <!-- 该网站的表单设计存在很多不合理的地方
+  1.在填写组织和昵称时，并未及时告诉用户是否重复，不能帮助用户不出错
+  2.再输入手机号码时，即时只输入一位也不会报错，没有尽早提示错误
+  3.在表单结构设计上把默认提示当作标签-->
+  <form class="register_items" id="register_items" style="display: block;" novalidate="novalidate">
+    <label class="input_val checkRight">
+      <input class="input valid" name="COMPANY" value="" autocomplete="off" id="VALIDATION-0C6-25D-7148">
+      <span style="display: none;">组织名</span>
+      <div class="error_img"></div>
+    </label>
+    <label class="input_val checkRight">
+      <input class="input valid" name="NICKNAME" value="" autocomplete="off" id="VALIDATION-606-001-81EA">
+      <span style="display: none;">昵称</span>
+      <div class="error_img"></div>
+    </label>
+    <label class="input_val checkRight">
+      <input class="input valid" name="PHONE" value="" autocomplete="off" id="VALIDATION-13B-FC6-5E9B">
+      <span style="display: none;">手机号</span>
+      <div class="error_img"></div>
+    </label>
+    <label class="input_val checkRight">
+      <input class="input valid" name="EMAIL" value="" autocomplete="off" id="VALIDATION-77F-B60-6A31">
+      <span style="display: none;">登录邮箱</span>
+      <div class="error_img"></div>
+    </label>
+    <label class="input_val checkRight">
+      <input class="input valid" name="PASSWORD" value="" type="password" autocomplete="off" id="VALIDATION-1CF-3E3-6F1D">
+      <span style="display: none;">密码</span>
+      <div class="error_img"></div>
+    </label>
+    <div class="remeber">点击注册表示您接受<a id="treaty">《麦客CRM免费版用户协议》</a></div>
+    <a class="login_btn submit">免&nbsp;&nbsp;费&nbsp;&nbsp;注&nbsp;&nbsp;册</a>
+  </form>
+
+  <!-- 优化后 -->
+  <form class="register_items" action="/echo" method="post " novalidate>
+    <p>
+      <p>组织名</p>
+      <input class="input valid" name="company" type="text" autocomplete="off" placeholder="请输入组织名" autofocus>
+      <div class="error_img"></div>
+    </p>
+    <p>
+      <p>昵称</p>
+      <input class="input valid" name="nickname" type="text" autocomplete="off" placeholder="请输入昵称">
+      <div class="error_img"></div>
+    </p>
+    <p>
+      <p>手机号</p>
+      <input class="input valid" name="phone" type="text" autocomplete="off" required minlength="2" maxlength="10" placeholder="请输入手机号">
+      <div class="error_img"></div>
+    </p>
+    <p>
+      <p>登录邮箱</p>
+      <input class="input valid" name="email" type="text" autocomplete="off" placeholder="请输入邮箱">
+      <div class="error_img"></div>
+    </p>
+    <p>
+      <p>密码</p>
+      <input class="input valid" name="password" type="password" autocomplete="off" placeholder="请输入密码">
+      <div class="error_img"></div>
+    </p>
+    <div class="remeber">点击注册表示您接受<a href="/protocol" target="_blank">《麦客CRM免费版用户协议》</a></div>
+    <button type="submit">免费注册</button>
+  </form>
+</body>
+</html>