HTML <link> 标签的 media 属性
定义和用法
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
实例
两种不同的样式表，针对两种不同的媒介类型（计算机屏幕和打印）：
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print"/> </head>
浏览器支持
所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。
提示：在全屏模式中，Opera 也支持 "projection" 属性值。
属性值
| screen | 计算机屏幕（默认）。 |
| tty | 电传打字机以及类似的使用等宽字符网格的媒介。 |
| tv | 电视机类型设备（低分辨率、有限的滚屏能力）。 |
| projection | 放映机。 |
| handheld | 手持设备（小屏幕、有限带宽）。 |
| 打印预览模式/打印页面。 | |
| braille | 盲人点字法反馈设备。 |
| aural | 语音合成器。 |
| all | 适用于所有设备。 |
自己做了一个例子在屏幕显示时table为红色且可以看见按钮，而打印或者打印预览的table为蓝色并且按钮不可见
屏幕下：
打印预览：
相关推荐
4. **CSS集成**：HTML可以通过<style>标签在文档内部添加CSS样式，或者通过<link>标签链接外部CSS文件来实现页面的布局和美化。 5. **HTML5新特性**：HTML5引入了许多新的元素，如<section>、<article>、<header>、...
2. **HTML标签**：HTML标签是用来描述网页内容的，比如用<h1>到<h6>表示不同级别的标题，<p>表示段落，<a>用于创建链接，<img>插入图像，<ul>和<li>创建无序列表，<ol>和<li>创建有序列表，<div>作为内容分组等。...
通过在HTML中使用<style>标签或外部引用<link>来引入CSS文件。class和id属性配合CSS，可以实现精确的元素选择和样式定义，增强网页的视觉效果。 5. HTML表格： <table>元素用于创建表格，<tr>定义行，<th>为表头，...
12. **CSS基础**：虽然CSS不是HTML，但了解基础的CSS可以帮助美化HTML页面，例如使用<style>标签在<head>内定义样式，或者使用<link>引入外部样式表。 13. **响应式设计**：随着移动设备的普及，学习如何使用媒体...
通过<style>标签或外部样式表（<link rel="stylesheet" href="...">），可以添加CSS到HTML文档中，实现颜色、字体、布局等视觉效果的控制。 5. 响应式设计：现代网页设计需要考虑多设备兼容性，HTML5引入了<meta ...
- `<style>`的`media`属性：定义样式应用于哪种媒体类型，如屏幕、打印等。 - `<link>`的`type`属性：指定链接资源的类型，如`text/css`表示CSS文件。 - `<link>`的`rel`属性：定义源文档与目标文档的关系，如`...
通过<style>标签在HTML文档内部定义样式，或通过<link>引入外部CSS文件。 9. **响应式设计**：随着移动设备的普及，了解如何使用媒体查询（media queries）实现响应式设计，让网页适应不同屏幕尺寸，变得至关重要。...
CSS用于样式化HTML，通过`<style>`标签内联定义，`<link>`标签引入外部样式表，或使用`style`属性直接应用样式。 11. HTML5新特性：HTML5引入了更多语义化标签（如`<header>`、`<footer>`、`<article>`、`<section>...
11. **响应式设计**：现代网页需要适应不同的设备和屏幕尺寸，HTML5引入了新的标签如<header>, <footer>, <nav>, <section>等，以及媒体查询（media queries），支持响应式设计。 12. **HTML5新特性**：HTML5引入了...
11. **响应式设计**：随着移动设备的普及，使用<meta>标签的viewport属性以及媒体查询（@media）实现响应式设计，使网页能在不同设备上适配。 12. **HTML5新特性**：HTML5引入了许多新元素，如<header>、<footer>、...
11. **响应式设计**：学习使用`<meta>`标签的`viewport`属性，以及`<media>`查询实现移动优先的响应式网页设计。 12. **HTML与CSS结合**：了解如何通过`<style>`标签或外部`<link>`引用CSS文件，将样式与结构分离，...
2. **头部元素**：学习如何使用<meta>标签设置字符编码，<title>标签定义页面标题，以及<link>标签引入外部CSS样式表。 3. **结构化元素**：理解并运用<header>、<nav>、<section>、<article>、<aside>和<footer>等...
9. **响应式设计**：`<meta>`标签中的`viewport`属性用于移动设备的响应式设计，`<style>`或外部`<link>`引入CSS，配合媒体查询`@media`实现不同设备的样式适配。 10. **JavaScript交互**：HTML与JavaScript结合，...
9. **CSS简介**：虽然标签中没有直接包含CSS，但项目可能涉及到内联样式（在HTML标签中使用style属性）或外部样式表（通过<link>标签引入.css文件）。CSS（Cascading Style Sheets）用于控制网页的样式和布局，比如...
<head>包含元数据，如页面标题<meta>、样式表<link>等；<body>则包含实际可见的内容，如文字、图片、链接等。 二、HTML标签 HTML标签通常成对出现，如<p>段落</p>，标签对中的内容会被浏览器解析并呈现。常见的标签...
通过`<style>`标签或外部`<link>`引用，可以将CSS应用到HTML文档中。 9. **HTML5新特性**：HTML5引入了许多新元素，如`<header>`、`<footer>`、`<nav>`、`<section>`、`<article>`等，增强了语义化，同时提供了音频...
`<style>`标签可在HTML文档中直接写CSS，或通过`<link>`引入外部样式表。 十、HTML学习资源 除了本教程，网上有许多优质的资源可供学习，如MDN Web Docs（Mozilla Developer Network）提供详细的HTML参考文档，W3...
10. CSS集成：HTML模板中通常会用到内联样式（`style`属性）、内部样式表（`<style>`标签放在`<head>`中）或外部样式表（`<link>`标签引用CSS文件），用于控制网页的视觉呈现。 11. 响应式设计：现代网页设计中，...