HTML_CSS学习:表格、表单、框架标签

一、表格_跨行与跨列

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格_跨行与跨列</title>
</head>
<body><table border="1" cellspacing="0"><caption>课程表</caption><thead><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">活动与休息</th>
<!--                <th>1-4</th>-->
<!--                <th>1-5</th>-->
<!--                <th>1-6</th>-->
<!--                <th>1-7</th>-->
<!--                <th>1-8</th>--></tr></thead><tbody><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4">上午</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td rowspan="4">休息</td></tr><tr>
<!--                <td>4-1</td>--><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td>
<!--                <td>4-8</td>--></tr><tr>
<!--                <td>5-1</td>--><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td>
<!--                <td>5-8</td>--></tr><tr>
<!--                <td>6-1</td>--><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td>
<!--                <td>6-8</td>--></tr><tr><td rowspan="2">下午</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td rowspan="2">休息</td></tr><tr>
<!--                <td>8-1</td>--><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td>
<!--                <td>8-8</td>--></tr></tbody></table></body>
</html>
2.显示结果

二、补充几个常用的标签

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>补充几个常用的标签</title>
</head>
<body>
<!--    换行标签--><a href="http://www.netbian.com/mei/">去看美女</a><br><br><a href="https://newhouse.fang.com/house/s/b91/">去买房</a><br><br><a href="https://www.ptpress.com.cn/">去买书</a>
<!--    分割线--><div>第一章</div><p>就这样最后王子和公主在一起了!</p><hr><div>第二章</div><p>你原来是一个这样的人?</p>
<!--    显示原文--><pre>I       Love       YouI   Love   YouLove</pre>
</body>
</html>
2.显示结果

三、表单基本结构

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单基本结构</title>
</head>
<body><form action="https://www.baidu.com/s"><input type="text" name="wd"><button>去百度</button></form><hr><form action="https://search.jd.com/search"><input type="text" name="keyword"><button>去京东</button></form><form action="https://search.jd.com/search" target="_self" method="post"><input type="text" name="keyword"><button>去京东</button></form><hr><a href="https://search.jd.com/search?keyword=华为">搜索手机</a></body>
</html>
2.显示结果

四、表单常用控件

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单常用控件</title>
</head>
<body><form action="https://search.jd.com/search">
<!--        文本输入框-->账户:<input disabled type="text" name="account" value="malongq" maxlength="20"><br>
<!--        密码输入框-->密码:<input type="password" name="pwd" value="123" maxlength="20"><br>
<!--        单选框-->性别:<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female" checked>女<br>
<!--        多选框-->爱好:<input type="checkbox" name="hobby" value="smoke" checked>抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm" checked>烫头<br>其他:<textarea name="other" cols="22" rows="3"></textarea><br>籍贯:<select name="place"><option value="豫">河南</option><option value="粤" selected>广东</option><option value="川">四川</option><option value="鄂">湖北</option></select><!--        隐藏域--><input type="hidden" name="from" value="toutiao"><br>
<!--        确认按钮_第一种写法-->
<!--        <button>确认</button>--><button type="submit">确认</button>
<!--        确认按钮_第二种写法-->
<!--        <button>确认</button>-->
<!--        <input type="submit" value="确认">-->
<!--        重置按钮_第一种写法-->
<!--        <button type="reset">重置</button>-->
<!--        重置按钮_第二种写法--><input type="reset" value="点我重置">
<!--        普通按钮_第一种写法--><input type="button" value="检测账户是否被注册">
<!--        普通按钮_第二种写法-->
<!--        <button type="button">检测账户是否被注册</button>--></form><!--    <form action="https://www.baidu.com/s">-->
<!--        <input type="text" name="abc">-->
<!--        <button>确认</button>-->
<!--    </form>--></body>
</html>
2.显示结果

五、表单_lable标签

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单_lable标签</title>
</head>
<body><form action="https://search.jd.com/search"><label for="zhanghu">账户:</label><input id="zhanghu" type="text" name="account" maxlength="20"><br>
<!--        <label for="mima">密码:</label>-->
<!--        <input id="mima" type="password" name="pwd" maxlength="20"><br>--><label>密码:<input id="mima" type="password" name="pwd" maxlength="20"></label><br>性别:<input type="radio" name="gender" value="male" id="nan"><label for="nan">男</label><label><input type="radio" name="gender" value="female" id="nv">女</label><br>爱好:<label><input type="checkbox" name="hobby" value="smoke">抽烟</label><label><input type="checkbox" name="hobby" value="drink">喝酒</label><label><input type="checkbox" name="hobby" value="perm">烫头</label><br><label for="qita">其他:</label><textarea id="qita" name="other" cols="21" rows="3"></textarea><br>籍贯:<select name="place"><option value="豫">河南</option><option value="粤">广东</option><option value="川">四川</option><option value="鄂">湖北</option></select><input type="hidden" name="from" value="toutiao"><br>
<!--        <button type="submit">确认</button>--><input type="submit" value="确认"><input type="reset" value="点我重置"><input type="button" value="检测账户是否被注册"></form></body>
</html>
2.显示结果

六、表单_fieldset与legend标签

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单_fieldset与legend标签</title>
</head>
<body><form action="https://search.jd.com/search">
<!--        主要信息--><fieldset><legend>主要信息</legend><label for="zhanghu">账户:</label><input id="zhanghu" type="text" name="account" maxlength="20"><br><label>密码:<input id="mima" type="password" name="pwd" maxlength="20"></label><br>性别:<input type="radio" name="gender" value="male" id="nan"><label for="nan">男</label><label><input type="radio" name="gender" value="female" id="nv">女</label></fieldset><br><fieldset><legend>附加信息</legend>爱好:<label><input type="checkbox" name="hobby" value="smoke">抽烟</label><label><input type="checkbox" name="hobby" value="drink">喝酒</label><label><input type="checkbox" name="hobby" value="perm">烫头</label><br><label for="qita">其他:</label><textarea id="qita" name="other" cols="21" rows="3"></textarea><br>籍贯:<select name="place"><option value="豫">河南</option><option value="粤">广东</option><option value="川">四川</option><option value="鄂">湖北</option></select></fieldset><input type="hidden" name="from" value="toutiao"><br>
<!--        <button type="submit">确认</button>--><input type="submit" value="确认"><input type="reset" value="点我重置"><input type="button" value="检测账户是否被注册"></form></body>
</html>
2.显示结果

七、框架标签

1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>框架标签</title>
</head>
<body>
<!--    利用iframe嵌入一个普通的网页-->
<!--    <iframe src="https://www.taobao.com" width="1522" height="730" frameborder="0"></iframe>-->
<!--    利用iframe嵌入一个广告网页-->
<!--    <iframe src="https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1YdnH01n1T4rjTkPHnzPyu9Fh_qFRcdFRFDFRfdFRndFRFjFRfzFRFDFRRLFRn3FRuDFRn3FRfdFRf1FRP7FhkdpvbqniuVmLKV5HDznWbznBuk5Hf3njf4njc4g1FxmLKzFMFB5H0hTMnqniu1uyk_ugFxpyfqniu1pyfquhDzPHR1P1D4rjnLnjndniu1IA-b5HDkPzuY5gwsmvkGmvV-ujPxpAnhIAfqPWfsPjcznauYUHYzP1RkPHTdrj6hIAd15HDLnH04rHfYnWbhIZRqIHmYnjfznW0hIHdCIZwsTzR1fiRzwBRzwMILIzRzwHDvnzRzwyPEUiuv5HchpHYvP1cvPjR4uf&besl=5&c=news&cf=1&cvrq=687949&efc=0&eid_list=200000&expid=200000_200055&fr=14&fv=0&haacp=181&img_typ=4134&itm=0&lu_idc=yf&lukid=1&lus=fa25537198370351&lust=65fbb3fd&luwtr=2815429140421504439&mscf=0&mtids=3017800849&n=10&nttp=1&p=baidu&sce=7&sig=0&sr=318&ssp2=1&tpl=baiduCustNativeADImageCarousel&tsf=dtp:0&tu_type=0&u=%2F&uicf=lurecv&urlid=0&eot=1" width="1522" height="730" frameborder="0"></iframe>-->
<!--    利用iframe嵌入其他内容-->
<!--    <iframe src="./pictures/喜羊羊.jpg" width="1522" height="730" frameborder="0"></iframe>--><a href="https://www.taobao.com" target="tb">点我看淘宝</a><br><a href="https://www.toutiao.com" target="tb">点我看新闻</a><br><form action="https://so.toutiao.com/search" target="tb"><input type="text" name="keyword"><input type="submit" value="搜索">
<!--        <button></button>--></form><iframe name="tb" frameborder="0" width="1522" height="730"></iframe></body>
</html>
2.显示结果

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

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

相关文章

学员分享丨学习华为认证,为什么建议报班学习

我一直对计算机科学有着浓厚的兴趣&#xff0c;但在我遇见誉天教育之前&#xff0c;我只是独自摸索&#xff0c;没有明确的方向和方法。然而&#xff0c;在誉天教育&#xff0c;我找到了一个真正为学生着想的地方。这里有一支专业且热情的教师队伍&#xff0c;他们不仅在课堂上…

毕业设计:日志记录编写(3/17起更新中)

目录 3/171.配置阿里云python加速镜像&#xff1a;2. 安装python3.9版本3. 爬虫技术选择4. 数据抓取和整理5. 难点和挑战 3/241.数据库建表信息2.后续进度安排3. 数据处理和分析 3/17 当前周期目标&#xff1a;构建基本的python环境&#xff1a;运行爬虫程序 1.配置阿里云pytho…

C enum(枚举)

枚举是 C 语言中的一种基本数据类型&#xff0c;用于定义一组具有离散值的常量&#xff0c;它可以让数据更简洁&#xff0c;更易读。 枚举类型通常用于为程序中的一组相关的常量取名字&#xff0c;以便于程序的可读性和维护性。 定义一个枚举类型&#xff0c;需要使用 enum 关…

【Postman】工具使用介绍

一、postman工具介绍 1.什么是postman postman是谷歌开发的一款网页调试和接口测试工具&#xff0c;能够发送任何请求类型的http请求&#xff0c;支持GET/POST/PUT/DELETE等方法。postman简单易用&#xff0c;可以直接填写URL&#xff0c;header&#xff0c;body就可以发送一…

训练自己的声音模型,效果超级逼真,最牛的开源声音克隆项目 GPT-SoVITS

GPT-SoVITS 是一个开源的声音克隆项目&#xff0c;可以训练自己的声音模型。 效果非常好&#xff0c;使用超级简单。 如果你有声音克隆的需求&#xff0c;必须要试试这个项目。 不说废话&#xff0c;直接看怎么训练自己的声音模型。 1. 安装 我的是Windows系统&#xff0c…

Linux中的常用基础操作

ls 列出当前目录下的子目录和文件 ls -a 列出当前目录下的所有内容&#xff08;包括以.开头的隐藏文件&#xff09; ls [目录名] 列出指定目录下的子目录和文件 ls -l 或 ll 以列表的形式列出当前目录下子目录和文件的详细信息 pwd 显示当前所在目录的路径 ctrll 清屏 cd…

go的限流

背景 服务请求下游&#xff0c;oom&#xff0c;排查下来发现是一个下游组件qps陡增导致 但是司内网络框架比较挫&#xff0c;竟然不负责框架内存问题&#xff08;有内存管理模块&#xff0c;但逻辑又是无限制使用内存&#xff09; 每个请求一个r、w buffer&#xff0c;请求无限…

c 语言 三元搜索 - 迭代与递归(Ternary Search)

计算机系统使用不同的方法来查找特定数据。有多种搜索算法&#xff0c;每种算法更适合特定情况。例如&#xff0c;二分搜索将信息分为两部分&#xff0c;而三元搜索则执行相同的操作&#xff0c;但分为三个相等的部分。值得注意的是&#xff0c;三元搜索仅对排序数据有效。在本…

快速部署一个devops平台onnedev

简介 1、强大的代码管理&#xff1a;OneDev提供内置的Git服务器&#xff0c;可实现代码版本控制、分支管理和代码协作。您可以轻松地进行代码查找、导航和讨论&#xff0c;并且可以设置代码保护规则&#xff0c;确保代码的质量和安全性。 2、灵活的CI/CD流程&#xff1a;OneD…

实现Spring Web MVC中的文件上传功能,并处理大文件和多文件上传

实现Spring Web MVC中的文件上传功能&#xff0c;并处理大文件和多文件上传 在Spring Web MVC中实现文件上传功能并处理大文件和多文件上传是一项常见的任务。下面是一个示例&#xff0c;演示如何在Spring Boot应用程序中实现这一功能&#xff1a; 添加Spring Web依赖&#x…

SOC 子模块---中断控制器

中断控制器对soc 中的各个外设进行中断管理&#xff0c;进行优先权排队&#xff0c;并送出IQR信号给CPU&#xff1b; 中断控制器在整个系统中的结构&#xff1a; IRQ<n>来源于不同的中断源&#xff0c;比如&#xff1a;I2C,SPI等&#xff0c;INTC收集这些中断&#xff0…

定时器使用场景与解决方案

概况 定时器的作用是可以实现延迟执行某段代码或周期性地执行某段代码&#xff0c;常见的应用场景包括动画效果、定时刷新数据、定时发送请求等。清除定时器是指取消之前设置的定时器&#xff0c;以防止代码在不需要执行的情况下继续执行。在JavaScript中&#xff0c;可以使用c…

HTTP状态码(3)

HTTP 状态码负责表示客户端 HTTP 请求的返回结果、标记服务器端的处理是否正常、通知出现的错误等工作 状态码告知从服务器端返回的请求结果 状态码的职责是当客户端向服务器端发送请求时&#xff0c;描述返回的请求结果。借助状态码&#xff0c;用户可以知道服务器端是正常…

AIGC实战——Transformer模型

AIGC实战——Transformer模型 0. 前言1. T52. GPT-3 和 GPT-43. ChatGPT小结系列链接 0. 前言 我们在 GPT (Generative Pre-trained Transformer) 一节所构建的 GPT 模型是一个解码器 Transformer&#xff0c;它逐字符地生成文本字符串&#xff0c;并使用因果掩码只关注输入字…

面试问题——redis——缓存穿透、击穿、雪崩

HR&#xff1a;你在项目中的那些场景用到了redis&#xff1f; 1. 缓存穿透问题 &#xff08;项目中使用的方法&#xff09; 2. 缓存击穿 解决办法1&#xff1a;加互斥锁。大量并发时&#xff0c;先让一个人去查&#xff0c;其他人等着。这样剩下人就可在缓存直接获取值。&#…

Web实现名言生成器:JavaScript DOM基础与实例教程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

Linux-安装redis

安装指令 sudo apt-get install redis-server 启动服务 sudo systemctl start redis 查找redis路径 find / -name "filename" linux redis修改密码 sudo nano /etc/redis/redis.conf 找到 "requirepass" 这一行&#xff0c;取消注释并设置新的密码&…

跳蚱蜢(蓝桥杯)

文章目录 跳蚱蜢题目描述答案&#xff1a;20bfs 跳蚱蜢 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 如下图所示&#xff1a; 有 9 只盘子&#xff0c;排成 1 个圆圈。 其中 8 只盘子内装着 8 只蚱蜢&#xff…

包含多个段的程序

文章目录 包含多个段的程序在代码段中使用数据在代码段中使用栈将数据、代码、栈放入不同的段 包含多个段的程序 在代码段中使用数据 考虑这样一个问题&#xff0c;编程计算以下8个数据的和&#xff0c;结果存在ax 寄存器中&#xff1a;0123H&#xff0c;0456H&#xff0c;07…

自动驾驶技术中大模型的应用与挑战分析

自动驾驶技术中大模型的应用与挑战分析 1. 背景介绍 自动驾驶技术是近年来人工智能领域的研究热点&#xff0c;它通过计算机视觉、传感器融合、决策规划等技术的综合应用&#xff0c;实现车辆的自主驾驶。随着深度学习技术的快速发展&#xff0c;大模型在自动驾驶领域得到了广…