HTML - type 属性_HTML 菜鸟教程

HTML type 属性指定元素的类型。

这用于指定 <button> 标签的按钮类型，也用于 <input> 标签中指定要显示的输入类型。它确定 <embed>、<link>、<object>、<script>、<source> 和 <style> 元素的 Internet 媒体类型（通常称为 MIME 类型）。

语法

<element type="value">

适用对象

下面列出的元素允许使用 HTML type 属性。

元素	描述
<button>	HTML <button>标签用于创建按钮。
<embed>	HTML <embed> 标签用作浏览器无法理解的外部应用程序、多媒体和交互式内容的容器。
<input>	HTML <input> 标签用于指定输入字段。
<object>	HTML <object> 标签用于在网页上展示多媒体，包括音频、视频、图片、网站、PDF和Flash。
<ol>	HTML <ol> 标签用于创建有序列表。有序列表的默认顺序是数字。
<script>	HTML <script> 标签用于声明客户端脚本（JavaScript）。
<source>	HTML <source> 标签是一个空元素。它表示没有结束标签和标签中的任何内容。
<style>	HTML <style> 标签包含 HTML 文档或文档的一部分的样式信息。
<menu>	HTML <menu> 标签用于创建菜单列表。
<link>	HTML <link> 标签指定当前文档与外部资源之间的关系。

HTML type 属性的示例

以下示例将说明 HTML type 属性，以及我们应该在哪里以及如何使用此属性！

使用带有“input”标签的 type 属性

在运行以下代码时，输出窗口将在网页上显示输入字段以及提交和重置按钮。

<!DOCTYPE html>
<html>
<body>
	 <h1>The button type attribute</h1>
	 <form action="" method="post">
			<label for="fname">First name:</label>
			<input type="text" id="fname" name="fname">
			<br>
			<br>
			<label for="lname">Last name:</label>
			<input type="text" id="lname" name="lname">
			<br>
			<br>
			<button type="submit" value="Submit">Submit</button>
			<button type="reset" value="Reset">Reset</button>
	 </form>
</body>
</html>

使用带有“embed”标签的 type 属性

当我们运行下面的代码时，它将生成一个由网页上显示的图像组成的输出。

<!DOCTYPE html>
<html>
<body>
	 <h1>The embed type attribute</h1>
	 <embed type="image/jpg" src=
"https://www.qikepu.com/images/logo.png?v2"/>
</body>
</html>

使用带有 “link” 标签的 type 属性

在运行以下代码时，输出窗口将显示网页上使用 CSS 应用的文本。CSS 将无法工作，因为它无法链接。

style.css

body{
	 background-color: purple;
}
h2{
	 color: green;
}
span{
	 color: black;
}

type.html

<!DOCTYPE html>
<html>
<body>
	 <head>
			<link rel="stylesheet" type="text/css" 
						href="style.css">
	 </head>
	 <body>
			<h2>
				 Qikepu<span>com</span>
			</h2>
			<h3>Link element with type attribute</h3>
			<p>This is external CSS</p>
	 </body>
</html>

使用带有“button”标签的 type 属性

在运行以下代码时，将显示一个带有提交和重置按钮的表单。

 <!DOCTYPE html>
<html>

<head>
			<title>Button tag with type Attribute</title>
</head>

<body>
			<h2>Button Types</h2>
			<form action=
"https://qikepu.com/" method="post">
				 <label for="first_name">First name:</label>
				 <input type="text" name="first_name" />
				 <br><br>
				 <label for="last_name">Last name:</label>
				 <input type="text" name="last_name" />
				 <br><br>
				 <button type="submit"> Submit</button>
				 <button type="reset">Reset</button>
			</form>
</body>

</html>

使用带有 “object” 标签的 type 属性

在运行以下代码时，qikepu 徽标将显示在输出屏幕上。

<!DOCTYPE html>
<html>

<head>
			<title>Object tag with type attribute</title>
</head>

<body>
			<h1>qikepu</h1>
			<object data=
"https://www.qikepu.com/cg/images/logo.png" 
							type="image/png">
			</object>
</body>

</html>

使用带有 “script” 标签的 type 属性

在运行以下代码时，javascript 文本会显示在输出屏幕上。

<!DOCTYPE html>
<html>

<head>
			<title>Script tag with type attribute</title>
</head>

<body>
			<script type="text/JavaScript">
				 document.write("You're visiting qikepu!")
			</script>
</body>

</html>

使用带有 “source” 标签的 type 属性

在运行以下代码时，音频文件将显示在输出屏幕上。

<!DOCTYPE html>
<html>

<head>
			<title>Source tag with type attribute</title>
</head>

<body>
			<audio controls>
			<source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
							type="audio/mpeg">
	 </audio>
</body>

</html>

使用带有“style”标签的 type 属性

在运行以下代码时，h1 标签内的内容将显示，并使用样式标签应用内部样式。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>Style Tag with type attribute</title>
	 <style type="text/css">
			h1 {
				 color: green;
				 font-size: 40px;
				 font-style: italic;
			}
	 </style>
</head>
<body>
	 <h1>Applied css internal styling within h1 tag</h1>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - target 属性 HTML - usemap 属性 >>