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.tw/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.tw/" 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.tw/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

列印頁面