html基础的form，table，index

最新推荐文章于 2022-08-03 14:07:44 发布
最新推荐文章于 2022-08-03 14:07:44 发布
阅读量844 收藏 1
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LZww9900/article/details/109821647
版权

一 序言：

    本文主要介绍HTML基础的form，table以及index

 二 正文：

    首先是form，我将以代码的形式直观的进行介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<form>
			<!--隐藏框-->
			<input type="hidden" />
			<!--文本域-->
			<input type="text" placeholder="请输入用户名" />
			<!--密码框-->
			<input type="password" placeholder="请输入密码" />
			<!--文本框-->
			<input type="file"  />
			<!--下拉列表-->
			<select>
				<option>--请选择--</option>
				<option>--河南省--</option>
				<option>--河北--</option>
				<option>--安阳--</option>
				<!--文本域-->
				<textarea>
					
				</textarea>
				
			</select>
			<!--单选框-->
			
			<input type="radio" name="sex" id="male" /><label for="male">男</label>
			<input type="radio" name="sex" id="famale" /><label for="famale">女</label>
			<!--按键-->
			<input type="button" value="登陆" />
			<input type="submit" value="提交" />
			<input type="reset" value="取消" />
			<!--多选项-->
			<input type="checkbox" name="hobby" />篮球
			<input type="checkbox" name="hobby" />足球
			<input type="checkbox" name="hobby" id="pingpang"/> <label for="pp">乒乓球</label>
		</form>
	</body>
</html>

    下面是代码所生成的页面

    其次是table，和上面的方式一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border:1px solid black;
				border-spacing:0px;
				border-collapse: collapse;
			}
		th,td{
			border: 1px solid black;
		}
	</style>
	<!--th标头(内容自动加粗)td内容-->
	
	</head>
	<body>
		<table>
			<tr>
				<th colspan="9">2013年度图书销售统计</th>
			</tr>
			<tr>
				<td rowspan="2" valign="center" align="center">图书分类</td><td colspan="2" align="center">一季度</td><td colspan="2" align="center">二季度</td><td colspan="2" align="center">三季度</td><td colspan="2" align="center">四季度</td>
			</tr>
			<tr>
				<th>销售量</th><th align="center">销售额</th><th align="center">销售量</th><th align="center">销售额</th><th align="center">销售量</th><th align="center">销售额</th><th align="center">销售量</th><th align="center">销售额</th>
			</tr>
			<tr>
				<td colspan="1" align="center">小说</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr>
			<tr>
				<td colspan="1" align="center">文艺</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr><tr>
				<td colspan="1" align="center">励志/成功</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr><tr>
				<td colspan="1" align="center">童书</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr>

		</table>
	</body>
</html>

   其中：

“rowspan”代表把行进行合并；“colspan”代表把列进行合并；

“align”表明是将文本的位置进行怎样的调整；

“<th>  </th>”会将中间的汉字进行加粗，起到标题的作用；“<tr>  </tr>”则是正常显示

那么生成的网页如下：

    最后是index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MyFirst</title>
	</head>
	<body>
		<!---行内元素：不会自动换行，长度和宽度包裹内容-->
		
		
		<b>行内元素111</b>
		<i>行内元素222</i>
		<del>行内元素333</del>
		<span>行内元素444</span>
		<!--行外元素：会自动换行，长度和宽度不包裹内容-->
		<p style="font-size: 36px;"> 行外元素111</p>
		<p>行外元素222</p>
		<div>行外元素333</div>
		<h1 style="text-align: center;">行外元素444</h1>
		<h6 style="text-align: center;">行外元素555</h6>
		<!--有序 order-->
        <ol start="2" type="I">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </o1>
        <!--无序 unordered list-->
        <ul type="square">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </ul>
			
		</style></h1>
	</body>
</html>

下面是生成的网页：

三 末尾：

    细节说的并不是很详细，大多内容都可以从代码和网页中对比得出

雷子丸丸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中index属性怎么用,浅谈CSS中z-index属性的用法
weixin_36064196的博客
06-07 5831
本篇文章来给大家介绍一下CSS中z-index属性的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。写css z-index的时候经常会出现很多莫名其妙的问题，下面对z-index属性做彻底的剖析，本文参考了《一个css中z-index的用法》，并做了很多demo，方便了解z-index的用法.一、z-index是什么z-index属性决定了一个HTML元素的层叠级别。元素层...
HTML form表单与table表格的总结
最新发布
weixin_74424297的博客
03-30 398
form表单可以实现基础的页面按钮，提交，选择设置，table表格给予其格式，使网页看起来跟美观。在网页中用户与网页之间进行交互操作是必不可少的，需要使用到表格表单来让用户和服务器 之间进行交互。因此，表格表单是非常重要的元素。提示：这里对文章进行总结：以上就是对form表单和table表格的部分总结，本文仅仅简单介绍了form表单和table表格的使用。
html基础
weixin_42366473的博客
08-03 1115
html官方文档读写
HTML tabindex用法及使用场景详解
Dax1_的博客
12-22 2559
tabindex定义 tabindex 全局属性 ，表示元素是否可以聚焦，以及是否能用**键盘导航（Tab）**选中 支持聚焦的HTML元素 带href属性的<a>标签 带href属性的<link>标签 <button> <input>（排除 type='hidden'） <select> <textarea> 这些元素默认都能使用键盘Tab键，以及JS focus方法聚焦 document.querySelector("a").f
什么是index.html？ 如何创建和使用index.html？
热门推荐
cunjiu9486的博客
10-12 8万+
Websites provide a lot of web pages with different URLs but there are some defacto pages that exist most of the web sites. index.html is one of them. index.html is used as the main or entrance page fo...
html中index设置层数,z-index和层叠上下文
weixin_39981400的博客
06-16 1158
z-index基础介绍：三维坐标空间里，x轴通常用来表示水平位置，y轴来表示垂直位置，还有z轴来表示在纸面内外方向上的位置，像下面的图片一样：css允许的z-index的值是● auto (自动，默认值)● (整数)● inherit (继承)当设置成整数时，值越大越靠近用户。如果有两个元素放在了一起，占据了一块共同的区域，那么有着较大z-index值的元素就会掩盖有着较低z-index值的元素在...
HTML的table基本知识
weixin_46021847的博客
10-19 466
创建表格的四个元素：table、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 4、<th>…</th>：表格的头
HTML的基础资料（table,form,frame,csst）
03-06
在HTML中，`<table>`、`<form>`、`<frame>`和CSS（Cascading Style Sheets）是构建动态和交互式网页的重要元素。让我们深入探讨这些概念： 1. **表格（Table）**： `<table>`标签用于创建表格，这是组织数据的有效...
index.html
02-18
例如，`<a>`标签用于创建链接，`<img>`标签插入图像，`<form>`标签用于创建表单以便用户输入数据，`<table>`标签构建表格，等等。 在实际开发中，HTML通常会与CSS（层叠样式表）和JavaScript结合使用。CSS负责控制...
practick-index.html
03-20
在IT行业中，HTML（HyperText Markup ...总之，"practick-index.html"提供的可能是一个HTML学习路径的起点，涵盖基础语法、元素使用、语义化标签、样式控制、多媒体处理等多个方面，旨在通过实践来提升你的HTML技能。
html调整table方向,html table中的单元格的跳动方向设置_html/css_WEB-ITnose
weixin_39556064的博客
06-07 351
按TAB键在input里的方向向右跳到下个input里。。。我想弄成向下移动。。。请问如何实现呢！！谢谢了！！回复讨论(解决方案)用tableindex属性值试试用tableindex属性值试试对。按照想跳转的顺序，在INPUT标签里加上tableindex属性，值从小到大。引用 1 楼 zsx841021 的回复:用tableindex属性值试试对。按照想跳转的顺序，在INPUT标签里加上tab...
html中index是什么作用,js中index是什么意思
weixin_42680139的博客
06-10 5072
怀孕7周孕酮正常值患者信息：女 25岁 福建 厦门 病情描述(发病时间、主要症状等)： 我老婆病情分析： 欢迎来到CSS布局HTML，怀孕7周左右孕酮值在76.7nmol/L左右为正常，你的孕酮值是偏低的。HCG值正常，宫外孕的几率极低。 指导意见： 建议你注意休息，放松心情，口服黄体酮胶囊补充孕激素，用药一周后复查。js中div[i].index=i是什么意思index是一个自定义属性，定义为索...
设计一个属于自己的网站
qq_51118755的博客
01-16 1352
设计开发个人网站
html中的tabindex属性
kbx8916的博客
04-06 758
tabindex 属性 -- 代表使用"Tab"键的遍历顺序 可以使用Tab键遍历页面中的所有链接与表单元素,当遍历到某个链接时, 按Enter即可.遍历时会按照tabindex的大小决定顺序遍历到某个链接的时候,会有虚线框包围链接,这时按回车键即可进入链接的页面.取值: 数字，范围为[1~32767]
nginx配置默认首页（index.html index.htm）全流程（包含遇到问题的解决）
zhulianhai0927的专栏
01-15 7777
需求： 自己有个域名，原来直接扔在了服务器的文件夹里（根据客服人员指导），自己玩了一遍nginx的安装部署等操作之后，域名的指向发生了改变，到了nginx成功的界面。 自己抱着极大的好奇心来配置nginx，已达到我能访问到我的主页的样子，当然啦。做个域名主页对我来说最主要的作用就是学（装）习（逼）。 解决方案： google找到了其中的方法，大概就是修改nginx的配置文件了，让其inde...
tableIndex
枫的博客
07-31 1618
.caret辅助类显示下拉功能 .dropdown-menu显示下拉框 class=”dropdown-header” 下拉菜单表头 divider 分离的下划线H5 role role 是增强语义性，当现有的 HTML标签 不能充分表达语义性的时候，就可以借助role来说明。 Tabindex = -1 用处就是，当你填写完第一个文本框时会自动走到下一个，不会乱串。tabIn
Web前端-Vue ElementUI点击Table 索引行获取index处理
MinggeQingchun的博客
12-28 1万+
需求：在table中row行 index = 0 ，作为区头，数据字符展示 "--" 参考组件https://element.eleme.cn/#/zh-CN/component/table 1、table中有一个:row-class-name="tableRowClassName"属性，可以获取到当前行的index 将:row-class-name属性写在el-table标签上，如下： <el-table ref="treeMultipleTable" v..
js获取html中的table元素里的每一行的行号
子田力亥
03-03 1万+
Js获取html文件中的table元素中的行号
HTML基础：从概述到文件结构
例如，<table>用于创建表格，<form>用于构建表单，则用于创建输入字段，这些都是构成网页内容的重要元素。 浏览器是HTML的执行者，它们能够解析HTML代码并将其转化为用户可以互动和浏览的网页。用户可以通过双击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值