HTML总结 2[转]

news2024/12/25 21:53:06

以下转载和参考自:HTML 表单。

1、表格  

 

 

 

  可以通过 CSS 设置表格的样式:

  如下为将上面table.lamp th,td样式中的padding注释掉,开启table.lamp中的padding的效果:

2、列表  

3、表单

  表单用于收集用户的输入,如下图所示,<form> 用来定义表单,表单中的元素有input 元素(如text文本输入、radio单选按钮、submit提交按钮)、单选按钮、文本输入框等。提交按钮用来向表单处理程序提交表单,表单处理程序通常是包含处理数据的页面,表单的 action 属性指定提交表单时执行的动作(表单处理程序),通常表单会被提交到 web 服务器上的网页,如果省略 action 属性,则 action 会被设置为当前页面。表单中的input元素必须指定name,否则提交的时候会忽略该输入元素。

  method指定使用的HTTP方法(GET或POST)。如果不指定method属性,默认采用的是GET,其它的还有target属性设置设置提交表单后在何处显示响应(默认为_blank在新选项卡,_self为在当前页面,其它值还有_parent、_top、framename),accept-charset设置表单使用的字符集编码(默认为使用页面字符集),autocomplete设置是否打开自动完成功能,即输入的时候是否显示用户的历史输入(默认为"on"即开启),enctype指定HTTP请求的Content-Type,默认为application/x-www-form-urlencoded。novalidate属性设置为"novalidate"的话表示提交表单时不对其进行验证,即不会验证表单的输入。

  以下为一些其它input元素的示例,以及相关属性的说明(其中一些属性是布尔属性,不需要设置其值,如readonly、disabled):

   

  以下为下拉列表、文本输入框、按钮、datalist(html5新增)这些表单元素的使用示例:

  如下为上面代码的效果,其中图1为点击按钮时的效果,图2为点击最后一个input元素时的效果: 

  元素的formaction属性会覆盖form的action属性,formaction属性适用于 type = "submit" 以及 type = "image", 其规定当提交表单时处理该输入元素的URL。如下所示有两个提交按钮并且其提交动作不同:

XHTML

  XHTML是以 XML 格式编写的 HTML,它是更严格更纯净的 HTML 版本,它与 HTML 4.01 几乎是相同的。HTML中对于一些书写错误也能正确标识,比如缺少关闭标签,属性值无引号等,但是对于一些小型设备,其往往缺乏解释“糟糕”的标记语言的能力,所以就必须使用XHTML。XHTML中的文档类型声明<!DOCTYPE ....>是必须的,<head>、<title> 以及 <body> 也是必须的。

响应式网页设计

  响应式网页设计(WRD,Responsive Web Design)指的是,能够以可变尺寸传递网页,即一个网站能够针对多个类型的终端(PC、移动、平板)提供不同的显示样式,而不是针对每个终端制作一个特定的版本。

  BootStrap是一个前端开发工具包(前端开发框架),基于html、css和javascript,主要用于构建响应式网站,并且是移动优先原则。BootStrap也提供了很多css样式和js插件,使得web开发更加便捷,这块与vue相比的话,BootStrap的缺点是,如果使用BootStrap现成的插件进行开发的话会很快,但是想对于组件进行订制就不太方便,自定义标签或部件的话需要一些额外的代码或查找额外的插件,而vue则适合开发自定义功能和交互比较多的web。 目前最新的BootStrap 5已经从jQuery依赖切换到了使用原生的JavaScript。 

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

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

相关文章

咨询师需要具备同理心

做咨询的这么多年&#xff0c;经常会听到这样的一些槽点&#xff1a; “也不知道怎么想的&#xff0c;压根就不是正常的思考逻辑&#xff01;” “上次就是这样&#xff0c;跌到同一条沟里了吧&#xff1f;” “如此简单的事情&#xff0c;推进起来为什么这么难&#xff1f;…

IDC发布中国低代码市场报告,得帆独立低代码市占率第一

近日&#xff0c;国际数据公司IDC公布了《2022下半年中国低代码与零代码软件市场跟踪报告》&#xff08;以下简称“报告”&#xff09;。 2022下半年中国低代码与零代码软件市场规模为15.6亿元人民币&#xff0c;得帆低代码PaaS平台凭借过硬的产品优势和深厚的客户实践经验&am…

RK3399平台开发系列讲解(内核调试篇)网络调试工具

🚀返回专栏总目录 文章目录 一、dstat 工具介绍二、例如dstat 进行网络问题调试三、ss 命令查看 TCP 详细信息四、netstat 查看TCP详细信息沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 本篇将介绍网络的相关工具。 一、dstat 工具介绍 当设备产生问题,而我们又…

情人节定制:HTML5 Canvas全屏七夕爱心表白特效

❤️ 前言 “这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”&#xff0c;七夕节表白日&#xff0c;你要错过吗&#xff1f;如果你言辞不善&#xff0c;羞于开口的话&#xff0c;可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效&#xff0c;全屏的爱心和…

使用Netplan建立Linux网络,简便的声明性方法

除了周围网络环境的复杂性之外&#xff0c;由于使用的技术堆栈和工具范围很广&#xff0c;Linux 网络可能会令人困惑。网桥、绑定、VRF 或路由的配置可以通过编程、声明、手动或自动化方式使用 ifupdown、ifupdown2、ifupdown-ng、iproute2、NetworkManager、systemd-networkd …

Python土力学与基础工程计算.PDF-土的三项组成

5.3 Python求解 Python 求解代码如下&#xff1a; 1. # 定义已知参数 2. G_s 2.7 # 比重 3. w 0.2 # 含水量 4. e 0.6 # 孔隙比 5. gamma_w 9.81 # 水的重度 6. 7. # 根据公式计算饱和度 8. S_r G_s * w / e 9. print("饱和度为", S_r) 10. 11.…

UbuntuDDE 23.04发布,体验DeepinV23的一个新选择

UbuntuDDE 23.04发布&#xff0c;体验DeepinV23的一个新选择 昨晚网上搜索了一圈&#xff0c;无意看到邮箱一条新闻&#xff0c;UbuntuDDE 23.04发布了 因为前几天刚用虚拟机安装过&#xff0c;所以麻溜的从网站下载了ISO文件&#xff0c;安装上看看。本来没多想&#xff0c;…

亚信科技AntDB数据库通过GB 18030-2022最高实现级别认证,荣膺首批通过该认证的产品之列

近日&#xff0c;亚信科技AntDB数据库通过GB 18030-2022《信息技术 中文编码字符集》最高实现级别&#xff08;级别3&#xff09;检测认证&#xff0c;成为首批通过该认证的数据库产品之一。 图1&#xff1a;AntDB通过GB 18030-2022最高实现级别认证 GB 18030《信息技术 中文编…

得帆信息合伙人——张少伟:使用低代码就像逛宜家,总会有不期而至的小惊喜等着你

随着数字化、智能化、网络化、自动化阶段不断跃升&#xff0c;新技术不断涌现&#xff0c;数字化转型成了大多数企业的发展趋势。在这个背景下&#xff0c;以下问题是被提起次数较多的&#xff1a; 企业要不要买低代码&#xff1f;低代码到底能做什么系统&#xff1f;低代码适合…

Memtester的使用(xilinx zc706)

1.1&#xff1a;测试概述 Memtester主要是针对内存压测的工具&#xff0c;官方的解释&#xff1a;testing the memory subsystem for faults。主要是捕获内存错误和一直处于很高或者很低位的坏位&#xff0c;测试随机值、异或比较、减法、乘法、除法、与或运算等。memtester 是…

情感书单背景素材分享,轻松把书单制作成视频

在互联网时代&#xff0c;我们可以通过各种方式来分享自己的想法和创意。其中&#xff0c;视频是一种非常受欢迎的方式&#xff0c;它可以将图像、声音和文字有机地结合在一起&#xff0c;形成一个丰富多彩的信息载体。如果你想分享自己的情感书单&#xff0c;那么将其制作成视…

【自用】无法通过ESP32创建HomeAssistant实体问题解决(MQTT对ESP32创建实体请求无应答)

一、问题描述 1.使用 MQTTX 测试客户端能够创建实体 当通过 MQTTX 发送注册实体请求的时候&#xff0c;实体能够在 MQTT 服务器中注册成功。 2.使用 ESP32 无法创建实体 在ESP32中通过 publish() 函数发送注册请求的时候&#xff0c;并不会报任何错误&#xff0c;但 MQTT 服…

谷粒商城环境搭建二:开发环境统一

开发环境配置统一 Maven配置 查看maven信息 修改配置文件&#xff1a;apache-maven-3.3.9\conf\settings.xml# 配置阿里云镜像 <mirrors><mirror><id>nexus-aliyun</id><mirrorOf>central</mirrorOf><name>Nexus aliyun</name&…

行为型(十) - 解释器模式

一、概念 解释器模式&#xff08;Interpreter Pattern&#xff09;&#xff1a;解释器模式为某个语言定义它的语法&#xff08;或者叫文法&#xff09;表示&#xff0c;并定义一个解释器用来处理这个语法。实际应用中较少用到的行为模式。 二、实现 举个常见的面试题&#x…

基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v7.0版已发布

关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架&#xff0c;超轻量级、高度提炼&#xff0c;一套API优雅支持 UDP 、TCP 、WebSocket 三种协议&#xff0c;支持 iOS、Android、H5、标准Java、小程序、Uniapp&#xff0c;服务端基于Netty编写。 工程…

WebDAV之π-Disk派盘 + Cloud Player

Cloud Player云媒体播放器是存储在常见云平台中的内容的通用播放器,无需将其下载到设备。支持以下云平台:Google Drive、DropBox、One Drive、WebDav等。此外,在播放或查看文件时,您可以将其下载到本地设备中,以便在未连接到互联网时稍后进行检查。 π-Disk派盘 – 知识管…

Docker容器:docker-compose管理创建LNMP服务并运行Wordpress网站平台

文章目录 一&#xff0e;项目环境1. 环境描述2.项目需求 二&#xff0e;部署过程1.安装Docker2.安装Docker加速器3.Docker-Compose安装部署4.准备依赖文件、配置nginx5.配置mysql6.配置php7.编写docker-compose.yml8.验证 三.容器快照&#xff0c;然后将Docker镜像打包成tar包备…

快速上手Linux核心命令:网络相关命令

前言 这期呢主要说一说Linux中与网络相关命令&#xff0c;一共包含19个命令 测试主机之间网络是否联通 1、简介 ping 命令不管是在Windows还是Linux都是比较常用的命令。命令用于测试主机之间的网络连通性 2、语法格式 ping [参数选项] [目标主机] 3、参数说明 参数参数说明…

jsp 毕业生信息系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP毕业生信息系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&am…

【STM32RT-Thread零基础入门】 7. 线程创建应用(多线程运行机制)

硬件&#xff1a;STM32F103ZET6、ST-LINK、usb转串口工具、4个LED灯、1个蜂鸣器、4个1k电阻、2个按键、面包板、杜邦线 文章目录 前言一、RT-Thread相关接口函数1. 获取当前运行的线程2. 设置调度器钩子函数 二、程序设计1. 头文件包含及宏定义2. 线程入口函数定义3. main函数设…