首页 > 其他分享 >Day02 2.3、HTML基础之表单标签的基本使用

Day02 2.3、HTML基础之表单标签的基本使用

时间:2023-03-16 13:44:50浏览次数:38  
标签:表格 Title Day02 表单 HTML 提交 标签 2.3 数据格式

三、表格标签

  • 表格系列标签主要是可以数据以表格的格式展示出来。但是现在table表格已经很少使用了,而是改成div+css实现更漂亮的表格。
标签 描述
<table></table> 表示网页的一个表格,内部一般直接嵌套的是tr标签。
<tr></tr> 表示表格的一行,内部直接嵌套的只能是td或者th标签。
<td></td> 表示表格的一个单元格,也可以是一列,可以包含其他标签或内容。
<th></th> 表示表格的表头的一个单元格,可以包含其他标签或内容。

1 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--1行1列的表格-->
    <table border="1"> <!-- border 表示设置表格边框的宽度,不推荐使用bother,以后会学到css,可以设置更好看的边框 -->
        <tr>
            <td>1行1列</td>
        </tr>
    </table>
    <hr>
    <!--1行2列的表格-->
    <table border="1">
        <tr>
            <td>1行1列</td>
            <td>1行2列</td>
        </tr>
    </table>
    <hr>
    <!--2行1列的表格-->
    <table border="1">
        <tr>
            <td>1行1列</td>
        </tr>
        <tr>
            <td>2行1列</td>
        </tr>
    </table>
    <hr>
    <!--2行2列的表格-->
    <table border="1">
        <tr>
            <td>1行1列</td>
            <td>1行2列</td>
        </tr>
        <tr>
            <td>2行1列</td>
            <td>2行2列</td>
        </tr>
    </table>
    <hr>
    <!-- 有表头的表格 -->
    <table border="1" width="600">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>3</td>
            <td>小明</td>
            <td>17</td>
        </tr>
        <tr>
            <td>5</td>
            <td>小黑</td>
            <td>16</td>
        </tr>
    </table>

</body>
</html>

2 合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table width="800" border="1">
        <tr>
            <!-- colspan 表示当前单元格[td,th]占据2列 -->
            <th colspan="2">form标签属性说明</th>
        </tr>
        <!-- tr>th*2 -->
        <tr>
            <th>属性</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>action</td>
            <td>设置当前表单的表单数据处理应用程序的url地址,默认值是当前url地址。</td>
        </tr>
        <!-- tr>td*2 -->
        <tr>
            <!--设置当前单元格,占据3行的空间  -->
            <td rowspan="3">method</td>
            <td>设置当前表单的HTTP提供方式,默认是get。</td>
        </tr>
        <tr>
            <td>get,以<b>查询字符串</b>的格式,把表单数据附加在url地址栏上提交数据</td>
        </tr>
        <tr>
            <td>post,以<b>数据包</b>格式,把表单数据附在HTTP网络请求体中提交数据</td>
        </tr>
        <tr>
            <td rowspan="4">enctype</td>
            <td>设置当前表单提交的数据格式</td>
        </tr>
        <tr>
            <td>application/x-www-form-urlencoded:默认值,以普通表达数据格式提交</td>
        </tr>
        <tr>
            <td><b>multipart/form-data</b>:以多种数据格式提交</td>
        </tr>
        <tr>
            <td>text/plain:以纯文本数据格式提交</td>
        </tr>
    </table>
</body>
</html>

3 表格嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table width="1680" align="center">
        <tr>
            <td>
                <table align="center" width="1024">
                    <tr>
                        <td><a href="">奥运首页</a></td>
                        <td><a href="">中国军团</a></td>
                        <td><a href="">赛程赛果</a></td>
                        <td><a href="">奖牌榜</a></td>
                        <td><a href="">诸强</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="1">
                    <tr>
                        <td width="300">
                            <table>
                                <tr>
                                    <td>全部赛程</td>
                                    <td width="20%">更多 > </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <ul>
                                            <li>中国对日本</li>
                                            <li>韩国对日本</li>
                                            <li>朝鲜对日本</li>
                                            <li>俄罗斯对日本</li>
                                        </ul>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <img src="goods.png" width="100%" height="250" alt="">
                        </td>
                        <td width="450">右</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
  • 早期的很多网页为了排版方便都是采用table布局(table标签来控制页面内容的排版),但是这种方式现在已经没有人使用了。而是改城了div标签+css样式来进行排版,这种方式更加容易入门,更加容易维护代码,更加美观好看。

标签:表格,Title,Day02,表单,HTML,提交,标签,2.3,数据格式
From: https://www.cnblogs.com/dream-ze/p/17222244.html

相关文章

  • Day02 2.3、HTML基础之标签的练习案例
    使用table+表单,把课堂上的form标签的代码,整理成以下格式(不要外观):<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></h......
  • Day01 1.2、HTML基础
    一、HTMLHyperTextMarkupLanguage,译作超文本标记语言,是一门标记语言,不是编程语言。所以它没有变量,也没有任何语句结构。所谓的超文本,就是超越了文本范畴的文档格......
  • Day02 2.1、HTML基础之列表标签
    一、列表标签列表是一种结构标签可以让网页的内容形成列表格式。列表标签在HTML中提供提供了4种:无序列表(UnorderList,ul)就是没有序号的,内容不分先后......
  • maui BlazorWebView+本地html (vue、uniapp等都可以) 接入微信sdk 开发 Android ap
       之前没接触过Androidmaui开发,这几天刚摸索,有些不合理的地方欢迎指出。首先添加微信sdk的绑定库  nuget包:Chi.MauiBinding.Android.WeChat 项目地址:http......
  • maui BlazorWebView+本地html 打包Android app 实现支付宝H5支付
     <BlazorWebViewx:Name="blazorWebView"HostPage="wwwroot/index.html"UrlLoading="blazorWebView_UrlLoading"BlazorWebViewInitialized="blazorWebView_Blazor......
  • HTML基础知识
    1.1DOCTYPE<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPEhtml>这句代码的意思是:当前页面采取的是HTML5版本来显示网页.1.2lan......
  • 【开源免费】使用Spring Boot和Html实现ChatGPT,1:亿还原,将就看
    highlight:a11y-dark简介前段时间写了一个Chatgpt的Java版SDK开源地址:chatgpt-java欢迎使用。但由于原来OpenAI并没有支持官网的chatgpt模型,所以使用起来相对没有官网......
  • HTML5智慧仓库Web3D可视化管理平台
    随着5G技术的不断普及,万物互联已经不再遥远。近年来,随着电商业务的飞速发展,仓储物流的压力也越来越大,电子商务的订单不同于一般的B2B订单,其中一个最大的特点就是碎片化严重......
  • HTML/XML字符转义对照表
    HTML/XML转义字符对照表包含符号、数学符号、希腊字母、重要的国际标志、ISO8859-1(Latin-1)字符集、特殊符号等。 为什么要用转义字符串?HTML中<,>,&等有特殊含义......
  • Markdown 利用HTML进行优雅排版
    Markdown利用HTML进行优雅排版我在使用Markdown整理文档的时候发现,Markdown本身对文本格式的排版很单一,只有编号、字体加粗、固定标题格式等一些基础的排版,使用不够灵活......