✊不积跬步，无以至千里；不积小流，无以成江海。

2012年07月80日

工作重点

1	工作重点事项	进度	已完成
2	早上(讲有序，无序，自定义列表和表单表格)	已完成	- [x]

| | 3 | 下午(讲表格没有讲完的东西完善+练习五个) | 已完成 |
- [x]

| | 4 | 晚上(练习两个+写每日总结) | 已完成 |
- [x]

遇到的问题和解决思路

一般是总结今天工作中遇到的问题，列举下来思考解决问题的思路和法

遇到的问题

做练习时，忘了浮动的弊端，导致页面的顺序乱了
解决思路
然后给它父元素加了个overflow:hidden,解决了

今日总结

1.列表

 ul(无序列表) <br />用来排列无序的列表独占一行，块级元素,上下外边距 默认 16px  左内边距  默认  40px  li 只能存在ul内部<br />ol(有序列表) <br />用来存放有序列表的列表内容  独占一行，块级元素  上下外边距 默认 16px 左内边距  默认  40px   li 只能存在ol内 默认是数字。<br />有序列表中默认的type类型是数字，而且是从1开始的。它有两个属性：type、start。<br />type：有五个属性值：1、a、A、i、I(罗马数字)，表示列表前缀的格式； <br />start：属性值位数字， 表示从type类型的第几个数字开始，比如当你选的type=“a”,start=“3”<br />dl dt dd   dl 上下外边距 默认 16px   dd上有左侧的外边距 40px

2.表格


元素	描述

定义表格标题。

定义表格的页眉，用于定义表格的头部。用来放标题之类的东西

定义表格的主体。

定义表格的页脚，放表格的脚注之类
		定义表格的表头。

定义表格的行。
		定义表格单元格。

thead、tfoot里的单元格不可以与tbody单元格进行合并

border-collapse是表格的css样式：设置表格的边框是否被合并为一个单一的边框（细线表格）。

属性	属性值
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

总结表格

标签名

定义

说明

表格标签

就是一个四方的盒子

表格行标签

行标签要再table标签内部才有意义

单元格标签

单元格标签是个容器级元素，可以放任何东西

表头单元格标签

它还是一个单元格，但是里面的文字会居中且加粗

表格标题标签

表格的标题，跟着表格一起走，和表格居中对齐

colspan 和 rowspan

合并属性

用来合并单元格的

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表格的学习要求：能手写表格结构，并且能简单合并单元格。

（1）表格

<!DOCTYPE html>

<!—
align:水平对齐方式的取值可以是left、center或right；
valign:垂直对齐方式的取值可以是top、middle或bottom (行内块元素生效)
—>

<!—
表格的标题
写在table内部，显示在表格外部
—>

表格的标题
111	222	333
111	222	333
111	222	333
111	222	333
111	222	333

3.表单

input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单，提交到后台
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

textarea控件(文本域)

属性	值	描述
cols	number	规定文本区域内可见的宽度。
rows	number	规定文本区域内可见的行数。
disabled	disabled	规定禁用文本区域。
maxlength	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
readonly	readonly	规定文本区域为只读。

小提示：

文本域中所填内容在滚动条没有显示出来时，显示的区域是cols加上滚动条的位置区域。
位于开始标签和闭合标签之间的默认内容。不支持 value 属性</li></ul> <p><a name="WiDik"></a></p> <h2 id="8lz7wm"><a name="8lz7wm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>下拉菜单</h2><p><a name="VgyMl"></a></p> <h3 id="6kr3yc"><a name="6kr3yc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>select标签的属性</h3><table> <thead> <tr> <th><strong>属性</strong></th> <th><strong>值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>name</td> <td><em>text</em></td> <td>定义下拉列表的名称。</td> </tr> <tr> <td>disabled</td> <td>disabled</td> <td>当该属性为 true 时，会禁用下拉列表。</td> </tr> <tr> <td>multiple</td> <td>multiple</td> <td>当该属性为 true 时，可选择多个选项。</td> </tr> <tr> <td>size</td> <td><em>number</em></td> <td>规定下拉列表中可见选项的数目。</td> </tr> </tbody> </table> <p><a name="Kbpem"></a></p> <h3 id="izzbz"><a name="izzbz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>option的标签属性(熟练)</h3><table> <thead> <tr> <th><strong>属性</strong></th> <th><strong>值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>disabled</td> <td>disabled</td> <td>规定此选项应在首次加载时被禁用。</td> </tr> <tr> <td>selected</td> <td>selected</td> <td>规定选项（在首次显示在列表中时）表现为选中状态。</td> </tr> <tr> <td>value</td> <td><em>text</em></td> <td>定义送往服务器的选项值。</td> </tr> </tbody> </table> <p><a name="LohNH"></a></p> <h4 id="ejok0m"><a name="ejok0m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>*我可以</h4><p><strong>option的value的值的作用是什么？</strong><br />value 属性规定在表单被提交时被发送到服务器的值。<br />开始标签 <option> 与结束标签 </option> 之间的内容是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单提交时被发送到服务器的值。<br /><strong>注意：</strong>如果没有规定 value 属性，选项的值将设置为 <option> 标签中的内容。 <a name="kNg7l"></a></p> <h3 id="fsf7iu"><a name="fsf7iu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>optgroup的标签属性（了解）</h3><p><optgroup> 标签经常用于把相关的选项组合在一起。<br />如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。</p> <table> <thead> <tr> <th><strong>属性</strong></th> <th><strong>值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>disabled</td> <td>disabled</td> <td>规定禁用该选项组。</td> </tr> <tr> <td>label</td> <td><em>text</em></td> <td>为选项组规定描述。</td> </tr> </tbody> </table> <p><a name="Jel2q"></a></p> <h4 id="aq6b5o"><a name="aq6b5o" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><table> <thead> <tr> <th>input</th> <th>text<br />password</th> <th>name<br />向服务器提交的参数名</th> <th>value<br />默认值</th> </tr> </thead> <tbody> <tr> <td>input</td> <td>radio<br />checkbox</td> <td>name<br />向服务器提交的参数名<br />(radio 当name一样时，只能显示选中一个,并提交value值)<br />(checkbox当name一样时，能显示选中多个)<br /></td> <td>radio 向服务器提交的value的值作为name的参数值<br /><br />checkbox 向服务器提交的value的值作为name的参数值,并且在一起显示(字符串或者数组)</td> </tr> <tr> <td>select</td> <td>optgroup<br />label(组名)<br />option</td> <td>select<br />向服务器提交的参数名</td> <td>option<br />向服务器提交的参数值<br />当没有value时，提交标签内部的内容</td> </tr> </tbody> </table> <p><a name="zAhhc"></a></p> <h4 id="9dpmp"><a name="9dpmp" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><p><a name="DbJ9O"></a></p> <h4 id="5h1uaz"><a name="5h1uaz" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><p><a name="aC88A"></a></p> <h4 id="fnbntq"><a name="fnbntq" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><p><a name="oOvo7"></a></p> <h4 id="bdktei"><a name="bdktei" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><p><a name="o8AMV"></a></p> <h4 id="3bw949"><a name="3bw949" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（2）表单</h4><p><!DOCTYPE html><br /><html lang="en"><br /><head><br /> <meta charset="UTF-8"><br /> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <br /> <style><br /> textarea{<br /> <strong>/<em> 禁止手动调整文本域的大小 </em>/</strong><br /> resize: none;<br /> }<br /> </style><br /></head><br /><body><br /> <strong> </strong><br /><strong> <!— </strong><br /><strong> action 提交api地址</strong><br /><strong> method 向服务器提交的方式</strong><br /><strong> get:</strong><br /><strong> post:</strong><br /><strong> —></strong><br /> <form action="#" method="GET" name="form01"><br /> <strong> <!— value 设置输入框的值</strong><br /><strong> placeholder 输入框的提示信息</strong><br /><strong> name:向服务器提交的参数名</strong><br /><strong> —></strong><br /> <label for="user">用户名:</label><br /> <strong></strong><br /> <input type="text" value="请输入用户名" name="username" id="user" size="1" readonly><br /> <label for="pw">密码</label><br /> <input type="password" placeholder="请输入密码" name="password" id="pw"><br /> <br /> 男<input type="radio" name="sex" id="" value="male" checked><br /> 女<input type="radio" name="sex" id="" value="female"><br /> <br />  <br /> <div><br /> <span>爱好</span><br /> 敲代码<input type="checkbox" name="habit" id="" value="code"><br /> 打球<input type="checkbox" name="habit" id="" value="ball" disabled><br /> 女人<input type="checkbox" name="habit" id="" value="woman"><br /> </div><br /> <br /> <br /> <br /> <textarea name="" id="" cols="40" rows="10"><br /> sasd<br />

（3）表单2
<!DOCTYPE html>

用户名:

密码:

下拉列表
<!—
如果value有值，则使用value的值
如果没有value，则使用标签内部的值
disabled 对下拉框进行禁用
multiple multiple 当该属性为 true 时，可选择多个选项。
size number 规定下拉列表中可见选项的数目。
—>

file

数字

按钮

HTML CSS

📝 第二天每日总结(列表、表单、表格)

2012年07月80日

工作重点

遇到的问题和解决思路

遇到的问题

解决思路

今日总结

1.列表

2.表格

总结表格

（1）表格

3.表单

input 属性小结

textarea控件(文本域)

小提示：

（3）表单2

📝 第二天 每日总结(列表、表单、表格)

2012年07月80日

工作重点

遇到的问题和解决思路

遇到的问题

解决思路

今日总结

1.列表

2.表格

总结表格

（1）表格

3.表单

input 属性小结

textarea控件(文本域)

小提示：

（3）表单2

📝 第二天每日总结(列表、表单、表格)