HTML5 <iframe> 标签、HTML5 <input> 标签

news2025/5/20 1:50:20

HTML5 <iframe> 标签

实例

使用HTML5 <iframe>标签来标记一个内联框架:

<iframe src="http://www.w3cschool.cn"></iframe>

尝试一下 »


浏览器支持

所有主流浏览器都支持 <iframe> 标签。


标签定义及使用说明

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。


提示和注释

提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。

提示:使用 CSS 为 <iframe> (包括滚动条)定义样式。


HTML 4.01 与 HTML5之间的差异

HTML5 新增了一些新的属性,同时去掉了 HTML 4.01 中的一些属性。


HTML 与 XHTML 之间的差异

在 XHTML 中,name 属性已被废弃,并将被去掉。请使用 id 属性代替。


属性

New :HTML5 中的新属性。

属性描述
align (已废弃)left
right
top
middle
bottom
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。
frameborder1
0
HTML5 不支持。规定是否显示 <iframe> 周围的边框。
heightpixels规定 <iframe> 的高度。
longdescURLHTML5 不支持。规定一个页面,该页面包含了有关 <iframe> 的较长描述。
marginheightpixelsHTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidthpixelsHTML5 不支持。规定 <iframe> 的左侧和右侧的边距。
namename规定 <iframe> 的名称。
sandboxNew""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
对 <iframe> 的内容定义一系列额外的限制。
scrollingyes
no
auto
HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
seamlessNewseamless规定 <iframe> 看起来像是父文档中的一部分。
srcURL规定在 <iframe> 中显示的文档的 URL。
srcdocNewHTML_code规定页面中的 HTML 内容显示在 <iframe> 中。
widthpixels规定 <iframe> 的宽度。


全局属性

<iframe> 标签支持 HTML 的全局属性。


事件属性

<iframe> 标签支持 HTML 的事件属性。

 

HTML5 <input> 标签

实例

一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form> 

尝试一下 »
(本页底部可以查看更多实例)


浏览器支持

目前大多数浏览器支持 <input>标签。


标签定义及使用说明

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变,取决于 type 属性。


提示和注释

注意: <input> 元素是空的,它只包含标签属性。

提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。


HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中, "align" 数据已经不再使用。HTML5 中不支持该属性。 可以使用CSS来定义 <input> 元素的对齐方式。

在 HTML5中, <input> 添加了几个属性,并且添加了对应的值。


HTML 与 XHTML 之间的差异

在 HTML 中,<input> 标签没有结束标签。

在 XHTML 中,<input /> 标签必须被正确地关闭。


属性

New : HTML5新标签。

属性描述
acceptaudio/*video/*image/*MIME_type规定通过文件上传来提交的文件的类型。(只针对type="file")
alignleftrighttopmiddlebottomHTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alttext定义图像输入的替代文本。 (只针对type="image")
autocompleteNewonoffautocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNewautofocus属性规定当页面加载时 <input> 元素应该自动获得焦点。
checkedcheckedchecked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disableddisableddisabled 属性规定应该禁用的 <input> 元素。
formNewform_idform 属性规定 <input> 元素所属的一个或多个表单。
formactionNewURL属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNewapplication/x-www-form-urlencodedmultipart/form-datatext/plain属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNewgetpost定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNewformnovalidateformnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew_blank_self_parent_topframename规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNewpixels规定 <input>元素的高度。(只针对type="image")
listNewdatalist_id属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
maxNewnumberdate属性规定 <input> 元素的最大值。
maxlengthnumber属性规定 <input> 元素中允许的最大字符数。
minNewnumberdate属性规定 <input>元素的最小值。
multipleNewmultiple属性规定允许用户输入到 <input> 元素的多个值。
nametextname 属性规定 <input> 元素的名称。
patternNewregexppattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNewtextplaceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
readonlyreadonlyreadonly 属性规定输入字段是只读的。
requiredNewrequired属性规定必需在提交表单之前填写输入字段。
sizenumbersize 属性规定以字符数计的 <input> 元素的可见宽度。
srcURLsrc 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")
stepNewnumberstep 属性规定 <input> 元素的合法数字间隔。
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
type 属性规定要显示的 <input> 元素的类型。
valuetext指定 <input> 元素 value 的值。
widthNewpixelswidth 属性规定 <input> 元素的宽度。 (只针对type="image")


全局属性

<input> 标签支持全局属性,查看完整属性表 HTML全局属性。


事件属性

<input> 标签支持所有 HTML事件属性。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/414034.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构初阶】第五节.栈的详讲

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、栈的基本认识 二、栈模拟实现&#xff1a; 三、栈的实战演练 3.1 有效的括号 3.2 逆波兰表达式 3.3 栈的压入、弹出序列 总结 前言 上一节内容我…

【产品设计】登录功能设计逻辑解析

登录功能是每个产品的基础功能&#xff0c;用户已经习以为常了&#xff0c;但对于产品经理来说&#xff0c;这是打开用户通往产品世界大门的“钥匙”&#xff0c;需要好好设计。 在用户看来&#xff0c;登录像是一个一次性的功能&#xff0c;很多 APP 在手机上登录过一次之后&a…

Linux学习记录——십구 构建进程间通信的信道方案

文章目录1、进程间通信介绍1、目的2、发展2、管道1、原理2、简单模拟实现3、总结3、匿名管道——控制进程4、命名管道1、原理2、模拟实现1、进程间通信介绍 之前所学都是单个进程&#xff0c;多个进程之间如何运转&#xff1f; 1、目的 数据传输&#xff1a;一个进程需要将它…

SpringSecurity之基本原理——过滤器链

前言 前面我们讲解了入门案例&#xff0c;很多小伙伴看完之后&#xff0c;应该也不知道他是如何实现的拦截。接下来&#xff0c;我们看一下SpringSecurity的基本原理是什么&#xff1f; 本质 其实&#xff0c;SpringSecurity的本质上就是一个过滤器链。在启动时&#xff0c;…

我的面试八股(JVM篇)

谈一谈Java内存区域和Java内存模型的理解&#xff1f; / Java内存区域和Java内存模型是一个东西吗&#xff1f; Java内存区域和Java内存模型不是一个东西&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; Java内存区域&#xff0c;也就是Java运行时数据区域。是…

Typora自定义主题分享 (Mac风、图片立体感...)

MarkDown 主题分享 文章目录MarkDown 主题分享Ligth-浅色主题主题效果展示安装方式Dark-深色主题主题效果展示安装方式关键字&#xff1a;Typora 、Mac、图片阴影、代码样式、表格 Ligth-浅色主题 主题效果展示 安装方式 下载 Typora 官网 Mo主题 下载地址将Mo.css样式修改为…

Docker容器部署

Docker容器1.Docker概念1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结1.4.安装Docker2.Docker的基本操…

【无人机】采用最基本的自由空间路损模型并且不考虑小尺度衰落(多径多普勒)固定翼无人机轨迹规划(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

每日刷题记录(十四)

目录第一题&#xff1a;子集解题思路&#xff1a;代码实现&#xff1a;第二题&#xff1a;组合解题思路&#xff1a;代码实现&#xff1a;第三题&#xff1a;全排列解题思路&#xff1a;代码实现&#xff1a;第四题&#xff1a;全排列II解题思路&#xff1a;代码实现&#xff1…

2023年4月传统行业产品经理需要考NPDP吗?含金量高吗?

产品经理国际资格认证NPDP是新产品开发方面的认证&#xff0c;集理论、方法与实践为一体的全方位的知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会&#xff08;PDMA&#xff09;成立于1979年&#xff0c;是…

Linux内存管理(七):fixmap详解

源码基于:Linux 5.4 约定: 芯片架构:ARM64 CONFIG_ARM64_VA_BITS:39 CONFIG_ARM64_PAGE_SHIFT:12 0. 前言 内核启动首先会进入汇编阶段,mmu已经启动 (也就是说,当前SOC只能使用虚拟地址访问RAM),paging_init还没有完成调用,在内核启动过程需要访问某些特定的内核模…

SQL综合查询上

目录1、查询输出“高等数学”课程成绩前三名&#xff08;不考虑成绩有重复值的情况&#xff09;的学生的学号&#xff0c;姓名&#xff0c;课程名&#xff0c;系名&#xff0c;成绩。题目代码2、统计各门课程的重修人数&#xff08;包括grade为NULL&#xff09;&#xff0c;要求…

体验了一把ChatGPT4

不得不说ChatGPT对我的学习效率有极大的提升&#xff0c;它就像一位老师&#xff0c;不管有什么问题&#xff0c;都可以得到很好的答案。但是前段时间gpt3.5账号被封了&#xff0c;最近搞了个gpt4。市面上目前好像没啥可以白嫖的账号&#xff0c;基本都是免费使用几次&#xff…

C++11新特性有效总结

目录 语言可用性加强 (读现代C教程有感) nullptr constexpr if/switch 申明强化 &#xff08;C17开始&#xff09; 初始化参数列表 范围for迭代 两种类型推导方式 变长参数模板 SmartPointer Lambda 多线程 (并发与并行) 并发与并行的概念 C11中的并发并行 软件…

基于单片机的温室大棚环境监测系统设计

温室大棚对北方反季节蔬菜的种植具有重要意义。据了解全国各地温室大棚使用集中&#xff0c;但是大棚环境调控方式落后、管理落后、生产效率比较低。针对此问题本文提出了一种基于STM32单片机智能温室大棚控制系统方案&#xff0c;实现环境参数的自动检测&#xff0c;以达到智能…

C语言从入门到精通第2天(深度解析C语言数据类型及取值范围)

C语言基本数据类型及取值范围数据存储概述基本数据类型整型数的二进制表示浮点型数的二进制表示取值范围数据存储概述 C语言的变量有着不同的数据类型&#xff0c;每种数据类型的取值空间都是不同的&#xff0c;因此&#xff0c;不同数据类型的变量&#xff0c;其取值空间也不…

利用注解和反射解决代码冗余问题(改进版)

在优化代码的时候发现&#xff0c;传参存在着高度冗余&#xff0c;如果后面需要改参数&#xff0c;很不方便。 String pam1 "id" appKey "&sign" sign "&method" method "&access_token" token "&times…

光隔离器的工作原理及其应用

光隔离器也称为光隔离器或光耦合器&#xff0c;它是一种通过使用光将电信号或电压从一个电路传输到另一个电路的装置&#xff0c;同时它将两个电路彼此隔离。它可以通过隔离过压信号来防止高电压或快速变化的电压损坏组件。光隔离器可以承受高达10KV的输入至输出电压和高达10KV…

html+css+JavaScript+json+servlet的社区系统(手把手教学)

目录 课前导读&#xff1a; 一、系统前期准备 二、前端代码的编写 三、登陆页面简介 四、注册页面 五、社区列表页 六、社区详情页 七、社区发帖页 八、注销 九、访问链接 登陆页面http://175.178.20.77:8080/java106_blog_system/login.html 总结&#xff1a; 课前…

HTML5 <embed> 标签、HTML5 <figcaption> 标签

HTML5 <embed> 标签 实例 被嵌入的 flash 动画片&#xff1a; <embed src"helloworld.swf">尝试一下 浏览器支持 注意: 大多数现代浏览器已经弃用并取消了对浏览器插件的支持&#xff0c;所以如果您希望您的网站可以在普通用户的浏览器上运行&#xf…