[人工智能] day4HTML表单元素分类文档详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 人工智能 -> day4HTML表单元素分类文档详解 -> 正文阅读

[人工智能]day4HTML表单元素分类文档详解

html表单

HTML表单用于收集用户输入，可以提交数据到服务器，使页面具有交互性

????????标签<form>

????????????提交的数据

????????? </form>

????????双标记，块级元素

????????注意：form之间不能相互嵌套，但是一个页面可以包含多个form

属性

????????<form?action="提交的地址"?name="表单的名称"?method="提交的方式get/post"></form>

????????name:表单提交时的名称

????????action:提交到的地址

????????method:提交方式，有get和post两种，默认为get

????????method属性规定了在提交表单时所用的HTTP方法(GET或POST)

????????get是默认方法：表单提交是被动的(比如搜索引擎查询)，并且没有敏感信息时使用get。使用get，表单数据在

????????页面地址栏中是可见的：get适合少量数据的提交，浏览器会设置容量限制

????????post：表单正在更新数据，或者包含敏感信息(例如密码)。post的安全性更高，因为在页面地址中被提交的数据是不可见的。

????????注：get和post的区别：

????????1.数据提交方式，get把提交的数据url可以看到（会在地址栏中显示），post看不到?（post安全）

????????2.get一般用于提交少量数据(不能大于2kb)，post用来提交大量数据（理论上没有限制）

HTML表单包含表单元素

????????表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。

????????<input>元素：是最重要的表单元素

????????<input>的type属性取值有：

????????①text??????定义常规文本输入

????????②radio?????定义单选按钮输入(选择多个选择之一)

????????③submit????定义提交按钮(提交表单)

????????④password??定义密码输入

input的属性

??????? name属性：如果要正确地被提交，每个输入字段必须设置一个name属性。

?????? 其他属性：

????????value属性规定输入字段的初始值：

????????readonly属性规定输入字段为只读(不能修改)

????????disabled属性规定输入字段是禁用的

????????size属性规定输入字段的尺寸

????????maxlength属性规定输入字段允许的最大长度

????????<form>的action属性

????????action属性定义在提交表单时执行的动作

????????向服务器提交表单的通常做法是使用提交按钮

????????通常，表单会被提交到web服务器上的网页

??????

表单元素

????????一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

????????1.表单标签

????????是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义

????????2.表单域

????????是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。

????????（比如：文本域、下拉列表、单元框、复选框等等）

????????3.表单按钮

????????用来提交<form>表单中的所有信息到服务器

????? 注：表单域和表单按钮都属于表单元素

?表单域

普通文本框??<input?type="text"?>

密码框???<input?type="password">

单选框???<input?type="radio"?name="">(要有name属性，同name的按钮只能选一个这样才能达到目的）

复选框???<input?type="checkbox">

提交按钮??<input?type="submit">?（可以添加属性value="登录"改变显示的汉字?eg:显示?登录）

重置按钮??<input?type="reset">??（可以添加属性value="取消"改变显示的汉字?eg:显示?取消）

没有任何功能的按钮??<input?type="button">?（可以添加属性value="没有任何功能的按钮"?使这个按钮显示汉字?eg:显示没有任何功能的按钮）

提交按钮??<button>提交</button>（不写type=“”是因为默认type类型是submit）??按钮显示的字在双标记之间

重置按钮??<button?type="reset">重置</button>???按钮显示的字在双标记之间

没有任何功能的按钮??<button?type="button">???没有任何功能的按钮</button>按钮显示的字在双标记之间

select：下拉列表

option：下拉列表的选项、选择框

<select?name="...">

????????????<option?value="0">...</option>

????????????<option?value="1">...</option>

????????????<option?value="2">...</option>

????????</select>

textarea:多行文本框/文本域???text?文本??area?域

?<textarea>...</textarea>

col：列

row:行

label?标签?提升用户体验度?没有任何样式??在单/多选框中使用?当点击label之间的内容，相关的标签会被选中

<label?for="">...</label>???之间的内容是文本?

label的for属性和表单元素的id属性一致?当点击label之间的内容，相关的标签会被选中

(不用点单/多选框点文本就可以选中单/多选框)

lable标签的for属性?的值和?实现单/多选框的表单中的?id属性?的值一致?那么汉字和单/多选框就可以对应起来?实现点文字就可以选单/多选框的功能

??????eg:<label?for="man">男</label>

?????????<input?type="radio"?name="sex"?id="man">

补充：1.文件

选择一个文件：<input?type="file">

注意：默认的表单编码格式不支持上传文件，当表单元素有文件时，需要把表单的编码格式改为二进制，formenctype="multipart/form-data"

2.隐藏域

定义隐藏字段，隐藏字段对于用户是不可见的。但它携带的信息可以正常提交。隐藏字段常常存储默认值，或者由JavaScript改变它们的值。

<input?type="hidden">

3.图片提交按钮：

<input?type="image"?src="2.jpg">定义文件选择字段和“浏览...”按钮，供文件上传

HTML元素分类

大多数HTML元素?被定义为块级元素或内联元素。

块级元素eg：<h>、<p>、<ul>、<table>等

特点：独占一行、元素上下有空白、在网页排列方式：从上到下、可以改变元素的宽度和高度。

行内元素也称为内联元素eg:<b>、<td>、<a>、<img>、以及所有文本格式化标签

特点：内联元素在显示时通常不会以新行开始。在网页中的排列方式：从左到右，不可以改变元素的宽度和高度。

iframe框架

iframe用于在网页内显示网页(在一个页面引入另一个页面，比如可以写一个页面头部?然后在另一个html中引入这个页面)

height和width属性用于规定iframe的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定。

frameborder属性规定是否显示iframe周围的边框。设置属性值是0就可以移除边框

frameset标签

框架结构标签(<frameset>)(在一个页面中引入多个页面，分屏显示)????

????框架结构标签(<frameset>)定义如何将窗口分割为框架,每个frameset定义了一系列行或列

结构：eg:<frameset?cols="25%,75%"?noresize="noresize">

????????<frame?src="a.html">

????</frameset>

属性：cols表示竖直分屏??rows表示水平分屏?rows/columns的值规定了每行或每列占据屏幕的面积

?????noresize="noresize"表示中间的分割线不可移动

注意：不能将<body></body>标签与<frameset></frameset>标签同时使用

HTML文档详解

<!DOCTYPE?html>

文档类型声明??帮助浏览器正确的显示网页

作用：告诉浏览器按当前标准解析代码

?!DOCTYPE????HTML5的文档类型声明

?HTML不区分大小写???双标记的结束标记可以省略单标记的/可以省略（不推荐）

?HTML4.01??3个版本??严格?过渡?框架

?XHTML??严格的HTML，区分大小写，结束标记必须写上

?删除文档类型声明：

?删除后浏览器为混杂模式，各个浏览器会按照自己的标准解析代码

?加上文档类型声明，浏览器为标准模式都按照当前标准解析代码

?DTD文档=有文档类型声明=doctype

?document:文档

?注意：文档类型声明<!DOCTYPE?html>不是标签??

<html?lang="en">

lang="en"对页面主要语言进行声明

en表示英语

zh-CN表示中文字符集

中文开发网站常用utf-8

国外常用gbk

<head>元素是所以头部元素的容器

head中常用标签：meta、title、link、style、script，base，link等

title标签：定义文档的标题??是必需的

作用：

①它显示在浏览器窗口的标题栏或状态栏上。

②当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称

③显示在搜索引擎结果中的?页面标题

注：<title>标签是<head>标签中唯一必须要求包含的东西，就是说写head一定要写title,(title一定要加)

meta标签

META标签用来描述一个HTML网页文档的属性，此处charset="utf-8"是说当前使用的是utf-8编码格式

link标签

link标签定义文档与外部资源之间的关系

link标签最常用于连接样式表

style标签

style标签用于为HTML文档定义样式信息

可以在style元素内规定HTML元素在浏览器中呈现的样式

script标签?

script标签用于定义客户端脚本，比如JavaScript

base标签(不常用)

base标签定义网页中所有的a的默认跳转

HTML合法取色

颜色由红色，绿色，蓝色混合而成?

颜色可以用一个十六进制符号来定义，或者由红色、绿色和蓝色的值组成(RGB)

每种颜色的最小值是0(十六进制：#00)。最大值是255(十六进制：#ff)

eg：color：rgb(12,36,138)??color:red??color:#aabbcc

人工智能最新文章

2022吴恩达机器学习课程——第二课（神经网

第十五章规则学习

FixMatch: Simplifying Semi-Supervised Le

数据挖掘Java——Kmeans算法的实现

大脑皮层的分割方法

【翻译】GPT-3是如何工作的

论文笔记:TEACHTEXT: CrossModal Generaliz

python从零学（六）

详解Python 3.x 导入(import)

【答读者问27】backtrader不支持最新版本的

加:2021-08-23 16:41:36 更:2021-08-23 16:43:08

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/27 18:27:55-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码