HTML 和 form 表单常用标签

「爱情、让人受尽委屈。」 2022-10-21 11:57 214阅读 0赞

#### HTML和CSS ####

**常用标签**：

**p**:段落，自动换行

**span**：和div类似，但是默认不换行

**br**:换行

**hr**:分割线

**h1-h6**：标题标签

**a**：超链接

**瞄点**：通过给a链接设置\#XX作为链接，给需要链接的内容设置name或者id

#### 列表 ####

##### 无序列表：ul li #####

**属性**：type

**属性值**：

**disc**: 表示实心圆点; ●

**circle**: 表示空心圆圈; ○

**square**: 表示实现方块; ■

##### 有序列表:ol li #####

**type属性**: 可指定列表项目序号类型,属性值有:  
1）A : 表示使用大写英文字母作为序号;如A、B、C 等;  
2）a : 表示使用小写英文字母作为序号;如a、b、c 等;  
3）I : 表示使用大写罗马数字作为序号;如I、II、III 等;  
4）i : 表示使用小写罗马数字作为序号;如i、ii、iii 等;  
5）1 : 表示使用阿拉伯数字作为序号;如1、2、3 等;

**start属性**:可表示列表的起始序号;

##### 自定义列表 #####

<dl>:用于定义列表;该标签只能有<dt>,<dd>两种子标签;

**dt**: 定义列表项的标题;

**dd**: 定义普通列表项;

#### 图片标签 ####

**img** 两个必要属性：src 和 alt

**src**： 图片路径

**alt**: 当图片无法显示时，就会显示alt的内容

**注意**：设置图片大小时，只需要设置width或者height其中一个，图片会自动等比缩放，如果同时设置，图片会失真

#### 表格标签 ####

**table**: 表示表格

**border**: 指定表格边框的宽度,默认是0;

**cellpadding**: 指定单元格内容和单元格边框的间距,值可是像素或百分比;

**cellspacing**: 指定单元格之间的间距,值可是像素或百分比;

**width**: 指定表格的宽度,值可以是像素或百分比;

**tr**:  定义表格的行

**align**: 设置行中的单元格内容的位置(left/center/right)

定义表格行,该标签只能有td或th子标签;

**td**: 定义单元格,放在中,表示把一行分成 N 个单元格;(N取决于td标签个数);

**常见属性**:

**colspan**: 指定该单元格跨多少列,属性值是数字; colum

**rowspan**: 指定该单元格横跨的行数; row

**height**: 指定单元格的高度;

**width**: 指定单元格的宽度;

**th**: 定义表格标题头的单元格;用法和标签一直,只是显示效果有差别;

#### 表单标签 ####

**form**

常见属性如下:

**action**:  必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址; method: 指定表单提交时的请求类型,该属性值有 get 或 post,分别用于 GET 或 POST 请求,**默认**是 get 方式,开发建议使用

**post** 方式：enctype:指定表单数据的编码方式

application/x-www-form-urlencoded url 编码,默认

**multipart/form-data** : 不做编码,二进制方法提交 ,以后使用文件上传必须使用multipart/form- data ，提交方式必须为 POST

#### 表单控件标签 ####

**input** ：用于接收用户输入的信息

**单行文本框** : type = text,输入的文本信息直接显示在框中;

**密码输入框** : type = password,输入的文本以圆点形式显示;

**单选框** : type = radio,如：性别选择;

**复选框** : type = checkbox,如：多个兴趣选择;

**注意**：单选框和复选框提交后台时，提交的是 value 值，没有 value 值则后台获取为 on

**隐藏域** : type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;

**提交按钮** : type = submit,用于提交表单中的数据内容;

**重置按钮** : type = reset,将表单中填写的内容均设置为初始值;

**无动作按钮** : type = button,可使用javascript为其自定义事件;

**文件上传域** : type = file,会生成一个文本框和一个浏览按钮;

**图像域** : type = image, 它可以替代submit按钮,即图像提交按钮。

**input**： 其他常见属性：

**checked**: 设置单选框,复选框的初始状态是否选中;

**disable**: 设置input标签加载时禁用此标签; 不能提交到

**maxlength**: 文本框输入最大字符数,属性值是数字;

**readonly**: 指定文本框内值不允许直接修改; 能被提交

#### 下拉框： ####

**select**标签：使用 option 标签作为子标签

**select** **常用属性**：

**multiple**=“multiple” 表示可以选中多个

**size**=“2” 表示显示几个（浏览器之间有差异）

**option** **常用的属性** :

**select**=”selected”: 默认选中哪个选项

**value**: 提交给服务器的值

#### 文本域标签 ####

**textarea**: 用户录入多行多列数据

<textarea cols="50" rows="5">要显示的内容</textarea>

**cols**: 列的大小

**rows**: 行的大小

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 html的表单标签(上)：form标签和input标签

html表单标签的学习

我不是女神ヾ/ 2024年05月06日 21:22/ 0 赞/ 92 阅读

相关 HTML form表单

目录表单标签表单域表单按钮 input与label联合使用表单分组表单的初级验证参考 -------------------- HTML表单用于收

我就是我/ 2023年07月20日 13:31/ 0 赞/ 25 阅读

相关 HTML 和 form 表单常用标签

HTML和CSS 常用标签： p:段落，自动换行 span：和div类似，但是默认不换行 br:换行 hr:分割线 h1-h6：标题标签 a：超链接瞄点：

「爱情、让人受尽委屈。」/ 2022年10月21日 11:57/ 0 赞/ 215 阅读

相关 html语言form,HTML中form表单的用法

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？ form表单的作用 form标签用于为用户输入创建HTML表单，并向服务器传输用户输入的数据常用

ゝ一纸荒年。/ 2022年10月06日 07:54/ 0 赞/ 226 阅读

相关为什么html中加form,HTML form表单

HTML表单：表单用于搜集不同类型的用户输入，提交给网站后台服务器。表单是一个包含表单元素的区域，表单元素是允许用户在表单中(比如：文本域、下拉列表、单选框、复选框等等)输

港控/mmm°/ 2022年10月06日 00:41/ 0 赞/ 260 阅读

相关 SpringMVCform>表单标签和表单标签简介

SpringMVC<from:form>表单标签和<input>表单标签简介在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签，这些标

拼搏现实的明天。/ 2022年07月21日 05:56/ 0 赞/ 391 阅读

相关 html form表单

提交前言参考 [java中的url 编码与解码][java_url] [URL中带加号的处理][URL] application/x-www-for

「爱情、让人受尽委屈。」/ 2022年05月19日 12:29/ 0 赞/ 278 阅读

相关 HTML表单form和框架frameset

表单form 1.单的概念: 表单是用来收集用户的信息或是数据。 2.表单元素：form的内容 3.placeholder: 设置文本框的占位符/就是文本框阴影提

野性酷女/ 2022年03月08日 19:37/ 0 赞/ 237 阅读

相关 HTML<form>表单中的label标签

　　label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，

不念不忘少年蓝@/ 2021年12月15日 08:53/ 0 赞/ 341 阅读

相关 html--form表单常用操作

form表单用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中`<form action=" " method=" ">` actio

你的名字/ 2021年10月14日 04:34/ 0 赞/ 389 阅读