前端第二天(笔记）

一、表格标签

1.表格的主要作用

显示数据、展示数据   可读性强

2.表格的基本用法 

<table>                                                                                                          表格标签

        <tr>                                                                                                        定义表格中的行

                        <td>单元格内的文字</td>                                 table data     定义表格中的单元格

        ...

        </tr>

        ...

</table>

表头单元格标签

表头单元格位于表格的第一行或第一列          文本加粗居中显示

<table>                                                                                                          

        <tr>                                                                                                        

                        <th>单元格内的文字</th>                                 table head     定义表格中的单元格

        ...

        </tr>

        ...

</table>

表格的属性 

实际开发中不常用，后通过CSS来设置

1、记住单词，方便CSS的使用

2、直观感受表格的外观形态

属性要写到table标签里面去

属性名	属性值	描述
align	left、center、right	表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为“”表示没有边框
cellpadding （已被html5移除）	像素值	规定单元边缘与其内容之间的空白，默认1像素
cellspacing （已被html5移除）	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	表格的宽度
height		表格的宽度

先制作表格的结构

1、<th>

2、<td>

3、单元格内放图片、文本

再写表格属性

1、高度宽度

2、对齐方式

3.表格结构标签

<thead>和<tbody>都在<table>之中

表格分为头部和身体

1、<thead></thead>      :<thead> 里面有多个 <th>,<thead>内部必须有<tr>标签

<thead><tr><th>xxxxx</th></tr></thead>

一般位于第一行.

2、<tbody></tbody>       :表格主体

4.合并单元格

1、跨行合并：rowspan="合并单元格的个数"

2、跨列合并：colspan="合并单元格的个数"

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲

1、确定是跨行还是跨列

2、找到目标单元格。写上合并代码，如<td colspan="2"></td>

3、删除多余单元格

二、列表标签

表格显示数据

列表用来布局

整齐、整洁、有序

1、无序列表（重点）

<ul>表示无序列表  <li>表示列表项

<ul></ul>中只能放<li></li>标签

<li></li>相当于一个容器，可以放所有标签

2、有序列表（理解）

<ol>

        <h1>XXX</h1>

        <li>列表项一</li>

         <li>列表项二</li>

</ol>

<ol></ol>中只能放<li></li>标签

<li></li>相当于一个容器，可以放所有标签

3、自定义列表（重点）

<dl>

        <dt>XXX</dt>

        <dd>XXX</dd>

</dl>

<dl></dl>里面只能包含<dt></dt> 和 <dd></dd>

<dt></dt>和<dd></dd>相当于一个容器，可以放所有标签

三、表单标签

1.表单的组成｛表单域 表单元素（表单控件） 提示信息｝

2.表单域

<form action="url地址" method=“提交方式” name="表单域名称">

        各种表单元素

</form>

属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称，区分同一个页面中的不同表单域

3.表单控件（表单元素）

1----<input/>输入表单元素

2----<select>下拉表单元素

3----<textarea>文本域元素

1）<input/>用于收集用户的信息   单标签

属性	属性值	描述

type的属性值不同 指定不同的控件类型

属性值	描述
button	定义可点击按钮（多用于JS）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
resset	定义重置按钮，清除表单中的所有数据
submit	定义提交按钮，把表单数据发送到服务器
text	定义单行的输入字段，用户可以输入文本

<label>标签为input元素定义标注

用于绑定一个表单元素，点击<label>标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上。

<label for="sex">男</label>

<input type="radio" name="sex" id="sex"/>

for属性值与id属性值相同

(不用刻意点击圈圈或方块，点击旁边的文字就可选中圈圈或方块）

2）<select>下拉表单

<select>

        <option>选项一</option>

        <option selected="selected">选项二</option>       当selected="selected"时，当前项为默认选中项

        <option>选项三</option>

</select>