HTML5(2)

目录

一.列表、表格、表单

1.列表标签

2.表格

4.无语义的布局标签

5.字符实体

6.综合案例--1

7.综合案例--表单


一.列表、表格、表单

1.列表标签

1.1 无序列表

1.2 有序列表

1.3 定义列表

定义列表一般用于网页底部的帮助中心

2.表格

2.1

2.2 表格结构标签

shift+alt+f 格式化文档:自动补齐缩进

2.3 合并单元格

3.表单

3.1 input标签

3.2 input的占位文本

用于提示信息(文本框、密码框)

3.3 单选框radio

3.4 文件上传 file(多文件)

3.5 多选框checkbox

checked默认选中属性

3.6下拉菜单

3.7 文本域

作用:多行输入文本的表单控件

3.8 label标签

3.9 按钮button

注意: 如果省略type属性吗,默认是submit提交功能。

form标签为表单区域标签,统一管理 form 表单内容

4.无语义的布局标签

5.字符实体

6.综合案例--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="./QQ截图20240206221222.png" alt="流萤" title="流萤" width="100"><h3>流萤老婆</h3></li><li><img src="./QQ截图20240206221426.png" alt="流萤与爷" title="流萤与爷" width="100"><h3>流萤与爷</h3></li></ul>
</body>
</html>

7.综合案例--表单

<!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><h2>个人信息</h2><form action=""><!-- 个人信息 -->&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 姓名: <input type="text" placeholder="请输入真实姓名"><br><br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 密码: <input type="password" placeholder="请输入密码"><br><br>确认密码: <input type="password" placeholder="请输入密码"><br><br>性别: <input type="radio" name="gender" id="man"><label for="man">男</label><label><input type="radio" name="gender">女</label><br><br><!-- 教育经历 --><h2>教育经历</h2>最高学历: <select><option>博士</option><option selected>研究生</option><option>本科</option><option>专科</option></select><br><br>毕业院校: <input type="text"><br><br>所学专业: <input type="text"><br><br>在校时间: <select><option>2015</option><option>2016</option><option>2017</option><option>2018</option><option>2019</option><option>2020</option><option>2021</option><option>2022</option><option>2023</option><option>2024</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option><option>2023</option><option>2024</option></select><br><br><!-- 工作经历 --><h2>工作经历</h2>公司名称: <input type="text"><br><br>工作描述:<br><textarea>着手项目、项目经验等</textarea><br><br><input type="checkbox">已阅读并同意以下协议:<ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
</body>
</html>

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

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

相关文章

创建基于时间的 UUID

概述 在本文中&#xff0c;我们将会 对 UUIDs 和基于时间的 UUIDs&#xff08;time-based UUIDs&#xff09; 进行一些探讨。 当我们在对基于时间的 UUIDs 进行选择的时候&#xff0c;总会遇到一些好的方面和不好的方面&#xff0c;如何进行选择&#xff0c;也是我们将要简要…

2路模拟音频光端机 JR-CA02

概述 JR-CA02光端机由发送机JR-CA02 Tansmitter和接收机JR-CA02 Receiver组成&#xff0c;通过一定距离长度的光纤相连接&#xff0c;传输2路Audio模拟音频&#xff08;即1路立体声&#xff09;。且每路音频分配输出。 JR-CA02光端机具有运行主要技术参数的监测功能&#xff…

【AGX】Ubuntu20.04 + ROS_ noetic+ 大疆Mid360激光 雷达评测

大家好&#xff0c;我是虎哥&#xff0c;最近组装机器人&#xff0c;使用到了大疆孵化的圳市览沃科技有限公司&#xff08;简称Livox览沃科技&#xff09;推出的觅道系列全新混合固态激光雷达Mid-360&#xff0c;顺便试试效果&#xff0c;也记录一下使用入门过程。 "觅道M…

MATLAB : interp1()用法介绍

目录 一、基本语法&#xff1a; 二、实例&#xff1a; 1.样条拟合减振器阻尼曲线 ​2.PP拟合时间温度曲线 interp1 是 MATLAB 中的一个函数&#xff0c;用于在一维数据上执行插值操作。这个函数可以帮助你估计或计算已知数据点之间未知点的值。以下是 interp1 函数的基本用…

分类预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多特征分类预测

分类预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多特征分类预测 目录 分类预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现POA-BP鹈鹕算法优化BP神经网络多特征分类预测&#xff08;Matlab实…

MySQL——88张表汇总——DDL+外键

外键er图 88张表 /* Navicat MySQL Data TransferSource Server : MyList Source Server Version : 50726 Source Host : localhost:3309 Source Database : schooldbTarget Server Type : MYSQL Target Server Version : 50726 File Encoding …

《深入解析Windows操作系统》第3章读书笔记

1、陷阱分发&#xff1a;中断和异常是导致处理器转向正常控制流之外代码的两种操作系统条件。陷阱的定义如下&#xff1a;当异常或者中断发生时&#xff0c;处理器捕捉到一个执行线程&#xff0c;并且将控制权转移到操作系统中某一个固定地址处。在Windows系统中&#xff0c;处…

Pycharm:常用插件安装和使用

简介&#xff1a;好用的插件可以美化界面或者提升效率&#xff0c;使工作事半功倍。 推荐插件&#xff1a; 1、CSV插件&#xff1a;美化csv数据展示 2、Translation&#xff1a;翻译的插件&#xff0c;可以进行中英互译 3、CodeGlance&#xff1a;代码小地图 4、Markdown …

代码随想录:二叉树29-30

目录 701.二叉搜索树中的插入操作 题目 代码&#xff08;迭代法走一边&#xff09; 代码&#xff08;递归法走一边&#xff09; 450.删除二叉搜索树中的节点 题目 代码&#xff08;递归法走一边&#xff09; 701.二叉搜索树中的插入操作 题目 给定二叉搜索树&#xff…

【软考高项】二十七、范围管理6个过程

一、规划范围管理 1、定义、作用 定义&#xff1a;为了记录如何定义、确认和控制项目范围及产品范围&#xff0c;而创建范围管理计划的过程作用&#xff1a;在整个项目期间对如何管理范围提供指南和方向 2、输入 项目章程 项目管理计划&#xff1a;质量管理计划、项目生命周…

编程本源

文章目录 引言编程的本质工作与编程编程的未来 引言 知乎上有一个热门的问题&#xff0c;什么是人生的顶级享受&#xff1f; 看到这个问题我回想到了多年前&#xff0c;那个炎热的午后&#xff0c;我在学校的图书馆里&#xff0c;一边参照书籍&#xff0c;一边用着一部破旧的t…

使用STM32CubeMX对STM32F4的CAN1/2/3配置及接收中断开启

目录 1. CAN配置1.1引脚&#xff08;STM32F413VGT6-LQFP100&#xff09;1.2 时钟1.3 RCC配置1.4 CAN1配置1.5 CAN2配置1.6 CAN3配置1.7 输出设置 2. CAN代码2.1 CAN初始化2.2 CAN滤波器设置2.3 CAN使能2.4 激活中断2.5 CAN发送函数2.6 CAN回调函数2.7 main之后的代码 1. CAN配置…

【无监督+自然语言】 GPT,BERT, GPT-2,GPT-3 生成式预训练模型方法概述 (Generative Pre-Traning)

主要参考 【GPT&#xff0c;GPT-2&#xff0c;GPT-3 论文精读【李沐论文精读】-2022.03.04】 https://www.bilibili.com/video/BV1AF411b7xQ/ 大语言模型综述&#xff1a; https://blog.csdn.net/imwaters/article/details/137019747 GPT与chatgpt的关系 图源&#xff1a;L…

java多功能手机

随着科技的发展&#xff0c;手机的使用已经普及到每个家庭甚至个人&#xff0c;手机的属性越来越强大&#xff0c;功能也越来越多&#xff0c;因此人们在生活中越来越依赖于手机。 任务要求&#xff0c;使用所学知识编写一个手机属性及功能分析程序设计&#xff0c;测试各个手机…

JEECG/SpringBoot集成flowable流程框架

IDEA安装Flowable BPMN visualizer插件 pom.xml中引入flowable相关依赖 <dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</artifactId><version>6.7.2</version></dependency><depe…

PHP 错误 Unparenthesized `a ? b : c ? d : e` is not supported

最近在一个新的服务器上测试一些老代码的时候得到了类似上面的错误&#xff1a; [Thu Apr 25 07:37:34.139768 2024] [php:error] [pid 691410] [client 192.168.1.229:57183] PHP Fatal error: Unparenthesized a ? b : c ? d : e is not supported. Use either (a ? b : …

Docker镜像和容器操作

目录 一.Docker镜像创建与操作 1. 搜索镜像 2. 获取镜像 3. 镜像加速下载 4. 查看镜像信息 5. 查看下载的镜像文件信息 ​编辑6. 查看下载到本地的所有镜像 7. 根据镜像的唯一标识ID号&#xff0c;获取镜像详细信息 8. 为本地的镜像添加新的标签 9. 删除镜像 10. 存入…

【Prometheus】了解你的Prometheus指标

简单Prometheus查询用于指标检查 作者&#xff1a;Michal Kazmierczak 来源&#xff1a;mkaz.me 基数是关键。 它很容易失控&#xff0c;就像任何组合爆炸的实例一样。 这&#xff0c;再加上90%的指标从未被访问过的说法&#xff0c;创造了一个值得探索的领域。 观察性云供应…

复杂Python代码看不懂,分享两个工具!

复杂Python代码看不懂&#xff0c;分享两个工具&#xff0c;事半功倍&#xff01; Ryven Ryven是一个Python代码可视化工具&#xff01; 精进地址&#xff1a;https://github.com/leon-thomm/Ryven 一些案例&#xff0c; Ryven可视化操作矩阵 Ryven可视化冒泡排序算法 Ryv…

Three.js和Cesium.js中坐标

在了解Three.js和Cesium.js前先了解并弄清楚图形学关于空间的基本概念流程&#xff1a; 计算机图形学 图形学中涉及到多个坐标空间&#xff0c;这些空间之间的变换是图形渲染中的核心部分。下面是一些常见的图形学空间及其变换顺序&#xff1a; 对象空间&#xff08;Object Sp…