目录

1、无序列表

2、有序列表

3、定义列表

4、表格-基本使用

5、表格-结构标签

6、表格-合并单元格

7、表单-input基本使用

8、表单-input占位文本

9、表单-单选框

10、表单-上传多个文件

11、表单-多选框

12、表单-下拉菜单

13、表单-文本域

14、表单-label标签

15、表单-按钮

16、无语义-div和span

17、字符实体

18、综合案例1-体育新闻

19、综合案例2-注册页面

1、无序列表

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

2、有序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有序列表</title>
</head>
<body><ol><li>步骤1</li><li>步骤2</li><li>步骤3</li></ol>
</body>
</html>

3、定义列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定义列表</title>
</head>
<body><dl><dt>服务中心</dt><dd>申请售后</dd><dd>售后政策</dd><dd>订单查询</dd><dt>线下门店</dt><dd>小米之家</dd><dd>服务网点</dd><dd>授权体验店</dd></dl>
</body>
</html>

4、表格-基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格-基本使用</title>
</head>
<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
</html>

5、表格-结构标签

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格-结构标签</title>
</head>
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>

6、表格-合并单元格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格-合并单元格</title>
</head>
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td><!-- <td>全市第一</td> --><!-- <td>全市第一</td> --></tr></tfoot></table>
</body>
</html>

7、表单-input基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input基本使用</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>

8、表单-input占位文本

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

9、表单-单选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选框</title>
</head>
<body><!-- 加上checked后，默认选择男 --><!-- name属性值必须相同 -->性别：<input type="radio" name="gender" checked> 男<input type="radio" name="gender"> 女
</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>上传多个文件</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>多选框</title>
</head>
<body><!-- 加上checked后，默认选择 -->兴趣爱好：<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>下拉菜单</title>
</head>
<body><!-- selected 表示默认选中 -->城市：<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option 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>文本域</title>
</head>
<body><!-- 右下角有拖拽功能，未来都会禁用，未来工作中，用css设置尺寸 --><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>label标签</title>
</head>
<body>性别：<input type="radio" name="gender" id="man"> <label for="man">男</label><label><input type="radio" name="gender"> 女</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>按钮</title>
</head>
<body><!-- form 表单区域 --><!-- action="" 发送数据地址 --><!-- 按钮需用form包裹，才能生效 --><form action="">用户名：<input type="text"><br><br>密码：<input type="password"><br><br><!-- 如果省略type属性，功能是提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button></form>
</body>
</html>

16、无语义-div和span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div和span</title>
</head>
<body><!-- div：大盒子 --><!-- div标签：独占一行 --><div>这是div标签</div><div>这是div标签</div><!-- span：小盒子 --><!-- span标签：不换行 --><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>字符实体</title>
</head>
<body><!-- 在代码中敲键盘的空格，网页只识别一个 --><!-- 多空格使用 &nbsp;  -->乾坤未定，你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马。<!-- <p>默认为段落标签，<p>原样显示 &lt;p&gt; -->&lt;p&gt;
</body>
</html>

18、综合案例1-体育新闻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体育新闻</title>
</head>
<body><ul><li><img src="./images/1.jpg" alt=""><h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3></li><li><img src="./images/2.jpg" alt=""><h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3></li><li><img src="./images/3.jpg" alt=""><h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3></li></ul>
</body>
</html>

 

19、综合案例2-注册页面

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

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

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

相关文章

两种方式清除已经保存的git账号密码

两种方式清除已经保存的git账号密码

方式一随便选择一个文件夹&#xff0c;然后鼠标右键-》TortoiseGit ->设置选择已保存的数据-》认证数据-》清除-》点击确定方式二 控制面板\用户帐户\凭据管理器-》windows凭据普通凭据-》找到git信息-》选择删除
阅读更多...
Using Spring for Apache Pulsar:Message Production

Using Spring for Apache Pulsar:Message Production

1. Pulsar Template在Pulsar生产者端&#xff0c;Spring Boot自动配置提供了一个用于发布记录的PulsarTemplate。该模板实现了一个名为PulsarOperations的接口&#xff0c;并提供了通过其合约发布记录的方法。这些send API方法有两类&#xff1a;send和sendAsync。send方法通过…
阅读更多...
CSS揭秘：10.平行四边形

CSS揭秘：10.平行四边形

前置知识&#xff1a;基本的css变形一、平行四边形 要实现一个平行四边形&#xff0c;可以使用CSS的skew变形属性来倾斜元素。 transform: skewX(-45deg);图-1显示容器和内容都出现了倾斜&#xff0c;该如何解决这个问题&#xff1f; 二、嵌套方案 我们通过将内容嵌套 div 并使…
阅读更多...
深度学习 必然用到的 线性代数知识

深度学习 必然用到的 线性代数知识

把标量到张量、点积到范数全串起来&#xff0c;帮你从 0 → 1 搭建 AI 数学底座 &#x1f680; 1 标量&#xff1a;深度学习的最小单元 标量 就是一维空间里的“点”&#xff0c;只有大小没有方向。例如温度 52 F、学习率 0.001。 记号&#xff1a;普通小写 x&#xff1b;域&am…
阅读更多...
OpenGL ES 纹理以及纹理的映射

OpenGL ES 纹理以及纹理的映射

文章目录开启纹理创建纹理绑定纹理生成纹理纹理坐标图像配置线性插值重复效果限制拉伸完整代码在 Android OpenGL ES 中使用纹理&#xff08;Texture&#xff09;可以显著提升图形渲染的质量和效率。以下是使用纹理的主要好处&#xff1a; 增强视觉真实感 纹理可以将复杂的图像…
阅读更多...
从金字塔到个性化路径：AI 正在重新定义学习方式

从金字塔到个性化路径：AI 正在重新定义学习方式

几十年来&#xff0c;我们的教育系统始终遵循着一条熟悉的路线&#xff1a; 从小学、初中、高中&#xff0c;再到大学和研究生。这条标准化的路径&#xff08;K-12 到研究所&#xff09;结构清晰&#xff0c;却也缓慢。但在当今这个信息爆炸、知识快速更新、个性化需求高涨的时…
阅读更多...
产品经理岗位职责拆解

产品经理岗位职责拆解

以下是产品经理岗位职责的详细分解表&#xff0c;涵盖工作内容、核心动作及输出成果&#xff1a;岗位职责具体工作内容输出成果1. 日常版本迭代管理需求分析及PRD产出协调资源推动产品上线- 收集业务/用户需求&#xff0c;分析可行性及优先级- 撰写PRD文档&#xff0c;明确功能…
阅读更多...
后端微服务基础架构Spring Cloud

后端微服务基础架构Spring Cloud

版本关系 版本发布说明-阿里云Spring Cloud Alibaba官网 选择 创建项目 创建父项目 什么都不动&#xff0c;创建即可 1) 删掉没用的文件 保留 2) pom中加入 打包方式 <packaging>pom</packaging> 3) 删掉src 4) pom.xml中删除没用的 5)更改pom.xml中 spring…
阅读更多...
数据分析框架和方法

数据分析框架和方法

一、核心分析框架 (The Big Picture Frameworks)​​描述性分析 (What Happened?)​​​​目的&#xff1a;​​ 了解过去发生了什么&#xff0c;描述现状&#xff0c;监控业务健康。​​核心工作&#xff1a;​​ 汇总、聚合、计算基础指标 (KPI)&#xff0c;生成报表和仪表盘…
阅读更多...
电路研究9.3.10——合宙Air780EP中的AT开发指南：阿里云应用指南

电路研究9.3.10——合宙Air780EP中的AT开发指南：阿里云应用指南

这个好像也用不到&#xff0c;不过可以先贴出来。简单看了一下也没深入分析&#xff0c;直接扒过来了&#xff0c;感觉涉及到了上位机的学习了。我这下位机的可能用不到&#xff0c;就是贴过来好了。 应用概述 使用 AT 方式连接阿里云分为一机一密和一型一密&#xff0c;其中一…
阅读更多...
[Backlog] 核心协调器 | 终端用户界面(TUI)实现 | 多分支任务冲突解决 | 测试验证体系

[Backlog] 核心协调器 | 终端用户界面(TUI)实现 | 多分支任务冲突解决 | 测试验证体系

第8章 核心协调器 欢迎回到Backlog.md&#xff01; 在上一章文件系统操作中&#xff0c;我们深入了解了数据物理存储层面的读写机制。本章将聚焦系统的神经中枢——核心协调器。 核心协调器的本质&#xff08;中央决策引擎&#xff09; 如果将Backlog.md视为项目管理团队&a…
阅读更多...
车载以太网-TC8测试-UT(Upper Tester)

车载以太网-TC8测试-UT(Upper Tester)

目录 一、技术原理：指令体系与协议适配1. **指令格式与传输机制**2. **协议栈交互逻辑**3. **规范遵循与版本演进**二、测试应用：TC8测试场景与案例1. **TCP协议栈深度验证**2. **ARP协议健壮性测试**3. **SOME/IP服务动态管理**三、实现挑战与解决方案1. **实时性要求**2. *…
阅读更多...
扣子Coze纯前端部署多Agents

扣子Coze纯前端部署多Agents

纯前端网页搭建&#xff0c;无需任何后端代码&#xff0c;方便快捷&#xff01; 就像公司前台的多功能控制台&#xff0c;员工可以通过按钮快速呼叫不同的AI助手。具备多设备适配、智能对话等基础能力。 支持添加多个智能体 配置方式 添加智能体信息&#xff0c;data-bot为智…
阅读更多...
STM32中I2C协议详解

STM32中I2C协议详解

前言 在嵌入式系统中&#xff0c;设备间的短距离通信协议中&#xff0c;I2C&#xff08;Inter-Integrated Circuit&#xff0c;集成电路互连&#xff09;以其信号线少、布线简单、支持多从机等特点&#xff0c;被广泛应用于传感器、EEPROM、OLED屏等中低速外设的通信场景。与SP…
阅读更多...
解锁Spring Boot多项目共享Redis：优雅Key命名结构指南

解锁Spring Boot多项目共享Redis：优雅Key命名结构指南

引言Redis 基础与 Spring Boot 集成Redis 简介Redis&#xff0c;即 Remote Dictionary Server&#xff0c;是一个开源的基于内存的数据结构存储系统&#xff0c;可用作数据库、缓存和消息中间件 。它具备诸多显著特性&#xff0c;使其在现代软件开发中占据重要地位。Redis 的读…
阅读更多...
《重构项目》基于Apollo架构设计的项目重构方案（多种地图、多阶段、多任务、状态机管理）

《重构项目》基于Apollo架构设计的项目重构方案（多种地图、多阶段、多任务、状态机管理）

1. 项目结构设计project/ ├── config/ # 配置文件&#xff08;定义 Scenario、Stage、Task 的映射&#xff09; ├── src/ │ ├── base/ # 抽象基类定义 │ │ ├── scenario_base.h/.cpp │ │ ├── stage_base.h/.cpp…
阅读更多...
动手学深度学习13.6. 目标检测数据集-笔记练习（PyTorch）

动手学深度学习13.6. 目标检测数据集-笔记练习（PyTorch）

以下内容为结合李沐老师的课程和教材补充的学习笔记&#xff0c;以及对课后练习的一些思考&#xff0c;自留回顾&#xff0c;也供同学之人交流参考。 本节课程地址&#xff1a;数据集_哔哩哔哩_bilibili 本节教材地址&#xff1a;13.6. 目标检测数据集 — 动手学深度学习 2.0…
阅读更多...
Unity3D游戏内存优化指南

Unity3D游戏内存优化指南

前言 Unity3D 游戏的内存控制是保证游戏流畅运行&#xff08;尤其在移动端和主机平台&#xff09;和避免崩溃的关键挑战。以下是核心策略和常见问题的解决方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希望大家可以点击进来一起交流一下开发经验…
阅读更多...
git学习：首次创建仓库

git学习：首次创建仓库

文章目录前言&#xff1a;1、首次创建仓库并上传数据1.1 创建仓库&#xff0c;1.2 命令上传1.3 首次代码上传至仓库的步骤&#xff1a;2、分支操作2.1 分支的删除2.2 切换分支2.3 查看分支2.4 同步其他分支的修改3、查看电脑的配置文件4、远程仓库命令 git remote5、其他后语前…
阅读更多...
C++并行计算：OpenMP与MPI全解析

C++并行计算：OpenMP与MPI全解析

在高性能计算领域&#xff0c;充分利用硬件资源的并行计算技术已成为刚需。从单节点多核到跨节点集群&#xff0c;开发者需要掌握不同的并行编程模型。本文将系统讲解两种主流并行技术&#xff1a;OpenMP&#xff08;共享内存多核并行&#xff09;与MPI&#xff08;分布式内存集…
阅读更多...
最新文章

Copyright @ 2022~2023