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

news2024/11/15 10:09:20

一、表格_跨行与跨列

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       You
            I   Love   You
                Love
    </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.coloradmin.cn/o/1534908.html

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

相关文章

(一)基于IDEA的JAVA基础4

(一)基于IDEA的JAVA基础4

注释文本&#xff0c;注释模版 单行注释://开头放在代码前面&#xff0c;对少部分。 多行注释:快捷方式ctrlshift/,对段落代码注 释。 文档注释:/**……**/&#xff0c;用于声明作者或创作时 间。 文档注释如何设置&#xff0c;首先找到File中…
阅读更多...
【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇：什么是pinia,1. 创建空Vue项目【附代码文档】

【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇：什么是pinia,1. 创建空Vue项目【附代码文档】

全套笔记资料代码移步&#xff1a; 前往gitee仓库查看 感兴趣的小伙伴可以自取哦&#xff0c;欢迎大家点赞转发~ 全套教程部分目录&#xff1a; 部分文件图片&#xff1a; 什么是pinia Pinia 是 Vue 的专属状态管理库&#xff0c;可以实现跨组件或页面共享状态&#xff0c;是…
阅读更多...
html5cssjs代码 033 SVG元素示例

html5cssjs代码 033 SVG元素示例

html5&css&js代码 033 SVG元素示例 一、代码二、解释 一个SVG图形&#xff0c;该图形由一个椭圆、一个圆形和一个矩形组成。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><title>编程笔记 html5&css&js SVG元素示例…
阅读更多...
公司系统中了.rmallox勒索病毒如何恢复数据？

公司系统中了.rmallox勒索病毒如何恢复数据？

早晨上班时刻&#xff1a; 当阳光逐渐洒满大地&#xff0c;城市的喧嚣开始涌动&#xff0c;某公司的员工们纷纷踏入办公大楼&#xff0c;准备开始新的一天的工作。他们像往常一样打开电脑&#xff0c;准备接收邮件、查看日程、浏览项目进展。 病毒悄然发作&#xff1a; 就在员…
阅读更多...
Databend x CubeFS：面向未来的企业级云原生数据存储与分析

Databend x CubeFS：面向未来的企业级云原生数据存储与分析

用场景的丰富&#xff0c;企业面临着前所未有的数据存储挑战。大规模数据存储变得日常化&#xff0c;伴随着超大容量和快速变化的I/O需求&#xff0c;传统的存储解决方案已经难以满足企业对弹性、运维效率及总体拥有成本&#xff08;TCO&#xff09;的更高要求。这些挑战促使基…
阅读更多...
三角形重心坐标插值法 Interpolation Across Triangles: Barycentric Coordinates

三角形重心坐标插值法 Interpolation Across Triangles: Barycentric Coordinates

本专栏内容整理了GAMES101的计算机图形学课程的主要内容&#xff0c;作为我学习计算机图形学的一份复习备份或叫做笔记。内容中如有错误&#xff0c;或有其他建议&#xff0c;欢迎大家指出。 附上GAMES101计算机图形学课程&#xff1a;GAMES101: 现代计算机图形学入门正在上传…
阅读更多...
Django日志（二）

Django日志（二）

一、Handler Handler决定如何处理logger中的每条消息。它表示一个特定的日志行为，例如 将消息写入屏幕、文件或网络Socket handler对应的是个字典，每一个键都是一个handler的名字，每个值又一个字典，描述了如何配置对应的handler实例 2.1、内置Handler class（必需）：处理…
阅读更多...
【每日八股】Java基础经典面试题4

【每日八股】Java基础经典面试题4

前言&#xff1a;哈喽大家好&#xff0c;我是黑洞晓威&#xff0c;25届毕业生&#xff0c;正在为即将到来的秋招做准备。本篇将记录学习过程中经常出现的知识点以及自己学习薄弱的地方进行总结&#x1f970;。 本篇文章记录的Java基础面试题&#xff0c;如果你也在复习的话不妨…
阅读更多...
Scikit-Learn逻辑回归(二)

Scikit-Learn逻辑回归(二)

Scikit-Learn逻辑回归二&#xff1a;多项式与正则化 1、多项式回归回顾1.1、逻辑回归为什么要使用多项式1.2、多项式回归及原理 2、逻辑回归与多项式 1、多项式回归回顾 本文接上篇&#xff1a;Scikit-Learn逻辑回归(一) 上篇中&#xff0c;我们详细介绍了逻辑回归的概念、原理…
阅读更多...
第六十一回 放冷箭燕青救主 劫法场石秀跳楼-编译安装飞桨paddlepaddle@openKylin+RISCV

第六十一回 放冷箭燕青救主 劫法场石秀跳楼-编译安装飞桨paddlepaddle@openKylin+RISCV

卢俊义在水里被张顺抓住&#xff0c;用轿子抬到了梁山。宋江等人下马跪在地上迎接&#xff0c;请他坐第一把交椅。卢俊义宁死不从&#xff0c;大家只好说留他在山寨几天&#xff0c;先让李固带着马车货物回去。吴用对李固说&#xff0c;你的主人已经答应坐第二把交椅了&#xf…
阅读更多...
matlab实现Logistic回归

matlab实现Logistic回归

一、目的和要求 1.编程实现Logistic Regression并应用于数据集&#xff1b; 2.绘制二元分类函数、sigmoid函数和代价函数&#xff1b; 3.正则化logistic回归代价。 二、算法介绍 步骤&#xff1a; 选择一个合适的分类函数来实现分类&#xff08;Sigmoid函数&#xff09; …
阅读更多...
OpenHarmony开发之图形UI组件解析

OpenHarmony开发之图形UI组件解析

简介 图形UI组件实现了一套系统级的图形引擎。 该组件为应用开发提供UIKit接口&#xff0c;包括了动画、布局、图形转换、事件处理&#xff0c;以及丰富的UI组件。 组件内部直接调用HAL接口&#xff0c;或者使用WMS(Window Manager Service)提供的客户端与硬件交互&#xff…
阅读更多...
[flask] flask的基本介绍、flask快速搭建项目并运行

[flask] flask的基本介绍、flask快速搭建项目并运行

笔记 Flask Flask 本身相当于一个内核&#xff0c;其他几乎所有的功能都要用到扩展&#xff08;邮件扩展Flask-Mail&#xff0c;用户认证Flask-Login&#xff0c;数据库Flask-SQLAlchemy&#xff09;&#xff0c;都需要用第三方的扩展来实现。比如可以用 Flask 扩展加入ORM、…
阅读更多...
哪些企业适合构建企业新媒体矩阵？

哪些企业适合构建企业新媒体矩阵？

⭐关注矩阵通服务号&#xff0c;探索企业新媒体矩阵搭建与营销策略 新媒体矩阵就是在某个平台或多个平台开设、联动多个账号&#xff0c;组建有关系的不同账号集群。 在数字化转型的浪潮下&#xff0c;矩阵已然成为企业实现品牌塑造、市场开拓与用户互动的重要阵地。 然而&…
阅读更多...
算法沉淀——贪心算法六（leetcode真题剖析）

算法沉淀——贪心算法六（leetcode真题剖析）

算法沉淀——贪心算法六 01.坏了的计算器02.合并区间03.无重叠区间04.用最少数量的箭引爆气球 01.坏了的计算器 题目链接&#xff1a;https://leetcode.cn/problems/broken-calculator/ 在显示着数字 startValue 的坏计算器上&#xff0c;我们可以执行以下两种操作&#xff1…
阅读更多...
FPGA 实现CRC-8/ROHC（已验证）

FPGA 实现CRC-8/ROHC（已验证）

1 FPGA crc代码在线生成工具 工具1 // vim: ts=4 sw=4 expandtab// THIS IS GENERATED VERILOG CODE. // https://bues.ch/h/crcgen // // This code is Public Domain. // Permission to use, copy, modify, and/or distribute this software for any // purpose with or wi…
阅读更多...
C# 读取二维数组集合输出到Word预设表格

C# 读取二维数组集合输出到Word预设表格

目录 应用场景 设计约定 范例运行环境 配置Office DCOM 实现代码 组件库引入 核心代码 DataSet转二维数组 导出写入WORD表格 调用举例 小结 应用场景 存储或导出个人WORD版简历是招聘应用系统中的常用功能&#xff0c;我们通常会通过应用系统采集用户的个人简历信息…
阅读更多...
网络通信——IP地址、端口号、协议（TCP、UDP）

网络通信——IP地址、端口号、协议（TCP、UDP）

通信架构 网络通信三要素 IP地址 IPv4地址 IPv6地址 IP域名 IP常识 端口号 概念 协议 开放式网络互联标准&#xff1a;OSI、TCP/IP 传输层的2个通信协议——UDP、TCP TCP协议&#xff1a;三次握手建立建立可靠连接 进行三次握手的原因&#xff1a;为了确保客户端和服务端…
阅读更多...
jsp学习

jsp学习

1.新建文件&#xff0c;创建web动态项目 2.项目点击next两下&#xff0c;点击勾选gentear&#xff0c;点击finish 3.文件成功后是有jsp文件 4.在webapp新建jsp文件 5. 使用模板html5建立文件 <% page language"java" contentType"text/html; charsetUTF-8&qu…
阅读更多...
【Flutter学习笔记】10.2 组合现有组件

【Flutter学习笔记】10.2 组合现有组件

参考资料&#xff1a; 《Flutter实战第二版》 10.2 组合现有组件 在Flutter中页面UI通常都是由一些低级别组件组合而成&#xff0c;当我们需要封装一些通用组件时&#xff0c;应该首先考虑是否可以通过组合其他组件来实现&#xff0c;如果可以&#xff0c;则应优先使用组合&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023