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

于 2024-03-21 18:09:31 发布
阅读量499 收藏 5
点赞数 10
文章标签： 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74972727/article/details/136916112
版权

一、表格_跨行与跨列

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.显示结果

马龙强_
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS样式表
SignalFire的博客
01-21 2369
一 CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/
html+css实战30-表格-跨行合并
geyaoisnice的博客
06-03 414
html
非零基础自学前端最后一遍 一 HTML+CSS 12 HTML高级元素 12.6 table的单元格合并-跨行跨列
谢谢你们的关注
03-26 164
非零基础自学前端最后一遍 一 HTML+CSS 12 HTML高级元素 12.6 table的单元格合并-跨行跨列
HTML表格标签跨行与跨列
m0_67081826的博客
06-24 2006
HTML的跨行和跨列
HTML 表格跨行跨列
松柏123的博客
07-12 4114
HTML和CSS第一天 8.8跨行跨列表格（次重点，必须掌握） <!DOCTYPE html> 9-表格的跨行跨列 1.1 1.3 1.4 1.5 2.1 2.2 2.3 2.4 2.5 3.2 3.3 3.4 3.5 4.1 4.2 4.3 4.4
bootstrap-3.3.0_html_bootstrap框架_css_policen1q_
10-02
Bootstrap是简洁、直观、强悍的前端开发框架，让Web开发更迅速、简单。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，Buttons，表格，网格系统等等。
尚硅谷前端HTML+CSS学习笔记
最新发布
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆...15. HTML 高级语法：HTML 表格、HTML 表单、HTML 框架等。
HTML基本标签+表格基础+表单和框架
08-15
HTML基本标签+表格基础+表单和框架，基础知识点，初学者了解，后期将逐步加载CSS样式表与JS的使用基础知识点，大家共同使用
html基础教程 表格与表单 图像和声音 框架 CSS.ppt
07-07
都很基础，高手绕道，如果不打算做前台界面，学过这些html基础应该就够用了。
HTML 学习记录3.2 CSS基础语法 选择器 创建形式
01-08
这是HTML学习总结的第三篇第二节，前两篇及上一节请戳下面： HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释 HTML 学习总结2 框架 表单 HTML 学习总结3.1 开发工具的使用 div标签 ...
HTML 表格跨行与跨列
热门推荐
houxianyj的专栏
05-24 3万+
姓名 性别 年龄 张2 男 20
【CSS3】跨列设置column-span
O(∩_∩)O
02-25 3384
column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all 取值说明
零基础CSS入门教程(17)–表格样式
程序员大阳
10-30 6281
点此查看全部文字教程、视频教程、源代码 本文目录1. 题外话2. 前言3. HTML表格边框4. CSS设定表格边框5. 设定列边框6. 折叠边框7. 表格尺寸8. 表格内边距9. 表格背景色10. 小结 1. 题外话 不知不觉，写到第40篇了。 可能已经是我写过的最长的系列文章了，虽然质量有时比较好，有时比较差，但我总体对该系列文章比较满意。 因为它寄托了我的心思，也帮我在达成目标的路上，一点一滴的前进。 如果说目标是什么，就是为热爱计算机专业、热爱计算机技术的初学者，特别是我的学生，提供一个渠道。我们在
csstable跨列居中_HTML表格跨行、跨列操作(rowspan、colspan)
weixin_29469949的博客
12-24 1564
一般使用元素的colspan属性来实现单元格跨列操作，使用元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示：例如：星期一星期二星期天实现结果如下图所示：rowspan属性规定单元格可横跨的列数，所有浏览器都支持rowspan属性。其取值为number，如下图所示：例如：星期一星期二星期三实...
html实现表格的跨行、跨列
weixin_45609811的博客
09-24 3027
<table style="width:240px" border="1"> <tr> <td rowspan="2"> 跨2行的单元格</td> //跨行 <td> 普通单元格</td> </tr> <tr> <td>普通单元格</td> ...
【转】html 代码中 table 跨行跨列的操作
魂-淡
01-06 3489
例1 跨2列: <table border="1"> <tr> <td colspan="2" align="center">111</td> </tr> <tr> <td>222</td> <td>333<...
浅谈如何实现table所有td（可跨行跨列）的值存进二维数组
筱葭的博客
03-14 2508
var rows = 0, cols = 0, nums = 0; var trs = document.getElementsByTagName("tr"); var row = document.getElementsByTagName("tr")[0]; var tds = row.getElementsByTagName("td"); for (var i = 0; i < tds.len
html 代码示范跨行跨列
weixin_42630877的博客
07-17 4079
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table style="withd:600px" border="1"&gt; &lt;capti
html写一个完善精美的注册页面，使用表格元素，要求尽可能应用多种html表单元素，要求不使用css、js、框架
04-22
好的，我会尽力回答你的问题。首先，一个完善精美的注册页面需要考虑到用户友好性和易用性，这需要我们应用多种html表单元素。以下是一个例子： ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <h1>欢迎注册！</h1> <form action="" method="post"> <table> <tr> <td>用户名：</td> <td><input type="text" name="username" required></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" required></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="confirm_password" required></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="male" id="male"><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label> </td> </tr> <tr> <td>出生日期：</td> <td><input type="date" name="birthdate"></td> </tr> <tr> <td>邮箱：</td> <td><input type="email" name="email"></td> </tr> <tr> <td>电话号码：</td> <td><input type="tel" name="tel"></td> </tr> <tr> <td>地址：</td> <td><textarea name="address"></textarea></td> </tr> <tr> <td>职业：</td> <td><select name="job"> <option value="" disabled selected>--请选择--</option> <option value="student">学生</option> <option value="teacher">教师</option> <option value="worker">工人</option> <option value="engineer">工程师</option> <option value="others">其他</option> </select></td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"></td> </tr> </table> </form> </body> </html> ``` 这个例子中，我们应用了以下表单元素： - `input`：用于输入文本、密码、日期等信息。 - `textarea`：用于输入多行文本。 - `select` 和 `option`：用于从多个选项中选择一个选项，如下拉菜单。 - `radio` 和 `label`：用于选择一个选项，如单选按钮。 - `required`：用于指定必填字段，如果用户未填写就提交表单，浏览器会警告用户填写必填字段。 当然，这只是一个例子，你可以根据自己的需求增加或删除表单元素，来获得更好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

马龙强_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值