鸩羽千夜

02tables

goer ... 2022-01-05 Html
  • Html
 大约 4 分钟
HTML表格和表单

[toc]

# 常用标签

# 1. 列表

# (1)有序列表

ol: 有序列表使用数字或字母系统来组织列表里包含的信息。(完全不用看这个解释)

property value
type(修改列表符号) 1(默认阿拉伯数字) | a(小写字母) | A(大写) | i(小写罗马数字) | I (大写罗马 上限3999)
start(第几个开始) 任意值
<ol type="a/A/i/I" start="10">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ol>
1
2
3
4
5
6
# (2)无序列表

ul : 用得特别多，一定要会哈

property value
type(列表符号) disc(默认 黑实心圆点) | circle (空心圆点) | square(黑色实心方块)
<ul type="disc/circle/square">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>
1
2
3
4
5
6
# (3) 定义列表

dl dt dd :自定义

<dl>
    <dt>C</dt>
    <dd>一门面向过程的，广泛用于底层开发</dd>
    <dd>不需要任何运行环境支持便能运行的高效率程序设计语言</dd>
    <td>go</td>
    <dd>开发的一种静态强类型、编译型语言。Go 语言语法与 C 相近</dd>
    <dd>但功能上有：内存安全，GC（垃圾回收），结构形态及 CSP-style 并发计算。</dd>
</dl>
1
2
3
4
5
6
7
8

# 2. 表格

table: 表格地方使用

border-collapse:collapse; 取消边框

比较重要

property value
border(加边框) 任意
cellspacing(单元格之间的距离) 一般取消(0)
width(表格宽度) 任意
height(表格高度) 任意
cellpadding(单元格与内容之间的距离) 任意
align(水平对齐方式) left/center/right

  • tr : 表示一行

  • th : 表示表头 -- 字体加粗且居中

  • td : 表示一列

    proprety value
    align(水平位置) left/center/right
    valign(垂直位置) top/middle/bottom
    colspan(横向合并单元格) 个数
    rowspan(纵向合并单元格) 个数
    <table border="1" cellspacing="0" width="200" cellpadding="0">
     <tr>
    	<th>姓名</th>
         <th>成绩</th>
    </tr>
    <tr>
    	<td colspan="2">1号没有考试</td>
    </tr>
    <tr>
    	<td>小狗</td>
        <td>10</td>
    </tr>
</table>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

# 3. HTML背景

页面加背景 写在body标签内

property value
bgcolor(背景颜色) 十六进制(通常)
background(背景图片) 图片地址
text(文本颜色) 十六进制
<body bgcolor=“blue" background="one.jpg" text="black">
    
</body>
1
2
3

小拓展

颜色的表示方式：

  • 英文单词 (只用来调试)

    yellow , red , blue ,green , black, pink...

  • 十六进制颜色 (基本)

    0 1 2 3 4 5 6 7 8 9 A B C D E F

    #000; 黑色

    #fff;白色

    16 777 216 种颜色

  • rgba (很少) rgb颜色+a透明度

    rgb : 0 ~ 255

    a : 0~1

<body color="#008c8c">
    马尔斯绿
</body>
1
2
3

# 4.内嵌框架

iframe : 将其他页面嵌入自己网站

eg:一般用于地图应用

property value
width(宽度) 任意
height(高度) 任意
scrolling(显示滚动条) yes/no | auto自动显示
frameborder(显示边框) 1(显示) | 0 (不显示)

1.搜索地图生器

高德地图API:https://lbs.amap.com/tools/card

2.引入代码

<iframe width="800" height="460" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/1ZsNS3Hz6Mf"></iframe>
1

# 5.表单

form : 表单用于向服务器传输数据。(很重要)

property vlaue
name(表单名称) 任意
action(表单提交地址) 提交路径
method(提交方式) get、post 常用 delete等等
enctype MIME类型
<form action="" method="">
    <input type="text" name="username">
</form>
1
2
3
  1. input 标签：(重要)

type属性的值：

value
text (文本框)
button (普通按钮) --- 特效
password (密码框)
radio (单选框) ---- name:值要一致
checkbox (复选框) ----name:值要一致
submit (提交按钮)
reset (表单重置按钮)
color (拾色器)
date (日期插件)
datetime-local (日期时间插件)
month (月份)
week (选择第几周)
time (时间插件)
email (邮件格式插件 验证)
file (文件上传)
hidden (隐藏域)
image (使用图片作为提交按钮)
number (数字框)
range (进度条)
search (搜索框)
tel (电话号码输入框 移动端)
url (验证url)
<form action="提交地址" method="提交方式">
    <input type="text">
    <input type="button" value="按钮">
    想要什么？
    <input type="chekbox" name="chec" value="1">球鞋
    <input type="chekbox" name="chec" value="2">篮球
    <input type="chekbox" name="chec" value="3">电脑
    
    <input type="radio" name="sex" value="boy"> 男
    <input type="radio" name="sex" value="girl"> 男
    
    <input type="color">
    <input type="file">
    
    
    <input type="text" name="username" value="">
    <input type="password" name="password" value="">
    
    <input type="submit" value="login">
    <input type="reset" value="del">
  
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
property value
name (提交数据到服务端的凭证) 任意
value (输入框的值) 任意
maxlength (输入框最多输入的字符数量) 值
readonly (只读，不能编辑和删除) 自己
disabled (禁用) 自己
autocomplete (输入框是否使用浏览器缓存内容) on(使用) | off(不使用)
autofoucus (自动设置光标)
min (数字框：提交的最小数字) 值
max (数字框：提交的最大数字) 值
step (数字框：步进值) 值
multiple (多选) 自己
placeholder (提示内容) ** 任意
required (验证不能为空) 自己
checked (单选框和多选框默认选中) 自己
  1. textarea 多行文本框

textarea : 一般留言这些呀

property value
cols (宽度) 值
rows(高度) 值
  1. select+option 下拉框

下拉框：

property value
size(下拉列表显示行数) 值
selected (下拉框默认选中) 自己
  1. label 关联标签

label :两个元素关联起来

for="id" 另一个元素设置id

<from>
	<label for="user" >用户名</label>
	<input type="text" name="username" id="user" autocomplete="off" placeholder="输入用户名" >
	
	<textarea cols="20" rows="30">
    </textarea>
    
    <select>
        <option>广西</option>
        <option selected>广东</option>
    </select>
    
</from>
1
2
3
4
5
6
7
8
9
10
11
12
13

03overall