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和postname是表单的名称 --></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.hqwc.cn/news/618892.html

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

相关文章

ELFK日志分析系统之搭建ELF+Filebeaat+Zookeeper+Kafka

引言 结合前面所学 http://ELK日志分析系统 一、为什么要做日志分析平台 随着业务量的增长&#xff0c;每天业务服务器将会产生上亿条的日志&#xff0c;单个日志文件达几个GB&#xff0c;这时我们发现用Linux自带工具&#xff0c;cat grep awk 分析越来越力不从心了&#…

pixhawk控制板的ArduPilot固件编译

0. 环境 - ubuntu18&#xff08;依赖python2和pip&#xff0c;建议直接ubuntu18不用最新的&#xff09; - pixhawk 2.4.8 - pixhawk 4 1. 获取源码 # 安装git sudo apt install git # 获取源码 cd ~/work git clone --recurse-submodules https://github.com/ArduPilot/a…

分布式ID的方案和架构

超过并发&#xff0c;超高性能分布式ID生成系统的要求 在复杂的超高并发、分布式系统中&#xff0c;往往需要对大量的数据和消息进行唯一标识如在高并发、分布式的金融、支付、餐饮、酒店、电影等产品的系统中&#xff0c;数据日渐增长&#xff0c;对数据分库分表后需要有一个唯…

Java实现二叉树(下)

1.前言 http://t.csdnimg.cn/lO4S7 在前文我们已经简单的讲解了二叉树的基本概念&#xff0c;本文将讲解具体的实现 2.基本功能的实现 2.1获取树中节点个数 public int size(TreeNode root){if(rootnull){return 0;}int retsize(root.left)size(root.right)1;return ret;}p…

【七 (1)FineBI FCP模拟试卷-股票收盘价分析】

目录 文章导航一、字段解释二、需求三、操作步骤1、添加计算字段&#xff08;每月最后一天的收盘价&#xff09;2、绘制折线图 文章导航 【一 简明数据分析进阶路径介绍&#xff08;文章导航&#xff09;】 一、字段解释 Company Name&#xff1a;公司名称 Date&#xff1a;…

计算机网络---第十四天

DHCP协议 DHCP背景&#xff1a; 局域网中手动配置静态ip地址任务繁琐&#xff0c;而且容易出错 DHCP定义&#xff1a; ①动态主机配置协议 ②采用客户端/服务器模式 ③服务端udp 67 ④客户端udp 68 DHCP工作原理&#xff1a; 1、DHCP分配IP的工作流程&#xff1a; 客户…

【opencv】示例-stereo_calib.cpp 基于OpenCV的立体视觉相机校准的完整示例

// 包含OpenCV库中用于3D校准的相关头文件 #include "opencv2/calib3d.hpp" // 包含OpenCV库中用于图像编码解码的相关头文件 #include "opencv2/imgcodecs.hpp" // 包含OpenCV库中用于GUI操作的相关头文件 #include "opencv2/highgui.hpp" // 包…

QT助手翻译【QT 5.14】 -----QPushButton

目录 1 属性 2 公共职能 3 重新实现的公共功能 4 公用插槽 5 受保护的功能 6 保护方法 7 详细说明 1 属性 自动默认值&#xff1a;bool 此属性保存按钮是否为自动默认按钮 如果此属性设置为true&#xff0c;则该按钮为自动默认按钮。 在某些GUI样式中&a…

Linux 快问快答

如果对于找 Java 后端开发的话&#xff0c;我感觉会这几个差不多了&#xff0c;面试官应该不会问的这么详细吧。一般就问问 Linux 的几个常用的命令&#xff0c;然后做一些简单的性能排查就好了。如果面试被问到另外的问题&#xff0c;那我再补充进来&#xff0c;现在先掌握这么…

软件杯 深度学习卷积神经网络垃圾分类系统 - 深度学习 神经网络 图像识别 垃圾分类 算法 小程序

文章目录 0 简介1 背景意义2 数据集3 数据探索4 数据增广(数据集补充)5 垃圾图像分类5.1 迁移学习5.1.1 什么是迁移学习&#xff1f;5.1.2 为什么要迁移学习&#xff1f; 5.2 模型选择5.3 训练环境5.3.1 硬件配置5.3.2 软件配置 5.4 训练过程5.5 模型分类效果(PC端) 6 构建垃圾…

在Windows上安装Go编译器并配置Golang开发环境

文章目录 1、安装Go语言编译程序1.1、下载GoLang编译器1.2、安装GoLang编译器 2、配置Golang IDE运行环境2.1、配置GO编译器2.1.1、GOROOT 概述2.1.2、GOROOT 作用2.1.2、配置 GOROOT 2.2、配置GO依赖管理2.2.1、Module管理依赖2.2.2、GOPATH 管理依赖 2.3、运行GO程序2.3.1、创…

vscode开发 vue3+ts 的 uni-app 微信小程序项目

创建uni-app项目&#xff1a; # 创建用ts开发的uni-app npx degit dcloudio/uni-preset-vue#vite-ts 项目名称 # 创建用js开发的uni-app npx degit dcloudio/uni-preset-vue#vite 项目名称VS Code 配置 为什么选择 VS Code &#xff1f; HbuilderX 对 TS 类型支持暂不完善VS…