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

embedded/2024/11/13 5:31:39/
htmledit_views">

可将以下代码复制另存为一个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.ppmy.cn/embedded/46100.html

相关文章

3. MySQL 数据表的基本操作

文章目录 【 1. MySQL 创建数据表 】【 2. MySQL 查看表 】2.1 查看表的属性DESCRIBE/DESC 以表格的形式展示表属性SHOW CREATE TABLE 以SQL语句的形式展示表属性 2.2 查看表的内容 【 3. MySQL 修改数据表结构 】3.1 修改表名3.2 修改表字符集3.3 添加字段在末尾添加字段在开头…

Flutter基础 -- Dart 语言 -- 类抽象接口继承函数库

目录 1. 类 class 1.1 定义、使用类 1.2 构造函数 1.3 初始化列表 1.4 命名构造函数 1.5 重定向构造函数 1.6 callable 2. 类 get set 2.1 定义、使用 get set 2.2 简化 get set 2.3 业务场景 3. 静态 static 3.1 static 定义 3.2 函数内部访问 3.3 静态方法 3…

Linux下Qt Creator无法输入中文(已解决)

1. 首先确保安装了搜狗输入法&#xff0c;且能正常运行。 2.克隆源码到本地。 git clone https://gitcode.com/fcitx/fcitx-qt5.git 3.检查Qt Creator版本&#xff0c;如下图所示&#xff0c;为基于Qt6的。 4. 进入源码目录&#xff0c;建立build文件夹&#xff0c;修改CMak…

python导出手机可执行

流程&#xff1a; 梦想->安装打包工具->编写程序->生成打包配置->执行打包命令->生成手机可执行文件->OK完成梦想 步骤1&#xff1a;安装打包工具 # 安装PyInstaller pip install pyinstaller 步骤2&#xff1a;编写Python程序 接下来&#xff0c;你需要编…

[论文笔记]MemGPT: Towards LLMs as Operating Systems

引言 今天介绍一篇论文MemGPT: Towards LLMs as Operating Systems。翻过过来就是把LLM看成操作系统。 大语言模型已经在人工智能领域引起了革命性的变革&#xff0c;但受到有限上下文窗口的限制&#xff0c;在扩展对话和文档分析等任务中的效用受到了阻碍。为了能够利用超出…

【刷题(12)】图论

一、图论问题基础 在 LeetCode 中&#xff0c;「岛屿问题」是一个系列系列问题&#xff0c;比如&#xff1a; 岛屿数量 &#xff08;Easy&#xff09;岛屿的周长 &#xff08;Easy&#xff09;岛屿的最大面积 &#xff08;Medium&#xff09;最大人工岛 &#xff08;Hard&…

yarn使用npm私服registry安装依赖失败

我们用的是阿里云效的制品仓库&#xff08;私服&#xff09;&#xff0c;前两天一直觉得奇怪&#xff0c;怎么npm安装能成功&#xff0c;但是yarn执行的时候要么就是提示401要么就是找不到 Couldnt find package "ahooks" on the "npm" registry..tgz: Re…