【HTML】有关html创建及表格，表单域的基础实例

最新推荐文章于 2022-11-05 14:25:12 发布
最新推荐文章于 2022-11-05 14:25:12 发布
阅读量190 收藏
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43416226/article/details/97396364
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的静态网页</title>
	</head>
	<body>
		<!--asdadff-->
		我想看看怎么显示！
		<h1>我想看看怎么显示！</h1>
		<h2>Love you three thousand times</h2>
        <img src="imges/img-3b434f812fa2c96350cc8619f45afa1b.jpg" width="400" height="900"/>
        <img src="imges/img-a565495aly1g52q9i03e1g207c06okfh.gif">
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二天</title>
	</head>
	<body>
		<!--无序列表-->
		<ul type="circle">
			<!--li是列表项，显示列表中的一项-->
			<li>列表项2</li>
				<li>列表项2</li>
					<li>列表项3</li>
		</ul>
		<!--有序列表-->
		<ol>
		<li>列表项2</li>
				<li>列表项2</li>
					<li>列表项3</li>
		</ol>
		<!--字典列表-->
		<dl>
			<dt>名词1</dt>
			<dd>名词1解释1</dd>
			<dd>名词1解释2</dd>
			...
			<dt>名词2</dt>
			<dd>名词2解释1</dd>
			<dd>名词2解释2</dd>
			...
		</dl>
		<!--表格必须以<table></table>开始和结束-->
		<table border="1" width="400">
			<!--每一行必须以<tr></tr>开始和结束-->
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
				<td  colspan="3" align="center" style="">标题</td>
				
			</tr>
			<!--标题行往往用th标签-->
			<!--th标签给予加黑居中-->
			<th>数据1</th>
				<th>数据1</th>
					<th>数据1</th>
			<tr>
				<!--tr一般数据左对齐-->
				<!--每一行的每一列必须以<td></td>开始和结束-->
				<td rowspan="3">数据1</td>
				<td>数据2</td>
				<td>数据3</td>
			</tr>
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
			
				<td>数据2</td>
				<td>数据3</td>
			</tr>
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
				
				<td>数据2</td>
				<td>数据3</td>
			</tr>
		</table>
	<!--表格属性
		border边框粗细
		cellspacing单元间距
		cellpadding单元格内部填充
		bgcolor背景色
	-->
			<table border="0" width="600" cellspacing="1" bgcolor="black">
				<thead>
					<!--每一行必须以<tr></tr>开始和结束-->
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
				<td  colspan="3" align="center" bgcolor="aliceblue">标题</td>
				
			</tr>
					<!--标题行往往用th标签-->
			<th bgcolor="aqua">数据1</th>
				<th>数据1</th>
					<th>数据1</th>
				</thead>
			<tbody>
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
				<td rowspan="3">数据1</td>
				<td>数据2</td>
				<td>数据3</td>
			</tr>
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
			
				<td>数据2</td>
				<td>数据3</td>
			</tr>
			<tr>
				<!--每一行的每一列必须以<td></td>开始和结束-->
				
				<td>数据2</td>
				<td>数据3</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--表单一定要以表单域<form></form>开始和结束，也就是写表单一般一定要有表单域-->
		<form method="post" action="">
			<div>
			<!--
				<label></label>
			<input>标签
				
				-->
				<label for="name">姓名：</label>
				<input id="name" name="name" type="text" value="文本"/>
			</div>
				<div>
			<!--
				<label></label>
			<input>标签
				
				-->
				<label for="pwd">密码：</label>
				<input id="pwd" name="pwd" type="password" value="文本" />
			</div>
				<div>
			<!--
				<label></label>
			<input>标签
				
				-->
				<label for="sex">性别：</label>
				<input id="sex" name="sex" type="radio" value="男" checked="true"/>男
				<input id="sex" name="sex" type="radio" value="女" />女
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				
				-->
				<label for="fav">工作：</label>
				<input id="fav" name="fav" type="checkbox" value="老师" checked="true"/>老师
				<input id="fav" name="fav" type="checkbox" value="学生" />学生
				<input id="fav" name="fav" type="checkbox" value="教授" />教授
				<input id="fav" name="fav" type="checkbox" value="研究人员" checked="true"/>研究人员
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				如果要上传文件，使用type="file"的属性值，但是普通表单只能上传字符数据，
				如果上传文件，必须在<form></form>表单域标签中添加enctype="multipartform-date"
				此时为多部分上传表单数据模式，可以上传字节数据
				-->
				<label for="photo">上传：</label>
				<input id="photo" name="photo" type="file"/>
				
			</div>
				
			<div>
			<!--
				<label></label>
			<input>标签
				h5新增的input类型
				-->
				<label for="color">颜色：</label>
				<input id="color" name="color" type="color" />
	
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				h5新增的input类型
				-->
				<label for="date">时间：</label>
				<input id="date" name="date" type="date" />
	
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				
			-->
				<input id="hidden" name="hidden" value="hidden" type="hidden" />
	
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				
			-->
				<input id="hidden" name="hidden" value="hidden" type="hidden" />
	
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				h5新增的input类型
				-->
				<label for="year">年份：</label>
				<select id="year" name="year">
					<option>1990</option>
					<option>1991</option>
					<option>1992</option>
					<option>1993</option>
					<option selected="true">2019</option>
				</select>
	
			</div>
			<br/>
           <div>
			<!--
				<label></label>
			<input>标签
				h5新增的input类型
				-->
				<label for="year1">多选年份：</label>
				<select id="year1" name="year1" multiple="true">
					<option>1990</option>
					<option>1991</option>
					<option>1992</option>
					<option>1993</option>
					<option selected="true">2019</option>
				</select>
	
			</div>
			<div>
			<!--
				<label></label>
			<input>标签
				
			-->
			
			<input id="image" name="image" type="image" src="../imges/img-8fba31e86ab7c908a627cf3ea4f4a16e.jpg" width=300 height="400"/>
				<input id="submit" name="submit" type="submit" value="发送"/>
				<input id="reset" name="reset" type="reset" value="重置"/>
				</div>
		</form>
	</body>
</html>

在这里插入图片描述

Briller712
关注
专栏目录
HTML表单（详解网页表单如何实现）
百赢出品，必属精品
04-24 3430
HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。元素用于为表单元素添加标签，提高可访问性。
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2601
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
【HTML】表格和表单
自学前端的小菜鸡的博客
10-18 178
1.表格 - 在网页中可以通过表格来表示一些格式化的数据 - 表格相关的标签 - <table> 用来创建一个表格 - <tr> 表示表格中的一行 - <th> 表示表头中的单元格 - <td> 表示表格中的单元格 - 属性： colspan 横向的合并单元格 rowspan 纵向的合并单元格 - 例子： <table> <tr> <td></td> <td>&l
HTML表格与表单
小贾爱编程的博客
03-18 1038
表格的作用： 主要用来存放网页上就有分类信息的文本和图像，也可以实现网页的页面布局 表格基本结构：表头、列标题、单元格、行、列 表格的基本语法格式： HTML中表格的格式：表格定义：<table></table>表头定义:<caption></caption>列标题定义：<th></th>行定义：<tr>...
HTML表格和表单
Java编程基础
05-12 1076
一、HTML表格标签与属性 <table>：表格标签 width：设置表格的宽度 height：设置表格的高度 cellspacing：设置单元格与单元格之前的空白间距 cellpadding：设置单元格内容与单元格之前的空白距离 align：设置表格水平对齐方式有 left（左） center（居中） right（右） <tr>：表格行标签 <td>：表格列标签 colspan：合并单元格跨列 rowspan：合并单元格跨行 <th>：标头标签 <th
HTML复习讲义域代码实例
01-07
4. **表格**：标签用于创建表格，表示行，表示单元格，表示表头单元格。 5. **表格布局**：CSS可以用来控制HTML元素的布局，例如使用`display`属性实现流式布局、网格布局或 flex 布局。 6. **表单**：HTML表单...
html——表单元素及个人简历实现
maojiaolin的博客
06-02 1296
一、HTML 表单简介 1.HTML 表单是 HTML 文档中的一个区域 2.HTML 表单这个区域中包含了一系列的可交互元素 3.HTML 表单主要用于收集用户输入信息 二、HTML 表单元素 三、HTML 常用表单元素 1.HTML 文本输入元素 1.1语法结构 1.2实例代码 <html> … <body> <form action=“#” method=“post”> <h1>系统登录</h1>
【实用】HTML的简单示例（表单篇）
Mankey_24的博客
10-09 6155
效果如下： 代码内容： <html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead>&
html表单,表单域
一个半路出家的人
08-21 5492
一,基本的表单标签及属性   input 标签  输入表单 属性:text 定义输入文本        radio定义单选按钮   同组单选按钮 name属性值必须统一 这样才能实现单选,(checked="checked"可以设定初始值)       checkbox  复选框       button普通按钮,可以通过value设定按钮显示名称      submit提交按钮 ...
HTML表格及应用、表单域（5）
weixin_43913003的博客
07-21 489
一、表格标签 一些简单的表格由table元素，一个或者多个tr,th,td组成。 <table>标签定义HTML表格。 <tr>标签定义表格行 <th>标签定义表头 <td>标签定义表格单元 <table border="1" style="width:400px"> <tr> <th>编号</th> <th>姓名</th&...
表格与表单
ccyzq的博客
12-14 1734
文章目录前言一、表格< table>二、表单< form> 前言 观察每个网页，或多或少都可以看到表格、表单的存在，例如登陆界面等等，表格多用于局部布局排版，表单用于向服务器发送数据。 一、表格< table> 表格 二、表单< form> ...
HTML 列表 表格 表单域
ALBERTZWZ的博客
05-02 825
上篇回顾 上一篇博文内容是关于HTML的简介，如何查看网页源代码，以及HTML代码的结构，<head>与<body>部分的内容，如何设置背景颜色及图片，设置字体，图片，链接跳转等。 列表 列表在网页中经常可以看到，主要分为两种，有序列表和无序列表，其实主要区别就是列表前面的内容提示 无序列表 在HTML中，无序列表使用<ul>来定义，使用<li>标签...
表单和表单控件以及表单域详解
热门推荐
中意你的博客
03-28 1万+
表单域：存放表单的区域。把表单控件里面的信息全部收集提交。 表单控件 input表单控件： 1.是个单标签 </input> 2.input可以通过type（类型）属性来变换形状 单选按钮注意： <body> <p>用户名：<input type="text" value="请输入你的名字" /></p> <...
如何使用HTML创建表格和表单
理想主义的花最终会盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
03-04 3624
如何使用HTML创建表格和表单表格定义表格表单表单的创建 表格 定义表格 表格是用<table>元素来定义的如： <table border=n align="alignment" bgcolor="clr">....</table> 属性border用于定义表格边框的宽度，n可以是从0开始的整数，设置border=0和忽略border属性，浏览器不会显示边框。 属性align用于设置表格个的对齐方式，alignment可以是left、center、或right。
第15节 | HTML表单 表单域
最新发布
前端队长Daotin
11-05 821
HTML 表单HTML 表单主要用于收集用户的输入信息。它包含各种表单元素。表单元素是允许用户在表单中输入内容的一些标签元素，比如：输入框（input）、文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。比如我们经常用到的注册/登录的界面就是一个表单。一个常见的表单，通常由左侧提示文本和右侧表单元素组成。1、表单域表单域，...
HTML表格，表单，内嵌框架:(三)
SenZendao的博客
09-05 1万+
自从开始学习编程之后，体重就飙升，除了吃饭睡觉就是学习，也不运动，一步一步走向油腻，我一定要保护好头发，我可不想早早秃了头。这篇就总结一下表格和表单都比较重要，但是个人认为表单更为重要一点，用的地方也很多。 HTML表格 表格常用标签 1、table标签：声明一个表格 2、tr标签：定义表格中的一行 3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元 表格...
HTML基础教程：标签详解与实例
- `table`用于创建表格，其结构通常包括`<table>`, `<tr>`（表格行）、`<th>`（表头单元格）和`<td>`（数据单元格）。可以使用`colspan`和`rowspan`属性来合并单元格。 7. **列表标签**： - 无序列表（`<ul>`）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值