Web前端开发——HTML基础下

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>

在这里插入图片描述

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

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

相关文章

小程序事件系统 —— 33 事件传参 - data-*自定义数据

小程序事件系统 —— 33 事件传参 - data-*自定义数据

事件传参&#xff1a;在触发事件时&#xff0c;将一些数据作为参数传递给事件处理函数的过程&#xff0c;就是事件传参&#xff1b; 在微信小程序中&#xff0c;我们经常会在组件上添加一些自定义数据&#xff0c;然后在事件处理函数中获取这些自定义数据&#xff0c;从而完成…
阅读更多...
安卓设备root检测与隐藏手段

安卓设备root检测与隐藏手段

安卓设备root检测与隐藏手段 引言 安卓设备的root权限为用户提供了深度的系统控制能力&#xff0c;但也可能带来安全风险。因此&#xff0c;许多应用&#xff08;如银行软件、游戏和流媒体平台&#xff09;会主动检测设备是否被root&#xff0c;并限制其功能。这种对抗催生了ro…
阅读更多...
如何在Ubuntu上直接编译Apache Doris

如何在Ubuntu上直接编译Apache Doris

以下是在 Ubuntu 22.04 上直接编译 Apache Doris 的完整流程&#xff0c;综合多个版本和环境的最佳实践&#xff1a; 注意&#xff1a;Ubuntu的数据盘VMware默认是20G&#xff0c;编译不够用&#xff0c;给到50G以上吧 一、环境准备 1. 安装系统依赖 # 基础构建工具链 apt i…
阅读更多...
vuejs相关链接和格式化插件推荐

vuejs相关链接和格式化插件推荐

vue官网&#xff1a; https://cn.vuejs.org/ 配合路由设置&#xff1a; https://router.vuejs.org/zh/guide/ element plus (vue3) | element UI (vue2)&#xff1a; https://element-plus.org/zh-CN/#/zh-CN 构建工具vite&#xff1a; https://cn.vitejs.dev/ 右键选择…
阅读更多...
IDEA中Git版本回退终极指南：Reset与Revert双方案详解

IDEA中Git版本回退终极指南：Reset与Revert双方案详解

目录 前言一、版本回退前置知识二、Reset方案&#xff1a;整体改写历史1、IDEA图形化操作&#xff08;推荐&#xff09;1.1、查看提交历史1.2、选择目标版本1.3、选择回退模式1.3.1、Soft&#xff08;推荐&#xff09;1.3.2、Mixed1.3.3、Hard&#xff08;慎用&#xff09;1.3.…
阅读更多...
PHP并发请求优化：使用`curl_multi_select()`实现高效的多请求处理

PHP并发请求优化：使用`curl_multi_select()`实现高效的多请求处理

PHP并发请求优化&#xff1a;使用curl_multi_select()实现高效的多请求处理 背景 最近在项目中遇到一个需求&#xff0c;需要从多个 1 级网站&#xff08;超过 200 个&#xff09;获取数据&#xff0c;并且是通过 POST 请求瞬间发送到这些网站上。开始时我直接使用了 curl_ex…
阅读更多...
【leetcode hot 100 206】反转链表

【leetcode hot 100 206】反转链表

解法一&#xff1a;&#xff08;头插法&#xff09;在遍历链表时&#xff0c;将当前节点的 next 指针改为指向前一个节点。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val)…
阅读更多...
【QT】-易错点笔记-2025-2-7

【QT】-易错点笔记-2025-2-7

1，QList<phy_simulator*> pList；为空不能append()追加，要先new,再用 QList<phy_simulator> pList为空时，确实不能调用 append() 方法。原因很简单，QList 是一个类对象，在 C++ 中，指针本身并不代表它指向的对象。因此，当你有一个指向 QList<phy_simulato…
阅读更多...
AI-Deepseek + PPT

AI-Deepseek + PPT

01--Deepseek提问 首先去Deepseek问一个问题&#xff1a; Deepseek的回答&#xff1a; 在汽车CAN总线通信中&#xff0c;DBC文件里的信号处理&#xff08;如初始值、系数、偏移&#xff09;主要是为了 将原始二进制数据转换为实际物理值&#xff0c;确保不同电子控制单元&…
阅读更多...
实验一：在Windows 10/11下配置和管理TCP/IP

实验一：在Windows 10/11下配置和管理TCP/IP

目录 1.【实训目标】 2.【实训环境】 3.【实训内容】 4.【实训步骤】 1.【实训目标】 1.了解网络基本配置中包含的协议、服务、客户端。 2.了解Windows支持的网络协议及参数设置方法。 3.掌握TCP/IP协议的配置。 2.【实训环境】 硬件环境&#xff1a;每人一台计算机&a…
阅读更多...
Java直通车系列14【Spring MVC】（深入学习 Controller 编写）

Java直通车系列14【Spring MVC】（深入学习 Controller 编写）

目录 基本概念 编写 Controller 的步骤和要点 1. 定义 Controller 类 2. 映射请求 3. 处理请求参数 4. 调用业务逻辑 5. 返回响应 场景示例 1. 简单的 Hello World 示例 2. 处理路径变量和请求参数 3. 处理表单提交 4. 处理 JSON 数据 5. 异常处理 基本概念 Cont…
阅读更多...
EA - 开源工程的编译

EA - 开源工程的编译

文章目录 EA - 开源工程的编译概述笔记环境备注x86版本EABase_x86EAAssert_x86EAThread_x86修改 eathread_atomic_standalone_msvc.h原始修改后 EAStdC_x86EASTL_x86EAMain_x86EATest_x86备注备注END EA - 开源工程的编译 概述 EA开源了‘命令与征服’的游戏源码 尝试编译. 首…
阅读更多...
一招解决Pytorch GPU版本安装慢的问题

一招解决Pytorch GPU版本安装慢的问题

Pytorch是一个流行的深度学习框架&#xff0c;广泛应用于计算机视觉、自然语言处理等领域。安装Pytorch GPU版本可以充分利用GPU的并行计算能力&#xff0c;加速模型的训练和推理过程。接下来&#xff0c;我们将详细介绍如何在Windows操作系统上安装Pytorch GPU版本。 查看是否…
阅读更多...
为解决局域网IP、DNS切换的Windows BAT脚本

为解决局域网IP、DNS切换的Windows BAT脚本

一、背景 为解决公司普通人员需要切换IP、DNS的情况&#xff0c;于是搞了个windows下的bat脚本&#xff0c;可以对有线网络、无线网络进行切换设置。 脚本内容 echo off title 多网络接口IP切换工具:menu cls echo echo 请选择要配置的网络接口: echo echo 1. 有线网络&am…
阅读更多...
uni_app实现下拉刷新

uni_app实现下拉刷新

1. 在页面配置中启用下拉刷新 首先&#xff0c;你需要在页面的 pages.json 文件中启用下拉刷新功能。 {"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePull…
阅读更多...
OpenCV计算摄影学（14）实现对比度保留去色（Contrast Preserving Decolorization）的函数decolor()

OpenCV计算摄影学（14）实现对比度保留去色（Contrast Preserving Decolorization）的函数decolor()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将彩色图像转换为灰度图像。它是数字印刷、风格化的黑白照片渲染&#xff0c;以及许多单通道图像处理应用中的基本工具。 cv::decolor 是 OpenCV…
阅读更多...
Qt常用控件之 纵向列表QListWidget

Qt常用控件之 纵向列表QListWidget

纵向列表QListWidget QListWidget 是一个纵向列表控件。 QListWidget属性 属性说明currentRow当前被选中的是第几行。count一共有多少行。sortingEnabled是否允许排序。isWrapping是否允许换行。itemAlignment元素的对齐方式。selectRectVisible被选中的元素矩形是否可见。s…
阅读更多...
关于 QPalette设置按钮背景未显示出来 的解决方法

关于 QPalette设置按钮背景未显示出来 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/146047054 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…
阅读更多...
PostgreSQL 安装与使用

PostgreSQL 安装与使用

下载地址: EDB: Open-Source, Enterprise Postgres Database Management 安装图形化安装界面安装。安装完后将bin目录配置到系统环境变量 执行psql -h localhost -p 5432 -U postgres 密码在安装过程中设置的 ​ 0、修改密码 ALTER USER sonar WITH PASSWORD 123456; 1、新…
阅读更多...
【基础3】快速排序

【基础3】快速排序

核心思路 快速排序是Java中Arrays.sort()的实现原理&#xff0c;采用分治策略&#xff0c;通过选择基准元素&#xff0c;将数组分为两个子数组&#xff0c;使得左边元素 ≤ 基准元素 ≤ 右边元素&#xff0c;然后递归排序子数组。 举个简单的例子&#xff0c;图书管理员需要按…
阅读更多...
最新文章

Copyright @ 2022~2023