HTML列表、表格、表单

1.列表

列表分类:无序、有序、定义

2.无序列表(unordered list)

ul嵌套li,ul是无序列表。li是列表条目。

ur标签里面只能包含li标签。

li里面可以包含任何内容。

3.有序列表(ordered list)

<ol>

        <li>11111</li>

        <li>2222</li>

        <li>333333</li>

    </ol>

4.定义列表

<dl>

        <dt>列表标题</dt>

        <dd>列表内容</dd>

    </dl>

列表内容默认缩进。

definition:定义

<dt>(definition title)定义了列表的标题, <dd> (definition description)定义了描述内容。

5.表格基本用法

 <table border="0.1">
    <tr>
        <th>姓名</th>
        <th>年您</th>
        <th>升高</th>
    </tr>
     <tr>
        <td>amy</td>
        <td>18</td>
         <td>188</td>
     </tr>
    <tr>
         <td>mike</td>
        <td>17</td>
         <td>187</td>
    </tr>
    <tr>
        <td>linlin</td>
         <td>16</td>
         <td>186</td>
    </tr>
    <table>   

作用:让代码更清楚明了。对浏览器显示没什么用。

 <table border="0.1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年您</th>
            <th>升高</th>
        </tr>
    </thead>
     <tbody>
        <tr>
            <td>amy</td>
            <td>18</td>
            <td>188</td>
        </tr>
     </tbody>
     <tfoot>
        <tr>
            <td>mike</td>
            <td>17</td>
            <td>187</td>
        </tr>
        <tr>
            <td>linlin</td>
            <td>16</td>
            <td>186</td>
        </tr>
</tfoot>
    <table> 

6.合并单元格

rowspan代表rownspan,row ,英文行的意思

colspan代表columnspan,column,英文列的意思

注意:

  1. rowspan 属性通常用在 <tbody> 中的数据行上,而不是 <tfoot>
  2. <tfoot> 标签应该在所有数据行之后,并且通常不用于继续数据行的合并。

7.表单

input基本标签

    <!-- 输入什么就显示什么,单行文本 -->
  文本框<input type="text">
  <br><br>
  <!-- 输入什么都以....的形式来显示。 -->
  密码框<input type="password">
  <br><br>
  单选框<input type="radio">
  <br><br>
  多选框<input type="checkbox">
  <br><br>
  文件框<input type="file">  

单标签

input占位文本

:提示信息。

文本框和密码框使用。

<input type="" placeholder="提示信息">

input单选框

上传多个文件:加属性multiple

code:选择文件夹<input type="file" multiple>

多选框checkbox

名字:<input type="checkbox" checked>懒羊羊

        <input type ="checkbox" checked>沸羊羊

        <input type="checkbox" >美羊羊

8.下拉菜单

select嵌套option

出现的选项在option后面加selected 或者不加selected。默认显示第一个。

羊村<select>
            <option selected>懒羊羊</option>
            <option>沸羊羊</option>
            <option>喜羊羊</option>
        </select>

9.文本域textarea(双标签)

<textarea>文字<textarea>

 <!-- 右下角都有拖拽功能,日后会禁用 -->
        <textarea>文本域 </textarea>
        <textarea>请输入文字</textarea>

10.label标签

作用:网页中某个标签的说明文本。

经验:用label标签绑定文字和表单控件关系,增大表单控件的点击范围。

使用方法两种:

 <label>
            文本框<input type="text">
        </label>
            <br>
            密码框<input type="password">
            <br>
            上传文件<input type="file" multiple>
            <br>
            <label>
            单选框<input type="radio" name="gender">男</label>
            <label>
                  <input type="radio" name="=gender">女
                </label>
                  <br>
            <!-- 下拉菜单 -->
            城堡<select>
                <option>灰太狼</option>
                <option>红太狼</option>
                <option>小灰灰</option>
            </select>
            <br>
            <!-- 文本域 -->
            <textarea>请输入文字</textarea>

注意:每一个<label></lable>只能适用于以上的一个,不能一起用

11.按钮

如果省略属性,默认功能提交。

单独写这个出来没有用,下面实例:

用户名<input type="text">
    <br><br>
    密码<input type="password">
    <br><br>
    <button type="reset">重置</button>

需要放在表单里面才能使用<form></form>

<form>
    用户名<input type="text">
    <br><br>
    密码<input type="password">
    <br><br>
    <button type="reset">重置</button>
    </form>

12.无语义的布局标签

<div>:独占一行,<p>是段落的

<span>:不换行。

小于符号<:less than

大于符号>:greater than

空格:nbsp

 <div>&nbsp;</div>
    <div>&lt;</div>
    <div>&gt;</div>

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

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

相关文章

OpenMesh 计算封闭网格体积

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 思路很是简单,就是计算一些四面体的有向体积(这些四面体均是基于网格中的三角形与原点组成的) ,至于体积的符号则来自于三角形是否指向原点方向来确定,即面片的法线方向(其中三角形的法线本身取决于顶点的顺序…

高频问题|如何给指定的表达式添加小括号避免优先级问题?

关注它&#xff0c;不迷路。 本文章中所有内容仅供学习交流&#xff0c;不可用于任何商业用途和非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请联系作者立即删除&#xff01; 1.问题 如题&#xff0c;如何给指定的表达式添加小括号避免优先级问题…

远程控制安卓手机:便捷、高效与安全的方法

在移动设备的领域里&#xff0c;远程控制安卓手机的能力也变得越来越重要。这种技术可以让我们在远程地点方便地操作手机&#xff0c;无论是处理紧急事务、帮助他人解决问题&#xff0c;还是仅仅为了享受科技带来的便利。本文将为你介绍2种便捷、高效且安全的方法&#xff0c;让…

MacOS通过命令行开启关闭向日葵远程控制的后台服务

categories: [Tips] tags: MacOS Tips 写在前面 经常有小伙伴问我电脑相关的问题, 而解决问题的一个重要途径就是远程了. 关于免费的远程工具我试过向日葵和 todesk, 并且主要使用向日葵, 虽然 MacOS 下要设置很多权限, 但是也不影响其丝滑的控制. 虽然用着舒服, 但是向日葵…

JS设计模式-透过现象看本质

JS设计模式-透过现象看本质 设计模式SOLID设计原则创建型构造器模式工厂模式 - 简单工厂工厂模式 - 抽象工厂&#xff08;开发封闭原则&#xff09;构造器和简单、抽象工厂的区别 单例模式原型模式 结构型装饰器模式适配器模式代理模式事件代理 - 事件冒泡虚拟代理 - 通过Image…

JAVA毕业设计136—基于Java+Springboot+Vue的房屋租赁管理系统(源代码+数据库)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootVue的房屋租赁管理系统(源代码数据库)136 一、系统介绍 本项目前后端分离&#xff0c;分为管理员、用户、工作人员、房东四种角色 1、用户/房东&#xff1a; …

开源博客项目Blog .NET Core源码学习(18:App.Hosting项目结构分析-6)

本文学习并分析App.Hosting项目中后台管理页面的_AminLayout.cshtml模版页面和登录页面。 _AminLayout.cshtml模版页面 后台管理页面中的大部分页面都使用_AminLayout.cshtml作为模板页面&#xff0c;如下图所示&#xff0c;后台页面的视图内容放置在表单中&#xff0c;使用la…

Java openrasp记录-01

例子1 https://github.com/anbai-inc/javaweb-expression 一个hook ognl、spel、MVEL表达式注入的例子 用的是asm5进行字节码修改 采用premain进行插桩&#xff0c;重写transform方法 expClassList是要hook的类&#xff0c;这里定义在MethodHookDesc 这里判断hook点通过类名…

Kafka 3.x.x 入门到精通(03)——对标尚硅谷Kafka教程

Kafka 3.x.x 入门到精通&#xff08;03&#xff09;——对标尚硅谷Kafka教程 2. Kafka基础2.1 集群部署2.2 集群启动2.3 创建主题2.4 生产消息2.4.1 生产消息的基本步骤2.4.2 生产消息的基本代码2.4.3 发送消息2.4.3.1 拦截器2.4.3.1.1 增加拦截器类2.4.3.1.2 配置拦截器 2.4.3…

RDD编程初级实践

参考链接 spark入门实战系列--8MLlib spark 实战_mob6454cc68310b的技术博客_51CTO博客https://blog.51cto.com/u_16099212/7454034 Spark和Hadoop的安装-CSDN博客https://blog.csdn.net/weixin_64066303/article/details/138021948?spm1001.2014.3001.5501 1. spark-shell…

JAVAEE—HTTPS和ssl证书

0[toc] 什么是HTTPS HTTPS 也是一个应用层协议. 是在 HTTP 协议的基础上引入了一个加密层. HTTP 协议内容都是按照文本的方式明文传输的. 这就导致在传输过程中出现一些被篡改的情况而HTTPS则是新采用加密的方式进行传输 为什么需要HTTPS 为什么要使用HTTPS呢&#xff1f;这…

【SpringCloud】LoadBalance负载均衡服务调用快速入门

【SpringCloud】LoadBalance负载均衡服务调用快速入门 文章目录 【SpringCloud】LoadBalance负载均衡服务调用快速入门1. 概述2. 引入依赖3. 配置、验证3.1 配置3.2 验证 1. 概述 官网地址&#xff1a;点击跳转 Spring Cloud LoadBalancer 是由 SpringCloud 官方提供的一个开…

2024高级卫生职称考试报名时间汇总

20地报名时间汇总&#xff0c;其他时间安排见图 上海&#xff1a;4.23-5.24 黑龙江&#xff1a;4.23-5.24 陕西&#xff1a;4.23-5.24 重庆&#xff1a;4.23-5.24 浙江&#xff1a;4.23-5.24 20地报名时间汇总 甘肃&#xff1a;4.23-5.24 江西&#xff1a;4.28-5.10 河北&#…

五一劳动节活动策划案怎么写?

分享一个五一劳动节活动策划万能模板&#xff0c;直接照着写就好。 一、活动主题&#xff1a; 五一户外露营Party 二、活动时间&#xff1a; 五一节当天&#xff0c;上午点至下午点 三、活动地点&#xff1a; 城市郊外的公园或大型绿地 四、参与人员&#xff1a; 公司员…

ChatGPT付费创作系统V2.8.4独立版 WEB+H5+小程序端 (新增Pika视频+短信宝+DALL-E-3+Midjourney接口)

小狐狸GPT付费体验系统最新版系统是一款基于ThinkPHP框架开发的AI问答小程序&#xff0c;是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。当前全民热议ChatGPT&#xff0c;流量超级大&#xff0c;引流不要太简单&#xff01;一键下单即可拥有自己的GPT&#xff01;无限多…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之六 简单进行人脸训练与识别

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之六 简单进行人脸训练与识别 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之六 简单进行人脸训练与识别 一、简单介绍 二、简单进行人脸训练与识别 1、LBPH…

政安晨:【Keras机器学习示例演绎】(十六)—— 用于图像分类的混合增强

目录 简介 设置 准备数据集 定义超参数 将数据转换为 TensorFlow 数据集对象 定义混合技术函数 可视化新的增强数据集 模型制作 1.使用混合数据集训练模型 2.在没有混合数据集的情况下训练模型 说明 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评…

BGP的基本配置

l 按照以下步骤配置BGP协议&#xff1a; 第1步&#xff1a;设备基本参数配置&#xff0c;AS内配置IGP确保内部网络连通性&#xff1b; l 配置IGP&#xff08;OSPF协议等&#xff09;路由解决peer对等体的源和目标IP之间连通性&#xff0c;确保peer之间TCP&#xff08;179&a…

SpringBoot学习之Redis下载安装启动【Mac版本】(三十七)

一、下载Redis 1、下载地址:Downloads - Redis 往下滑,找到Downloads区域,这里有若干版本,这里我们选择了7.0的稳定版本 2、我们下载的是redis-7.0.15.tar.gz,这是一个压缩包,我们双击解压这个压缩包,可以得到如下文件 二、安装Redis 1、我们进入redis根目录安装mak…

IDEA使用技巧(常用设置、快捷键等)

IDEA使用技巧 一、IDEA常用基本设置设置代码背景颜色/主题/字体Ctrl鼠标滚轮缩放字体大小设置字符编码左右两侧的Project&#xff0c;Structure&#xff0c;Maven等按钮消失新增类似sout,psvm的模版切换某个模块编译的JDK版本 二、常用快捷键CtrlAltT包裹代码Alt回车联想补全Ct…
最新文章