学习Web前端第二天

　　

1.表格

表格主要作用是展示数据，让数据显示的更加规整，具有更好的可读性，表格不是用来布局的，至少现在不是，也不建议这么做，表格代码同样是双标签。

代码格式为<table> <tr> <td> </td> </tr> </table>其中<table>为表特标签<tr>行标签<td>单元个标签，所有的数据都写在<td>中。

表头单元格同样是单元格，写法为把<td>改为<th>，表头单元格一般位于表格的第一行或者第一列，特点为：写在其中的文本加粗且居中。

我们用到的表格相关属性有：对齐(align)，表格位于窗口的右(right)，居中(center)，边框(border)，内容与单元格的距离cellpadding，单元格之间空隙距离cellspacing。

在表格中也可以使用<thead>和<tbody>把表格分割为头部和身体，其中<thead></thead>为表格头部，<tbody></tobdy>为表格主体，好处为一般情况下我们不会去同时修改标题和主题，这样可以减少操作失误。

合并单元格的方法：

合并单元格可以分为跨行合并和跨列合并。

(1) .跨行合并：rowspan=”合并的格数”

(2) 跨列合并：colspan=”合并的格数”

跨行合并单元格是从最上侧的单元格开始为1进行合并，跨列则是最左侧的单元格，在合并单元格前先确定是跨行还是跨列需要合并多少格，写上合并语句后删除掉被合并的单元格否则会乱行。

2.三种列表

列表是用来布局的，可以使得页面更加整齐，整洁，有序，在作为布局使用时会更加自由和方便。

(1) 无序列表：无序列表各列表之前没有顺序级别之分，是并列的关系，它同样是双代码，代码的写法为：<ul> <li> </lu> </li>,在ul中只能放li不能放其他任何代码，而li可以容纳所有元素且没有数量的限制。

(2) 有序列表：有序列表即为有顺序的分别，写法把ul替换为ol即可。

(3) 自定义列表：自定义列表一般用于对术语和名称进行解释，写法为：

<dl>

　　<dt>

　　　<dd> </dd>

　　</dt>

</dl>

切记3个列表都为双标签，后面一定不能忘记添加</>。

3.表单

表单是用来收集用户信息的，表单的组成有：1.表单域2.表单控件(表单元素)3.提示信息。

(1) 表单域，它会把范围内的表单元素信息提交到服务器,它是一共双标签。

代码：<form action=”” method=”” name=””> </form>

其中action意味着把表单提交给谁（一般写服务器后台），method表单提交的方式有get和post的两种 name要提交表单的名字。

(2) 表单控件：用户在表单中输入或者选择内容。

具体有：文本框，密码框，单选框，复选框，提交按钮，重置按钮，普通按钮 上传按钮等。

代码：<input type=”” value=””>

文本框text，密码框 password，单选框 radio，复选框checkbox，提交按钮 submit 重置按钮 reset 普通按钮 button 上传按钮 file。

其中value是一个值在文本框等一些控件中这里写什么前面就会有什么变化是对应的，name是当前控件的名字，单选按钮必须有相同的名字才会实现多选一。

TIP:在代码后面写入checked即为当前默认选择的项。

在需要绑定的表单元素代码后面加入 ID=””其中值需要和label#后面的值一样才会生效。

下拉表单：用于下拉隐藏的元素信息进行选择,双标签。

代码：<select>  <option> <option> </select>

在对应的<option>中写入selected可以默认选择当前元素，如不写则是默认第一个option。

textarea文本域：当用户输入内容较多的时候可以使用文本域,双标签。

代码：<textarea name=””>内容</textarea>

label标签：这个标签用于绑定一个表单元素,它同样是一共双标签。

代码：<label fox=”#” >内容</label>。

 

学习ewb前端的第二天，内心毫无波澜，单词一个没记住，代码全靠翻笔记，甚至于有点想哭，明天开始CSS了，加油！加油！！！。