資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML5中建立帶有media屬性的連結
概述
HTML5中有許多型別的屬性，這些屬性為頁面提供了額外的功能。`media`屬性用於link標籤，它具有不同的值，這些值用於不同的狀態。這些值包括：`print`、`all`、`screen`、`speech`。`print`值用於link標籤，以提供頁面的列印預覽。如果我們想在列印頁面時更改樣式，則可以使用此`print`值和`media`屬性。有時，某些樣式需要為所有型別的螢幕提供相同的樣式，因此可以使用`media`屬性的`screen`值。`all`值是`media`屬性的預設值，因此不需要在`media`屬性中寫入`all`值。
語法
media屬性與link標籤一起使用：
<link rel="stylesheet" href="print.css" media="ValueHere">
在上邊的語法中，`media`屬性插入到link HTML標籤中，在上邊的語法中，`ValueHere` 將被替換為media值，即：all、screen、speech和screen。
演算法
**步驟1** - 在您的文字編輯器中建立一個HTML基本程式碼，檔名為“index.html”。
**步驟2** - 現在使用HTML link標籤將樣式錶鏈接到頁面。建立第一個link標籤，並用它連結主要的樣式表style.css。在另一個link標籤中，連結輔助樣式表print.css。還在第二個樣式表中新增`media`屬性，其值為`print`。
**步驟3** - 建立包含兩個div容器的佈局，分別為“廣告橫幅”和一個div容器作為“內容橫幅”。
**步驟4** - 現在在`style.css`中為上面的HTML程式碼設定樣式。
**步驟5** - 現在在`print.css`中將兩個廣告容器設定為`display: none`。
**步驟6** - 現在列印當前網頁，當觸發列印操作時，print.css也會被呼叫，廣告容器會消失。
示例
在這個例子中，我們建立了一個網頁佈局來展示`media`屬性與link標籤一起工作的效果。我們使用了`media`屬性的`print`值，以及兩個樣式表`style.css`和`print.css`，它們分別在頁面載入和觸發列印操作時被呼叫。
<html>
<head>
<title>Link with media attribute</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
<style>
.ads,.content{
padding: 2rem 0rem;
width: 90vw;
margin: 1rem auto;
background-color: green;
text-align: center;
color: white;
font-weight: 700;
}
print.css
.ads{
display: none;
}
</style>
</head>
<body>
<div class="mid">
<div class="ads">AD Banner</div>
<div class="content">tutorialspoint.com</div>
<div class="ads">AD Banner</div>
</div>
</body>
</html>
在下圖圖(a)中，顯示了上述HTML程式碼的輸出，其中顯示了廣告橫幅和主內容容器。因此，當頁面載入時，`style.css`樣式會被載入。要檢視`media`屬性`print`值的工作方式，請右鍵單擊滑鼠，然後單擊列印選項。
當視窗的列印操作被觸發時，`print.css`被啟用並反映HTML程式碼中的更改，因為我們在head標籤中使用了`media`屬性並在其中傳遞了`print`值。因此，在列印頁面時，兩個廣告橫幅都會消失，因為我們在`print.css`頁面中將它們的樣式設定為`display: none`。
結論
`media`屬性的`print`值在建立諸如賬單管理系統之類的web應用程式專案時非常有用，如果我們需要列印客戶的賬單，可以使用此方法。在網站的某些部分，我們也可以使用它來捕獲頁面的一小部分。`media`標籤還有助於網頁快速載入，因為只有當頁面滿足`media`值時才會載入連結。
406 次瀏覽
