【CSS】高级元素:列表、表格、表单

列表

  • 列表的元素
    • 有序列表:ol、li
    • 无序列表:ul、li
    • 自定义列表:dl dt dd
  • 自定义列表
    • dl
      • 定义列表,直接元素只能是dt、dd
    • dt
      • 列表中每一项的项目名
    • dd
      • 列表的每一项的具体描述

表格

  • table
    • 表格
    • border-collapse:collapse; (塌陷的意思)
  • tr (table row)
    • 表格中的行
  • td (table data)
    • 行中的单元格
  • thead
    • 表头
  • tbody
    • 表格的主体
  • tfoot
    • 表格的页脚
  • caption
    • 表格的标题
  • th
    • 表格表头的单元格
  • 单元格合并
    • 跨行合并
      • colspan(clumn span)跨列合并
      • rowspan(row span)跨行合并

表单

  • 常见的表单元素

    • form
      • 表单,一般情况下,其他表单相关元素都是他的后代元素
    • textarea
      • 多行文本框
    • select、option
      • 下拉选择框
    • button
      • 按钮
    • label
      • 表单元素的标题
    • input:
      • text:文本输入框
      • password:文本输入框,密文
      • radio:单选框
      • checkbox:复选框
      • button:按钮
      • reset:重置
      • submit:提交表单数据给服务器
      • file:文件上传
      • readonly:只读
      • disabled:禁用
      • checked:默认被选中
        • 只有当type为redio或checkbox时可用
      • autofocus:当页面加载时,自动聚焦
      • name:名称
      • value:取值

    *其他取值查看文档:*https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

    常见的boolean属性有disabled、checked、readonly、multiple、autofocus、selected,只需要写上名称就代表这个属性

  • 表单按钮

    • 普通按钮type = button
    • 重置按钮type = reset
    • 提交按钮type = submit
    • 也可以使用button来实现
      • type = button
      • type = reset
      • type = submit
  • input和label的关系

    • label的for属性绑定input的id属性
    • radio中name值相同的才具备单选功能
    • type类型设置为checkbox成为多选框
      • 同一种类型的checkbox,name值要保持一致
  • textarea的使用

    • textarea的常用属性
      • cols:列数
      • rows:行数
    • 缩放的CSS设置
      • 禁止缩放:resize:none;
      • 水平缩放:resize:horizontal
      • 垂直缩放:resize:vertical;
      • 水平垂直缩放:resize:both;
  • select和option的使用

    • option是select的子元素,一个option代表一个选项
    • select常用属性
      • multiple:可以多选
      • size:显示多少项
    • option常用属性
      • selected:选中
  • form常见属性

    • form通常作为表单元素的父元素
      • form可以对整个表单作为一个整体进行操作
      • 表单重置或表单提交
    • form常见的属性如下:
      • action
        • 用于提交表单数据的请求接口
        • method
          • 请求方法(get、post)默认为get
        • target
          • 在什么地方打开URL

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react diffing算法及函数柯里化

一.deffing 算法 (1)虚拟DOM中Key的作用: 当状态中的书韩剧发生变化时,react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟 DOM】与【旧虚拟DOM】的diff比较,比较规则如下 : a.旧…

RIP协议(路由信息协议)

一、RIP协议概述 RIP协议(Routing Information Protocol,路由信息协议)是一种基于距离矢量的内部网关协议,即根据跳数来度量路由开销,进行路由选择。 相比于其它路由协议(如OSPF、ISIS等)&#…

C++ | string类学习 | string的常见接口使用方式

目录 为什么要学习string类? C语言中的字符串 OOP面向对象编程 两个面试题 标准库中的string类 string类了解 string类的文档介绍 总结 string类的常用接口说明 string类对象的常见构造 string类对象的容量操作 size()和length() clear() resize(size…

【JVM】关于JVM垃圾回收

文章目录 🌴死亡对象的判断算法🌸引用计数算法🌸可达性分析算法 🌳垃圾回收算法🌸标记-清除算法🌸复制算法🌸标记-整理算法🌸分代算法🌸哪些对象会进入新生代&#xff1f…

idea2023.2.1 java项目-web项目创建-servlet类得创建

如何创建Java项目 1.1 方式1: 1.2 方式: 1.3 方式 如何创建web项目 方式 ----- 推荐 如何创建servlet类 复制6 中得代码 给servlet 配置一个路径 启动tomcat 成功了

Netty进阶

三. Netty 进阶 1. 粘包与半包 1.1 粘包现象 服务端代码 public class HelloWorldServer {static final Logger log LoggerFactory.getLogger(HelloWorldServer.class);void start() {NioEventLoopGroup boss new NioEventLoopGroup(1);NioEventLoopGroup worker new Ni…

时序预测 | Python实现VMD-CNN-LSTM时间序列预测

时序预测 | Python实现VMD-CNN-LSTM时间序列预测 目录 时序预测 | Python实现VMD-CNN-LSTM时间序列预测预测效果基本介绍模型描述代码设计预测效果 基本介绍 VMD-CNN-LSTM 是一种混合深度学习模型,结合了变分模态分解(VMD)、卷积神经网络(CNN)和长短期记忆网络(LSTM)的…

C#,简单,精巧,实用的按类型删除指定文件的工具软件

点击下载本文软件(积分): https://download.csdn.net/download/beijinghorn/89059141https://download.csdn.net/download/beijinghorn/89059141 下载审核通过之前,请从百度网盘下载(无积分):…

7 X 24h智能安全运维再升级!Fortinet 全面集成全新 FortiGuard SOCaaS

数字化时代网络安全威胁层出不穷,网络犯罪分子的狡诈攻击手段不断翻新,传统安全防御手段亟需进化。更为棘手的是,网络安全专业人才的匮乏,让众多企业陷入安全运营的困境。为了有效应对这一挑战,Fortinet全新推出FortiG…

i++的理解

package com.example.elasticsearch;public class Test1 {public static void main(String[] args) {int i 10;i i;System.out.println(i);} }以上代码输出为10,为何? 这个问题涉及到Java中的后缀递增运算符(i)的工作原理。当你…

【Python如何使用requests+re库进行简单爬虫实例应用】

1、安装requests库 (1)直接winR输入cmd进入命令行界面,执行命令:pip install requests (2)再Pycharm中,’File’-’Settings’-’Python interpreter’-’’-搜索’requests’-’install package’下载,如下图所示 2、实例&…

UE4几个常用节点链接

UE4几个常用节点链接 2017-12-02 12:54 1. 流光材质(及uv平铺次数) 2. 跑九宫格 3.闪光3。1 粒子闪烁效果 4.图案重复5.平移扭曲 6.溶解 刀光的uv滚动图片源或采样节点属性里改成clamp无后期发光光晕anistropic 各向异性高光法线图 法线图叠加 blendangle orrectedNo…

3083. 字符串及其反转中是否存在同一子字符串

说在前面 🎈不知道大家对于算法的学习是一个怎样的心态呢?为了面试还是因为兴趣?不管是出于什么原因,算法学习需要持续保持。 题目描述 给你一个字符串 s ,请你判断字符串 s 是否存在一个长度为 2 的子字符串&#xf…

springboot Guacamole

SpringBoot集成 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/PO…

something

表示媒体&#xff1a; 为了加工、处理和传输感觉媒体而人为研究、构造出来的一种媒体。有各种编码方式&#xff0c;文本编码、图像编码、声音编码 表现媒体&#xff1a; 进行信息输入和输出的媒体。键盘、鼠标、扫描仪、扬声器、打印机。 感觉媒体&#xff1a; 直接作用于人的感…

您的计算机已被faust勒索病毒感染?恢复您的数据的方法在这里!

导言&#xff1a; 随着信息技术的快速发展&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒更是成为了一个不容忽视的威胁。近期&#xff0c;一种名为.faust的新型勒索病毒引起了广泛关注。该病毒以其独特的传播方式和恶劣的加密手段&#xff0c;给广大用户带来了极…

ChatGPT 之百万富翁

原文&#xff1a;The ChatGPT Millionaire 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 介绍 当我写下这些文字时&#xff0c;ChatGPT 已经成为有史以来增长最快的技术平台 - 仅用 5 天就达到了一百万用户。相比之下&#xff0c;Netflix 用了 3 年&#xff0c;Twit…

云计算与容器化

云计算和容器化是目前Java开发中的热门话题&#xff0c;它们提供了更高效、灵活和可扩展的方式来构建和部署应用程序。 云计算是指通过互联网提供计算资源和服务&#xff0c;包括计算能力、存储、数据库、网络等。在云计算平台上进行Java应用开发有很多好处。首先&#xff0c;…

【python】python新闻内容zhua取分析词云可视化(源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

echarts实现炫酷科技感的流光效果

前言&#xff1a; echarts实现炫酷科技感的流光效果 效果图&#xff1a; 实现步骤&#xff1a; 1、引入echarts,直接安装或者cdn引入 npm i echarts https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js 2、封装 option方法&#xff0c;第一个数据是折线数据&a…