html第二天-表格、表单、列表

最新推荐文章于 2024-07-16 15:26:34 发布

陈平安_码来

最新推荐文章于 2024-07-16 15:26:34 发布

阅读量98

点赞数

分类专栏： html 文章标签： html 列表

本文链接：https://blog.csdn.net/qq_45898579/article/details/114374299

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html学习笔记2之表格表单列表

1 表格


```html
	<!-- align对齐方式 -->
    <!--border边界 -->
    <!-- cellpadding单元边沿与其内容之间的空白像素值 -->
    <!-- cellpacing像素值 -->
    <!-- width像素值或百分比 -->
<table >
        <tr>
            <td></td>
        </tr>
</table>

1.表格标签的基本使用以及表头单元格标签

table是表格最外层的，tr为行，th为表头单元格标签，td为行中单元格

2.表格相关属性(了解，以后会用css3做)

属性名	属性值	描述
align	left、center、right	对齐方式
border	1或""	规定单元格是否有边框""表示没有
cellpadding	像素值	单元边沿与其内容之间的空白，默认为1
cellspacing	像素值	单元格之间的空白，默认为2
width	像素或百分比	规定表格的宽度

3.表格结构标签

<thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr></thead>
<tbody><tr> <td>刘德华</td> <td>100</td> <td>男</td> </tr></tbody>

thead为表格头，tbody为表格机构

4.合并单元格

例子

<td colspan="5" >个人简介</td>

合并步骤
1.找到目标单元格（列合并最左边的，行合并最右边的）
2.在目标单元格中写入合并格数（列：colspan 行：rowspan）
3.删除多余单元格
例子：

个人简介
姓名：	性别	照片
婚姻状况：	出生年月：
民族：	政治面貌：
身高：	学历：

<table border="1" width="500" height="250" cellspacing="0" align="center">
        <tr>
            <td colspan="5" >个人简介</td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td width="50"></td>
            <td>性别</td>
            <td width="50"></td>
            <td rowspan="4" width="80">照片</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>
    </table>

2 列表

列表分为三种

1.无序列表

例子：

您喜欢的食物有哪些
臭豆腐
鸡腿
tips：
ul中只能放li
li中可以放任何元素

代码：

  	<ul>
        <li>您喜欢的食物有哪些</li>
        <li>臭豆腐</li>
        <li>鸡腿</li>
        <li>tips：</li>
        <li>ul中只能放li</li>
        <li>li中可以放任何元素</li>
    </ul>

2.有序列表

例子：

臭豆腐
鸡腿
粉丝

**代码：**

	<ol>
        <li>臭豆腐</li>
        <li>鸡腿</li>
        <li>粉丝</li>
    </ol>

3.自定义列表

例子：

我爱的食物

鸡腿

汉堡

**代码：**

	<dl>
        <dt>我爱的食物</dt>
        <dd>鸡腿</dd>
        <dd>汉堡</dd>
    </dl>

自定义列表一般dt为头，dd是对头的说明

3表单

1.表单域

	<form action="****" method="GET" name="name1">
    </form>

2.表单控件

具体查表

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>注册</title>
</head>
<body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <form action="">
    <table>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan">男<label for="nan"><img src="images/男.png" height="30"></label>
                <input type="radio" name="sex" id="nv">女<label for="nv"><img src="images/女.png" height="30"></label>
                <br>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="年" >
                    <option >--请选择年份</option>
                    <option >2000</option>
                    <option >2001</option>
                    <option >2002</option>
                </select>
                <select name="月" >
                    <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 name="日" >
                    <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>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" name="area" id="area" value="湖南"><br>
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marriage" id="weihun"><label for="weihun">未婚</label>
                <input type="radio" name="marriage" id="yihun"><label for="yihun">已婚</label>
                <input type="radio" name="marriage" id="lihun"><label for="lihun">离婚</label><br>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td>
                <input type="text" name="edu" value="幼儿园"><br>
            </td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="">妩媚的
                <input type="checkbox" name="">可爱的
                <input type="checkbox" name="">小鲜肉
                <input type="checkbox" name="">老腊肉
                <input type="checkbox" name="">都喜欢<br>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea name="selfintroduction"  cols="20" rows="2" >个人简介</textarea><br>
            </td>
        </tr>
        <!-- 注册按钮 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册"><br>
            </td>
        </tr>
        <!-- 同意注册 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和会员加入标准<br>
            </td>
        </tr>
        <!-- 会员链接登录 -->
        <tr>
            <td></td>
            <td>
                 <a href="https://www.w3cschool.cn/html/html-links.html" target="_blank">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 承诺书 -->
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

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

陈平安_码来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html第二天-表格、表单、列表

html学习笔记2之表格表单列表1表格```html     <table > <tr> <td></
复制链接

扫一扫