当前位置： 首页 > news >正文

Web前端开发——HTML基础下

news 2025/7/4 18:01:39

HTML语法

  • 一·表格
    • 1.基本格式
    • 2.美化表格
      • 合并居中
      • 属性
  • 二·表单
    • 1.input
    • 2.select
    • 3.textarea
    • 4.button
    • 5.date
    • 6.color
    • 7.checkbox
    • 8.radio
    • 9.range
    • 10.number

一·表格

1.基本格式

HTML表格由<table>标签定义
其中行由<tr>标签定义，单元格由<td>定义。

我们先来看一下第一个示例

<tr></tr>行
<td></td>单元格

<!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><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>30</td></tr></table>
</body></html>

在这里插入图片描述
运行之后我们发现连个表格边框都没有，那还能叫做表格吗，所以我们得加一下边框，也就是在table标记里加入 width 表格像素以及 border 边框的像素

原先：<table></table>
修改后：<table width = "100" border = "1"></table> 表格宽度为100像素 表格边框线为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><table width = "100" border = "1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>30</td></tr></table>
</body></html>

在这里插入图片描述
有了边框之后，我们就可以进一步了解表格的基本框架了，表格有表头，表格主体和表尾，还有表格标题，我们来具体使用演示一下

<caption>表格标题</caption>
<thead>表头</thead>
<tbody>表体</tbody>
<tfoot>表尾</tfoot>
<th>表头的单元格</th>

<!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 width = "200" border = "1"><caption>学生信息</caption><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tfoot><td colspan="2">表尾无人</td></tfoot><tbody><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>30</td></tr></tbody></table>
</body>
</html>

在这里插入图片描述

2.美化表格

合并居中

rowspan="合并行数"
colspan="合并列数"
align 表格居中
height 表格高度
width 表格宽度

属性

bgcolor  表格背景颜色
bordercolor 表格边框颜色
background 表格背景图片
cellpadding：定义单元格内容与其边界之间的空间
cellspacing：定义相邻两个单元格之间的间距

二·表单

1.input

input 是最常用的表单元素，用于创建各种类型的输入字段。它支持多种类型，如文本、密码、电子邮件、数字等。
input中有许多类型，如文本框就是 type=“text”
label 元素为表单控件提供了语义化的标签，使得表单内容更加清晰易懂

<!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><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="password">密码:</label><input type="password" id="password" name="password"><br><br><label for="email">电子邮件:</label><input type="email" id="email" name="email"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

2.select

<!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><label for="country">选择国家:</label><select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="india">印度</option></select><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

3.textarea

<!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><label for="message">留言:</label><textarea id="message" name="message" rows="4" cols="50"></textarea><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

4.button

<!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><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><button type="submit">提交</button></form>
</body>
</html>

在这里插入图片描述

5.date

<!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><label for="date">选择日期:</label><input type="date" id="date" name="date"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

6.color

<!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><label for="color">选择颜色:</label><input type="color" id="color" name="color"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

7.checkbox

<!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><label><input type="checkbox" name="option" value="option1"> 选项1</label><br><label><input type="checkbox" name="option" value="option2"> 选项2</label><br><label><input type="checkbox" name="option" value="option3"> 选项3</label><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

8.radio

<!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><label><input type="radio" name="gender" value="male"> 男</label><br><label><input type="radio" name="gender" value="female"> 女</label><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

9.range

<!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><label for="volume">音量:</label><input type="range" id="volume" name="volume" min="0" max="100"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

10.number

<!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><label for="quantity">数量:</label><input type="number" id="quantity" name="quantity" min="1" max="100"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

相关文章：

Web前端开发——HTML基础下

HTML语法 一表格1.基本格式2.美化表格合并居中属性 二表单1.input2.select3.textarea4.button5.date6.color7.checkbox8.radio9.range10.number 一表格 1.基本格式 HTML表格由<table>标签定义 其中行由<tr>标签定义&#xff0c;单元格由<td>定义。我们先来…...

编程日记 2025/3/9 17:55:24

Python使用入门(一)

初识数据类型 整型(int) print(666) print(2 10) print(2 * 12)字符串(str) 单行字符串 #单行字符串 print("我是小红aaa") print(我是小红aaa)print("中国上海") print(中国上海)# 输出带引号的字符串 print(我是"小红aaa) print("我是\&qu…...

编程日记 2025/3/9 17:50:17

基于multisim的花样彩灯循环控制电路设计与仿真

1 课程设计的任务与要求 &#xff08;一&#xff09;、设计内容&#xff1a; 设计一个8路移存型彩灯控制器&#xff0c;基本要求&#xff1a; 1. 8路彩灯能演示至少三种花型&#xff08;花型自拟&#xff09;&#xff1b; 2. 彩灯用发光二极管LED模拟&#xff1b; 3. 选做…...

编程日记 2025/3/9 17:48:15

求最大公约数【C/C++】

大家好啊&#xff0c;欢迎来到本博客( •̀ ω •́ )✧&#xff0c;我将带领大家详细的了解最大公约数的思想与解法。 一、什么是公约数 公约数&#xff0c;也称为公因数&#xff0c;是指两个或多个整数共有的因数。具体来说&#xff0c;如果一个整数能被两个或多个整数整除&…...

编程日记 2025/3/9 17:46:13

leetcode day27 455+376

455 分发饼干 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有…...

编程日记 2025/3/9 17:42:08

go的grpc

GRPC介绍 目录 单体架构微服务架构问题原始的grpc 服务端客户端原生rpc的问题 grpc的hello world 服务端客户端 proto文件proto语法 数据类型 基本数据类型其他数据类型 编写风格多服务 单体架构 只能对整体扩容一荣俱荣&#xff0c;一损俱损代码耦合&#xff0c;项目的开…...

编程日记 2025/3/9 17:41:06

算法每日一练 (9)

&#x1f4a2;欢迎来到张胤尘的技术站 &#x1f4a5;技术如江河&#xff0c;汇聚众志成。代码似星辰&#xff0c;照亮行征程。开源精神长&#xff0c;传承永不忘。携手共前行&#xff0c;未来更辉煌&#x1f4a5; 文章目录 算法每日一练 (9)最小路径和题目描述解题思路解题代码…...

编程日记 2025/3/9 17:36:02

软考高级信息系统项目管理师笔记-第10章项目进度管理

第10章项目进度管理 10.1 管理基础 10.1.1 项目进度计划的定义和总要求 1、项目进度计划是 一种用于沟通和管理干系人期望的工具，为绩效报告提供依据。 2、项目管理团队编制进度计划的一般步骤为: 首先选择进度计划方法，例如关键路径法; 然后将项目特定数据，如活动、计…...

编程日记 2025/3/9 17:34:00

专门为高速连续扫描设计的TDI工业相机

TDI&#xff08;Time Delay Integration&#xff0c;时间延迟积分&#xff09;工业相机是一种基于特殊CCD&#xff08;电荷耦合器件&#xff09;技术的成像设备&#xff0c;主要用于高速、高灵敏度、高分辨率的图像采集场景。其核心原理是通过多级积分和同步电荷转移技术&#…...

编程日记 2025/3/9 17:26:52

【Vue3】实现一个超过高度后可控制显示隐藏的组件

组件效果图 未达到最大高度 达到设置的最大高度 进行展开 实现代码 组件代码 备注&#xff1a;通过tailwindcss设置的样式&#xff0c;通过element-plus/icons-vue设置的图标&#xff0c;可根据情况进行替换 <template><!-- 限制高度组件 --><div ref"…...

编程日记 2025/3/9 17:25:51

Spring提供的SPEL表达式

SPEL 1. 概述 SpEL是Spring框架中用于表达式语言的一种方式。它类似于其他编程语言中的表达式语言&#xff0c;用于在运行时计算值或执行特定任务。 SpEL提供了一种简单且强大的方式来访问和操作对象的属性、调用对象的方法&#xff0c;以及实现运算、条件判断等操作。它可以…...

编程日记 2025/3/9 17:24:50

JAVA编程【jvm垃圾回收的差异】

jvm垃圾回收的差异 JVM&#xff08;Java Virtual Machine&#xff09;的垃圾回收&#xff08;GC&#xff09;机制是自动管理内存的一种方式&#xff0c;能够帮助开发者释放不再使用的内存&#xff0c;避免内存泄漏和溢出等问题。不同的垃圾回收器&#xff08;GC&#xff09;有…...

编程日记 2025/3/9 17:21:46

Elasticsearch：“Your trial license is expired”

目录标题 问题原因解决方案 问题 原因 ES的X-pack许可证是提供免费一个月的试用&#xff0c;到期之后就会报这个错误。 解决方案 查看license GET _license 开启试用license POST _xpack/license/start_trial?acknowledgetrue修改为基础license POST _xpack/license/start_…...

编程日记 2025/3/9 17:20:45

fmql之Linux WDT

正点原子第52章。 基础知识 正点原子教程 fmql-dts 代码 APP代码&#xff08;不需要编写驱动代码&#xff09; static int dw_wdt_drv_probe(struct platform_device *pdev) {struct device *dev &pdev->dev;struct watchdog_device *wdd;struct dw_wdt *dw_wdt; …...

编程日记 2025/3/9 17:19:43

【算法学习之路】7.链表算法

链表算法 前言一.原地逆置思路一&#xff1a;头插法思路二&#xff1a;双指针法思路3&#xff1a;递归 例题&#xff1a;1.头插法2.双指针法3&#xff0c;递归 二.双指针快慢指针&#xff1a;一个指针快一个指针慢例题1例题2 前言 我会将一些常用的算法以及对应的题单给写完&am…...

编程日记 2025/3/9 17:17:41

IDEA Commit 模态提交界面关闭VS开启对比

IDEA Commit 模态提交界面关闭VS开启对比 前言开启模态提交界面优点快捷且灵活的选择需要commit文件显示文件修改内容多(主观) 缺点在模态提交界面选择文件&#xff0c;临时关闭模态框重新打开会重置选择的commit文件 关闭模态提交界面优点允许在commit选择文件时查看其它没有修…...

编程日记 2025/3/9 17:12:36

【AI赋能】AI 工具生成视频教材：从创意到成品的全流程指南

AI 工具生成视频教材&#xff1a;从创意到成品的全流程指南 目标 通过本教材&#xff0c;您将学会如何利用 AI 工具&#xff08;Grok、Sora、Speechify 和 CapCut&#xff09;生成一个完整的视频&#xff0c;包括脚本生成、视频片段制作、字幕添加、音频生成以及最终剪辑合成…...

编程日记 2025/3/9 17:11:35

qt 操作多个sqlite文件

qt 操作多个sqlite文件 Chapter1 qt 操作多个sqlite文件1. 引入必要的头文件2. 创建并连接多个SQLite数据库3. 代码说明4. 注意事项 Chapter2 qt 多线程操作sqlite多文件1. 引入必要的头文件2. 创建数据库操作的工作线程类3. 在主线程中创建并启动多个工作线程4. 代码说明5. 运…...

编程日记 2025/3/9 17:10:34

WSL with NVIDIA Container Toolkit

一、wsl 下安装 docker 会提示安装 docekr 桌面版&#xff0c;所以直接安装 docker 桌面版本即可 二、安装 NVIDIA Container Toolkit NVIDIA Container Toolkit仓库 https://github.com/NVIDIA/nvidia-container-toolkit​github.com/NVIDIA/nvidia-container-toolkit 安装…...

编程日记 2025/3/9 17:09:33

Vue 系列之：组件通讯

子组件调用父组件方法 1、直接在子组件中通过 this.$parent.event 来调用父组件的方法 父组件&#xff1a; <template><p><child></child></p> </template> <script>import child from ./child;export default {components: {chi…...

编程日记 2025/3/9 17:07:30

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/7/1 4:58:11

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/7/4 7:26:28

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/6/27 21:30:42

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/7/4 16:09:37

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/6/27 9:51:25

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/6/24 4:37:33

21-Oracle 23 ai-Automatic SQL Plan Management（SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...

编程新知 2025/7/4 4:33:44

从0开始学习R语言--Day17--Cox回归

Cox回归 在用医疗数据作分析时&#xff0c;最常见的是去预测某类病的患者的死亡率或预测他们的结局。但是我们得到的病人数据&#xff0c;往往会有很多的协变量&#xff0c;即使我们通过计算来减少指标对结果的影响&#xff0c;我们的数据中依然会有很多的协变量&#xff0c;且…...

编程新知 2025/7/1 21:07:32

大模型的LoRa通讯详解与实现教程

一、LoRa通讯技术概述 LoRa（Long Range）是一种低功耗广域网（LPWAN）通信技术，由Semtech公司开发，特别适合于物联网设备的长距离、低功耗通信需求。LoRa技术基于扩频调制技术，能够在保持低功耗的同时实现数公里甚至数十公里的通信距离。 LoRa的主要特点 长距离通信：在城…...

编程新知 2025/6/24 4:58:24

MAZANOKE结合内网穿透技术实现跨地域图像优化服务的远程访问过程

文章目录 前言1. 关于MAZANOKE2. Docker部署3. 简单使用MAZANOKE4. 安装cpolar内网穿透5. 配置公网地址6. 配置固定公网地址总结 前言 在数字世界高速发展的今天&#xff0c;您是否察觉到那些静默增长的视觉数据正在悄然蚕食存储空间&#xff1f;随着影像记录成为日常习惯&…...

编程新知 2025/6/25 13:38:04