REL (atribut HTML)-tutorial css-php.cn

REL (atribut HTML)

Lisa Kudrow

Lepaskan： 2025-02-27 10:09:16

asal

814 orang telah melayarinya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Understanding the HTML rel Attribute</title>
</head>
<body>

<h1>The `rel` Attribute: Defining Relationships in HTML</h1>

<p>The <code>rel</code> attribute specifies the relationship between the current document and the linked resource.  It's primarily used with the <code><link></code> and <code><a></code> tags to provide context and meaning to links.</p>

<h2>Common Uses of the `rel` Attribute</h2>

<h3>Stylesheets</h3>
<p>The most common use is linking stylesheets:  <code><link rel="stylesheet" href="styles.css"></code>.  This clearly indicates the linked file is a stylesheet.</p>

<h3>Alternate Stylesheets</h3>
<p>You can define multiple stylesheets using <code>rel="alternate stylesheet"</code>.  However, browser support for easily switching between these is limited.  A JavaScript-based solution is often necessary for user selection.</p>

<pre class="brush:php;toolbar:false"><code>
<link href="main.css" media="screen" rel="stylesheet" type="text/css">
<link rel="alternate stylesheet" title="Higher Contrast" href="contrast.css" type="text/css" media="screen">
<link rel="alternate stylesheet" title="Gratuitous CSS" href="hot.css" type="text/css" media="screen">

Salin selepas log masuk

Perhatikan penggunaan atribut title. Teks ini muncul dalam menu pemilihan lembaran gaya penyemak imbas (di mana tersedia).

Contoh tajuk stylesheet dalam menu penyemak imbas.

RSS/Atom Feed

atribut rel="alternate" juga digunakan untuk menghubungkan ke format kandungan alternatif seperti RSS atau suapan atom:

<code>
<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS 2.0">
<link rel="alternate" type="application/atom+xml" href="/atom.xml" title="Atom 1.0">
</code>

Salin selepas log masuk

favicons

untuk menentukan favicon (ikon laman web), gunakan rel="shortcut icon":

<code>
<link href="/favicon.ico" rel="shortcut icon">
</code>

Salin selepas log masuk

Hubungan halaman (navigasi)

untuk halaman berurutan, rel="next" dan rel="prev" menentukan halaman seterusnya dan sebelumnya dalam siri.

Lesen

anda boleh menunjukkan lesen untuk kandungan halaman menggunakan

dan memberikan pautan ke butiran lesen. rel="license" Hubungan tersuai

Walaupun nilai yang telah ditetapkan adalah disyorkan, anda boleh membuat hubungan tersuai. Walau bagaimanapun, penyemak imbas tidak semestinya memahami nilai -nilai tersuai ini; Mereka mungkin berguna untuk manipulasi JavaScript atau tujuan khusus bukan pelayar.

Soalan Lazim

Bahagian ini akan menjawab soalan umum mengenai atribut `rel`.

Apakah tujuan atribut HTML REL?

Atribut

menentukan hubungan antara dokumen HTML semasa dan sumber yang dipautkan.

rel bagaimana atribut REL berfungsi dengan stylesheets?

Menunjukkan sumber yang dipautkan adalah lembaran gaya CSS.

rel="stylesheet" Bolehkah atribut REL digunakan untuk tujuan SEO?

ya, nilai seperti

dan

mempengaruhi tingkah laku enjin carian. rel="nofollow" rel="canonical" apa atribut rel = "alternatif"?

Menentukan versi alternatif dokumen (mis., Bahasa yang berbeza).

rel="alternate" Bagaimana atribut REL digunakan dengan tag?

Sama seperti

, ia menambah makna semantik kepada hiperpautan (mis., ).

<link> Bolehkah saya menggunakan pelbagai nilai dalam atribut Rel? rel="nofollow"

Ya, berasingan pelbagai nilai dengan ruang (mis., ).

Apakah atribut "pengarang" yang digunakan?

rel="nofollow noopener" Menentukan pengarang dokumen (walaupun sokongannya terhad).

apa atribut Rel = "Icon"?

Menentukan favicon untuk laman web.

Apakah atribut rel = "preload" yang digunakan?

Menentukan sumber yang akan dimuat terlebih dahulu untuk meningkatkan prestasi laman web.

Apakah perbezaan antara rel = "seterusnya" dan rel = "prev"?

Mereka menentukan halaman seterusnya dan sebelumnya dalam urutan kandungan paginated.

Atas ialah kandungan terperinci REL (atribut HTML). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!