前端笔记-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.mzph.cn/diannao/10927.shtml

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

相关文章

LeetCode 题目 121：买卖股票的最佳时机

LeetCode 题目 121：买卖股票的最佳时机

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任字节跳动数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python&#xff0c;欢迎探讨交流 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题…
阅读更多...
“知识世界”项目的自动化测试

“知识世界”项目的自动化测试

目录 1.项目介绍 1.1 项目功能介绍 2. 项目测试 2.1 需求分析 2.2 测试计划 2.3 设计测试用例 &#xff08;1&#xff09; 设计 登录 的测试用例 &#xff08;2&#xff09;设计 文章列表页 的测试用例 &#xff08;3&#xff09;设计 详情页 的测试用例 &#xff08…
阅读更多...
车载测试系列：车载常见面试题

车载测试系列：车载常见面试题

自我介绍项目介绍项目具体是怎么测试的&#xff1f;CANoe是怎么使用的&#xff1f;台架是怎么搭建的&#xff1f;台架怎么测试的&#xff1f;诊断服务是怎么测试的&#xff1f;功能寻址和物理寻找的区别10服务有什么会话&#xff1f;11服务怎么确定软件复位和硬件复位是什么&am…
阅读更多...
Gauge32类型的数据转换成int类型的数据

Gauge32类型的数据转换成int类型的数据

提前编译号snmp的库 #include <iostream> #include <libsnmp.h>#include "snmp_pp/snmp_pp.h"#ifdef WIN32 #define strcasecmp _stricmp #endif#ifdef SNMP_PP_NAMESPACE using namespace Snmp_pp; #endifusing namespace std; using namespace Snmp_pp…
阅读更多...
JAVA抽象类,接口与内部类，常用API知识总结

JAVA抽象类,接口与内部类，常用API知识总结

文章目录 抽象类和抽象方法抽象类的定义格式抽象方法的定义格式注意事项 接口定义和使用成员特点和类之间的关系新增JDK8新增方法JDK9新增方法 总结设计模式 内部类使用场景分类成员内部类获取内部类对象访问成员变量 静态内部类局部内部类匿名内部类格式使用场景 示例 常用API…
阅读更多...
JVM内存信息分析

JVM内存信息分析

jmap安装使用 java - version 查看已安装jdk的版本 sudo apt-get install openjdk-11-jdk-headless 安装jmap jmap -version 验证是否安装成功 jmap -dump:live,formatb,filexxxx.hprof pid 导出jvm内存信息&#xff0c;pid一般为java进程id内存信息分析 strings xxx.phrof |…
阅读更多...
459.重复的子字符串

459.重复的子字符串

给定一个非空的字符串&#xff0c;判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母&#xff0c;并且长度不超过10000。 示例 1: 输入: "abab"输出: True解释: 可由子字符串 "ab" 重复两次构成。 示例 2: 输入: "aba&q…
阅读更多...
chap5 I/O管理

chap5 I/O管理

目录 一、I/O设备基本概念和分类 304 1.concept 2.classification &#xff08;1&#xff09;根据信息交换单位&#xff08;可能考&#xff09; 1)字符设备 2)块设备 &#xff08;2&#xff09;传输速率&#xff08;以下了解即可&#xff09; &#xff08;3&#xff09;…
阅读更多...
R语言数据分析案例-股票可视化分析

R语言数据分析案例-股票可视化分析

一、数据整合的对象 # Loading necessary libraries library(readxl) library(dplyr)# Reading the data from Excel files data_1 <- read_excel("云南白药.xlsx") data_2 <- read_excel("冰山.xlsx")二、数据整合的代码 # Reading the data from…
阅读更多...
OBS插件--音频采集

OBS插件--音频采集

音频采集 音频采集是一款 源 插件,类似于OBS的win-capture/game-capture&#xff0c;允许从特定应用程序捕获音频&#xff0c;而不是捕获整个系统的音频。避免了因为特定音频的采集而需要引入第三方软件&#xff0c;而且时延也非常低。 下面截图演示下操作步骤&#xff1a; 首…
阅读更多...
【顺序程序设计-谭浩强适配】（适合专升本、考研）

【顺序程序设计-谭浩强适配】（适合专升本、考研）

无偿分享学习资料&#xff0c;需要的小伙伴评论区或私信dd。。。 无偿分享学习资料&#xff0c;需要的小伙伴评论区或私信dd。。。 无偿分享学习资料&#xff0c;需要的小伙伴评论区或私信dd。。。 完整资料如下&#xff1a;纯干货、纯干货、纯干货&#xff01;&#xff01;…
阅读更多...
WEB后端复习——监听器、过滤器

WEB后端复习——监听器、过滤器

Listener监听器 是Servlet规范中定义的一种特殊类&#xff0c;它用于监听web应用程序中的ServletContext, HttpSession和ServletRequest等域对象的创建与销毁事件&#xff0c;以及监听这些域对象中的属性发生修改的事件。 注解WebListener 1.ServletContextListener 监听Serv…
阅读更多...
U盘文件遇损？拯救“文件或目录损坏且无法读取”的秘籍！

U盘文件遇损？拯救“文件或目录损坏且无法读取”的秘籍！

在数字化时代&#xff0c;U盘已成为我们日常生活与工作中不可或缺的数据存储和传输工具。然而&#xff0c;有时我们可能会遇到一个非常令人沮丧的问题——U盘中的文件或目录突然损坏且无法读取。这种突发状况往往让人措手不及&#xff0c;甚至可能引发数据丢失的严重后果。那么…
阅读更多...
打印图案(金字塔)头歌作业

打印图案(金字塔)头歌作业

题目: 任务描述 本关任务&#xff1a;编写一个程序&#xff0c;输出堆叠式的金字塔图案。 输入n个字符&#xff0c;按以下原则输出&#xff1a;【参考样例】 1)第1个字符为一层金字塔图案&#xff0c;第2个字符为两层金字塔图案&#xff0c;第3个字符为三层金字塔图案&#x…
阅读更多...
相同的树——java

相同的树——java

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a;true示例 2&…
阅读更多...
[华为OD] B卷 树状结构查询 200

[华为OD] B卷 树状结构查询 200

题目&#xff1a; 通常使用多行的节点、父节点表示一棵树&#xff0c;比如 西安 陕西 陕西 中国 江西 中国 中国 亚洲 泰国 亚洲 输入一个节点之后&#xff0c;请打印出来树中他的所有下层节点 输入描述 第一行输入行数&#xff0c;下面是多行数据&#xff0c;每行以空…
阅读更多...
C++青少年简明教程：基础知识

C++青少年简明教程：基础知识

C青少年简明教程&#xff1a;基础知识 电脑程序设计&#xff08;Computer programming&#xff09;&#xff0c;或称程序设计&#xff08;programming&#xff09;&#xff0c;是给出解决特定问题程序的过程&#xff0c;程序设计往往以某种程序设计语言为工具&#xff0c;给出这…
阅读更多...
关于一致性，你该知道的事儿(上)

关于一致性，你该知道的事儿(上)

关于一致性&#xff0c;你该知道的事儿&#xff08;上&#xff09; 前言一、缓存一致性二、内存模型一致性三、事务一致性四、分布式事务一致性4.1 分布式系统的一些挑战4.2 关于副本的一些概念4.3 分布式事务之共识问题4. 3.1 PC(two-phase commit, 2PC)4.3.2 Raft 三、后记参…
阅读更多...
公有云Linux模拟TCP三次挥手与四次握手（Wireshark抓包验证版）

公有云Linux模拟TCP三次挥手与四次握手（Wireshark抓包验证版）

目录 写在前面环境准备实验步骤1. 安装nc工具2. 使用nc打开一个连接2.1 公有云-安全组放行对应端口&#xff08;可选&#xff09; 3. 打开Wireshark抓包工具4. 新开终端&#xff0c;进行连接5. 查看抓包文件&#xff0c;验证TCP三次握手与四次挥手TCP三次握手数据传输TCP四次挥…
阅读更多...
Netty源码分析二NioEventLoop 剖析

Netty源码分析二NioEventLoop 剖析

剖析方向 NioEventLoop是一个重量级的类&#xff0c;其中涉及到的方法都有很复杂的继承关系&#xff0c;调用链&#xff0c;要想把源码全部过一遍工作量实在是太大了&#xff0c;于是小编就基于下面的这些常见的问题来对NioEventLoop的源码来进行剖析 1.Seletor何时创建 1.1Se…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023