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，一经查实，立即删除！

相关文章

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

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

背景&#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…
阅读更多...
排序算法——归并排序以及非递归实现

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

一、归并排序思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide andConquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列…
阅读更多...
重新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…
阅读更多...
Marin说PCB之Max parallel知多少？

Marin说PCB之Max parallel知多少？

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

C语言分支和循环（2）

我的相关博客&#xff1a; C语言的分支与循环&#xff08;1&#xff09; 1.switch语句 除了 if 语句外&#xff0c;C语⾔还提供了 switch 语句来实现分⽀结构。 switch 语句是⼀种特殊形式的 的 if...else 结构&#xff0c;⽤于判断条件有多个结果的情况。它把多重 else if…
阅读更多...
亿发：制造型企业信息化规划——从破冰到全面落地

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

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

深度学习知识与心得

目录 深度学习简介 传统机器学习 深度学习发展 感知机 前馈神经网络 前馈神经网络&#xff08;BP网络&#xff09; 深度学习框架讲解 深度学习框架 TensorFlow 一个简单的线性函数拟合过程 卷积神经网络CNN&#xff08;计算机视觉&#xff09; 自然语言处理NLP Wo…
阅读更多...
OpenAI助手API接入-问答对自动生成

OpenAI助手API接入-问答对自动生成

支持GPT-3.5-Turbo, GPT-4o, GPT-4-Turbo import json import openai from pathlib import Path import os client openai.OpenAI(base_urlbase_url, api_keyapi_key) file client.files.create( fileopen("H3.pdf", "rb"), purposeassistants ) …
阅读更多...
成功解决“ModuleNotFoundError: No Module Named ‘utils’”错误的全面指南

成功解决“ModuleNotFoundError: No Module Named ‘utils’”错误的全面指南

成功解决“ModuleNotFoundError: No Module Named ‘utils’”错误的全面指南 在Python编程中&#xff0c;遇到ModuleNotFoundError: No Module Named utils这样的错误通常意味着Python解释器无法找到名为utils的模块。这可能是由于多种原因造成的&#xff0c;比如模块确实不存…
阅读更多...
念念不忘，必有回响 的 echo

念念不忘，必有回响 的 echo

念念不忘&#xff0c;必有回响 的 echo 念念不忘&#xff0c;必有回响 的 echo几个示例更多信息 念念不忘&#xff0c;必有回响 的 echo echo命令用于在终端设备上输出字符串或变量的值&#xff0c;类似于Python的print和C语言的printf&#xff0c;是Linux系统中最常用的命令…
阅读更多...
深度学习笔记：0.cuda安装，成功

深度学习笔记：0.cuda安装，成功

B站上说&#xff1a;cs上骗子太多。文章太久&#xff0c;我深以为然。用了一天。才装好。其实很简单。 CUDA安装教程&#xff08;超详细&#xff09;-CSDN博客文章浏览阅读1w次&#xff0c;点赞5次&#xff0c;收藏56次。windows10 版本安装 CUDA &#xff0c;首先需要下载两个…
阅读更多...
【并发程序设计】总篇集(八万字)

【并发程序设计】总篇集(八万字)

11_Concurrent_Programing 1.进程概念 在Linux中&#xff0c;进程是操作系统分配资源和调度运行的基本单位。 Linux中的进程有以下用处&#xff1a; 提高CPU利用率&#xff1a;通过进程的并发执行&#xff0c;可以让多个程序同时利用计算机的资源&#xff0c;这样每个用户都…
阅读更多...
部署metrics-server

部署metrics-server

kubeadm部署metrics-server 需求&#xff1a;生产环境是kubeadm部署的v1.22.2版本的k8s&#xff0c;统计资源时发现这套环境没有部署metrics-server这个服务&#xff0c;今天来部署一下 1、在github社区找到这个项目并下载 rootjumpserver-cmcc:~# wget https://github.com/…
阅读更多...
你需要知道关于 Java 线程一些最基本的事情

你需要知道关于 Java 线程一些最基本的事情

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…
阅读更多...
《SpringBoot3+Vue3实战》系列文章目录

《SpringBoot3+Vue3实战》系列文章目录

前后端分离&#xff08;Frontend-Backend Separation&#xff09;是一种软件架构设计模式&#xff0c;它将传统的Web应用中的前端&#xff08;用户界面&#xff09;和后端&#xff08;服务器逻辑和数据存储&#xff09;从应用层面进行解耦&#xff0c;使得两者可以独立地开发、…
阅读更多...
Linux CFS调度器简介

Linux CFS调度器简介

文章目录 前言一、概要二、实现2.1 简介2.2 算法实现2.3 内核源码 三、特点四、调度策略五、调度类参考资料 前言 早期的Linux调度器采用了简化的设计&#xff0c;显然并不针对具有许多处理器甚至超线程的大规模架构。Linux 1.2调度器使用循环队列对可运行任务进行管理&#x…
阅读更多...
昆仑万维官宣开源2000亿稀疏大模型Skywork-MoE

昆仑万维官宣开源2000亿稀疏大模型Skywork-MoE

6月3日&#xff0c;昆仑万维宣布开源2千亿稀疏大模型Skywork-MoE&#xff0c;性能强劲&#xff0c;同时推理成本更低。 据「TMT星球」了解&#xff0c;Skywork-MoE基于之前昆仑万维开源的Skywork-13B模型中间checkpoint扩展而来&#xff0c;是首个完整将MoE Upcycling技术应用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023