30天自学前端——第二天-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <table >                    <!--表格-->
        <tr>                    <!--table row，表示以下内容是一行-->
            <th>排名</th>       <!--table head，表示该内容是表头-->
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>          <!--table data，表示该内容是单元格里的数据-->
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="https://tieba.baidu.com/">贴吧</a>
                <a href="images/鬼吹灯.webp">图片</a>
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
            </td> 
        </tr>
    </table>
</body>
</html>

1.2 表格属性

实际上，如果只使用以上4个标签来书写表格，得到的结果应该是这样：

可以看见表格缺少边框线，而且紧靠页面左端。为了使表格更加灵活美观，引入以下几个表格属性：

（i）align：用于控制表格居左、居中或者居右，格式：<table align="left / center / right";

（ii）border：控制表格边框粗细，格式：<table border="1">;

（iii）cellspacing：控制表格各个单元格之间的空隙大小，格式同border；

（iv）cellpadding：控制表格数据和单元格边框之间的空隙，格式同border；

（v）width：控制表格宽度，格式同border。

对于（iii）（iv）两点读者可能感受不直观，可以尝试只设定边框存在，不设定cellspacing和cellpadding ：

效果如下：

可以看到表格数据之间其实是以多个小单元格的形式存在的，想要达到开头的效果，需要将单元格之间的空隙（cellspacing）设定为0，cellpadding和width则根据个人需要进行调整。

1.3 实践案例与表格快捷键

（图片摘自05-小说排行榜案例_哔哩哔哩_bilibili）

其实这个案例并不难，只是需要的表格行、列数都比较大，因此这里讲一下快捷键建立表格。

具体方法：table>tr*8(八行)>td*6(六列)

当然，也允许 th>td*6 的形式存在，灵活使用即可快捷建立一个表格，简略源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="https://tieba.baidu.com/">贴吧</a>
                <a href="images/鬼吹灯.webp">图片</a>
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>7</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

运行：

1.4 合并单元格与个人简历案例

单元格的合并分为跨行合并以及跨列合并

如图的个人简历，易知应该建立一个5行5列的单元格，但是第一行中的5个单元格全部合并，可以这样写：

其中，colspan=“X”意为从该单元格开始跨列合并共X个单元格（包括本身），由于后面的X-1个单元格被合并，因此在这一行中应该删去后面的X-1个<th></th>标签。

相应的，rowspan=“X”意为从该单元格开始跨行合并共X个单元格（包括本身），由于后面的X-1个单元格被合并，因此在这一列中应该删去后面的X-1个<th></th>标签，即后面的X-1个<tr></tr>中都删去一个<th></th>。

结合前面对属性的学习，可以尝试将空单元格的宽度设定下来，防止页面中空单元格显得过于狭小。

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" align="center" cellspacing="0" >
        <tr>
            <th colspan="5">个人简历</th>
        </tr>
        <tr>
            <th>姓 名：</th>
            <th width="100"></th>
            <th>性 &nbsp;别：</th>
            <th width="100"></th>
            <th rowspan="4" width="100">照片</th>
        </tr>
        <tr>
            <th>婚姻状况：</th>
            <th></th>
            <th>出生年月：</th>
            <th></th>
        </tr>
        <tr>
            <th>民 族：</th>
            <th></th>
            <th>政治面貌：</th>
            <th></th>
        </tr>
        <tr>
            <th>身 高：</th>
            <th></th>
            <th>学 历：</th>
            <th></th>
        </tr>
    </table>
</body>
</html>

2. 列表

2.1 无序列表

标签名：<ul></ul>（unordered list）

书写规范：

运行：

注意： <ul></ul>标签中只能含有<li></li>,不能直接含有<p></p>等其它标签，若有需求，可以将其写在<li></li>标签内部，即<li><p></p></li>形式

2.2 有序列表

标签名<ol></ol>（ordered list）

书写规范和注意事项同无序列表，输出样式略有不同。

2.3 自定义列表

用途：

每一列就是一个自定义列表。

标签名：<dl></dl>（definition list自定义列表），<dt></dt>（definition term自定义列表组），<dd></dd>（definition description自定义列表描述）

书写规范：

运行：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>我喜欢的明星</h3>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <ol>
        <li>abc</li>
        <li>cde</li>
        <li>efg</li>
        <li>ghi</li>
    </ol>
    <dl>
        <dt>支付方式</dt>
        <dd><a href="https://shop.lenovo.com.cn/help/bank_fq.html?pmf_source=P0000004381M0002">分期支付</a></dd>
        <dd><a href="https://shop.lenovo.com.cn/help/payments.html?pmf_source=P0000004381M0002">支付方式</a></dd>
        <dd><a href="https://shop.lenovo.com.cn/help/question-of-payment.html?pmf_source=P0000004381M0002">支付问题</a></dd>
    </dl>
</body>
</html>

只用html实现的结果并不好看，更优美的修饰方式在之后的CSS学习中会涉及到。

3. 表单

表单内容很多且易混，因此笔者做了一个表单知识树状表协助理解：

3.1 表单的构成

表单由三个部分构成，分别是：表单域、提示信息和表单控件

（图片摘自13-表单使用场景以及分类_哔哩哔哩_bilibili ）

3.2 表单域

表单域的定义由<form></form>标签来实现 form 标签里的内容可以被提交到服务器。

form有三个基本属性：

（i）action=“URL”；引号中间填写信息传递到的地方；

（ii）method=“ ”；引号中填写信息传递的方式，一般是get / post （get上传的信息易泄露）

（iii）name=“”；引号中填写自定义名称，name属性的用途是方便后端人员调用。

3.3 表单控件

表单控件需要写在<form></form>内。为了实现表单控件的各种功能，引入以下多个标签：

（1）<input />输入

input 标签是一个单标签，其又包含了多个属性：

（i）name属性：前面已经提到，name属性是为了方便后端人员调用，因此能写尽量写上。

（ii）value属性：与name属性类似，value属性也是后端人员调用的数据，用value=“”方式可以规定一个表单控件的默认值。

（iii）type属性：type包含以下几个属性：

（图片来自21-input之type属性普通按钮和文件域_哔哩哔哩_bilibili）

使用时的规范是：<input type="xxx" />

当type=“radio”时，input的name属性是必须要写的，并且属于同一个单选题范围内的多个单选选项的name要相同，这样才能实现单选。代码如下：

其中红框标记的区域是这里要格外注意的地方，其余的会在后面讲到。

运行：

当type=“checkbox”时，不写name属性也能实现复选。

当type=“text”时，输出的是一个文本框，里面可以给用户输入信息；

当type=“password”时，输出的也是一个文本框，与text不同的是，该文本框输入后会以掩码形式显示，即 · 或者 * ，一般用在密码输入框；

当type=“button”时，可以输出一个普通按钮，按钮上显示的字可以通过设定value属性的值来控制；

当type=“submit”时，可以输出一个提交按钮，同样可以根据value的值来控制其内容，不修改默认为“提交”；

当type=“image”时，可以输出一个图像样式的提交按钮，一般不提倡使用，这里不详述；

当type=“reset”时，可以输出一个重置按钮，点击后重置表单中的所有信息；

当type=“file”时，可以输出一个用于提交文件的按纽，点击后会自动打开资源管理器，选择文件后即可上传；

（iv）checked属性：在以前，注册账号等界面往往能看见“我已阅读下列文件”这一行小字，而这行字前面的框往往是默认勾选的，这就是checked属性的作用，在radio / checkbox 的input标签里写上checked=“checked”即可让前面的框默认为勾选。

（v）maxlength属性：用于规定输入的字符长度的最大值，不常用。

（2）<select></select>下拉表单

select 标签中包含<option>内容</option>标签，用于显示其可选选项。与 input 标签里的checked属性类似，select 标签里有selected属性，可以用来设定表单中默认显示的option。

在一个选择月份的下拉表单中可以这么书写：

（3）<textarea></textarea>

该标签的作用是产生一个大的文本输入框，支持多行输入是其与<input type="text"/>最大的区别

运行效果如下：

（4）补充：<label></label>

label标签是input标签定义标注，实际上不属于表单标签，但在实际应用中二者通常紧密结合。label标签用于指定一个表单元素，当点击label标签里面的内容时，就会转到其指定的表单元素上，从而增强用户体验。

使用时需要<input>标签进行配合，具体如下：

这样写出来的页面就可以实现：点击“妩媚的”三个汉字也能选中其前面的复选框。

3.4 表单实践案例

学习了以上的知识以后，就可以完成最简单的注册页面的编写了。

如上图所示，读者可以自行尝试。代码和会用到的图片附在下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <form action="xxx.php" method="post" name="form1">
        <table>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="sex" id="nan"/><label for="nan"><img src="images/man.jpg" />男</label>
                    <input type="radio" name="sex" value="sex" id="nv"/><label for="nv"><img src="images/women.jpg" />女</label>
                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option>--请选择年--</option>
                        <option>2005年</option>
                        <option>2004年</option>
                        <option>2003年</option>
                        <option>2002年</option>
                        <option>2001年</option>
                        <option>2000年</option>
                    </select>
                    <select>
                        <option>--请选择月--</option>
                        <option>1月</option>
                        <option>2月</option>
                        <option>3月</option>
                        <option>4月</option>
                        <option>5月</option>
                        <option>6月</option>
                        <option>7月</option>
                        <option>8月</option>
                        <option>9月</option>
                        <option>10月</option>
                        <option>11月</option>
                        <option>12月</option>
                    </select>
                    <select>
                        <option>--请选择日--</option>
                        <option>1日</option>
                        <option>2日</option>
                        <option>3日</option>
                        <option>4日</option>
                        <option>5日</option>
                        <option>6日</option>
                        <option>7日</option>
                        <option>8日</option>
                        <option>9日</option>
                        <option>10日</option>
                        <option>11日</option>
                        <option>12日</option>
                        <option>13日</option>
                        <option>14日</option>
                        <option>15日</option>
                        <option>16日</option>
                        <option>17日</option>
                        <option>18日</option>
                        <option>19日</option>
                        <option>20日</option>
                        <option>21日</option>
                        <option>22日</option>
                        <option>23日</option>
                        <option>24日</option>
                        <option>25日</option>
                        <option>26日</option>
                        <option>27日</option>
                        <option>28日</option>
                        <option>29日</option>
                        <option>30日</option>
                        <option>31日</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" value="如：北京" name="diqu"/>
                </td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="hunyin" id="weihun" checked/>
                    <label for="weihun"><strong>未婚</strong></label>
                    <input type="radio" name="hunyin" id="lihun"/>
                    <label for="lihun"><strong>离婚</strong></label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <input type="text" value="如：高中毕业" name="xueli"/>
                </td>
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="liketype" id="wumei"/>
                    <label for="wumei"><strong>妩媚的</strong></label>
                    <input type="checkbox" name="liketype" id="keai"/>
                    <label for="keai"><strong>可爱的</strong></label>
                    <input type="checkbox" name="liketype" id="xiaoxianrou"/>
                    <label for="xiaoxianrou"><strong>小鲜肉</strong></label>
                    <input type="checkbox" name="liketype" id="laolarou"/>
                    <label for="laolarou"><strong>老腊肉</strong></label>
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>自我介绍</textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="zhuce" value="免费注册"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox" name="zctk" checked/>我同意<a href="#">注册条款和会员加入标准</a></td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#">我是会员，立即登录</a></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h2>我承诺</h2>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>