HTML表格与表单详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43323430/article/details/107618573

快速入门HTML（二）

前言提要
一、DOCTYPE标签
- 1、含义
- 2、HTML与XHTML
二、实体
三、表格
四、两个排版标签
五、表单
- 1、表单元素
- 2、表单域
练习

前言提要

本篇是对HTML常用知识的后半篇的介绍，上半篇请参考我的上一篇文章：快速入门HTML（一）
出于未知原因，我的HTML上半篇在博客里面甚至都搜不出来，咕咕猜应该是搜索引擎的问题吧，所以大家要看那篇文章的话只能找到咕咕的博客才能看了（其实咕咕也不清楚是不是给屏蔽了（小声bb），如果给屏蔽了，球球小伙伴告诉咕咕一声（哇的一声哭了出来）））话不多说，赶紧带小伙伴们体验完HTML的基本知识叭
在这里插入图片描述

一、DOCTYPE标签

1、含义

通过上一篇的学习，相信小伙伴们对HTML的基本结构已经十分清晰了，但是在上一篇中只讲了html、head、body等标签各自代表的意义，却没有讲到开头的DOCTYPE标签是个啥玩意，今天就带大家将HTML结构所缺漏的知识补全，准备好了就开始冲了嗷！！！

首先，让我们来看一下一个HTML所具备的基本元素，在DW（Dreamweaver）编辑器创建一个HTML文件，话不多说，上图！！
在这里插入图片描述
相信小伙伴们对于HTML基本结构里面的各个标签都有了大概的认识。而咕咕想补充一下，这里的文档声明，是用来声明文档遵循的规范，告知浏览器通过此规范来解析此页面中的代码。其实，HTML文档的声明在以前并不是大家看上去那么简洁的，小伙伴们应该都听说过HTML5或者H5等名词，而上图中HTML文档声明就是HTML5的文档声明。

为了让小伙伴们感受到HTML5声明文档的简洁，咕咕找到了HTML4.01的文档声明语句，小伙伴们感受一下
在这里插入图片描述
看到这么长一串的文档声明，是不是顿时觉得HTML5也太友好了叭！！！对的，咕咕对于HTML4这种反人类的文档声明也是十分懊恼，不过，幸运的是，我们深处HTML5的时代，实在是心疼HTML4时期的前端开发人员阿。

2、HTML与XHTML

大家也看到了，从上半篇开始，咕咕的代码文档声明都是HTML5的规范，其实啊，咕咕想告诉小伙伴们，我们HTML的规范并不是很严格的，有一个东西比HTML更加规范，那就是XHTML。

听到这里，大家可能会感到困惑，XHTML和HTML到底有什么不同呢？哎，其实啊，它们都是HTML，本质都是HTML超文本标记语言，咕咕这么说小伙伴们应该就懂啦：“ XHTML = 规范 + HTML ”

是滴，它们之间的关系并不是小伙伴们所想的复杂，这里还要提一句：XHTML是满足W3C的HTML

什么意思呢？不知道大家有没有听说过这么一个组织，W3C（万维网联盟—World Wide Web Consortium），它的前身是欧洲核子研究组织，我们如今的万维网便是起源于它。W3C最重要的任务就是发布相关万维网的标准，而W3C标准也是如今万维网唯一标准，所以，越满足W3C标准的东西，就越规范，而XHTML就是如此。

当然，可能会有的小伙伴又有了新的疑惑：“咕咕，那既然XHTML更加标准，那我们还要遵循HTML的标准吗？为什么不直接遵循XHTML的标准写代码呢？”其实啊，我们回看之前的公式，XHTML无非就是比HTML的编写更加规范而已，其本质是一样的，那么，遵循XHTML的标准编写是不必要的，在日常开发学习中，一般遵循HTML的标准编写就够了，这不会影响到我们对XHTML的编写能力，XHTML只是在语法要求上更为严格，而我们的代码重要的是逻辑，语法严格与宽松的差异是不会影响到我们对整个HTML知识点的认知的，所以小伙伴们并不用纠结于XHTML和HTML的规范问题。

二、实体

刚听到这个名词的你可能会一脸懵逼，软件不都是虚的？咋还给我整了个实的来了捏？哎哟我去，HTML这么牛掰的嘛？

其实这也是咕咕第一次听到实体时的内心独白hhhh，那就让我们一起目睹一下实体的真容叭！！

首先，有这么一个需求，我们需要编写一本关于HTML的电子教材，例如：span标签的语法是这样的<p></p>，但是，直接将“<”和“>”符号直接编写在你的HTML代码里面时，在页面是展示不出来的，也就是说浏览器直接将p标签解析了，所以我们并不能看到“<”和“>”符号；那么这个时候，HTML里提供了一种方法，让我们能够将一些被浏览器当成HTML代码解析的符号书写在页面上，这种方法就是实体。

这里我给大家介绍最常用的三个实体，事实上还有很多。
空格： 

<：<

>：>

有了代表着空格、大于号、小于号这三个被浏览器解析的特殊字符的实体，就可以完成我们刚刚导出的那个需求啦

实体示例：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>

    <body>
            HTML教材：
            p标签的语法：&lt;p&gt;&lt;/p&gt;
    
    </body>
</html>

实体效果：
在这里插入图片描述

三、表格

表格使我们日常生活中使用十分频繁的一种存储数据的方式，表格能将杂乱的数据进行一个较好的整合归纳，并且十分直观，在学习中善于运用表格是十分能提高我们的效率的。那么接下来，就带大家了解一下如何使用HTML标签去构建属于我们自己的表格！！

1、相关标签

表格其实和列表有异曲同工之处，我们先来看看具体的标签含义

表格：<table>内容</table>，这个性质和ul、ol、dl是一致的，都是起到一个声明的作用

行：<tr>内容</tr>

单元格：<td>内容</td>，每一行由若干个单元格组成

每列的标题：<th>内容</th>

表格标题：<caption>内容</caption>

下面通过一个例子来体验一下表格的用法，表格示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <table border="1">
        <!-- 第一行 -->
        <tr>
            <!-- 单元格 -->
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <!-- 单元格 -->
            <td>令狐冲</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <!-- 单元格 -->
            <td>任盈盈</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <!-- 单元格 -->
            <td>任我行</td>
            <td>男</td>
            <td>55</td>
        </tr>
        <!-- 第无行 -->
        <tr>
            <!-- 单元格 -->
            <td>岳不群</td>
            <td>男</td>
            <td>50</td>
        </tr>
    </table>
</body>

</html>

表格效果：
在这里插入图片描述
心细的小伙伴可能会发现一个细节，那就是在table标签里面，咕咕加了border这么一个属性，并且属性值为1，那么这个1代表什么含义呢？border在英文中是指边框的意思，而数字1代表的是边框的类型，这就是为什么我们的表格是具有边框的。小伙伴们可以试试将border属性去掉，那么大家会发现原来的边框都消失了。除此之外，你也可以变换border属性的数字值，来尝试不同的边框。

2、对齐方式

对齐方式无非就是两种类型，水平对齐方式和垂直对齐方式，每种类型又分为若干种方式。
a) 水平对齐

语法：align="center/left/right"

注意：水平对齐的align这个属性是可以加在td标签和tr标签上面的，加在td标签控制的是一个单元格的对齐方式，而加在tr标签控制的是一整行单元格的对齐方式。
在这里插入图片描述

b) 垂直对齐

语法：valign="top/middle/bottom"

注意：垂直对齐的valign属性是可以加在td和tr标签上面的，控制的对象和align是类似的。
在这里插入图片描述

3、单元格间距和填充

单元格间距（cellspacing）：单元格和单元格距离，默认是2像素

单元格填充（cellpadding）：单元格和内容的距离，默认是1像素

注意：单元格间距和填充这两个属性必须加在表格的table标签上面，并且属性的值的单位为像素。科普一下：浏览器默认字体的边长为16像素，也就是说其实字体在浏览器中的上下左右长度都是一致的，为正方形。

下面来看一下这两个属性的具体用法，示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <table border="2" cellspacing="20" cellpadding="10">
        <!-- 行 -->
        <tr>
            <!-- 单元格 -->
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>令狐冲</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>任盈盈</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>任我行</td>
            <td>男</td>
            <td>55</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>岳不群</td>
            <td>男</td>
            <td>50</td>
        </tr>
    </table>
</body>

</html>

效果图：
在这里插入图片描述

4、合并单元格

合并单元格在我们的excel操作中是十分常见的，那么接下来我们就要学会使用代码进行单元格的合并哦

合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面

合并列(colspan)：把不同列合并起来，写在左边的单元格上面

合并单元格示例：

注意：简单来讲，rowspan和colspan属性的值是需要合并的单元格的数目（包括自身），但是还要特别注意，被合并了的单元格需要将其对应的html代码删除，否则会造成结构混乱。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <table cellspacing="0" cellpading="30" border="1" width="300" height="200">
        <caption>
            <h3>学生证</h3>
        </caption>
        <tr>
            <th align="center" colspan="4">优快云</th>
        </tr>
        <tr align="center">
            <td>姓名</td>
            <td>班级</td>
            <td>学号</td>
            <td rowspan="2">照片</td>
        </tr>
        <tr align="center">
            <td>咕咕</td>
            <td>php14期</td>
            <td>007</td>
        </tr>
    </table>
</body>

</html>

合并单元格效果：
在这里插入图片描述

四、两个排版标签

首先声明，这两个标签并没有语义

div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子

span标签：一般只用于存放文字--------存放文字

解读：其实div标签和css嵌套使用才能看得出效果，所以这里先不详细解释，等之后分享css的时候再和大家说明哈。span标签就是一个很普通的标签了，这个标签并不会独占一行，所以我们一般用来存放文字。

但是这里我们可以康康div标签和span标签存放文字有什么不同的区别，排版标签示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <div>离离原上草，</div>
    <div>一岁一枯荣。</div>
    <span>野火烧不尽，</span>
    <span>春风吹又生。</span>
</body>

</html>

效果图：
在这里插入图片描述
PS：我们可以看到，div是需要独占一行的，这是因为div是块元素的关系，而span标签是行元素。至于什么是行元素和块元素，大家可以这样理解，行元素是没有体积的，它只能靠文字撑起体积（这里不考虑元素之间转换的问题，只考虑原生属性），文字多高多长，它就有多高多长。而块元素生来就具有百分之一百的浏览器屏宽，浏览器界面有多宽，它就有多宽。所以我们看到，两个div标签并不能在一行同时待着，因为它们都占了百分百屏宽；而span标签就可以在同一行待着，因为文字多长，span标签就多长。

五、表单

1、表单元素

文本框

可输入明文内容的输入框----用户名（用户输入什么内容就是什么内容）

语法：<input type="text">

文本框示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="text">
</body>

</html>

文本框效果：
在这里插入图片描述
密码框

输入密文的输入框----密码（输入的内容会被实心圆代替）

语法：<input type="password">

密码框示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="password">
</body>

</html>

密码框效果：
在这里插入图片描述
单选框

只能选择一项----主要用于性别选择

语法：<input type="radio">

单选框示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <span>性别：</span>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
</body>

</html>

单选框效果：
在这里插入图片描述
PS：这里出现了一个新属性name，其实这个属性是表单需要上传数据时所必须的属性，只有存在name属性，表单才能够正常上传，我将两个name属性都设置为了同一个值sex，这是因为单选框只能出现一个数据，表单上传单选框的数据只能有一个，所以它们的name属性必须一致，这个属性名可以自定义，但必须一致。只有这样，才能实现单选的效果。有兴趣的同学可以尝试将它们的name属性值设置为不相同，你会发现两个框你都能选中，这是不符合我们的逻辑的。

复选框

可以选择多项 — 多应用于爱好选择

语法：<input type="checkbox">

复选框示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="checkbox" />足球
    <input type="checkbox" />排球
    <input type="checkbox" checked="checked" />篮球
</body>

</html>

复选框效果：
在这里插入图片描述
PS：我们可以看到，篮球是默认已经被选中了的，这和加在篮球复选框中的checked属性密切相关，checked控制的是复选框的选中与否的状态，checked属性的值一般写成自身即可，这是一种业内共识

文件上传

文件上传对于刚接触前端的我们并没有多大作用，等后期学到node.js的时候才会接触到，所以大家可以做一个了解

语法：<input type="file">

文件上传示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="file">
</body>

</html>

文件上传效果：
在这里插入图片描述

下拉框

通常用于选择籍贯或收货地址中的省市区

默认选中项使用属性selected=“selected”

下拉框示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <select>
        <option>江苏</option>
        <option>浙江</option>
        <option>安徽</option>
    </select>
</body>

</html>

下拉框效果：
在这里插入图片描述
PS：select标签起到声明的作用，声明这是一个下拉框，option标签是每一个选项的内容

文本域

可以输入很多的内容----qq的留言输入框

语法：<textarea></textarea>

文本域示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <textarea>这是一个文本域</textarea>
</body>

</html>

文本域效果：
在这里插入图片描述
普通按钮

点击不会有任何效果

语法：<input type="button" value="普通按钮">

属性：value，表示按钮内部显示的内容

普通按钮示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="button" value="这是一个普通按钮">
</body>

</html>

普通按钮效果：
在这里插入图片描述

提交按钮

用于提交表单的按钮，当按下这个按钮时，表单的数据就会发送到相应的服务器中

语法：<input type="submit">

提交按钮示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="submit" value="这是一个提交按钮">
</body>

</html>

提交按钮效果：
在这里插入图片描述
PS：value属性的值还是按钮内部会显示的内容，不过值得一提的是，提交按钮默认有value值“提交”

重置按钮

将表单的输入状态还原的按钮，当你觉得表单的信息填写错误时，可以按下此按钮，将表单的所有内容进行重置

语法：<input type="reset">

重置按钮示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <input type="reset">
</body>

</html>

重置按钮效果：
在这里插入图片描述
PS：重置按钮的默认value值就是“重置”

2、表单域

语法：<form></form>

作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址

第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性

注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素；特别提醒，上面所讲的所有表单元素标签都必须在form双标签里面。

表单域示例：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <form>
        用户名：<input type="text" name="username" />
        密码：<input type="password" name="password" />
        <input type="submit" />
    </form>
</body>

</html>