表格 Table

表格加载 速度慢效率低,尽量不用(可能在制作火车时间表上使用)
通常的格式为:table 声明表格,tr 表格的行,td 表格的列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table>
<tr>
<td width="300">
<input type="checkbox">网站建设与传播
&lt;/td>
<td>
<input type="checkbox">电子商务
&lt;/td>
&lt;/tr>

<tr>
<td>
<input type="checkbox">数字化展馆
&lt;/td>
<td>
<input type="checkbox">多媒体互动
&lt;/td>
&lt;/tr>

<tr>
<td>
<input type="checkbox">软件服务
&lt;/td>
<td>
<input type="checkbox">移动开发
&lt;/td>
&lt;/tr>
&lt;/table>

几组 tr 就是几行,几组 td 就是几列。

表格属性

  • Cellspacing:单元格与单元格的间距

  • Cellpadding:单元格与文字的间距

  • Border:给表格加边框,通常值为1

    1
    <table width="400" border="1" bordercolor="red">
  • Bordercolor:边框颜色

  • Colspan:跨列合并

    1
    <td colspan="3">商品类目&lt;/td>
  • Rowspan:跨行合并

    1
    <td rowspan="3">虚拟&lt;/td>
  • Align=”center” 位置规定

表格结构化

  • thead:表格头
  • tbody :表格体,自己不写的话谷歌浏览器会帮我们写
  • tfoot :表格尾注解
  • caption :标题,用来注释表格的用途

输入 Input *

一般输入 input 要写在 form 里,组成一个块儿,用来给后台传数据的功能。
Form:表格提交

1
<form action="" method="post">&lt;/form>

其中 action 是说明提交的位置,method 是提交的方法,一般有两种方法 Post 和 Get

种类

  • 最普通的

    1
    <input type="text">
  • 密码输入框,<input type="password" placeholder="请输入密码">,输入密码时会变成小星星

    1
    <input type="password" placeholder="请输入密码">
  • placeholder是框里面浅灰色的提示语。

  • 重置 ,只能在form里使用

    1
    <input type="reset">
  • 提交 ,只能在form里使用

    1
    <input type="submit">
  • 图片按钮

    1
    <input type="image" src="../../Img/sekiro.png" width="100px">
  • 单选框 Radio

    1
    2
    <input type="radio" name="sex">male
    <input type="radio" name="sex">female
  • 多选框 Checkbox
    name 让多个多选框组成一组

    1
    2
    3
    <input type="checkbox" name="habit">
    <input type="checkbox" name="habit">
    <input type="checkbox" name="habit"> rap
  • 提交文件

    1
    <input type="file">
  • 按钮<input type="button" disabled value="注册"> ,这里的disabled是 禁止点击 的意思

    1
    <input type="button" disabled value="注册">

H5 新加种类

以下是 H5 新加的 input 标签使用方法

  • 邮箱格式限制,其中Aotofocus的意思是 打开网页光标直接定位在这个输入框上
1
<input type="email" autofocus> <br>
  • 只能输入网页
    其中Required是== 必填项,提交form的时候这个框框必须有东西!==

    不是实时触发,而是点击form提交之后才会提醒。

1
<input type="url" required>
  • 只能填数字
1
<input type="number">
  • 颜色
1
<input type="color">
  • 月份
1
<input type="month">
  • 日期
1
<input type="date">
  • 滑竿 ,这个不一样的浏览器 样式 不一样的 <input type="range">
1
2
<input type="range">


Label

label 尽量与 input 组合使用,点击 label ,就会取 input 框中的焦点。不过 label 中的 for 属性要写成 input 的 id 名字

1
2
<label for="name">用户名&lt;/label>
<input type="text" id="name">

样式如下:


列表

如何去掉列表默认样式(li 前的点)

list-style:none;

1
2
3
4
//去掉列表默认样式例子:
<ul style="list-style-type: none">
<li>1231&lt;/li>
&lt;/ul>

有序列表 ol

每个 li 前面都有数字序列
在这里插入图片描述

无序列表 ul

每个 li 前面是黑点,有三级样式,后面的都是黑色方块

自定义列表 dl

  • dl 声明自定义列表
  • dt 声明列表的表头
  • dd 是每个列的每个元素,如下所示