前端笔记-day02

文章目录

    • 01-无序列表
    • 02-有序列表
    • 03-定义列表
    • 04-表格
    • 06-表格-合并单元格
    • 07-表单-input
    • 08-表单-input占位文本
    • 09-表单-单选框
    • 10-表单-上传多个文件
    • 11-表单-多选框
    • 12-表单-下拉菜单
    • 13-表单-文本域
    • 14-表单-label标签
    • 15-表单-按钮
    • 16-无语义-span和div
    • 17-字体实体
    • 19-注册登录页面

01-无序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>列表条目</li><li>列表条目2</li><li>列表条目3</li></ul>
</body>
</html>

02-有序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><Ol><li>liebiao1</li><li>2</li><li>3</li></Ol>
</body>
</html>

03-定义列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>服务中心</dt><dd>shenqing</dd><dd>1</dd><dd>2</dd><dd>3</dd><dt>申请售后</dt><dd>1</dd><dd>2</dd><dd>3</dd><dd>4</dd><dd>5</dd><dt>服务中心</dt><dd>shenqing</dd><dd>1</dd><dd>2</dd><dd>3</dd><dt>申请售后</dt><dd>1</dd><dd>2</dd><dd>3</dd><dd>4</dd><dd>5</dd></dl>
</body>
</html>

04-表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- table  table row    table head    table data --><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>

在这里插入图片描述

06-表格-合并单元格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- table  table row    table head    table data --><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr><tr><td>张三</td><td>11</td><!-- 跨行合并 --><td rowspan="2">22</td><td>55</td></tr><tr><td>张三</td><td>11</td><!-- <td>22</td> --><td>55</td></tr></tbody><tfoot><tr><td>总结</td><!-- 跨列合并 --><td colspan="3">全市第一</td><!-- <td>全市第一</td> --><!-- <td>全市第一</td> --></tr></tfoot></table>
</body>
</html>

在这里插入图片描述

07-表单-input

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file">
</body>
</html>

08-表单-input占位文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>文本框：<input type="text" placeholder="用户名"><br><br>密码框: <input type="password" placeholder="密码"><br><br></body>
</html>

09-表单-单选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>性别：<input type="radio" name="gender">男<input type="radio" name="gender" checked>女
</body>
</html>

10-表单-上传多个文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>上传文件：<input type="file" multiple>
</body>
</html>

11-表单-多选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>兴趣爱好：<input type="checkbox">敲代码<input type="checkbox" checked>敲前端代码<input type="checkbox" checked>敲前端HTML代码
</body>
</html>

12-表单-下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>城市：<select name="" id=""><option value="">北京</option><option value="">上海</option><!-- 默认选中   selected --><option value="" selected>广州</option></select>
</body>
</html>

13-表单-文本域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 右下角有拖拽功能未来进化掉 --><textarea >请输入文字</textarea>
</body>
</html>

14-表单-label标签

点击旁边的也能选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 方法一 --><label ><input type="radio">女</label><input type="radio">男<br>
<br>性别:<input type="radio" id="man"><label for="man">男</label></body>
</html>

15-表单-按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- form是表单区域 --><!-- actions=“”是发送数据的地址 --><form action="">用户名：<input type="text"><br><br>密码：<input type="password"><br><br><button type="submit">提交</button><!-- 去掉submit 默认依然是submit功能 --><button>提交</button><button type="reset">重置</button><!-- button是以后配合javascript使用 --><button type="button">普通按钮</button></form>
</body>
</html>

16-无语义-span和div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是div</div><div>这是div</div><span>这是span</span><span>这是span</span>
</body>
</html>

17-字体实体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>乾坤未定，你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马。&lt;p&gt;
</body>
</html>

19-注册登录页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>注册信息</h1><form action=""><h2>个人信心</h2>姓名：<input type="text" placeholder="请输入真实姓名"><br><br>密码：<input type="password" placeholder="请输入密码"><br><br>确认密码：<input type="password" placeholder="请输入确认密码"><br><br>性别：<input type="radio" name="gender">男<input type="radio" name="gender">女<br><br>居住城市：<select ><option >北京</option><option value="" selected>上海</option></select><br><br><h2>教育经历</h2>最高学历：<select name="" id=""><option value="">博士</option><option value="">硕士</option><option value="">本科</option><option value="">专科</option></select><br><br>学校名称：<input type="text"><br><br>所学专业：<input type="text"><br><br>在校时间：<select name="" id=""><option value="">2015</option><option value="">2016</option></select>--<select name="" id=""><option value="">2017</option><option value="">2018</option></select><br><br><h2>工作经历</h2>公司名称：<input type="text"><br><br>工作描述：<br><textarea ></textarea><br><br><input type="checkbox">已阅读并同意一下条约<ul><li><ins><a href="#">《用户服务协议》</a></ins></li><li><ins><a href="#">《隐私政策》</a></ins></li></ul><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
</body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

[240512] x-cmd 发布 v0.3.6: (se,wkp,ddgo...)x( kimi,gemini,gpt...)

[240512] x-cmd 发布 v0.3.6: (se,wkp,ddgo...)x( kimi,gemini,gpt...)

目录 x-cmd 发布 v0.3.6新增了 jina 模块新增了 ddgo 模块新增了 se 模块wkp 模块新增了 writer 模块cosmo 模块 x-cmd 发布 v0.3.6 本次版本的最新引入的功能都是目的为了进一步探索 LLM 的使用。 本版本的改进分为两类&#xff1a;资讯类模块&#xff08;Wikipedia&#xf…
阅读更多...
十三、Redis哨兵模式--Sentinel

十三、Redis哨兵模式--Sentinel

上一篇介绍了Redis中的主从复制。我们知道Redis主从中一般只有主节点对外提供写操作&#xff0c;如果主节点发生故障&#xff0c;为了保证Redis的可用性&#xff0c;这时就要在可用的slave节点中&#xff0c;挑选一个作为主节点。这种切换操作如果是人为的操作&#xff0c;那么…
阅读更多...
39-5 入侵检测系统（IDS）- 安装配置IDS（第三天安装成功）

39-5 入侵检测系统（IDS）- 安装配置IDS（第三天安装成功）

官网：Snort Rules and IDS Software Download 参考： （这位大佬分享了安装包下载链接）：https://www.cnblogs.com/taoyuanming/p/12722263.html （安装过程参考这位大佬）：Snort 安装与配置(CentOS 7)_centos 7 snort-CSDN博客一、安装 IDS（我这里在 CentOS 7 虚拟机中安…
阅读更多...
【Docker】Ubunru下Docker的基本使用方法与常用命令总结

【Docker】Ubunru下Docker的基本使用方法与常用命令总结

【Docker】docker的基本使用方法 镜像image与容器container的关系基本命令- 查看 Docker 版本- 拉取镜像- 查看系统中的镜像- 删除某个镜像- 列出当前 Docker 主机上的所有容器&#xff0c;包括正在运行的、暂停的、已停止的&#xff0c;以及未运行的容器- 列出当前 Docker 主机…
阅读更多...
【强训笔记】day19

【强训笔记】day19

NO.1 代码实现&#xff1a; #include <iostream> using namespace std;int gcd(int x,int y) {if(y0) return x;return gcd(y,x%y); } int main() {int n,a;while(cin>>n>>a){int b;for(int i0;i<n;i){cin>>b;if(a>b) ab;else agcd(a,b);}cou…
阅读更多...
验证码生成--kaptcha

验证码生成--kaptcha

验证码生成与点击重新获取验证码 如图所示&#xff0c;本文档仅展示了验证码的生成和刷新显示。 1. 概述 系统通过生成随机验证码图像和文本。 2. 代码分析 2.1. Maven依赖 <dependency><groupId>com.github.penggle</groupId><artifactId>kaptch…
阅读更多...
RustDesk 自建服务器部署和使用教程

RustDesk 自建服务器部署和使用教程

RustDesk 是一个强大的开源远程桌面软件&#xff0c;是中国开发者的作品&#xff0c;它使用 Rust 编程语言构建&#xff0c;提供安全、高效、跨平台的远程访问体验。可以说是目前全球最火的开源远程桌面软件了&#xff0c;GitHub 星星数量达到了惊人的 64k&#xff01; 与 Team…
阅读更多...
如何看待云计算的第三次浪潮？

如何看待云计算的第三次浪潮？

如何看待云计算的第三次浪潮&#xff1f; 来自云栖大会的演讲你如何看待云计算的第三次浪潮&#xff1f;云计算的第三次浪潮将会给社会带来怎样的变革&#xff1f;开发者在云计算的第三次浪潮中将会有哪些机遇和挑战&#xff1f;机遇挑战 来自云栖大会的演讲 在2023云栖大会上…
阅读更多...
SpringSecurity安全过滤器工作原理

SpringSecurity安全过滤器工作原理

前面通过三篇文章&#xff0c;从底层代码的角度分析了SpringSecurity的初始化过程。 接下来我们就要具体看一下&#xff0c;Spring Security的安全过滤器初始化、装配好之后&#xff0c;到底是怎么工作的。 还是按图索骥 下面我们简单从底层源码分析一下&#xff0c;请求是怎…
阅读更多...
【全开源】Fastflow工作流系统（源码搭建/上线/运营/售后/维护更新）

【全开源】Fastflow工作流系统（源码搭建/上线/运营/售后/维护更新）

一款基于FastAdminThinkPHP开发的可视化工作流程审批插件&#xff0c;帮助用户基于企业业务模式和管理模式自行定义所需的各种流程应用&#xff0c;快速构建企业自身的流程管控体系&#xff0c;快速融合至企业协同OA办公系统。 提供全部无加密服务端源码和前端源代码&#xff0…
阅读更多...
树莓派4B-搭建一个本地车牌识别服务器

树莓派4B-搭建一个本地车牌识别服务器

实现目标&#xff1a; 一、设备自启后能够获得服务的ip与端口号&#xff0c;用于计算机连接设备&#xff1b; 二、计算机可以通过服务ip与端口访问设备服务&#xff1b; 三、上传需要处理的数据&#xff0c;返回结果反馈给用户&#xff1b; 四、上传到服务器的数据不会导致设备…
阅读更多...
亲测-wordpress文章实时同步发布修改删除多个站点的WP2WP插件

亲测-wordpress文章实时同步发布修改删除多个站点的WP2WP插件

一款将wordpress文章同步到其他WordPress网站的插件&#xff0c;通过这款插件&#xff0c;可以保持不同博客之间文章发布、修改、删除的同步。 安装步骤&#xff1a; 主站和分站都要上传这个插件 1.把插件上传到wp-content\plugins解压出来wp2wp文件夹&#xff0c;然后启用插…
阅读更多...
本地运行.net项目

本地运行.net项目

有时候需要我们自己做一个.net的课设项目&#xff0c;但是我们有了代码后却不知道怎么运行。我们0基础来学习一下如何运行一个.net项目 1.安装visual studio 2022 不用安装老版本&#xff0c;新版就可以。安装好了2022版本&#xff0c;这是一个支持web的IDE&#xff0c;我们可…
阅读更多...
C++入门指南（上）

C++入门指南（上）

目录 ​编辑 一、祖师爷画像 二、什么是C 三、C发展史 四、C在工作领域的应用 1. 操作系统以及大型系统软件开发 2. 服务器端开发 3. 游戏开发 4. 嵌入式和物联网领域 5. 数字图像处理 6. 人工智能 7. 分布式应用 五、如何快速上手C 一、祖师爷画像 本贾尼斯特劳斯…
阅读更多...
JavaScript基础(六)

JavaScript基础(六)

break & continue continue跳出本次循环&#xff0c;继续下面的循环。 break跳出终止循环。 写个简单的例子: <script> for (var i1; i<5; i){ if (i3){ continue; } console.log(i); } </script> 结果就是跳过i等于3的那次循环&#xff0c;而break: f…
阅读更多...
Stable Diffusion是什么？

Stable Diffusion是什么？

目录 一、Stable Diffusion是什么&#xff1f; 二、Stable Diffusion的基本原理 三、Stable Diffusion有哪些运用领域&#xff1f; 一、Stable Diffusion是什么&#xff1f; Stable Diffusion是一个先进的人工智能图像生成模型&#xff0c;它能够根据文本描述创造出高质量的图…
阅读更多...
牛客NC404 最接近的K个元素【中等 二分查找+双指针 Java/Go/PHP】

牛客NC404 最接近的K个元素【中等 二分查找+双指针 Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/b4d7edc45759453e9bc8ab71f0888e0f 知识点 二分查找&#xff1b;找到第一个大于等于x的数的位置idx;然后从idx开始往两边扩展Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、…
阅读更多...
【基于 PyTorch 的 Python 深度学习】6 视觉处理基础：卷积神经网络（1）

【基于 PyTorch 的 Python 深度学习】6 视觉处理基础：卷积神经网络（1）

前言 文章性质&#xff1a;学习笔记 &#x1f4d6; 学习资料&#xff1a;吴茂贵《 Python 深度学习基于 PyTorch ( 第 2 版 ) 》【ISBN】978-7-111-71880-2 主要内容&#xff1a;根据学习资料撰写的学习笔记&#xff0c;该篇主要介绍了卷积神经网络的卷积层部分。 预&#xff1…
阅读更多...
Spring编程使用DDD的小把戏

Spring编程使用DDD的小把戏

场景 现在流行充血领域层&#xff0c;在原本只存储对象的java类中&#xff0c;增加一些方法去替代原本写在service层的crud&#xff0c; 但是例如service这种一般都是托管给spring的&#xff0c;我们使用的ORM也都托管给spring&#xff0c;这样方便在service层调用mybatis的m…
阅读更多...
【大数据】HDFS

【大数据】HDFS

文章目录 [toc]HDFS 1.0NameNode维护文件系统命名空间存储元数据解决NameNode单点问题 SecondaryNameNode机架感知数据完整性校验校验和数据块检测程序DataBlockScanner HDFS写流程HDFS读流程HDFS与MapReduce本地模式Block大小 HDFS 2.0NameNode HANameNode FederationHDFS Sna…
阅读更多...
最新文章

Copyright @ 2022~2023