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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视频融合共享平台LntonCVS视频监控业务平台可视化智慧仓储应用方案

对于当前许多大型工厂和物流基地来说&#xff0c;仓库是存放物品的重要场所。仓储存放着大量货物&#xff0c;并且配备有大量辅助设备&#xff0c;因此需要全方位的监管以避免发生安全事故&#xff0c;造成财产损失。传统的人工巡检方式已经无法满足现有大规模监管的要求&#…

【第九课】空间数据基础与处理——空间参考处理

一、前言 地图图层中的所有元素都具有特定的地理位置和范围&#xff0c;这使得它们能够定 位到地球表面上相应的位置。精确定位地理要素对于制图和 GIS来说都至关 重要&#xff0c;而要正确地描述要素的位置和形状&#xff0c;需要引入一个用于定义位置的框 架———空间参考。…

从MLP到卷积

1.从MLP到卷积层 最近要做多通道的实验&#xff0c;所以重新将处理图像的基础模型回顾一下&#xff0c;什么是卷积&#xff1f;卷积本质是是一种特殊的全连接层。 1.1怎么w的权重从一个值变成了4维呢?可以这样理解&#xff0c;在此举一个例子&#xff1a; 其实本质可以看成&…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

NEJM新英格兰医学期刊文献在家如何查阅下载

今天收到的求助文献中有一篇是NEJM新英格兰医学期刊中的一篇文献&#xff0c;篇名“Osimertinib after Chemoradiotherapy in Stage III EGFR -Mutated NSCLC” 首先我们先简单了解一下NEJM新英格兰医学期刊&#xff1a; NEJM新英格兰医学期刊&#xff1a;New England Journa…

c# - - - winform 右下角气球提示通知

c# - - - winform 右下角气球提示通知 winform 右下角气球提示通知 1.1 winform 右下角气球提示通知 在工具箱中点击 NotifyIcon 控件&#xff0c;拖动到 Form1 窗体上添加这个控件。 在“提示”按钮的点击事件中写气球提示通知内容。 public partial class Form1 : Form {…

如何利用CXL技术突破内存墙?-2

为了解决这些问题&#xff0c;业界正积极寻求新的技术和标准&#xff0c;比如Compute Express Link (CXL)&#xff0c;它旨在通过提供标准化的高速互连来提高内存带宽、降低延迟&#xff0c;并简化内存扩展的软件集成&#xff0c;从而有效地打破内存墙的限制。 通过使用CXL&am…

i.MX8MP平台开发分享(RDC资源分配控制器篇)

1.spec RDC 配置信息被发送到结构端口、内存垫片、信号控制器和外设&#xff0c;以根据域分配控制访问。 结构使用与每个端口相关的域标识符&#xff0c;将此信息与总线事务一起包含在内。当从属加密垫圈遇到总线事务时&#xff0c;它会将事务域 ID 与 RDC 提供的允许域列表进…

同一个tomcat不同端口运行不同项目

第一步&#xff1a;修改 server.xml 文件 修改 tomcat 安装目录下 conf/server.xml 文件&#xff0c;需要几个端口就添加几个 Service 节点。 配置 2 个端口&#xff1a;9131 和 9133&#xff0c;于是增加两个 Service 节点。 每个 Service 节点的 name 属性值要设置不同的值…

2024最火爆的6款洗地机推荐,洗地机品质优秀品牌推荐

洗地机将吸尘、拖地、扫地三大功能合一&#xff0c;通过高效吸尘系统迅速吸走灰尘和杂物。内置清洁水箱和智能拖布设计&#xff0c;使其在拖地时能够根据地面材质和清洁需求&#xff0c;自动调节湿度和清洁力度&#xff0c;实现最佳清洁效果。无论是硬地板还是地毯&#xff0c;…

WHAT - 前端开发人员日常提效工具和应用程序

目录 Mac代码编辑器和IDE1. Visual Studio Code (VS Code)2. WebStorm3. VimVim 的优势常用命令&#xff1a;普通模式&#xff08;Normal Mode&#xff09;常用命令&#xff1a;插入模式&#xff08;Insert Mode&#xff09;常用命令&#xff1a;命令行模式&#xff08;Command…

接口自动化-预期值和实际值怎么写?

测试类当中 怎么做接口自动化&#xff0c;返回值校验&#xff0c;就是需要返回值的预期值和实际值进行对比 实际值如下 怎么拿到预期值$.msg?用正则表达式-提取值 建新的类-来编写用正则表达式拿到预期值 源码pattern 使用的compile的方法&#xff0c;传入的是字符串正则表…

[原创][Delphi多线程]TThreadedQueue的经典使用案例.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delph…

Spi Pwm Tim 对比分析

spi SPI时序图 (spi是主从机 所以主机需要从机数据 需要主极先喊从机 把从机喊答应了 才能开始读从机的数据&#xff09; cpol时钟极性 和cpha时钟相位分析 1.cpha为高&#xff0c;cpol为高&#xff0c;则偶数上升沿有效 2.cpha为高&#xff0c;cpol为低&#xff0c;则偶数…

安装Subversion和配置 svn服务端

Subversion是一个免费/开源的版本控制系统(VCS),也被称为SVN。它能够对文件和目录以及它们的修改进行跨时间的管理,允许用户恢复数据的旧版本或检查数据的修改历史。Subversion建立在二进制文件区别算法基础上,对文本和二进制文件都有一致的操作方式,并将它们压缩存放在版…

大容量异步电机直接转矩(DTC)控制matlab仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; DTC简介 直接转矩控制的基本思想就是利用逆变器所产生的空间电压矢量来控制定子磁链的旋转速度&#xff0c;通过控制定子磁链的走停来改变定子磁链的平均旋转速度的大小&#xff0c;从而改变磁通角的大小进而…

晶圆几何量测系统支持半导体制造工艺量测,保障晶圆制造工艺质量

晶圆面型参数厚度、TTV、BOW、Warp、表面粗糙度、膜厚、等是芯片制造工艺必须考虑的几何形貌参数。其中TTV、BOW、Warp三个参数反映了半导体晶圆的平面度和厚度均匀性&#xff0c;对于芯片制造过程中的多个关键工艺质量有直接影响。 TTV、BOW、WARP对晶圆制造工艺的影响 对…

每日两题 / 198. 打家劫舍 74. 搜索二维矩阵(LeetCode热题100)

198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; dp[i]表示考虑前i 1号房屋&#xff0c;能获取的最大金额。对于没一间房屋都有偷与不偷两种选择 如果偷&#xff0c;需要从dp[i - 2]转移&#xff0c;因为不能偷窃相邻房屋&#xff0c;dp[i] dp[i - 2] nums[i] 如果…

双指针解题

验证回文数&#xff08;验证回文数-CSDN博客&#xff09;和判断在子序列&#xff08;判断子序列-CSDN博客&#xff09;已经在之前进行了计算&#xff0c;今天有三个新的双指针问题&#xff1a; 两数之和II—输入有序数组 给你一个下标从 1 开始的整数数组 numbers &#xff0…

国产信创CPU之飞腾CPU剖析

CPU&#xff1a;信创根基&#xff0c;国之重器 国产CPU已形成自主架构、x86、ARM三大阵营。自主阵营中&#xff0c;龙芯、申威分别基于MIPS和Alpha推出loong ISA和SW-64。ARM阵营以鲲鹏、飞腾为代表&#xff0c;利用ARM IP授权开发处理器。x86阵营由海光、兆芯等主导&#xff…