HTML重要标签重点及属性(表格表单列表)——之转生在异世界学前端

表格标签

table是用于定义表格的标签

tr是用于定义表格的行

td是用来定义表格的列,th是表头一般只有一个表头会加粗

表格属性border是设置边框值为1;1是有边框,

align设置居中对齐方式center,left,right

cellpadding设置文字跟单元格的间隔

cellspacing设置单元格直接的间隔        width表格的宽度

表格结构标签有<thead>(表格的头部区域一般是th)和<tbody>(表格的主体区域一般是td)

thead必须有tr标签,两个都是双标签

合并单元格的属性行合并rowspan="合并个数"     列合并colspan="合并个数"

(合并后需要删除掉合并的td)

    <table border="1">
        <tr>
            <th>单元格文字</th>
            <th>单元格文</th>
            <th>单元格文</th>
        </tr>
        <tr>
            <td>单元格文字</td>
            <td>单元格文</td>
            <td>单元格文</td>
        </tr>
    </table>

列表标签

1.无序列表

<ur>里面只能放li标签,li标签里面可以放任何标签

    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

2.有序列表

<ol>里面只能放li,li里面可以放任何标签使用跟ul一样

3.自定义列表

dl里面只能放dt,dd两个标签dt和dd没有数量限制一般是一个dt带多个dd

dt和dd里面可以放任何标签

    <dl>
        <dt>列表标题</dt>
        <dd>列表解释</dd>
        <dd>列表解释</dd>
        <dd>列表解释</dd>
    </dl>

表单标签

表单标签由表单域,表单控件(表单元素)和提示信息组成

表单域from用来实现用户信息的收集和传递,所有表单元素和提示信息要放到from里

    <form action="url地址" method="提交方式" name="表单名称">
        <!-- action是用来指定接受并处理表单数据的服务器程序的url地址
        method是用来设置表单数据的提交方式,属性为get和post
        name是表单的名称 -->
    </form>

表单元素

input表单

input是输入的意思用来收集用户信息,input里面必须写的属性是type,type定义表单元素的形式

input标签也叫输入框属性 value输入框默认内容    placeholder输入框提示内容灰色

    <form action="a.php" method="get">
        用户名:<input type="text" placeholder="请输入用户名"><br>
        密码:<input type="password" name="pwd" maxlength="9"><br>
        <!-- 单选按钮radio可以实现多选一 -->
        <!-- name 是表单元素名字如果要实现多选一必须给单选按钮设置相同的名字才能实现 -->
        性别:<label for="nan">男</label><input type="radio" id="nan" name="sex" value="男">
        <label for="nv">女</label><input type="radio" id="nv" name="sex" value="女"><br>
        <!-- 多选按钮checkbox 复选框 可以实现多选 -->
        爱好:吃饭<input type="checkbox" checked name="ai"> 睡觉<input type="checkbox" name="ai"> 打豆<input type="checkbox"
            name="ai"><br>
        <!-- 注册(提交)按钮把表单数据发送到服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮button -->
        <input type="button" value="获取短信验证码">
        <!-- 上传文件file -->
        上传头像<input type="file">
        <br>
        <!-- label标签用来绑定一个表单元素点击label的文本会鼠标定到对应表单元素,增加用户体验 -->
        <!-- for和表单元素的id对立属性相同 -->
        <label for="sex">男<input type="radio" id="sex"></label>

    </form>

效果图    

select下拉表单

下拉表单只有select和option两个标签

    <form action="">
        籍贯:<select name="" id="">
            <!-- selected="selected"默认选项 -->
            <option>北京</option>
            <option selected>河南</option>
            <option>河北</option>
            <option>四川</option>
        </select>
    </form>

textarea文本域

    <form action="">
        <!-- textarea文本域  -->
        文本域:
        <textarea cols="20" rows="5">你好萨芬大师傅大三发
        </textarea>
    </form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/544177.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux操作系统中关于用户管理的操作

创建新用户 useradd 【选项】 用户名 在/etc/passwd中以追加的方式在passwd的最后一行添加用户信息。 可以使用命令tail -n 1/etc/passwd查看文件的最后一行内容。 ls /home/首先/home/这是普通用户的家目录&#xff0c; 在/home/下会有一个跟用户名同名的家目录&#xf…

Arrow, 一个六边形的 Python 时间库

文章目录 Arrow, 一个六边形的 Python 时间库第一部分&#xff1a;背景介绍第二部分&#xff1a;库是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第…

Mac 软件清单

~自留备用~ Macbook用了几年之后, 512G的内置硬盘有些紧张了, 这几天总是提示空间不足, 就重装了下系统, 重装之后竟然不记得有些软件的名字和下载链接, 特此记录 Office 办公套件 直接从微软官网下载Office 安装包https://officecdnmac.microsoft.com/pr/C1297A47-86C4-4C1F…

前端三剑客 —— JavaScript (第六节)

目录 内容回顾 BOM编程 DOM编程* document对象 document对象的属性 document对象的方法 DOM对象节点 操作DOM对象内容 操作DOM对象的属性 --- DOM对象.属性名称 --- DOM对象[属性名称] --- 调用系统API &#xff08;Application Program interface&#xff09;&#…

汇编语言知识点整理(应付考试专用,想学习找其他的)

1 基础知识 1.1 信息在计算机内部的表示和存储 1.1.1 信息存储的基本概念 信息在计算机内部是以二进制数据的形式在存储器中存取的。介绍两个基本概念&#xff1a; 位&#xff08;Bit&#xff09; 计算机中最小的数据单位&#xff0c;一位有0、1两状态。Bit是计算机中最小…

对常见FTP客户端/服务器的调查与分析

前言 主要是想看看常见的服务器和客户端是如何实现协议中要求的功能的&#xff0c;。 比如RF959要求的记录结构&#xff08;Record Structure&#xff09;、页结构&#xff08;Page Structure&#xff09;、Block Mode、Compress Mode&#xff0c;看起来就很抽象。 实测发现…

【算法】回溯:与递归,dfs的同质与分别,剪枝与恢复现场的详细理解,n皇后的回溯解法及算法复杂度分析。

目录 ​编辑 1.什么是回溯 2.关于剪枝 3.关于恢复现场 4.题目&#xff1a;二叉树的所有路径&#xff08;凸显恢复现场&#xff1a;切实感受回溯与深搜&#xff09; 问题分析 ①函数设置为&#xff1a;void Dfs(root) ②函数设置为&#xff1a;void Dfs(root,path) 解题思想&…

Day101:漏洞发现-漏扫项目篇NucleiYakitGobyAfrogXrayAwvs联动中转被动

目录 特征类-三方Poc调用&模版Poc调用 案例1&#xff1a;单点对某特征点进行安全评估 Goby-综合类 Nuclei-较综合类 Afrog-特征类 Yakit-可特征可综合 案例2&#xff1a;新型对某特征点进行安全评估 综合类-主动漏扫&中转联动&被动联动 案例1&#xff1a;…

给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

手术执行器添加摄像头 手术执行器文件夹surgical_new内容展示如何添加单目摄像头下载现成的机器人环境文件启动仿真环境 手术执行器文件夹surgical_new内容展示 进入src文件夹下选择进入vision_obliquity文件夹 选择launch 有两个可用gazebo中rviz展示的launch文件&#xff0…

当我们使用git 上传码云的时候报错:Push rejected Push to origin/master was rejected

在我们推送成果去git&#xff08;码云&#xff09;的过程中报错&#xff1a;Push rejected Push to origin/master was rejected 这个问题是我们在推的时候被拒绝了 控制台报错&#xff1a; 18:46:19.665: [zengqingqingandluoxuwen] git -c credential.helper -c core.quote…

软件无线电安全之GNU Radio基础 -上

GNU Radio介绍 GNU Radio是一款开源的软件工具集&#xff0c;专注于软件定义无线电&#xff08;SDR&#xff09;系统的设计和实现。该工具集支持多种SDR硬件平台&#xff0c;包括USRP、HackRF One和RTL-SDR等。用户可以通过GNU Radio Companion构建流程图&#xff0c;使用不同…

嵌入式学习54-ARM3(中断和时钟)

知识零碎&#xff1a; import &#xff0c;定义表示这是一个外部变量的标号&#xff0c;不是在本程序定义的 export &#xff0c;表示本程序里面用到的变量提供给 其他模块 调用的。 按键模块中&#xff0c;K1和K6所连接的高电阻&#xff0c;根据外部变化变化 …

HiveQL练习(hive3.x)

零、准备工作 1. Hive环境安装 参见搭建Hive 3.x环境&#xff08;CentOS 9 Hadoop3.x&#xff09; 2. 准备数据 在虚拟机HOME目录创建如下文件内容&#xff1a; cd /root vi emp.csv内容如下&#xff1a; 7369,SMITH,CLERK,7902,1980/12/17,800,,20 7499,ALLEN,SALESMAN…

SpringMVC--获取请求参数 / 域对象共享数据

目录 1. SpringMVC 获取请求参数 1.1. 通过ServletAPI获取 1.2. 控制器方法形参获取 1.3. RequestParam 1.4. RequestHeader 1.5. CookieValue 1.6. 通过POJO获取请求参数 1.7. 解决获取请求参数的乱码问题 2. 域对象共享数据 2.1. 三大域对象 2.2. 准备工作 2.3. S…

8:系统开发基础--8.5:系统设计、8.6:系统测试 、8.7:软件维护 、8.8:软件质量保证、8.9:软件文档

转上一节&#xff1a; http://t.csdnimg.cn/X0GjWhttp://t.csdnimg.cn/X0GjW 8.5&#xff1a;系统设计 考点1&#xff1a;系统设计概述 1&#xff1a;软件设计的任务与活动 体系结构设计&#xff1a;定义软件系统各主要部件之间的关系。 数据设计&#xff1a;基于E-R图确定…

免费的 ChatGPT 网站(六个)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、insCode二、讯飞星火三、豆包四、文心一言五、通义千问六、360智脑 现在智能…

专题十三、预处理器

预处理器 1. 预处理器的工作原理2. 预处理指令3. 宏定义3.1 简单的宏3.2 带参数的宏3.3 # 运算符3.4 ## 运算符3.5 宏的通用属性3.6 宏定义中的圆括号3.7 创建较长的宏3.8 预定义宏3.9 C99 中新增的预定义宏3.10 空的宏参数3.11 参数个数可变的宏3.12 __func__ 标识符 4. 条件编…

Leetcode 416.分割等和子集

题目 思路 使用0-1背包的思路。 之前0-1背包是说有N个物品&#xff0c;一个最大承重重量为W的背包。每个物品都有各自的重量和value,要让放入背包中物品价值总和最大。 这道题如何对应成0-1背包&#xff0c;看下面的分析。 背包的大小&#xff1a;要想两个子集元素和相等&am…

宝塔面板Docker+Uwsgi+Nginx+SSL部署Django项目

这次为大家带来的是从零开始搭建一个django项目并将它部署到linux服务器上。大家可以按照我的步骤一步步操作&#xff0c;最终可以完成部署。 步骤1&#xff1a;在某个文件夹中创建一个django项目 安装django pip install django创建一个django项目将其命名为djangoProject …

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼

【板栗糖GIS】如何给微软拼音输入法加上小鹤双拼 用过在注册表里新建的方法&#xff0c;结果弄完没有出现小鹤双拼方案&#xff0c;想到了自己写reg表 目录 1. 新建一个txt文件 2. 把.txt的后缀名改成.reg&#xff0c;双击运行 3. 在设置中找到微软输入法-常规 1. 新建一个…
最新文章