学习前端的第二天

最新推荐文章于 2024-08-14 12:45:22 发布

hp200105

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量64

点赞数

文章标签：前端学习 servlet

本文链接：https://blog.csdn.net/hp200105/article/details/126531919

版权

TML表格
表格由 <table> 标签来定义。每个表格都有若干行（由 <tr> 标签定义），每行被分为若干单元格（由 <td> 标签定义）。td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格常用标签

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格的单元
caption	定义表格的标题
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

表格常用属性

属性	值	描述
border	npx	设置表格的边框
width	npx, n%	设置表格的宽度
colspan	number	合并表格的列
rowspan	number	合并表格的行
align	right left center justify	表格在文档中的水平对齐方式
valign	top middle bottom baseline	表格在文档中的垂直对齐方式
cellpadding	npx	内容和边框之间的间距
cellspacing	npx	单元格之间的间距
bgcolor	颜色值	设置表格背景颜色
frame	void border above below hsides lhs rhs vsides	不显示外边框四周都显示显示上部的外边框显示下部的外边框显示上下的外边框显示左部的外边框显示右部的外边框显示左右的外边框
rules	none rows cols all	内边框将不被显示内边框将在行之间显示内边框在列之间显示内边框将被显示

表格实际效果

表格代码

<!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>
    <hr>
    <table border="1">
        <h2>流量调查表</h2>
        <tr>
            <th>总页面流量</th>
            <th>共计来访</th>
            <th>会员</th>
            <th>游客</th>
        </tr>
        <tr>
            <td>9756488</td>
            <td>9756</td>
            <td>738087</td>
            <td>43364677</td>
        </tr>
        <tr>
            <td>46776686</td>
            <td>85544</td>
            <td>69357</td>
            <td>568787</td>
        </tr>
        <tr>
            <td>7538087</td>
            <td>546774</td>
            <td>476897</td>
            <td>334545</td>
        </tr>
        <tr>
            <td>平均每人浏览</td>
            <td colspan="3">1.58</td>
        </tr>
    </table>
</body>
</html>

HTML表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等，这些元素，统称“控件”。

用于收集用户信息，进行人机交互操作。

表单使用表单标签 <form>来设置。

属性	描述
name	指定控件的名称，可重复
id	指定标签的唯一标识
value	输入（收集、设置）控件的值
checked	复选框（单选）组默认被选中的项目
selected	列表框组默认被选中的项目
src	图片框的图片来源
onclick	鼠标单击事件
disabled	禁用该控件
multiple	允许多选（适合普通列表框）

实际效果

<!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>
    <hr>
    <h2>American Metric电子产品调查表</h2>
    <form action="./03.html" method="post" autocomplete="on">
        姓名：<input type="text" name="" id="" placeholder="输入必须是2-6为字符" minlength="2" maxlength="6"><br>
        购买日期: <input type="text">年
        <select name="" id="">
        <option value="">1月</option>
        <option value="">2月</option>
        <option value="">3月</option>
        <option value="">4月</option>
        <option value="">5月</option>
        <option value="">6月</option>
        <option value="">7月</option>
        <option value="">8月</option>
        <option value="">9月</option>
        <option value="">10月</option>
        <option value="">11月</option>
        <option value="">12月</option>
        </select>月
        <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
        <option value="">8</option>
        <option value="">9</option>
        <option value="">10</option>
        <option value="">11</option>
        <option value="">12</option>
        <option value="">13</option>
        <option value="">14</option>
        <option value="">15</option>
        <option value="">16</option>
        <option value="">17</option>
        <option value="">18</option>
        <option value="">19</option>
        <option value="">20</option>
        <option value="">21</option>
        <option value="">22</option>
        <option value="">23</option>
        <option value="">24</option>
        <option value="">25</option>
        <option value="">26</option>
        <option value="">27</option>
        <option value="">28</option>
        <option value="">29</option>
        <option value="">30</option>
        <option value="">31</option>
        </select>日<br>
        电子邮件地址: <input type="email" placeholder="www.baidu.com"><br>
        手机号码: <input type="text" placeholder="必须是以13/15/18开头的11位数字"><br>
        您是否查看过我们的在线产品目录? <label for="nan"><input type="radio" name="sex" id="nan">是</label>
        <input type="radio" name="sex" checked>否<br>
        如果查看过,您对哪些产品有兴趣购买? &nbsp; (选择提供的产品):<br>
        <input type="checkbox">大屏幕电视
        <input type="checkbox">音频设备
        <input type="checkbox">视频设备
        <input type="checkbox">相机<br>
        在填写订单之前,您还有什么问题,意见或建议?<br>
        <input type="text"><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form> 
</body>
</html>

hp200105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端的第二天

表格由标签来定义。每个表格都有若干行（由标签定义），每行被分为若干单元格（由标签定义）。td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等，这些元素，统称“控件”。表单使用表单标签来设置。...
复制链接

扫一扫