HTML - type 属性

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

它用于为<button>标签指定按钮类型，也用于在<input>标签中指定要显示的输入类型。它确定<embed>，<link>，<object>，<script>，<source>和<style>元素的互联网媒体类型（通常称为 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 属性，以及我们应该在哪里以及如何使用此属性！

使用 type 属性与 "input" 标签

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

<!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>

使用 type 属性与 "embed" 标签

运行以下代码后，它将生成一个包含在网页上显示的图像的输出。

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

使用 type 属性与 "link" 标签

运行以下代码后，输出窗口将显示在网页上应用了 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>
         Tutorials<span>point</span>
      </h2>
      <h3>Link element with type attribute</h3>
      <p>This is external CSS</p>
   </body>
</html>

使用 type 属性与 "button" 标签

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

<!DOCTYPE html>
<html>

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

<body>
      <h2>Button Types</h2>
      <form action=
"https://tutorialspoint.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>

使用 type 属性与 "object" 标签

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

<!DOCTYPE html>
<html>

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

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

</html>

使用 type 属性与 "script" 标签

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

<!DOCTYPE html>
<html>

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

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

</html>

使用 type 属性与 "source" 标签

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

<!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>

使用 type 属性与 "style" 标签

运行以下代码后，h1 标签内的内容将显示应用了使用 style 标签的内部样式。

<!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>

支持的浏览器

属性
type	是	是	是	是	是

html_attributes_reference.htm

打印页面