HTML基本元素包含HTML表单验证

可将以下代码复制另存为一个HTML文件浏览器打开自己去看看实际使用效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>测试</title>
</head>
<body>
<h1>很多事</h1>
<h1><b>加粗文字</b></h1>
<h1><i>斜体文字</i></h1>
<h1><code>电脑输出文字效果</code></h1>
<h1>7<sub>1下标</sub><sup>2上标</sup></h1>
<h1 style="text-decoration:underline;">下划线</h1>
<h1 style="text-decoration:line-through;">删除线</h1>
<h1 style="text-decoration:overline;">上划线</h1><h1 style="text-indent:2em ">缩进</h1>
<h1 style="text-align: center;">水平居中显示</h1><hr><br><br>
<p>的基础上肯定不能京东方出</p>
<p>更好vu根本vu计划搜嘎大V古一哈果然VB依噶是呀付刚<br>擦韵达GV出一哈</p>
<hr><br><br>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link">菜鸟教程</a>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link" target="_blank">新窗口打开</a>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link" target="_self">此窗口打开</a>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link" >
<img src="http://p4.itc.cn/q_70/images03/20200925/cd3a5707b185480898c89c2c9c11fbf2.jpeg" style="height: 50px;width: 50px" alt="示例图片">
</a>
<hr><br><br>
<img src="https://pics1.baidu.com/feed/8435e5dde71190eff03ade7625f43d1efffa604a.jpeg@f_auto?token=dc0a18c359a9b61d857e8cd38aecf0b4" style="height: 50px;width: 50px">
<hr>
<br><h1>表格</h1>
<h4>一列</h4>
<table border="1px">
<tr><td>100</td></tr>
</table>
<br><h4>二行二列</h4>
<table border="1px">
<tr><td>100</td><td>200</td></tr>
<tr><td>568</td><td>545</td>
</tr>
</table><hr><table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody>
</table><h4>无序列表</h>
<ul><li>fsd</li><li>sds</li></ul><h4>有序列表（type属性可设置序号标识如123，abc...）</h4>
<ol><li>ccvfdv</li><li>vdfvdf</li></ol>
<h4>自定义列表</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl><hr><br><h1>表格</h1><form action=""><label>用户名</label><input type="text" name="username" id="username" required><label>请输入密码</label><input type="password" name="password" id="password"><button style="submit">登录</button>
</form><hr>
<h4>下拉框</h4>
<form action="">
<select id="test" name="test"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>
</form>
<hr><br>
<h4>单选框</h4>
<form action=""><input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="girl">女</form><form action=""><input type="checkbox" name="lief" value="vosion">望远镜<input type="checkbox" name="lief" value="basscatball">篮球</form><h1>表格外框</h1>
<fieldset><legend>用户登录</legend><form action="" method=""><label>用户名</label><input type="text" name="username"><label>密码</label><input type="password" name="password"><button type="submit" name="submit">登录</button></form>
</fieldset>
<hr>
<h1>iframe框</h1>
<iframe src="https://www.bilibili.com/" width="200px" height="200px"></iframe><hr>
<h4>点击链接 在iframe框显示</h4>
<iframe src="" width="200px" height="200px" name="iframe"></iframe>
<a href="https://www.bilibili.com/" target="iframe">点击此处显示</a><hr><h1>javascript初使用</h1>
<p id="lll">这是一个段落</p>
<button onclick="myFunction()">点击改变内容</button>
<script>
function myFunction()
{document.getElementById("lll").innerHTML="Hello JavaScript!";
}
</script><h1>input应该放入form表中使用，利用type=submit提交数据较便捷</h1>
<hr>
<h1>input类型</h1>
<label>选择颜色color类型</label>
<input type="color" name="">
<hr>
<label>选择日期date类型</label>
<input type="date" name=""><hr>
<label>选择邮件email类型</label>
<input type="email" name="">
<hr>
<label>选择月份month类型</label>
<input type="month" name=""><hr>
<label>选择数字number类型1-10</label>
<input type="number" name="" min="0" max="10"><hr>
<label>选择数字滚动条range类型1-10</label>
<input type="range" name="" min="0" max="10"><hr>
<label>搜索框search类型</label>
<input type="search" name=""><hr>
<label>电话号码tel类型</label>
<input type="tel" name=""><hr>
<label>选择时间time类型</label>
<input type="time" name="">
<hr>
<label>选择周week类型</label>
<input type="week" name="">
<hr>
<label>网址url类型</label>
<input type="url" name=""><h1>搜索框输入自动查询</h1>
<form><!-- type和搜索框列表名绑定 --><input list="llist" name="">
<datalist id="llist"><option value="雾山五行">雾山五行</option><option value="海绵宝宝">海绵宝宝</option><option value="奥特慢">奥特曼</option></datalist>
</form>
<hr>
<br>
<h1>表单内容自动填充autocomplet</h1>
<form autocomplete="on"><!-- autofocus自动聚焦 --><!-- required必须填写，不能为空 -->姓名：<input type="text" name="" autofocus="" required="">邮箱：<input type="email" name="">
</form><h1>存放链接nav</h1>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多项分布模拟及 Seaborn 可视化教程

多项分布模拟及 Seaborn 可视化教程

多项分布 简介 多项分布是二项分布的推广&#xff0c;它描述了在 n 次独立试验中&#xff0c;k 种不同事件分别出现次数的离散概率分布。与二项分布只能有两种结果&#xff08;例如成功/失败&#xff09;不同&#xff0c;多项分布可以有 k 种&#xff08;k ≥ 2&#xff09;及…
阅读更多...
Nginx的Location匹配与Rewrite重写

Nginx的Location匹配与Rewrite重写

目录 一.Nginx中location与rewrite 1.Nginx中常用正则表达式 2.location与rewrite的联系和区别 二.location概述 1.分类 2.匹配规则 3.优先级 4.示例 三.rewrite概述 1.rewrite功能 2.rewrite执行顺序 3.跳转实现 4.语法格式 5.示例 5.1.基于域名的跳转 5.2.基…
阅读更多...
四、利用启发式算法进行特定数据集的残差网络结构搜索【框架+源码】

四、利用启发式算法进行特定数据集的残差网络结构搜索【框架+源码】

背景&#xff1a;工作之后干的事情跟算法关联甚少&#xff0c;整理下读书期间的负责和参与的work&#xff0c;再熟悉学习下。 边熟悉边整理喽~ CV Tradictional workCV AI based work机械臂视觉抓取项目机器学习全流程 Pipeline训练平台OCR生产线喷码识别三维重建(SfM)ROS机器人…
阅读更多...
C++的vector使用优化

C++的vector使用优化

我们在上一章说了如何使用这个vector动态数组&#xff0c;这章我们说说如何更好的使用它以及它是如何工作的。当你创建一个vector&#xff0c;然后使用push_back添加元素&#xff0c;当当前的vector的内存不够时&#xff0c;会从内存中的旧位置复制到内存中的新位置&#xff0c…
阅读更多...
Spring 之 Lifecycle 及 SmartLifecycle

Spring 之 Lifecycle 及 SmartLifecycle

最近在看Eureka源码&#xff0c;本想快速解决这场没有硝烟的战役&#xff0c;不曾想阻塞性问题一个接一个。为正确理解这个框架&#xff0c;我不得不耐着性子&#xff0c;慢慢梳理这些让人困惑的点。譬如本章要梳理的Lifecycle和SmartLifecycle。它们均为接口&#xff0c;其中后…
阅读更多...
mysql的锁（全局锁）

mysql的锁（全局锁）

文章目录 mysql按照锁的粒度分类全局锁概念&#xff1a;全局锁使用场景&#xff1a;全局锁备份案例&#xff1a; mysql按照锁的粒度分类 全局锁 概念&#xff1a; 全局锁就是对整个数据库实例加锁。MySQL 提供了一个加全局读锁的方法&#xff0c;命令是: Flush tables with…
阅读更多...
java —— 文件的创建、删除、查询和重命名

java —— 文件的创建、删除、查询和重命名

文件的相关操作通过 File 类并引入路径来实现&#xff0c;这里对文件的操作只是对文件本身的增、删、查等&#xff0c;不包括对文件内容的修改。 一、创建文件/文件夹 public static void main(String[] args) {//创建文件File file1new File("D:\\android\\test\\a.jpg…
阅读更多...
vue封装url验证方法

vue封装url验证方法

vue封装url验证方法 在 Vue 中&#xff0c;你可以封装一个 URL 验证的方法来验证给定的 URL 是否有效。以下是一个示例代码&#xff1a; export const validateUrl (url) > {const regex /^(https?:\/\/)?([\da-z.-])\.([a-z.]{2,6})([/\w .-]*)*/;return regex.test(…
阅读更多...
排序算法——归并排序以及非递归实现

排序算法——归并排序以及非递归实现

一、归并排序思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide andConquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列…
阅读更多...
OkHttp，一个贼牛的Java工具包

OkHttp，一个贼牛的Java工具包

在当今的网络应用开发中，Java 作为一种成熟的编程语言，广泛应用于服务器端和客户端的开发。网络请求作为应用开发中不可或缺的一部分，选择一个高效、稳定的网络库尤为重要。OkHttp 就是这样一款优秀的网络库，它为Java提供了简单易用、功能强大的网络请求能力。本文将向读者…
阅读更多...
关于编译的一些思路和猜想

关于编译的一些思路和猜想

一、编译原理的难度 编译原理特别复杂&#xff0c;研究的是高级语言如何翻译成汇编语言的过程。 二、编译过程中一些思路 (一)语义识别的作用 语义识别指的是把一些无关字符忽略&#xff0c;把一些变量名保存在一起&#xff0c;把用空格隔开的关键字单独放一起。 例如&#…
阅读更多...
重新ysyx

重新ysyx

一、克隆仓库 1.创建ssh key ssh-keygen -t rsa cd ~/.ssh ls 查看里面是否有id_rsa id_rsa.pub ssh-keygen -t rsa -C "xiantong15834753336outlook.com" cat id_rsa.pub***********查看里面的内容&#xff0c;复制到下图中绿色的按钮 git init ssh -T g…
阅读更多...
spark3.0.1版本查询Hbase数据库例子

spark3.0.1版本查询Hbase数据库例子

需求背景 现有需求&#xff0c;需要采用spark查询hbase数据库的数据同步到中间分析库&#xff0c;记录spark集成hbase的简单例子代码 import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.client.{ConnectionFactory, Scan} import org.apach…
阅读更多...
Marin说PCB之Max parallel知多少？

Marin说PCB之Max parallel知多少？

今天是个阳光明媚&#xff0c;万里乌云的好日子。小编我一如既往地到家打开电脑准备看腾讯视频的五十公里桃花坞的第四季&#xff0c;在看到汪苏泷汪台说650电台要解散的时候小编我差点也哭了。650电台之于桃花坞就像乐队的鼓手一样&#xff0c;都是一个团队的灵感啊&#xff0…
阅读更多...
CSS中的长度单位详解

CSS中的长度单位详解

在CSS中&#xff0c;长度单位是定义元素尺寸、间距、边距等的重要工具。不同的长度单位具有不同的特性和使用场景。 绝对长度单位 绝对长度单位在所有设备和浏览器中表示相同的长度。这些单位包括&#xff1a; 1.像素&#xff08;px&#xff09; 像素是最常用的长度单位。一…
阅读更多...
C语言分支和循环（2）

C语言分支和循环（2）

我的相关博客&#xff1a; C语言的分支与循环&#xff08;1&#xff09; 1.switch语句 除了 if 语句外&#xff0c;C语⾔还提供了 switch 语句来实现分⽀结构。 switch 语句是⼀种特殊形式的 的 if...else 结构&#xff0c;⽤于判断条件有多个结果的情况。它把多重 else if…
阅读更多...
非质量成本总结

非质量成本总结

非质量成本 非质量成本 定义 举例 固定成本 不随生产量或工作量变动而变动的成本 办公室租赁费 可变成本 随着生产量或工作变动而变动的成本 材料费 直接成本 可以直接计入某项目的成本 工人工资 间接成本 不能直接计入某项目而需要再几个项目之间或在项目与职能部…
阅读更多...
Linux基本指令3

Linux基本指令3

Linux基本指令3 目录 Linux基本指令3 一、Linux文件系统管理 二、Linux进程与服务管理
阅读更多...
亿发：制造型企业信息化规划——从破冰到全面落地

亿发：制造型企业信息化规划——从破冰到全面落地

在制造型企业中&#xff0c;信息化规划的落地是一个复杂而关键的过程。尽管规划和蓝图可能已经制定完毕&#xff0c;但如何成功地实施信息化才是关键所在。本文将详细介绍制造型企业信息化规划的落地过程&#xff0c;通过三个周期逐步推进&#xff0c;最终实现信息化与自动化的…
阅读更多...
深度学习知识与心得

深度学习知识与心得

目录 深度学习简介 传统机器学习 深度学习发展 感知机 前馈神经网络 前馈神经网络&#xff08;BP网络&#xff09; 深度学习框架讲解 深度学习框架 TensorFlow 一个简单的线性函数拟合过程 卷积神经网络CNN&#xff08;计算机视觉&#xff09; 自然语言处理NLP Wo…
阅读更多...
最新文章

Copyright @ 2022~2023