如何在 HTML5 中创建带有 media 属性的链接
概述
HTML5 中有许多类型的属性，这些属性为页面提供了额外的功能。media 属性与 link 标签一起使用，该标签具有不同的值，用于不同的状态。这些值包括:print、all、screen、speech。"print"值与 link 标签一起使用，提供页面的打印预览。如果我们想在打印页面时更改样式，可以将此 print 值与 media 属性一起使用。有时，我们必须为所有类型的屏幕设计相同的样式，因此"screen"值与 media 属性一起使用。 '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 标签将样式表链接到页面。创建第一个链接标签，并将主样式表 style.css 与其链接。在另一个链接标签中，将次要样式表 print.css 与其链接。同样，在第二个样式表中，为其添加 media 属性，并将其值设置为 print。
步骤 3 - 创建布局，其中两个 div 容器分别作为"广告横幅"和"内容横幅"。
步骤 4 - 现在在 style.css 中设置上述 HTML 代码的样式。
步骤 5 - 现在在 print.css 中，将两个广告容器的样式设置为"display: none"。
步骤 6 - 现在打印当前网页，当触发打印操作时，print.css 也会被调用，广告容器会消失。
请
在此示例中，我们创建了一个网页布局，以展示媒体属性与链接标签的工作原理。我们使用媒体属性获取了打印值，并使用了两个样式: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 样式也会加载。右键单击鼠标，然后点击"打印"选项。
当窗口的打印操作触发时，print.css 会被激活，并反映 HTML 代码中的更改，因为在 head 标签中我们使用了 media 属性并传递了 print 值。因此，在打印页面时，两个广告横幅都会消失，因为我们在 print.css 页面中将样式设置为"无"。
结论
在创建像账单管理系统这样的 Web 应用程序项目时，media 属性的 print 值非常有用，因为如果我们必须打印客户的账单，那么我们可以使用此方法。在网站的某些部分，我们也可以使用它来捕获页面的一小部分。当页面满足媒体值时，链接就会加载，因此媒体标签还可以帮助网页快速加载。
