HTML 基础【2】 -- 表格标签 / 表单标签

在这里插入图片描述


请先学习往期内容:HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签


作业分析

上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一个作业:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
    <!-- Banner -->
    <div align="center">
        <img
            src="https://img-blog.csdnimg.cn/db53b5efbe4943a48b862bfc7a3826ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdWl1aW5nJ3M=,size_16,color_FFFFFF,t_70,g_se,x_16">
    </div>

    <hr>

    <!-- content -->
    <div>
        <div>
            <h2>HTML版本</h2>
            <p>
                &emsp;
                HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的
                <a href="#">TimBerners-Lee</a>
                发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。
                [5] HTML历史上有如下版本: [5]
            </p>
            <ul>
                <li>
                    HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
                </li>
                <li>
                    HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]
                </li>
                <li>
                    HTML 3.2:1997年1月14日,W3C推荐标准。 [5]
                </li>
                <li>
                    HTML 4.0:1997年12月18日,W3C推荐标准。 [5]
                </li>
                <li>
                    HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]
                </li>
                <li>
                    HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
                    [6]
                </li>
            </ul>

            <p>
                &emsp;
                HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。
            </p>

            <p>
                &emsp;
                总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
            </p>
        </div>

        <hr>

        <div>
            <h2>特点</h2>
            &emsp;
            超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下: [4]
            <ol type="1" start="1">
                <li>
                    简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 [4]
                </li>
                <li>
                    可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。 [4]

                </li>
                <li>
                    平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。 [4]

                </li>
                <li>
                    通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。 [4]
                </li>
            </ol>
        </div>
    </div>
</body>

</html>


优化版本:

  • 样式与ui分离
  • H5语义化
  • 禁止图片拖动
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>

    <style type="text/css">
        /* Global style start */
        html,body{
            margin: 0;
            padding: 0;
        }
        p {
            text-indent: 2em;
        }
        /* end */


        /* Entire paragraph content style */
        .content{
            margin: auto;
            width: 768px;
        }


        /* Banner style start*/
        header{
            text-align: center;
            margin-top:50px;
        }
        header > img{
            width: 400px;
        }
        /* end */
    
    
    </style>

<body>
    <div class="content">

        <!-- Banner -->
        <header>
            <img src="https://img-blog.csdnimg.cn/db53b5efbe4943a48b862bfc7a3826ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdWl1aW5nJ3M=,size_16,color_FFFFFF,t_70,g_se,x_16" draggable="false">
        </header>

        <hr>

        <!-- content - text -->
        <section>
            <h2>HTML版本</h2>

            <p>
                HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的
                <a href="#">TimBerners-Lee</a>
                发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。
                [5] HTML历史上有如下版本: [5]
            </p>
            <ul>
                <li>
                    HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
                </li>
                <li>
                    HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]
                </li>
                <li>
                    HTML 3.2:1997年1月14日,W3C推荐标准。 [5]
                </li>
                <li>
                    HTML 4.0:1997年12月18日,W3C推荐标准。 [5]
                </li>
                <li>
                    HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]
                </li>
                <li>
                    HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer
                    8及以前的版本不支持。
                    [6]
                </li>
            </ul>

            <p>
                HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。
            </p>

            <p>
                总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
            </p>
        </section>

        <hr>

        <section>
            <h2>特点</h2>
            <p>
                超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:[4]
            </p>
            <ol type="1" start="1">
                <li>
                    简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 [4]
                </li>
                <li>
                    可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。 [4]
                </li>
                <li>
                    平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。 [4]

                </li>
                <li>
                    通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
                    [4]
                </li>
            </ol>
        </section>
    </div>
    </div>
</body>

</html>



表格标签

表格

表格是行和列排列而成的结构,常用来组织和展现数据。下图展示了一个表格的基本形态,并对表格的常用元素给出了标注。


一般而言,表格中除了表格标题外,通常还包含如图所示的其他三类元素。其中,单元格是表格的最小单位,多个单元格的纵横排列形成了表格,由一个或多个单元格的横向排列形成了行,纵向排列则形成了列。

对应于 HTML 文档,一个表格由表格标签<table>、表格行标签 <tr>、单元格标签<td> 组成,还可以包括标题标签 <caption> 、列标题标签 <th>,通过这些标签能构建起 HTML 中的表格。



创建表格

标签说明选项
tabletable 元素用来定义表格,整个表格内容都包含在 <table></table> 标签之中必选
trtr 元素用来定义表格中的一行,它是单元格的容器,每行可以包含多个单元格,由 <tr></tr> 标签表示必选
tdtd 代表一个单元格,所有单元格都在 tr 元素内,每个单元格都由一对 <td></td> 标签必选
thth 也代表一个单元格,同时也表示该表格的表头。每个单元格都由一对 <th></th> 标签可选
captioncaption 代表为该表格的表格标题,位于 table 中的第一行可选

基本语法

<table>
  <caption>
    表格标题
  </caption>
  <tr>
    <th>1列表头</th>
    <th>2列表头</th></tr>
  <tr>
    <td>1行1列的内容</td>
    <td>1行2列的内容</td></tr>
  <tr>
    <td>2行1列的内容</td>
    <td>2行2列的内容</td></tr></table>

示例代码

<table border="1">
  <caption>
    xxx成绩表
  </caption>
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>70</td>
    <td>80</td>
    <td>70</td>
  </tr>
</table>

在这里插入图片描述



表格标签属性

<table> 标签属性

为了使创建的表格更加美观、醒目,可以对表格的属性进行设置,以达到诸如调整表格的颜色、单元格背景图像和背景颜色等目的。下表对每个属性对应的可取值和其作用作了解释。

属性可取值描述
alignleft、center、right定义表格相对周围元素的对齐方式
borderpixels定义表格边框的宽度
widthpixels、%定义表格的宽度
bordercolor颜色的表示方法定义表格边框的颜色
bgcolor颜色的表示方法定义表格的背景颜色
backgroundURL定义表格背景图像

下面通过一个简单的例子,演示设置 <table> 标签 align、border、width 这三个属性的作用

<table align="left" border="5" width="400">
    <caption>
        xxx成绩表
    </caption>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>70</td>
        <td>80</td>
        <td>70</td>
    </tr>
</table>

效果
在这里插入图片描述

<tr> 属性

标签定义 HTML 表格中的行,tr 元素可包含一个或多个 th 或 td 元素。 标签有如下一些常用属性,下表列出了每个属性、可取值及其简单描述,接下来介绍其中的 valign 属性。
描 述
top对内容进行上对齐
middle对内容进行居中对齐(默认值)
bottom对内容进行下对齐
baseline与基线对齐


<td> 属性

<td> 标签定义 HTML 表格中的标准单元格,td 元素中的文本一般显示为正常字体且左对齐。<td> 标签有以下一些常用属性,本文主要介绍跨行(rowspan)和跨列(colspan)两个属性。

下表是对其属性的可取值和作用作了说明。

属 性可 取 值描 述
alignleft、right、center、justify定义单元格中内容的水平对齐方式
valigntop、middle、bottom、baseline定义单元格中内容的垂直对齐方式
bgcolor颜色的表示方法定义单元格的背景颜色
heightpixels、%定义单元格的高度
widthpixels、%定义单元格的宽度
colspannumber定义单元格可横跨的列数
rowspannumber定义单元格可纵跨的行数
nowrapnowrap定义单元格中的内容是否折行

单元格跨行跨列的基本语法:

<td colspan="所跨列数">单元格内容</td>
<td rowspan="所跨行数">单元格内容</td>

示例代码

<table width="800" border="1" cellspacing="1" cellpadding="1">
    <tr>
        <td colspan="9" align="center">2020年度图书销售统计</td>
    </tr>
    <tr>
        <td rowspan="2" align="center">图书分类</td>
        <td colspan="2">一季度</td>
        <td colspan="2">二季度</td>
        <td colspan="2">三季度</td>
        <td colspan="2">四季度</td>
    </tr>
    <tr>
        <th width="60">销售量</th>
        <th width="80">销售额</th>
        <th width="60">销售量</th>
        <th width="80">销售额</th>
        <th width="60">销售量</th>
        <th width="80">销售额</th>
        <th width="60">销售量</th>
        <th width="80">销售额</th>
    </tr>
    <tr>
        <td align="center">小说</td>
        <td align="center">23521</td>
        <td align="center">¥559,940.00</td>
        <td align="center">18423</td>
        <td align="center">¥44,841.00</td>
        <td align="center">32125</td>
        <td align="center">¥829,870.00</td>
        <td align="center">25188</td>
        <td align="center">¥586,564.00</td>
    </tr></table>

效果
在这里插入图片描述



页面表格布局

页面可以说是构成网站的基本元素。当在网络中邀游时,轻点鼠标,就会呈现各种类型的网页。那么,页面精彩与否与什么因素相关呢?色彩的搭配、文字格式的变化、图片的处理等都是不可忽略的因素。除了这些不可忽略的因素外,还有一个非常重要的因素—页面布局。

使用 <div><table> 可进行页面布局。

万维网联盟 W3C 推荐用 <div> 元素和 CSS 来进行布局,而不是用表格进行页面布局,因为 table 元素本来的目的就是显示数据。不过纵观整个网络,仍然有不少网页在使用表格进行布局,而且有些采用 DIV+CSS 布局的页面,其页面内部的一些块也使用了表格进行微布局,此处不具体介绍了。



实例

效果
在这里插入图片描述

代码

<table border="1" width="500px" cellpadding="2">
        <caption>
            xxx 课程表
        </caption>
        <tr align="center">
            <td colspan="2">时间\日期</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr align="center">
            <td rowspan="2">上午</td>
            <td>8:30-10:00</td>
            <td>语文</td>
            <td>数学</td>
            <td>外语</td>
            <td>音乐</td>
            <td>体育</td>
        </tr>

        <tr align="center">
            <td>10:20-12:00</td>
            <td>数学</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>生物</td>
        </tr>

        <tr>
            <td colspan="7">&nbsp;</td>
        </tr>

        <tr align="center">
            <td rowspan="2">下午</td>
            <td>14:30-15:15</td>
            <td>体育</td>
            <td>语文</td>
            <td>历史</td>
            <td>政治</td>
            <td>化学</td>
        </tr>

        <tr align="center">
            <td>15:25-16:10</td>
            <td>音乐</td>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>语文</td>
        </tr>
    </table>



表单标签

表单是网页中一个特定的区域,或者说是一个特殊的元素。表单用来描述需要用户输入的页面内容,在用户输入具体信息后,提交到指定位置进行处理。

表单的应用范围非常广泛,可以这么说,所有需要将信息提交给服务器的地方都可以使用表单。例如用户注册、用户登录、网上搜索、购物车和调查问卷等。

下图显示的是一个典型的用户注册表单。
在这里插入图片描述



input元素

介绍

在表单元素中,input 元素代表的元素最多。除了文本内容以外,还可以表示密码框、单选、多选等元素。这些元素统一使用 标签标识,只是各自的类型不同。通过 type 属性可以控制元素的类型。

input 元素基本语法:

<input type="元素类型" name="表单元素名称" />

input 的常用属性如下表:

属 性可 取 值描 述
typetext、password、radio、checkbox、file、submit、reset、button、hidden、image定义 input 元素的类型
namename定义 input 元素的名称
valuevalue定义 input 元素的值
acceptmime_type仅在文件上传中使用 accept 属性,规定能够通过文件上传进行提交的文件类型
alignleft、right、top、middle、bottom仅能对图像类型使用 align 属性,定义图像的对齐方式
alttext仅能对图像类型使用 alt 属性,定义图像输入的替代文本
srcURL仅能对图像类型使用 src 属性,规定图像的 URL
checkedchecked仅能对单选按钮或复选框使用 checked 属性,定义此 input 元素是否默认被选中
disableddisabled禁用此 input 元素
sizenumber定义 input 元素的宽度
maxlengthnumber定义输入字段中字符的最大长度(注意和 size 的区别)
readonlyreadonly规定输入字段为只读


文本类表单元素

以文本框为代表的表单元素称之为文本类元素。示例如下:

<p>
    &nbsp;用户名:<input type="text" name="name" size="22" maxlength="16" />
</p>
<p>&nbsp;&nbsp;&nbsp;码:<input type="password" name="pass" size="22" /></p>
<p>
    <input type="submit" name="submit" value="登录" />
    <input type="reset" name="reset" value="重置" />
    <input type="button" name="exit" value="退出" disabled="disabled" />
</p>

显示
在这里插入图片描述



选择类表单元素

选择类表单元素只要是指单选框和复选框。使用选择类元素需要注意两点:

  • 使用相同的 name 属性来控制分组操作。
  • value 属性为提交值,显示值为标签后紧跟的内容。

示例代码

 性别:<input type="radio" name="sex" value="man" /><input type="radio" name="sex" value="woman" /><br />
 爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
 <input type="checkbox" name="hobby" value="football" />足球

显示效果
在这里插入图片描述



其他表单元素

input 元素中有几个特殊的元素和其他元素的使用不同。这里例举两个常用的文件上传元素和隐藏元素。

  • 文件上传:文件需要以流的形式上传,所以在表单 form 中需要设置上传方式 enctype。
  • 隐藏元素:该元素同文本类元素使用方法一致,区别在于该元素无法在文档中显示。

示例代码

  <p><input type="file" name="img" accept="image/gif, image/jpeg" /></p>
  <p><input type="hidden" name="imgdesc" value="bug截图" /></p>
  <p><input type="submit" name="upload" value="上传" /></p>

显示效果
在这里插入图片描述



非input元素

在表单中,有两个常用的表单元素不属于 input 元素,它们分别是下拉列表框(<select><option> 标签实现)和多行文本域(<textarea> 标签实现),接下来将介绍这两个表单元素。


下拉列表框

为了避免用户输入错误,节省页面空间,在可用输入项不是很多的情况下,会经常使用下拉列表框。前面填写用户注册信息页面中的出生年月,使用的就是下拉列表框。下拉列表框通过 <select><option> 标签实现,<select> 标签用于显示可供用户选择的下拉列表,其中的每个选项都由 <option> 标签标识。

下拉列表框中的内容可以单选或多选,当用户提交表单时,浏览器会将选定的项目合成一个单独的参数列表,随同 <select> 标签的 name 属性提交给服务器。

示例代码

<body>
    <h3>请提交就业相关信息</h3>
    <form>
        <p>
            学历:
            <select name="edu">
                <option value="0">初中</option>
                <option value="1">高中</option>
                <option value="2">大专</option>
                <option value="3" selected="selected">本科</option>
                <option value="4">硕士</option>
                <option value="5">博士</option>
                <option value="6">其他</option>
            </select>
            就业城市:
            <select name="city" multiple="multiple">
                <option value="A" selected="selected">北京</option>
                <option value="B">上海</option>
                <option value="C">深圳</option>
                <option value="D">广州</option>
                <option value="E">其他</option>
            </select>
        </p>
        <p><input type="submit" name="submit" value="提交" /></p>
    </form>
</body>

显示效果
在这里插入图片描述



多行文本域

多行文本域用于显示或输入多行的文本,通过 <textarea> 标签来实现。在文本域内可容纳无限数量的文本,通过 colsrows 属性来规定 textarea 元素的尺寸,其中 cols 属性定义了文本域内的可见列数,rows 属性定义了可见行数。

示例代码

<h3>简答题</h3>
      <textarea name="content" cols="30" rows="6" readonly="readonly">
           内容
      </textarea>
<p><input type="button" name="agree" value="同意" /></p>

显示效果
在这里插入图片描述



案例

显示效果
在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>个人信息提交</title>
</head>

<body>
    <p>姓名:<input type="text" name="username" /></p>

    <p>密码:<input type="password" name="password" /></p>

    <p>
        性别:
        <input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" /></p>
    <p>
        爱好:
        <input type="checkbox" name="like" value="sing" /> 
        <input type="checkbox" name="like" value="dancing" /> 
        <input type="checkbox" name="like" value="Learn" /> 
    </p>
    <p>
        照片:
        <input type="file" name="person_pic" />
    </p>
    <p>
        个人描述:
        <textarea name="about"></textarea>
    </p>
    <p>
        籍贯:
        <select name="select">
            <option value="成都">成都</option>
            <option value="广州">广州</option>
            <option value="四川">四川</option>
            <option value="上海">湖南</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交" />
        <input type="reset" name="" value="重置" />
    </p>
</body>

</html>
  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

我想养只猫 •͓͡•ʔ

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

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

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

打赏作者

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

抵扣说明:

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

余额充值