前端总结之HTML 02

表格、列表、表单

1. 表格

作用对数据进行展示

1. 创建表格

基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

注解

• table :表格标签
• tr：行标签，一行可嵌套多个td
• td：单元格标签
• 表格中没有对列的定义，只能对行内的单元格的个数进行编排。即一行内俩个单元格即为俩列

2. 表格属性

属性名	含义	属性值
border	边框值	数字，单位px
width	表格宽度	同上
height	表格高度	同上
align	表格在网页的对齐方式	left、center、right
cellspacing	单元格与单元格之间的距离	像素值
cellpadding	单元格与单元格内容之间的距离	像素值

3. 表格标题及头部

表格标题

如图部分：

使用:

<table>

	<caption>表格题目</caption>

</table>

• 通常是在表格上方居中显示
• 必须紧随table标签之后
• 仅在表格中此标签才有意义

表格头部

如上图的第一行，一般是表格数据的分类名称。

使用：

  <table width="700" align="center" border="1">
        <caption>学生信息</caption>
        <tr>
            <th>id</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
     </table>

即将第一行的单元格标签td修改为th，列的头部设置方法同上。

4. 合并单元格

如图效果：

使用：一般在合并的时候要先看好是要求行合并还是列合并。像上图是一二三行进行合并。即为

跨行合并

属性：rowspan。属性值要合并的单元格的个数像上图属性值3

跨列合并

属性colspan。同上

合并单元格的顺序

跨行：自上而下，跨列：自左到右。注意的是最后到删除多余单元格。如上图就需要把二三行的第三个单元格删掉

源码如下：

<table align="center" width="700" border="1">
        <tr>
            <td>01</td>
            <td>01</td>
            <td rowspan=3>图像</td>
        </tr>
        <tr>
            <td>02</td>
            <td>02</td>
        </tr>
        <tr>
            <td>02</td>
            <td>02</td>
        </tr>

    </table>

5. 分结构

对于某些复杂的表格，我们就要像html骨架一样对它进行结构的划分了。

即：

实现很简单，头部信息就放在thead，内容就放在tbody，尾注就在tfoot

<thead>
            <tr>
                <th>id</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>01</td>
                <td>001</td>
                <td>张三</td>
                <td>男</td>
            </tr>

            <tr>
                <td>02</td>
                <td>002</td>
                <td>李四</td>
                <td>女</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="3">额外信息</td>

            </tr>
        </tfoot>

2. 列表

它的作用同表格一样也是为了展示数据，不过它的灵活度要更高。

1. 无序列表

代码结构

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

2. 有序列表

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

1.3 自定义列表

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

简单说一下自定义列表的用法，像一般商城网站的尾部。如图：

3. 表单

作用：收集用户的信息。同时也是前后台交互最重要的部分

表单域

语法：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

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

2. input控件

用法

<input type="属性值" value="">

i属性如下：

属性	属性值	描述
input	text	单行文本输入框
同上	password	密码输入框
同上	radio	单元框
同上	checkbox	复选框
同上	button	普通按钮
同上	submit	提交按钮
同上	reset	重置按钮
同上	image	图像按钮
同上	file	上传控件
name	自定义	input控件的名字
value	自定义	input控件的默认文本
size	整数	input控件在页面的宽度
checked	checked	定义选择控件默认选择项
maxlength	整数	文本输入控件允许输入的最多字符数

• 通过设置type的值可以定义input控件的种类，eg输入框还是选择框
• value的属性值即为input框中的默认显示文本
• name，控件的名字。后台通过该属性值定位到该表单所传的东西。必须写
• radio，必须设置name，eg

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

解释：有着该name的radio是一组，并且才能实现单选的功能。如若不设置name。则有着radio属性的input各自为组。即个个均可以选择。失去了单选框的功能

• checked，默认选中

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

3. label标签

如上图：

实现直接点击姓名的文字，input控件直接获取焦点。

label标签绑定元素的两种方式

1. 第一种,直接包裹

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

2. 第二种，利用for属性

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

3.其他控件

文本控件

用法：

<textarea >
  文本内容
</textarea>

cols="每行中的字符数" rows="显示的行数" 

下拉列表

用法：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

• 在option 中定义selected =" selected "时，当前项即为默认选中项。

博文脑图：