HTML基础介绍2

news2025/2/27 2:49:24

表单格式化

ctrl+d：复制选中行数的所有代码

ctrl+x：删除代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
<!--一定一定要用form标签把input元素包起来-->
<!--提交给URL的是value属性的值，而不是客户所看到的值-->
<form>
    <h1>用户注册信息</h1>
    <table border="1"cellpadding="0">
        <tr>
            <td>用户名称：</td>
            <td><input type="text"name="username"><br/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目：</td>
            <td><input type="checkbox"name="sport"value="lq">篮球<input type="checkbox"name="sport"value="zq"checked>足球<input type="checkbox"name="sport"value="sq">手球<br/></td>
        </tr>
        <tr>
            <td>请选择性别：</td>
            <td><input type="radio"name="gender"value="male">男<input type="radio"name="gender"value="female">女<br/></td>
        </tr>
        <tr>
            <td>请选择城市：</td>
            <td>    <select name="city">
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select><br/></td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><textarea rows="10"cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件（头像）</td>
            <td><input type="file"name="myfile"value="上传头像"><br/></td>
        </tr>
        <tr>
            <td><input type="submit"value="提交"/></td>
            <td><input type="reset"value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

其实就是用表格进行格式化

表单用来提交数据，表格用来显示数据

 

表单提交注意事项

1.action属性设置提交的服务器提交的服务器地址/资源（数据提交对象）

2.method属性设置提交的方式GET（默认值）或POST

3.表单提交的时候，数没有发送给服务器的三种情况

（1）表单某个元素项(比如text，password）没有name属性值

（2）单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器

（3）表单项不在提交的form标签中

快速复制多行代码：直接将代码缩至一行，再进行复制

4.GET 请求的特点是：

（1）浏览器地址栏中的地址是：action属性[+？+请求参数] 请求参数的格式是：name=value&name=value

（2）不安全

（3）它有数据长度的限制（不同的浏览器规定不一样，一般2k）

5.POST 请求的特点是：

（1）浏览器地址栏中只有action属性值，提交的数据是携带在http请求中，不会展示在地址栏

（2）相对于GET请求要安全

（3）理论上没有数据长度的限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交数据的注意事项和细节</title>
</head>
<body>
<!--表单必须掌握
1.action表示将form表单的数据提交给哪个url，即服务器的哪个资源（servlet）
2.method表示提交的方式：GET或者POST，默认为POST
3..如果form表单的元素没有name属性，那么无法提交数据
4.对于select checkbox radio标签，提交的数据是value指定的值
5.对于checkbox复选框，可以提交多个值，但是name是统一的，都是sport sport=xx & sport=yy
6.提交的数据，一定要放在form标签内，否则无法提交

GET和POST的区别简述
1.GET请求数据是显示在浏览器地址栏
http://localhost:63342/GradeMIS/LearnHTML/%E8%A1%A8%E5%8D%95%E7%BB%BC%E5%90%88%E6%A1%88%E5%88%97%E6%A0%BC%E5%BC%8F%E5%8C%96.html?username=jack&username=123&username=666&sport=zq&city=cd&myfile=
2.GET请求不安全的，而且数据有长度限制，建议有重要信息，不要用GET
3.POST请求数据是和http传输的，在http体中，相对安全
4.POST传输的数据长度理论上没有限制，但是在实际的应用中，也不能太大，即合理即可
-->
<form action="ok.html">
    <h1>用户注册信息</h1>
    <table border="1"cellpadding="0">
        <tr>
            <td>用户名称：</td>
            <td><input type="text"name="username"><br/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目：</td>
            <td><input type="checkbox"name="sport"value="lq">篮球<input type="checkbox"name="sport"value="zq"checked>足球<input type="checkbox"name="sport"value="sq">手球<br/></td>
        </tr>
        <tr>
            <td>请选择性别：</td>
            <td><input type="radio"name="gender"value="male">男<input type="radio"name="gender"value="female">女<br/></td>
        </tr>
        <tr>
            <td>请选择城市：</td>
            <td>    <select name="city">
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select><br/></td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><textarea rows="10"cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件（头像）</td>
            <td><input type="file"name="myfile"value="上传头像"><br/></td>
        </tr>
        <tr>
            <td><input type="submit"value="提交"/></td>
            <td><input type="reset"value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

div标签

1.<div>标签可以把文档分割为独立的、不同的部分

2.<div>是一块级元素，它的内容自动开始一个新行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
<!--
1.<div>标签可以把文档分割为独立的、不同的部分
2.<div>是一块级元素，它的内容自动开始一个新行，不需要写<br/>
style:样式=》CSS 详细介绍，先简单使用
-->
hello，world
<div>
    <h3 style="color:blue">this is a h3</h3>
    <a href="http://www.baidu.com">goto百度</a>
</div>
</body>
</html>

p标签

1.<p>标签定义段落

2.p元素会自动在其前后创建一些空白

3.应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p标签（段落标签）</title>
</head>
<body>
<!--
1.<p>标签定义段落
2.p元素会自动在其前后创建一些空白
-->
hello，world
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

span标签

1.span标签是内联元素（内嵌元素，行业元素），不像块级元素（如：div标签、p标签等）有换行的效果

2.如果不对span应用样式，span标签没有任何的显示效果

3.语法：<span>内容</span>

4.往往是为了单独的取控制某个关键的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>
您的购物车有<span style="color:red;font-size:40px">10</span>个商品
</body>
</html>

html小测试

HTML 测验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格</title>
</head>
<body>
<h1 align="center">雇员薪资信息</h1>
<table border="1"width="800" bordercolor="#4A44D4"bgcolor="#CACCCD"align="center">
    <tr><b>
        <th>编号</th>
        <th>名字</th>
        <th>性别</th>
        <th>薪水</th>
        <th>职位</th>
        <th>email</th>
    </b></tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格</title>
</head>
<body>
<h1 align="center">雇员薪资信息</h1>
<table border="1"width="800" align="center"bordercolor="#4A44D4" cellspacing="0"bgcolor="#CACCCD">
    <tr><b>
        <th>编　号</th>
        <th>名　字</th>
        <th>性　别</th>
        <th>薪　水</th>
        <th>职　位</th>
        <th>email</th>
    </b></tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
</table>
</body>
</html>

省略了cellspacing="0"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩表</title>
</head>
<body>
<h6 align="center">成绩表</h6>
<table border="1"align="center"bordercolor="#276ADC">
    <tr>
        <th><b>项目</b></th>
        <th colspan="5"><b>上课</b></th>
        <th colspan="2"><b>休息</b></th>
    </tr>
    <tr>
        <td><b>星期</b></td>
        <td><b>星期一</b></td>
        <td><b>星期二</b></td>
        <td><b>星期三</b></td>
        <td><b>星期四</b></td>
        <td><b>星期五</b></td>
        <td><b>星期六</b></td>
        <td><b>星期日</b></td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>

    </tr>
    <tr>

        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机</td>
        <td>英语</td>
        <td>计算机</td>

    </tr>
    <tr>

        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>计算机</td>

    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="2">休息</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>

    </tr>
</table>
</body>
</html>

 

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

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

相关文章

（AcWing）01背包问题

（AcWing）01背包问题

有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 ii 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整数N&#xff0c;V&…
阅读更多...
0基础学习VR全景平台篇 第76篇：全景相机-圆周率全景相机如何直播推流

0基础学习VR全景平台篇 第76篇：全景相机-圆周率全景相机如何直播推流

圆周率科技&#xff0c;成立于2012年&#xff0c;是中国最早投身嵌入式全景算法研发的团队之一&#xff0c;亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One&#xff0c;为用户带来实时畅享8K的高清…
阅读更多...
【AGI】世界首次实现室温超导LK-99

【AGI】世界首次实现室温超导LK-99

论文&#xff1a;The First Room-Temperature Ambient-Pressure Superconductor GPT论文总结&#xff1a; 根据所提供的信息&#xff0c;这篇论文报道了一种在室温和常压下工作的室温超导体LK-99。LK-99的超导性是通过微小的结构畸变引起的&#xff0c;而不是通过温度和压力等外…
阅读更多...
快速部署外卖系统：利用现代工具简化开发流程

快速部署外卖系统：利用现代工具简化开发流程

在竞争激烈的外卖市场中&#xff0c;快速部署高效稳定的外卖系统是餐饮企业成功的关键之一。本文将介绍如何利用现代工具简化外卖系统的开发流程&#xff0c;并附带代码示例&#xff0c;帮助开发者快速搭建功能完备、用户友好的外卖平台。 1. 简介 在外卖业务快速增长的背景…
阅读更多...
c++编写坦克大战（同年回忆）全网最全的讲解

c++编写坦克大战（同年回忆）全网最全的讲解

c编写坦克大战 项目前言 需要熟练的掌握c语言&#xff0c;c。熟练掌握各种数据类型和数据结构。拥有优秀的文档阅读能力&#xff08;设计EasyX图形库的使用&#xff09;&#xff0c;拥有一个漂亮温柔的女朋友。 环境准备 我这里使用的是VS2022,还需要安装EasX图形库。安装教程…
阅读更多...
C算法——生成牌 洗牌算法

C算法——生成牌 洗牌算法

生成牌 // // Created by Lenovo on 2022-06-11-下午 3:15. // 作者&#xff1a;小象 // 版本&#xff1a;1.0 //#include <stdio.h> #include <time.h> #include <stdlib.h>#define M 1 // 基数 #define N 20 // 洗牌次数 #define TOTAL_NUMS (N - M 1) …
阅读更多...
uniapp运行项目到iOS基座

uniapp运行项目到iOS基座

2022年9月&#xff0c;因收到苹果公司警告&#xff0c;目前开发者已无法在iOS真机设备使用未签名的标准基座&#xff0c;所以现在要运行到 IOS &#xff0c;也需要进行签名。 Windows系统&#xff0c;HBuilderX 3.6.20以下版本&#xff0c;无法像MacOSX那样对标准基座进行签名…
阅读更多...
c++基于游戏壳的飞机大战游戏----开发（第二部分）

c++基于游戏壳的飞机大战游戏----开发（第二部分）

c基于游戏壳的飞机大战游戏----开发&#xff08;第二部分&#xff09; 一.我们先将每个功能按文件夹进行分类&#xff08;这样便于管理&#xff09; 如下 每一个文件里都写出相应的头文件与源文件&#xff08;GameFrame文件夹中的内容是上一篇博客中写好的游戏壳代码&#xf…
阅读更多...
【汇总】解决Ajax请求后端接口，返回ModelAndView页面不跳转

【汇总】解决Ajax请求后端接口，返回ModelAndView页面不跳转

【汇总】解决Ajax请求后端接口&#xff0c;返回ModelAndView不跳转 问题发现问题解决方法一&#xff1a;直接跳转到指定URL&#xff08;推荐&#xff09;方法二&#xff1a;将返回的html内容&#xff0c;插入到页面某个元素中方法三&#xff1a;操作文档流方法四&#xff1a;使…
阅读更多...
【雕爷学编程】MicroPython动手做（28）——物联网之Yeelight 2

【雕爷学编程】MicroPython动手做（28）——物联网之Yeelight 2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…
阅读更多...
KubeSphere 3.4.0 发布：支持 K8s v1.26

KubeSphere 3.4.0 发布：支持 K8s v1.26

2023 年 07 月 26 日&#xff0c;KubeSphere 开源社区激动地向大家宣布&#xff0c;KubeSphere 3.4.0 正式发布&#xff01; 让我们先简单回顾下之前三个大版本的主要变化&#xff1a; KubeSphere 3.1.0 新增了“边缘计算”、“计量计费” 等功能&#xff0c;将 Kubernetes 从…
阅读更多...
【uniapp】【Vue3】 超简单全局自定义弹窗组件Modal

【uniapp】【Vue3】 超简单全局自定义弹窗组件Modal

Element-Plus 自动引入&#xff0c;Icon图标不显示 //这样写是不会显示的 <el-icon size"20"><view /> </el-icon>// 应该这样写 <el-icon size"20"><i-ep-view/> </el-icon>// 或 <i-ep-view/>这个名字怎么去…
阅读更多...
SpringBoot+ruoyi框架图片上传和文件下载

SpringBoot+ruoyi框架图片上传和文件下载

第一次接触ruoyi框架&#xff0c;碰到文件上传和下载问题&#xff0c;今天来总结一下。 使用若依框架文件上传下载首先配置文件路径要配好。 文件下载&#xff1a; application.yml若依配置 # 项目相关配置 ruoyi:# 名称name: RuoYi# 版本version: 3.6.0# 版权年份copyright…
阅读更多...
《向量数据库指南》——向量数据库Milvus Cloud、Pinecone、Vespa、Weaviate、Vald、GSI 、 Qdrant选哪个？

《向量数据库指南》——向量数据库Milvus Cloud、Pinecone、Vespa、Weaviate、Vald、GSI 、 Qdrant选哪个？

1、Milvus Cloud（https://milvuscloud.com） Milvus是一个开源的向量数据库，支持高效的向量搜索和相似度匹配。它针对大规模向量数据集的性能进行了优化，并提供了Python、Java、Go和C++等多种语言的客户端接口。Milvus在图像、音频、文本和推荐等领域都有广泛的应用。 2…
阅读更多...
Gorm 单表操作 查询数据

Gorm 单表操作 查询数据

单表记录查询 //单表记录的查询&#xff0c;var s Studentdb.Debug().Take(&Student{})fmt.Println(s)[1.034ms] [rows:1] SELECT * FROM students LIMIT 1 {0 0 false <nil>} first就是按照主键排序&#xff0c;last就是按照主键倒排。 /…
阅读更多...
了解垃圾回收算法

了解垃圾回收算法

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 垃圾回收&#xff08;Garbage Collect&#xff09;是Java语言中的一种自动内存管理机制&#xff0c;用于自动回收不再使用的对象所占用的内存空间。Java虚拟机会自动追踪和…
阅读更多...
python中数据可视化

python中数据可视化

1.掷一个D6和一个D10 50000次的结果 die.py from random import randintclass Die:def __init__(self, num_sides6):self.num_sides num_sidesdef roll(self):return randint(1, self.num_sides) die_visual.py from die import Die from plotly.graph_objs import Bar, L…
阅读更多...
宝塔Linux面板Java项目一键部署(springboot)

宝塔Linux面板Java项目一键部署(springboot)

部署项目之前请安装相关软件: jdk1.8、redis、nginx 、mysql 等等(项目中用到的) 1. 网站 2. 创建项目文件夹 文件 - /www/wwwroot - 新建项目文件夹 - 存放jar文件 3. 上传jar文件 (直接拖进来) 4. 添加Java项目 5. jar包路径 - 项目端口, 提交(启动项目) 6. 成功运行 7. 浏览…
阅读更多...
nodejs VM沙箱绕过

nodejs VM沙箱绕过

文章目录 nodejs vm沙箱绕过1.基本概念——什么是沙箱&#xff08;sandbox&#xff09;2.nodejs的作用域3.vm模块的运行原理4.沙箱绕过5.沙箱绕过的一些问题 nodejs vm沙箱绕过 1.基本概念——什么是沙箱&#xff08;sandbox&#xff09; 当我们运行一些可能会产生危害的程序…
阅读更多...
2023 电赛 E 题 K210方案--K210实现矩形识别

2023 电赛 E 题 K210方案--K210实现矩形识别

相关库介绍 sensor&#xff08;摄像头&#xff09; sensor.reset() sensor.set_pixformat(sensor.RGB565) sensor.set_framesize(sensor.QVGA) sensor.skip_frames(10) reset()&#xff1a;重置并初始化单目摄像头 set_pixformat()&#xff1a;设置摄像头输出格式&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023