HTML标签：下

最新推荐文章于 2021-12-28 22:41:21 发布
最新推荐文章于 2021-12-28 22:41:21 发布
阅读量366 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44971038/article/details/103188228
版权

 

注意：HTML 的注释为<!---->，这里为了方便，使用Java注释：//

form 标签是创建HTML表单的标签；常用的部分属性如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
			<form>
				<fieldset>
					<legend>基本信息</legend>
					<input type="text" placeholder="请输入用户名："/>
					<input type="password" placeholder="请输入密码"/>
					<input type="submit" value="提交"/>
					<input type="file"/>
					
					<input type="radio" name="sex" id="male"/><label for="male">男</label>
					<input type="radio" name="sex" id="female"/><label for="female">女</label>
				</fieldset>
				<fieldset>
					<legend>详尽信息</legend>
					<textarea cols="60" rows="30" style="resize: none;">评价</textarea>
				
					<input type="checkbox" name="sports" id="s"/><label for="s">篮球</label>
					<input type="checkbox" name="sports" id="sp"/><label for="sp">足球 </label>
					<input type="checkbox" name="sports" id="spo"/><label for="spo">羽毛球</label>
				</fieldset>
				
				<select>
					<option>A</option>
					<option>B</option>
					<option>C</option>
					<option>D</option>
				</select>
			</form>
	</body>
</html>

生成的效果图如下；

  • fileset 标签的作用是将form下的一些标签合在一个框中，类似于集合，效果如上的“基本信息”框和“详尽信息”框；

  • legend 标签就是fileset标签集合框的提示信息，上图的“基本信息”和“详尽信息”均是；

  • input 输入标签；text 普通文本框，输入什么显示什么；placeholder 提示文本，当普通文本框等可输入的文本框还没有输入数据之前显示的提示信息，如上图的“请输入用户名”和“请输入密码”；password 密码框，将用户的输入的密码以黑色实心圆显示，保护输入的内容，如微信、QQ的密码输入显示；submit 提交框，点击该框可将输入的数据提交；file 文本选择框，可选择电脑的文件进行上传；

  • radio、checkbox 单选和多选标签；name 标记为一组选项，name属性不同或不存在的单选框，则单选框不为一组（即每个都可以选，默认每个都是一组，一组可选一个值）；label 标签将标签的内容（“男”）升级为标签（即可以点击），id 标记本个radio标签，for标签指向id的属性，使得标签（“男”）和它隶属的标签有关联，即点击标签（“男”）就有点击与其对应的单选框的效果；id和for标签是一起使用，缺少则没有该联系和效果；checkbox标签是多选标签即一组选择框可选多个值，类似于多选；其他属性用法和radio相同；

  • selection 下拉标签；option是下拉的可选内容；

  • textarea 标签设置一个大的文本框，一般是评价、描述、补充；cols 列宽，rows 行宽，resize：none 框的大小固定（不可拉伸）；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
			<table>
				<tr>
					<th width="120px" >姓名</th> //width设置本列单元格的宽度
					<th>性别</th>
					<th>手机</th>
					<th>住址</th>
				</tr>
				<tr>
				<td height="120px" style="text-align: center; vertical-align: middle;" >Tom</td>
//设置本行单元格的高度，text-align 是设置字体左右的位置，这里是居中；vertical-align是设置字体垂直的位置，这里是居中
				<td>男</td>
				<td>911</td>
				<td >华盛顿</td>
			</tr>
			
			<tr>
				<td>Jerry</td>
				<td>男</td>
				<td>119</td>
				<td >华盛顿</td>
			</tr>
			</table>
			<style>
				table{
					border:black 1px solid ;
					border-spacing: 0px;
					border-collapse: collapse;
				}
				th{
					border:black 1px solid ;
				}
				td{
					border:black 1px solid ;
				}
			</style>
	</body>
</html>

table 标签在 HTML标签：上 已有部分详述，这里只说上篇博客没有说的东西，即合并行和列，下图是上边这个代码的执行效果；

然后我们修改一些属性；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
			<table>
				<tr>
					<th width="120px" colspan="2">姓名</th>  //这里使用colspan合并2列
					<!--<th>性别</th>-->  //注释掉
					<th>手机</th>
					<th>住址</th>
				</tr>
				<tr>
				<td height="120px" style="text-align: center; vertical-align: middle;" >Tom</td>
				<td>男</td>
				<td>911</td>
				<td rowspan="2">华盛顿</td>  //这里使用rowspan合并2行
			</tr>
			
			<tr>
				<td>Jerry</td>
				<td>男</td>
				<td>119</td>
				<!--<td >华盛顿</td>-->  //注释掉
			</tr>
			</table>
			<style>
				table{
					border:black 1px solid ;
					border-spacing: 0px;
					border-collapse: collapse;
				}
				th{
					border:black 1px solid ;
				}
				td{
					border:black 1px solid ;
				}
			</style>
	</body>
</html>

然后效果图：

可以看到；colspa 的作用是合并列，后面的属性值是合并的列数；rowspan 是合并行，后面的属性值是合并的行数；

//top.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: blanchedalmond;">  //设置背景颜色
	</body>
</html>

//left.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: beige re; resize: none;">
<!--		<a href="http://www.baidu.com">百度</a>-->
<!--		<a href="http://www.baidu.com" target="_blank">百度</a>-->
<!--		<a href="http://www.baidu.com" target="_top">百度</a>-->
<!--		<a href="http://www.baidu.com" target="right">百度</a>-->
		<a href="http://www.baidu.com" target="top" >百度</a>  //设置衔接打开方式
	</body>
</html>


//right.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: greenyellow;">
	</body>
</html>

//index1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" name="top" noresize="noresize"/>
		<frameset cols="20%,*">
			<frame src="left.html" noresize="noresize"/>
			<frame src="right.html" noresize="noresize" name="right" />
		</frameset>
	</frameset>
</html>

一次创建top left right index 四个HTML文件；背景色分别为 blanchedalmond、 beige re、greenyellow 和默认，再在index1.html 文件中将其他三个文件进行布局，可得下图效果；

  • frameset 标签：框架集标签，用于规定框架集中有多少个框架窗口或框架集；将其他的html文件的显示效果在本文件中分区显示；效果如上；

  • rows 竖向占用比值，单位%，这里是 20%，*；即2：8，其中*代表前者占用剩下的所有部分；

  • cols 横向占用比值，用法同 rows；

  • src 该部分显示的效果是哪个HTML文件的，即为路径；

  • <a></a>超链接标签，target  是超链接打开的方式：这里给出了四种：_blank 新窗口打开；_self 本窗口打开，因为left.html文件仅占用了上图左下方白色部分，因此只会在白色部分打开新窗口；_top 在整个窗口界面打开；name 属性，会根据其他部分html中name的属性进行选择跳转（逐个截图很麻烦，这里供大家自行测试）；

  • noresize 固定窗口，使其不可拉伸；

接下来介绍一下超链接第5种打开方式_parent 和 iframe 标签

//bottom.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<iframe src="second.html" ></iframe>
	</body>
</html>

//second.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: bisque;">
		<iframe src="third.html" width="80%" height="80%"></iframe>
	</body>
</html>

//third.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: yellow;">
		<a href="http://www.baidu.com" width="40%" height="40%" target="_parent">百度</a>
	</body>
</html>

创建三个HTML文件bottom、second 和 third；背景色设置各不相同；利用 iframe 标签嵌入另一个页面，形成层层嵌套的形式；

效果如下：

白色部分是bottom的显示页面，黄色的是third页面，中间的是second页面，src指向HTML文件，即嵌套的页面是哪个HTML文件的显示效果；target="_parent" 是在父页面打开链接，即嵌套该页面的页面，这里是second页面；点击超链接“百度”，效果如下图；

梦忆长安
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML下
memery_key的博客
05-11 154
HTML标签下 1、表格标签 用来显示展示数据 语法 <table>//定义表格的标签 <tr>//定义表格中的行，必须在<table>里 <td>//定义单元格，必须在<tr>里<td/> </tr> </table> ## 2、表头单元格标签 一般位于第一行或者第一列，里面文本会加粗并且居中 语法 <th> tablehead的缩写 <table>//定义表格的标签 <tr
HTML（下）
迁就100
07-10 128
一、框架标签frame frame标签：包含一个页面 frameset标签（框架集）：框架组成包含俩个或者俩个以上的页面，不能和body共存 rows：由页面顶部到底部的划分，rows=“20%,*,10%”（横向划分） cols：由左往右看（竖向划分） src：链接每个具体的页面 二、HTML块 可以通过<div>和<span>将HTML元素组合起来 ⼤多数 HTML ...
html标签：sub标记和sup标记
01-19
今天来认识一下两个我不太常用到的html标签：sub标记和sup标记。 相关文章：HTML标记:optgroup、sub、sup和bdo 今天来认识一下两个我不太常用到的html标签：sub标记和sup标记。 定义和用法: <sub> 标签可定义下标...
移除HTML标签的正则表达式
10-29
总结来说，正则表达式在特定场景下可以用来移除HTML标签，但鉴于其局限性，对于更复杂的情况，应选择更专业的HTML解析方法。在实际开发中，理解正则表达式的原理和适用范围至关重要，以避免潜在的问题。
20.2 HTML 常用标签
最新发布
07-28
15. **CSS样式控制**：虽然不是HTML标签，但通过元素或外部样式表，可以对HTML元素的样式进行定义，如颜色、字体、布局等。 了解并熟练掌握这些常用的HTML标签是构建网页的基本功。通过合理地组织和使用它们，我们...
HTML5 source标签：媒介元素定义媒介资源
09-27
HTML5 source标签是一种媒介元素（比如 <video> 和 <audio>）来定义媒介资源。接下来通过本文给大家介绍HTML5 source标签：媒介元素定义媒介资源的相关资料，需要的朋友参考下
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
html(下)
weixin_45663702的博客
12-28 513
html基础 html概述 html( Hyper Text Markup Language )超文本标记语言 超文本指图片、文本、视频、声音、流媒体等 标记，是一种特殊的语法由标签组成 <标签名>，这种语言浏览器看得懂，文件的后缀名 xxx.html w3c世界万维网是html的规范 前段开发中涉及的三种语言分别是： html 内容层 > 表现 css 样式层 > 修饰 html JavaScript 控制层（行为层） > 控制 html 1.标签 （1）单标签 &lt
HTML标签（下）
low1101的博客
11-21 69
form标签：为HTML创建表单 input标签：单标签，标签属性不同表现的形式不同，主要是type类型 type：text，文本框 type：password，密码框 type：submit，提交按钮 例子： <form> <input placeholder="账号" /> <br /> <input style="b...
HTML标签(下)
CSDN
02-24 212
表单标签form HTML表单的主要作用是用来收集用户的输入，当用户提交表单时，浏览器会将表单中收集的数据一并提交到服务器地址，后台接收数据之后，对数据做处理。 &lt;form action="数据提交的路径、地址" method="数据提交的方式get、post"&gt;   &lt;!--提交的数据写在这里--&gt; &lt;input type="submit" val...
html下标签,HTML常用标签(下)
weixin_39846191的博客
06-25 168
HTML常用标签(下)1. 表格标签1.1 语法 表头单元格普通单元格内的文字这是表头单元格这是普通单元格1.2 属性这些属性通过CSS设置。描述align表格相对周围元素的对齐方式(left、center、right)border表格是否有边框，默认没有(""：没有，1：有)cellpadding单元边缘与其内容之间的空白，默认为1pxcellspacing单元格之间的空白，默认为...
HTML
04-12 964
一：Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。Iframe标记的使用格式是
html当中FileSet的使用
12-30 1797
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" c
html5新增
小欠的博客
02-03 247
html5新增标签
fileset用法
03-10 2126
FileSet    FileSet是一个文件组.这些文件可在以根目录开始的目录树里找到,符合PatternSet和Selector设定的模式. FileSet在支持这种特性的任务里出现,或者与目标同一级出现,就像项目的子元素.    PatternSet可以在内嵌元素&lt;patternset&gt;定义.另外,FileSet包含一个隐性PatternSet,并且直接支持PatternSet ...
HTML基础教程：学习HTML基本标签
HTML标签是HTML元素的核心部分，通常由一对尖括号包围，例如`<tagname>`和`</tagname>`，其中`tagname`是标签的名称。标签可以分为开启标签和闭合标签，例如`<p>`表示一个段落的开始，`</p>`则表示段落的结束。有些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值