avatar

目录
【前端02_基础】表格、输入框、Label、列表

表格 Table

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

html
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">网站建设与传播
</td>
<td>
<input type="checkbox">电子商务
</td>
</tr>

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

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

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

表格属性

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

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

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

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

  • Colspan:跨列合并

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

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

表格结构化

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

输入 Input *

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

html
1
<form action="" method="post"></form>

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

种类

  • 最普通的

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

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

  • 重置 ,只能在form里使用

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

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

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

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

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

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

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

H5 新加种类

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

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

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

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

Label

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

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

样式如下:


列表

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

list-style:none;

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

有序列表 ol

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

无序列表 ul

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

自定义列表 dl

  • dl 声明自定义列表
  • dt 声明列表的表头
  • dd 是每个列的每个元素,如下所示
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/50395.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论