HTML5(2)

embedded/2024/10/18 22:30:40/
htmledit_views">

目录

一.列表、表格、表单

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

html"><!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.综合案例--表单

html"><!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.ppmy.cn/embedded/22476.html

相关文章

Hadoop+Spark大数据技术(微课版)曾国荪、曹洁版思维导图第五次作业 第五章 Scala基础与编程

第五次作业 1. 简述Scala语言的基本特性 1. 面向对象&#xff1a;Scala是一种完全面向对象的语言。其每一种数据类型都是一个对象&#xff0c;这使得它具有非常统一的模型。 2. 函数式编程&#xff1a;Scala同时支持函数式编程&#xff0c;它拥有高阶函数、闭包、不可变数据结…

如何让用户听话?

​福格教授&#xff08;斯坦福大学行为设计实验室创始人&#xff09;通过深入研究人类行为20年&#xff0c;2007年用自己的名子命名&#xff0c;提出了一个行为模型&#xff1a;福格行为模型。 模型表明&#xff1a;人的行为发生&#xff0c;要有做出行为的动机和完成行为的能…

Redis面试题一(基本概念)

目录 1.redis 为何这么快 基于内存的操作 单线程模型 C语言实现 高效的数据结构 避免磁盘I/O 网络模型优化 2.redis为什么使用单线程 3.缓存三大问题以及解决方案 4.先删后写还是先写后删 先删缓存后写 DB 先写 DB 再删缓存 5.如何保证 Redis 的高并发 6.redis 如…

【HTML】实现 pre 标签内容超出自动换行

文章目录 示例&#xff1a; <pre> 一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的文本&#xff0c;一串很长的…

文件上传安全以及防止无限制文件上传

文件上传安全以及防止无限制文件上传 在网络应用中&#xff0c;文件上传是一项常见功能&#xff0c;用户可以通过它上传图片、文档或其他媒体文件。然而&#xff0c;如果没有适当的安全措施&#xff0c;文件上传功能可能成为安全漏洞的源头。本文将探讨文件上传过程中的安全风…

Ubuntu 22.04 安装Oracle 11g Express Edition

目录 一、系统环境 二、预安装软件 三、安装Oracle 四、登录数据库 Ubuntu 22.04上安装Oracle 11g Express Edition的过程。 一、系统环境 操作系统&#xff1a;Ubuntu 22.04.4 LTS 数据库版本&#xff1a;Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64b…

Spring Boot Actuator 模块,spring-boot-starter-actuator

spring-boot-starter-actuator 是 Spring Boot 提供的一个核心模块&#xff0c;用于暴露生产就绪型特性&#xff0c;帮助监控和管理 Spring Boot 应用程序。通过添加这个依赖&#xff0c;开发者可以很容易地获取应用程序的运行时信息&#xff0c;比如健康状态、环境属性、度量指…

初识BootStrap

目录 前言: 1.Bootstrap的特点包括&#xff1a; 1.1响应式设计&#xff1a; 1.2组件丰富&#xff1a; 1.3易于定制&#xff1a; 1.4兼容性良好&#xff1a; 1.5强大的社区支持&#xff1a; 1.6一致的样式和布局&#xff1a; 1.7 插件和扩展性 2.初识Ajax: 2.1同步请求…