HTML01——表格、列表、表单-前端开发

镇楼图Pixiv:_LM7_〇、表格标签生成表格媒介：表格作用：用一组标签生成一个表格table定义表格标签以下标签必须嵌套在table里tr定义表格中的行(row)td定义表格的单元格(data)th定义表头单元格，会使文...

镇楼图

Pixiv:_LM7_

〇、表格标签

生成表格

媒介：表格

作用：用一组标签生成一个表格

<table>定义表格标签

以下标签必须嵌套在table里

<tr>定义表格中的行(row)

<td>定义表格的单元格(data)

<th>定义表头单元格，会使文字加粗居中(head)

table表格属性

属性	作用
align	设置对齐方式 left表格向左对齐 center表格中央对齐 right表格向右对齐
border	设置表格边框的宽度，默认为0(px)
cellpadding	单元格内容与边框的距离(px)
cellspacing	单元格之间的距离(px)
width	规定表格的宽度(px或%)

<!DOCTYPE html>
<html lang=zh-CN>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<table border=1 align="center" cellpadding="30" cellspacing="0">
            <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
            <tr><td>Alice</td> <td>female</td> <td>15</td></tr>
            <tr><td>Wendy</td> <td>male</td> <td>19</td></tr>
        </table>
	</body>
</html>

注：一个表格元素内也可以放置其他的元素（图片、超链接等）

为了更好的表示一个表格的结构，我们可以用

<thead>、<tbody>标签

thead表示表头

tbody表示主体部分

<!DOCTYPE html>
<html lang=zh-CN>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<table border=1 align="center" cellpadding="30" cellspacing="0">
            <thead>
            	<tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
                    <td>Alice</td>
                    <td>female</td>
                    <td>15</td>
                </tr>
            	<tr>
                    <td>Wendy</td>
                    <td>male</td> 
                    <td>19</td>
                </tr>
            </tbody>
        </table>
	</body>
</html>

合并单元格

有的时候我们会用到合并单元格，HTML为td、th提供了两种属性实现合并

? 按方式来分：

? ■跨行合并rowspan="合并个数"（竖着来）

? ■跨列合并colspan="合并个数"（横着来）

<!DOCTYPE html>
<html lang=zh-CN>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<table border=1 align="center" cellpadding="30" cellspacing="0">
            <thead>
            	<tr>
                    <th bgcolor="grey" colspan="5">个人简历</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
                    <td>姓名</td>
                    <td> </td>
                    <td>性别</td>
					<td> </td>
					<td rowspan="4">照片</td>
                </tr>
            	<tr>
                    <td>婚姻状况</td>
                    <td> </td> 
                    <td>出生年月</td>
					<td> </td>
                </tr>
                <tr>
                    <td>民族</td>
                    <td> </td>
                    <td>政治面貌</td>
					<td> </td>
                </tr>
                <tr>
                    <td>身高</td>
                    <td> </td>
                    <td>学历</td>
					<td> </td>
                </tr>
            </tbody>
        </table>
	</body>
</html>

一、无序列表

媒介：列表

作用：布局页面

无序列表的每一项左侧自动生成一个点

生成无序列表

<ul>用来定义无序列表的框架

<li>用来定义列表中的项

注：ul标签里只能存在li标签，而li标签里可以放其他标签

<h4>
    特 销 水 果
</h4>
<ul>
    <li>苹果</li>
    <li>车厘子</li>
    <li>榴莲</li>
</ul>

二、有序列表

媒介：列表

作用：布局页面

有序列表的左侧自动生成一个序数

注：ol标签里只能存在li标签，而li标签里可以放其他标签

生成有序列表

<ol>用来定义有序列表的框架

<li>用来定义列表中的项

<h4>
    特 销 水 果 排 行 榜
</h4>
<ol>
    <li>苹果</li>
    <li>车厘子</li>
    <li>榴莲</li>
</ul>

三、自定义列表

媒介：列表

作用：布局页面

自定义列表能生成一个标题，下面具有和上面相关的项

<dl>用来定义自定义列表的框架

<dt>用来定义自定义列表中的首项

<dd>用来定义自定义列表中的其他项

<dl>
    <dt>友链链接</dt>
    <dd><a href="https://www.baidu.com">sick wolf</a></dd>
    <dd><a href="https://www.baidu.com">助教</a></dd>
    <dd><a href="https://www.baidu.com">***</a></dd>
</dl>

四、表单

媒介：表单

作用:具有一定格式可填写的表格，主要负责数据采集的功能

组成部分:

■表单域（也就是表单的框架）

■表单元素

■提示信息

生成表单域

<form>用来生成表单的框架

属性	作用
action	数据采集后所接受的服务器地址属性值为服务器url地址
method	表单数据的提交方式 get或post（暂时不用区分）
name	表单的名称，用来区分其他表单

<input>表单元素

input可以使得用户输入数据，其核心属性是type，type可以定义不同类型的input，type具有以下属性值

type属性值	含义
text	文本框，可以输入文本
password	密码框，可以输入密码，显示为·或*
radio	单选按钮
checkbox	复选框
hidden	隐藏的输入字段
submit	提交按钮，会将表单数据发送给服务器
image	图像形式的提交按钮
reset	将表单的数据进行重置
button	这一般由JS来搭配使用，暂时不用考虑
file	可以提供文件上传的功能

input其他属性

input光有一个type属性无法满足一些制定的要求，比如你只用input的type属性去写一个性别的选择框会出现很诡异的情况——每个都能选

<form action="data.html" method="POST" name="register">
    <!-- 单选按钮 -->
    性别<br/>少男 <input type="radio"> 少女 <input type="radio"> 
    保密 <input type="radio"><br/><br/>
</form>

为了解决这个问题，你需要学习更多属性来解决一些问题

input其他属性	作用
name	用来区分不同input，也可以解决上述单选按钮可以多选的问题
value	value为input的值，在text框能很显著的显示其作用但最主要是为后台人员所使用
checked	默认首次加载时是否被选中
minlength	规定输入字段的最小长度
maxlength	规定输入字段的最大长度

提交、重置数据

<input type="submit" value="可以将值输入至此来改变按钮显示的文本"/>

在页面点击提交后，会将数据提交到指定服务器，在form属性中可以将method改成get这样你就知道提交了什么数据

另外可以使用reset按钮将数据重置

<input type="reset" value="可以将值输入至此来改变按钮显示的文本"/>

五、<label>标签

媒介:label

作用:改善用户体验，只要点击被label绑定的内容，即可完成一些相应操作

具有以下属性

属性	作用
for	指定一个id，被指定的元素可以通过label来完成操作

<label for="read">点我也可以选中checkbox</label>
我已阅读条例<input type="checkbox" name="read" id="read"/>

六、下拉表单

媒介:下拉表单

作用:提供一个可以下拉的选择框，同时可以限制一些选择

<select>定义一个下拉表单的框架

<option>定义下拉表单的选项，在option内可以写上selected选项表示初始默认选中什么

<p>选择职业</p>
<select>
    <option>战士</option>
    <option>法师</option>
    <option>弓手</option>
    <option selected>...</option>
</select>

七、文本域

媒介:文本域

作用:是一种可以输入多行文本的文本框

<textarea>用来定义一个文本域

你也可以用rows、cols来指定这个文本域的长宽（但实际上是用CSS来定义的，可以不用记这个）

<textarea rows="5" cols="5">
	首次加载时的文本内容
</textarea>

END、例子——制作注册页面

<!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" width="300">
        <tr>
            <th align="center" colspan="2"><strong>注册页面</strong></th>
        </tr>

        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="boy"/><label for="boy">男</label>
                <input type="radio" name="sex" id="gal"/><label for="gal">女</label>
            </td>
        </tr>

        <tr>
            <td>生日<br/></td>
            <td>
                <input type="date">
            </td>
        </tr>

        <tr>
            <td>所在地区<br/></td>
            <td>
                <input type="text" name="locale">
            </td>
        </tr>

        <tr>
            <td>婚姻状况<br/></td>
            <td>
                <input type="radio" name="marry">未婚
                <input type="radio" name="marry">已婚
                <input type="radio" name="marry">离婚
            </td>
        </tr>

        <tr>
            <td>学历</td>
            <td>
                <select>
                    <option>---</option>
                    <option>初中</option>
                    <option>高中/中专</option>
                    <option>本科/大专</option>
                    <option>研究生</option>
                    <option>博士</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我介绍</td>
            <td>
                <textarea></textarea>
            </td>
        </tr>

        <tr>
            <td><br/></td>
            <td>
                <input type="checkbox" checked>我同意此白嫖指南
            </td>
        </tr>

        <tr>
            <td><br/></td>
            <td>
                <input type="submit" value="点击注册">
            </td>
        </tr>
    </table>
</body>

</html>