2016.6.18-2016.6.24

Posted 2020-07-29

写在前面：

　　谢谢诸位前辈的声援，超感动，这周继续哈。嘻嘻。

　　直都在找关于前段都该学什么，学习顺序是什么，那，我把我了解到的，我的觉得不错的顺序分享给大家：

　　第一部分

　　html

　　css

　　javascript

　　DOM编程

　　网页分析

　　第二部分

　　UI交互设计

　　http协议

　　服务端

　　html精通

　　ajax

　　第三部分

　　jQuery

　　bootstrap

　　AngularJS

所以要学的东西要很多，给自己加个油。

 

---

这次总结是关于表格和表单的

表格标签：可以在网页建一个表格，以前用于网页设计，现在用div+css。

 1   <table border="1" width="100" height="100">
 2           <!--在该标签中可以设置宽度（width）表格高度（height）表格的边框宽度（border）表格的边框颜色（bordercolor）-->
 3             <!--表格的单元间距（cellspacing），单元格间距的单位为像素
 4             表格的单元格边距（callpadding）设置文字和边缘框的距离
 5             表格背景色bgcolor，表格背景图像background
 6             表单的对齐方式align，可选参数left，center，right-->
 7         <captiom>标题</captiom>
 8         <!--表格标题的垂直对齐方式valign，可选参数：top，right-->
 9         <thead><!--设计样式表，背景颜色，文字对齐方式等-->
10         <tr  valign="top">
11             <!--可以设置属性：行高：height 边框颜色：bordercolor
12             行背景色：bgcolor
13             行文字的水平对齐方式：align：left，right,char,justify,center
14             行文字的垂直对齐方式：valign：top，middle，bottom-->
15             <th>表格的表头</th>
16             <th>表格的表头</th>
17             <th>表格的表头</th>
18             <th>表格的表头</th>
19             <th>表格的表头</th>
20             <th>表格的表头</th>
21             <!--表头内容自动加粗-->
22         </tr></thead><!--只作用于表头-->
23         <tbody><!--设计主体样式-->
24         <tr>
25             <td>单元格内的文字</td>
26             <!--单元格宽度width，单元格height，单位为像素-->
27             <td colspan="2">单元格内的文字</td><!--跨列属性-->
28             <td rowspan="2">单元格内的文字</td><!--跨行属性-->
29             <td>单元格内的文字</td>
30            <!-- 行文字的水平对齐方式：align：left，right
31             行文字的垂直对齐方式：valign：top，middle，bottom
32             单元格的背景色：bgcolor
33             单元格的边框颜色：borbercolor-->
34         </tr>
35         <tr>
36             <td >单元格内的文字</td>
37             <!--bordercolorlight:亮边框颜色-->
38             <!--bordercolordark:暗边框颜色-->
39             <td nowrap>单元格内的文字</td>
40             <!--单元格内容不换行nowrap-->
41             <td>单元格内的文字</td>
42             <td>单元格内的文字</td>
43             <tfoot><!-设计表尾样式-->
44             <td>单元格内的文字</td>
45             </tfoot>
46         </tr>
47         </tbody>
48     </table>

表单标签：向页面添加一些功能，感觉以后要学一些关于文件传输的知识（Ha，现在说不清楚是啥）。

这里还可以参考一下表单的实用性设计原则【参考】（减少用户完成表单的精力，提高表单的提交率）：

1.表单要简短

2.将有关联的标注和字段在视觉上进行分组

3.将所有字段排成一列

4.通过逻辑定序：尽可能列出用户常用的选项，并按使用由高到低排序

5.避免占位文本：用户可能认为已经填完了，有的文本需要手动删除

6.输入框要与输入内容的类型和大小匹配

7.区别选填字段和必填字段：选填越少越好

8.给出输入要求或格式规格

9.避免重置按钮和清空表单按钮：提供一个“取消”按钮，比提交按钮在视觉上暗一些

10.提供高亮且精准的错误反馈：加红，并给出错误原因

   <form method="post" action="music">
        <input name="text" name="控件名称" size="控件长度" maxlength="最多字符数" value="文字字段的默认取值"><!--文本框-->
        <input type="password" name="控件名称" size="控件长度" maxlength="最多字符数" value="文字字段的默认值"><!--密码-->
        <input type="button" name="按钮名" value="按钮取值" onclick="window.open()"><!--onclick:事件处理方式-->
        <input type="submit" name="按钮名" value="按钮取值">
        <!--提交，不需要设置onclick参数，在点击该类按钮时可以实现表单内容的提交，该语法value同样设置按钮上的显示文字-->
        <input type="reset" name="按钮名" value="按钮取值"><!--重置-->
        <input type="radio" value="单选按钮取值" name="单选按钮名称" checked>
        <input type="radio" value="单选按钮取值" name="单选按钮名称" checked>
        <!--单选按钮，checked表示这一单选默认被选中-->
        <input type="checkbox" value="复选的值" name="复选的名字" checked><!--复选-->
        <input type="image" src="图片地址" name="图片域的名称"><!--图片按钮-->
        <input type="hidden" name="隐藏域名称" value="提交的值">
        <!--隐藏域的值不显示在页面中，但提交表单时，名称和值会传递给处理程序-->
        <input type="file" name="文件域名称"><!--文本域-->
        <textarea name="文本域名称" cols="列数" rows="行数"></textarea><!--文本域-->

    </form>
    <!--action：表单的提交地址
    method：表单的传递方式，get：对递交的信息长度有限，不具有保密性。post：没有数据长度限制-->
    <form enctype="multipart/form-data">
        <select name="下拉菜单的名称">
            <option value="选项值" selected>选项显示内容1
            <option value="选项值">选项显示内容2
            <!--selected表示该选项默认情况下选中-->
        </select>
    </form>
    <!--enctype:编码方式，
    取值及含义：
    text/plain：以纯文本的形式传递
    application/x-www-form-urlencoded:默认编码方式
    multipart/form-data:MME编码，上传文件的表单必须选择该项
    -->
    <form target="_blank">

    </form>
    <!--
    目标显示方式
    target取值及含义：
    _blank：将返回值在新的窗口打开
    _parent：将返回值在父级窗口打开
    _self:将返回值在当前窗口打开
    _top:将返回值在顶级窗口打开
    -->
    <form name="login">

    </form><!--表单名称-->

关于标签的嵌套的一个错误：

这周犯了一个错误：<center><marquee>文本内容</marquee></center>

哎呀，居中标签是作用于文本内容的，而我写在滚动标签外了，不合法。

正确：<marquee><center>文本内容</center></marquee>

---