如何在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`值时才会加载链接。

更新于：2023年4月11日

406 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告