html常用标签(二)-表格-表单-列表

最新推荐文章于 2022-11-14 08:40:36 发布
最新推荐文章于 2022-11-14 08:40:36 发布
阅读量492 收藏
点赞数
分类专栏： html-标签 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57246351/article/details/122337703
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格,合并单元格,列表</title>
</head>

<body>
    <!-- 1.<table> </table> 是用于定义表格的标签。
    2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
    3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。 -->
    <!-- th--表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会-加粗居中 -->
    <!-- <caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后。您只能对每个表格定义一个标题。 -->
    <!--  在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。 -->
    <!-- cellpadding:规定单元边沿与其内容之间的空白,默认1像素 ,cellspacing:规定单元格之间的空白,默认2像素-->
    <h1>表格</h1>
    <h1>表格</h1>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
        <caption>
            <h2>小说排名</h2>
        </caption>
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>


    <!-- **合并单元格方式：**

**跨行合并**：rowspan="合并单元格的个数"     

​	最上侧单元格为目标单元格, 写合并代码

 **跨列合并**：colspan="合并单元格的个数"

​	最左侧单元格为目标单元格, 写合并代码

**合并单元格三步曲：**

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：<td colspan="2"></td>。删除多余的单元格。 -->
    <h1>合并单元格</h1>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <!-- 上面的td为删除掉的 -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- 上面的td为删除掉的 -->
            <td></td>
            <td></td>
        </tr>
    </table>

    <h1>列表</h1>
    <ul>
        <li>无序列表:里面只能包含li,没有顺序,使用较多,里面可以包含任何标签</li>
    </ul>
    <ol>
        <li>有序列表:里面只能包含里,有序,使用相对较少,li里面可以包含任何标签</li>
    </ol>
    <dl>
        <!-- 自定义列表:里面只能包含dt和dd,dt和dd里面可以放任何标签 -->
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

    <h1>综合案例</h1>
    <form action="">
        <table width="600" border="1">
            <caption>
                <h4>青春不常在，抓紧谈恋爱</h4>
            </caption>
            <!-- 第一行 -->
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" id="nan">
                    <label for="nan"> <img src="images/man.jpg"> 男 </label>
                    <input type="radio" name="sex" id="nv">
                    <label for="nv"><img src="images/women.jpg"> 女</label>
                </td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>生日:</td>
                <td>
                    <select>
                        <option>--请选择年份--</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                    </select>
                    <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                    <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>所在地区</td>
                <td><input type="text" value="北京思密达"></td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>婚姻状况:</td>
                <td>
                    <input type="radio" name="marry" checked="checked">未婚
                    <input type="radio" name="marry"> 已婚
                    <input type="radio" name="marry"> 离婚
                </td>
            </tr>
            <!-- 第五行 -->
            <tr>
                <td>学历:</td>
                <td><input type="text" value="博士后"></td>
            </tr>
            <!-- 第六行 -->
            <tr>
                <td>喜欢的类型:</td>
                <td>
                    <input type="checkbox" name="love"> 妩媚的
                    <input type="checkbox" name="love"> 可爱的
                    <input type="checkbox" name="love"> 小鲜肉
                    <input type="checkbox" name="love"> 老腊肉
                    <input type="checkbox" name="love" checked="checked"> 都喜欢
                </td>
            </tr>
            <!-- 第七行 -->
            <tr>
                <td>个人介绍</td>
                <td>
                    <!-- cols=“每行中的字符数” ，rows=“显示的行数”， -->
                    <textarea cols="20" rows="3">个人简介</textarea>
                </td>
            </tr>
            <!-- 第八行 -->
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#"> 我是会员，立即登录</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>

        </table>
    </form>
</body>

</html>
古迪红尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用标签---表格标签与表单标签
qq_52409560的博客
08-18 1641
简单的表格标签与表单标签介绍
HTML标签二（列表 表格 表单）
限定小码农的博客
06-29 162
列表标签 1.有序列表order list 格式： <ol> <li></li> </ol> 2.无序列表 type:circle，空心小圆圈 square,小方块 disc，默认的实心小圆圈 格式： <ul> <li></li> </ul> 3.
HTML-常用标签,列表,表单
weixin_47932956的博客
03-16 856
HTML--常用标签,列表,表单--学习笔记
HTML常用标签--整理篇
热门推荐
程序员小章的博客
09-13 1万+
HTML常用标签 文章目录HTML常用标签文本标签HTML格式化标签HTML图像标签HTML表格标签HTML表单标签 文本标签 常⽤文本标签如下： <hn>...</hn>标题标签，其中n为1–6的值。 <i>...</i>斜体 ... 强调斜体 <b>...</b> 加粗 <strong>...</strong> 强调加粗 <cite></cite&
HTML基础总结 列表、表格、表单标签（二）
zhxjjsj的博客
11-14 114
整体 dl ——>（包裹）每一行自定义列表的主题 dt ——>（包裹）每一个单元格 dd。name ： 分组，有相同的name属性单选框为一组，一组中同时只能有一个被选中。注意：dl标签中只能包含dt/dd标签，dt/dd标签中可以包含任何内容。1.（使用场景也比较的多，在多个一样的东西排列时，就会使用无序列表）场景：在网页中显示收集用户信息表的表单效果，例如：登录页和注册页。注意：ul标签中只能包含li标签，li标签中可以包含任何内容。注意：ul标签中只能包含li标签，li标签中可以包含任何内容。
HTML5常用标签-------学习分享
06-01
以上只是HTML5常用标签的一小部分，实际应用中还有许多其他标签，如表格`<table>`、多媒体`<audio>`和`<video>`、以及表单验证等。了解并熟练掌握这些标签，对于开发功能丰富、结构清晰的网页至关重要。通过深入学习...
20.2 HTML 常用标签
最新发布
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
某马机构----HTML常用标签.rar
09-28
在“某马机构----HTML常用标签.rar”这个压缩包中，我们可以期待找到关于HTML常用标签的学习资料，这对于那些希望自学前端开发的同学来说是一份宝贵的资源。 HTML标签通常由一对尖括号包围，比如`<html>`、`<head>`...
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
(完整)HTML5常用标签大全.doc
11-15
HTML5常用标签大全 HTML5中有许多标签用于定义不同的HTML元素，以便更好地组织和格式化网页内容。以下是在HTML5中常用的标签： 基本结构标签 * `<!DOCTYPE>`：定义文档类型 * `<html>`：定义HTML文档 * `<title>`...
Web-前端教程02 初遇 HTML 最基础的那些标签.zip
05-24
本教程“Web-前端教程02 初遇 HTML 最基础的那些标签”将引导你了解并掌握HTML的基本概念和最常用的元素标签。 首先，HTML由一系列的元素组成，这些元素通过标签来表示。每个元素都有开始标签和结束标签，例如`<p>`...
05-HTML表单.ppt
06-09
`<form>` 标签用于定义一个表单区域，它可包含多种输入元素，如文本框、密码框、单选按钮、复选框、下拉列表和按钮等。创建一个基本的表单的语法如下： ```html <!-- 输入元素在这里 --> ``` 对于文本输入，...
crud-nodejs-mysql:Crud-NodeJS-MySQL
05-24
11. **表单提交和验证**：前端HTML表单与后端Node.js之间的交互，包括数据验证以确保输入的有效性。 12. **响应式设计**：如果HTML界面考虑了不同设备的兼容性，可能涉及CSS框架如Bootstrap，以实现响应式布局。 ...
DIV+CSS网页布局基础-常用HTML标签介绍.rar
12-23
8. **表单标签**：`<form>`用于创建表单，`<input>`定义输入字段，`<textarea>`用于多行文本输入，`<select>`创建下拉列表，`<option>`定义选项，`<button>`定义按钮。 9. **CSS与Div结合**：`<div>`配合CSS可以...
第1天--(下午)HTML常用标签总结、HTML表单详解.rar
12-27
在“第1天--(下午)HTML常用标签总结、HTML表单详解.rar”这个压缩包中，我们很显然会看到关于HTML常用标签的总结以及HTML表单的深入解析。下面将对这两个主题进行详细的阐述。 首先，HTML常用标签是构建网页的基本...
HTML基本标签+表格基础+表单和框架
08-15
在“HTML基本标签+表格基础+表单和框架”这个主题中，我们将探讨这三个关键概念。 1. HTML基本标签：HTML标签是HTML语言的核心元素，它们告诉浏览器如何解析和展示页面内容。例如，`<html>`标签定义了整个文档的...
html实训-开发二部
05-21
1. HTML常用标签与网站开发流程： HTML（HyperText Markup Language）是构建网页的基础语言，它通过各种标签来描述页面内容和结构。常用的HTML标签包括`<head>`（定义头部信息）、`<body>`（定义主体内容）、`<h1>`...
HTML教程:收集的常用的HTML标签(5)
12-14
`<TD>` 标签定义了表格中的一个单元格。`ALIGN`, `BACKGROUND`, `BGCOLOR`, `BORDERCOLOR`, `BORDERCOLORDARK`, `BORDERCOLORLIGHT`, 以及 `VALIGN`属性与`<TBODY>`标签类似。`COLSPAN`和`ROWSPAN`用于合并单元格，...
HTML常用标签总结及用法实例
<!...定义了网页的主要内容部分，俗称身体。 ... ...3. <head>：定义网页的头部部分，包含、、、、等常用...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值