HTML表格、列表、表单标签

已于 2022-08-22 21:45:12 修改
阅读量176 收藏
点赞数
文章标签： html
于 2022-07-12 21:36:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42501248/article/details/125752643
版权

HTML Day 2 —— 标签(下)

表格标签(显示数据)

基本格式

 <table> </table>  一个表格
 <tr> </tr>  一行
<td> </td> 一个单元格
 
 
 <table>  
        <tr><td>姓名</td>  <td>性别</td> <td> 年龄 </td></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>
​
<th> </th>: 表头单元格, 文字会加粗居中显示

表格属性(一般是CSS设置)

属性名属性值描述
aligncenter(居中) left(左对齐) right(右对齐)规定表格在网页的位置
border1 或者 ""规定表格单元是否拥有边框，""代表没有
cellpadding像素值规定单元格边沿与内容之间的空白，默认1像素，一般取0
cellspacing像素值规定单元格边沿之间的空白，默认2像素，一般取0
width像素值或百分比规定表格的宽度

表格属性插入位置

<body>
    <table align="center" border="1" cellpadding="8" cellspacing="0" width="">
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>
</body>

表格结构标签

<thead> </thead> 表格头部(第一行)
<tbody> </tbody> 表格内容
* 在vscode可以折叠,方便查看

合并单元格

rowspan: 该单元格跨行多少个单元格(竖着合并)
colspan: 该单元格跨列多少个单元格(横着合并)
删除多余单元格
​

列表标签(布局)

无序列表(重点)

<ur> </ur> 无序列表框架定义: 里面只能放<li> </li>,其余单独的数据或者<p> </p>等结构都是不允许的
<li> </li> 序列表项, 里面可以放任意元素和结构
自动添加 原点 ·
<ul>
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>番茄</li>
</ul>
​

有序列表(使用不多)

<or> </or> 有序列表框架定义: 里面只能放<li> </li>,其余单独的数据或者<p> </p>等结构都是不允许的
<li> </li> 序列表项, 里面可以放任意元素和结构, 显示顺序和输入顺序严格一致
自动添加排名1. 2. 3. 
<ol>
    <li>中国</li>
    <li>德国</li>
    <li>朝鲜</li>
</ol>

自定义列表(重点)

上面有小标题,下面是标题的补充和解释
<dr> </dr> 自定义列表框架,里面只能放<dt> </dt>和<dt> </dt>,其余单独的数据或者<p> </p>等结构都是不允许的
<dt> </dt> 自定义列表标题
<dd> </dd> 自定义列表标题内容
注意: <dt> </dt> 和 <dd> </dd> 是并列关系, 不是包含关系
<dl>
    <dt> 列表 </dt>
    <dd> 有序列表</dd>
    <dd> 无序列表</dd>
    <dd> 自定义列表</dd>
</dl>

表单标签(用户注册，调查问卷)

表单域

<form> </form> 定义表单域
后面的属性一般要和后端配合使用
表单域属性属性值作用
actionURL地址表单网址
methodget / post表单提交方式
name名称指定表单域名称,用于区分一个网页多个不同的表单域

表单元素/控件（重点）

input表单元素

< input type=" " /> : 单标签, 用户可输入

type可取值描述
button定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）,比如 "验证码获取"
checkbox定义复选框。比如"爱好"
file定义输入字段和 "浏览"按钮，供文件上传。比如"QQ头像上传"
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。 比如"性别"
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 比如"用户名"
input属性属性值描述
name用户自定义内容标识表单项元素名称，单选和复选框的name必须一样，便于后台处理
value用户自定义内容规定input元素的值，便于后台处理，有些type会默认显示到界面
checkedchecked单选和多选框可以设置默认选中
maxlength正整数规定输入字段的最大长度
<label> </label>: 绑定表单元素,单击表单元素即可选中,增加用户体验
<label for="sex">  男 </label>
<input type="radio" name="sex" id="sex" />
input的id属性必须和label的for属性相等

select表单元素（籍贯，地区等，下拉表单）

模板：
<select>  
    <option> 北京 </option>
    <option> 上海 </option>
    <option> 重庆 </option>
</select> 
* 可以在option属性指定默认选项  <option selected="selected"> </option>  类似input 单复选框的checked="checked"

textarea表单元素（建议，留言，评论等，文本域，多行文本）

<textarea cols="50" rows="5">  一行50个字符，显示5行，实际用CSS改变大小
    默认文字
</textarea>

综合案例

<!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>
    <h4> 青春不常在, 抓紧谈恋爱 </h4>
    <table>
        <tr> <!-- 第1行 -->
            <td> 性别 </td>
            <td>
                <input type="radio" name="sex" id="man" /> 
                <label for="man"> <img src="images/man.jpg" /></label>  男
                <input type="radio" name="sex" id="woman" /> 
                <label for="woman"><img src="images/women.jpg" /> </label>  女<br>
            </td>
        </tr>
        <tr> <!-- 第2行 -->
            <td> 生日 </td>
            <td>
                <select>  
                    <option selected="selected"> --请选择年份 </option>
                    <option> 1999 </option>
                    <option> 2000 </option>
                    <option> 2001 </option>
                    <option> 2002 </option>
                </select>
                <select>  
                    <option selected="selected"> --请选择月份 </option>
                    <option> 1 </option>
                    <option> 2 </option>
                    <option> 3 </option>
                    <option> 4 </option>
                </select>
                <select>  
                    <option selected="selected"> --请选择日 </option>
                    <option> 1 </option>
                    <option> 2 </option>
                    <option> 3 </option>
                    <option> 4 </option>
                </select><br>
            </td>
        </tr>
        <tr> <!-- 第3行 -->
            <td> 所在地区 </td>
            <td>
                <select>  
                    <option> 北京 </option>
                    <option> 上海 </option>
                    <option selected="selected"> 重庆 </option>
                </select> <br>
            </td>
        </tr>
        <tr> <!-- 第4行 -->
            <td> 婚姻状况 </td>
            <td>
                <input type="radio" name="marital status" />已婚 
                    <input type="radio" name="marital status" checked="checked" />未婚
                    <input type="radio" name="marital status" />离婚
                    <br />
            </td>
        </tr>
        <tr> <!-- 第5行 -->
            <td> 学历 </td>
            <td>
                <input type="text" name="xueli" value="幼儿园" /> <br />
            </td>
        </tr>
        <tr> <!-- 第6行 -->
            <td> 喜欢的类型 </td>
            <td>
                <input type="checkbox" name="interest" /> 妩媚的 <input type="checkbox" name="interest" /> 可爱的 <input type="checkbox" name="interest" />小鲜肉 <br>
            </td>
        </tr>
        <tr> <!-- 第7行 -->
            <td> 自我介绍 </td>
            <td>
                <textarea >say Hi~</textarea><br>
            </td>
        </tr>
        <tr> <!-- 第8行 -->
            <td>  </td>
            <td>
                <input type="submit" value="免费注册"> <br>
            </td>
        </tr>
        <tr> <!-- 第9行 -->
            <td>  </td>
            <td>
                <input type="button" value="我同意注册条款和会员加入标准"> <br>
            </td>
        </tr>
        <tr> <!-- 第10行 -->
            <td>  </td>
            <td>
                <a href="#" target="_blank">我是会员,立即登录</a><br>
            </td>
        </tr>
        <tr> <!-- 第11行 -->
            <td>  </td>
            <td>
                我承诺
                <ul>
                    <li>年满18岁, 单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
    
</body>
</html>
魚玉菊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML Email
青崖梦
06-02 900
带格式的邮件，其实就是一张网页，正式名称叫做HTML Email。它能否正常显示，完全取决于邮件客户端。大多数的邮件客户端（比如Outlook和Gmail），会过滤HTML设置，让邮件面目全非。 我发现，编写HTML Email的窍门，就是使用15年前的网页制作方法。下面就是我整理的编写指南。 1. Doctype 目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。 <!DOCTYPE htm
html 表格标签 表单标签 列表标签
奥特蛋的博客
04-19 1376
表格标签 1.表格框架 标签 描述 table 定义表格 tr 行 td 列 th 表头标签 caption 表格标题 2.表格属性 属性名 含义 常用属性值 border 设置表格的边框(默认border="0"无边框) 像素值 cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2像素) cellpading 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素) width 设置表格的宽度 像素值 h
html简介和常用标签
sinat_41132860的博客
12-01 322
目录   html 格式 文件标签 排版标签: 块标签 文字标签 清单标签 图形标签 链接标签  表格标签  html html(Hyper Text Markup Language)是网页描述语言,使用html可以制作出简单的网页(可以用css,jacvascript修饰成美观的网页) html是一种标记语言, 是超文本标记语言的缩写 (Hyper Text Mark...
HTML表格表单以及列表
lh11223326的博客
03-31 1458
标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的，都有行，列，单元格，表头等等，但是Excel毕竟还是专业，不像HTML既不支持排序又不支持求和，还不支持很多数学计算，只能用来展示数据。HTML常用的图片标签和超链接标签-CSDN博客HTML常用文本标签-CSDN博客：表示表格，表格的所有内容需要写在和
HTML标签之表格和表单元素
知识点沉淀包括不限于前端
01-20 1137
HTML标签之表格和表单元素 1.表格标签 表格由<table>标签来定义； 每个表格均有若干行（由 <tr> 标签定义） 每行被分割为若干单元格（由 <td> 标签定义） 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 表格Table HTML表格表头: 表格的表头使用标签进行定义；大多数浏览器会把表头显示为粗体居中的文本。 HTML带有标题的表格: 表格的标题用captio
HTML列表标签、表格标签、表单标签
叶子与海的博客
09-16 1532
1.列表标签 有序列表 无序列表 自定义列表 2.表格标签 基本结构 完整结构 3.表单标签 form标签 input系列标签 下拉列表 文本域 label标签
HTML的列表标签，表格table和表单标签
m0_66239735的博客
07-27 936
名词1名词1解释1...名词2名词2解释1名词2解释2...
HTML—列表、表格、表单
weixin_48719464的博客
11-30 1232
标签：dl 嵌套 dt 和 dd，dl是定义列表，dt是定义列表的标题，dd是是定义列表的描述 / 详情注意事项：dl 里面只能包含 dt 和 dddt 和 dd 里面可以包含任何内容。
HTML 表单 表格 列表
YOUEZ的博客
11-30 1532
HTML 表格 表单 列表 HTML 表单用于搜集不同类型的用户输入，简而言之，就是用来搜集用户数据的。 HTML表单都是存在于<form ></form>标签里面的。 表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 这些东西都具有一个交互性的特点。
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2264
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
html表格表单.pptx
11-20
介绍html表格表单元素，这也是前端比较重要的内容。学了之后你可以用标签简单做一个课程表。还有调查问卷等等
HTML标签（下）（表格+列表+表单）
07-12
表单标签 HTML表单是指在网页中用于收集用户输入信息的表单。HTML表单使用标签定义，表单元素包括、、等。 标签 标签用于定义表单中的输入框。input标签有多种类型，例如text、password、checkbox、radio等。例如...
html表单（表格）
07-15
表单标签 table form
HTML表格布局实际使用详解
09-28
HTML表格布局是网页设计中的一种基础元素，尤其适用于数据展示和表单输入。虽然现代网页设计倾向于使用CSS布局，但在特定场景下，表格仍然具有其不可替代的优势。本篇文章将深入探讨HTML表格的实际使用和布局计算。 ...
HTML表格与表单.ppt
05-02
在本节中，我们学习了HTML表格与表单的基础知识，包括HTML文档结构、列表、表格和表单等等。这些基础知识是学习HTML的基础，我们将在后续章节中继续学习更多的HTML知识。 在学习HTML时，需要注意一些重要的细节，...
html 关闭信息窗口
cuisidong1997的博客
07-14 344
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 935
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 219
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1378
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
HTML标签学习指南：列表、表格、表单和语义化标签
本文将详细介绍HTML基础标签的学习，包括列表标签、表格标签、表单标签、语义化标签和字符实体等。 一、列表标签 列表标签是HTML中用于定义列表的标签，包括有序列表、无序列表和自定义列表。列表标签的应用场景...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值