Maison > interface Web > tutoriel HTML > Introduction détaillée à la balise et à son contenu en HTML

Introduction détaillée à la balise et à son contenu en HTML

巴扎黑
Libérer: 2017-06-27 10:05:03
original
3715 Les gens l'ont consulté




  • tête

    • titre

    • base

    • méta

    • lien

    • script

    • style

<head>

est used Utilisé pour définir l'en-tête du document, c'est un conteneur pour tous les éléments d'en-tête. Les éléments contenus dans <head>

peuvent : <head>-
Script de référence -
Indique au navigateur où trouver la feuille de style -
Fournir des méta-informations -
etc. L'en-tête du document décrit divers attributs et informations du document, notamment le titre du document, son emplacement dans le Web, et la relation avec d'autres documents, etc. Les données contenues dans l’en-tête de la plupart des documents ne seront pas réellement affichées aux lecteurs en tant que contenu.

Les balises suivantes peuvent être utilisées dans la section d'en-tête :

, <base>, <link>, <meta>, <script>, <style><title>.

<title>

définit le titre du document, <title>c'est le seul élément obligatoire dans la section d'en-tête .

<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
Copier après la connexion
Copier après la connexion
Les navigateurs utilisent les titres d'une manière spéciale et les placent généralement sur la barre de titre ou la barre d'état de la fenêtre du navigateur. De même, lorsqu'un document est ajouté à la liste de liens ou à la liste de favoris ou de signets d'un utilisateur, le titre devient le nom par défaut du lien vers le document. La balise

<base>

spécifie l'adresse par défaut ou la cible par défaut pour tous les liens de la page. <base>

Normalement, le navigateur extraira les éléments correspondants de l'URL du document actuel pour combler les lacunes de l'URL relative.

Utilisez la balise
pour changer cela. Le navigateur n'utilisera alors plus l'URL du document en cours, mais utilisera l'URL de base spécifiée pour résoudre toutes les URL relatives. Cela inclut les URL dans les balises <base>, <a>, <img>, <link>. <form>

<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="eg_smile.gif" /><br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>
Copier après la connexion
Copier après la connexion

Attributs obligatoires : <base>href

href, la valeur est l'URL, spécifiant tous les liens relatifs dans l'URL de base de la page.

Attributs optionnels : <base>target

target, les valeurs sont _blank, _parent, _self, _top, framename, etc., indiquent où ouvrir tous les liens de la page. Par exemple, "_blank" signifie ouvrir dans une nouvelle fenêtre. L'élément

<meta>

peut fournir des méta-informations sur la page, telles qu'une description et une clé pour les moteurs de recherche et un mot de fréquence de mise à jour. Les métadonnées sont toujours transmises par paires nom/valeur. La balise <meta>

se situe en tête du document et ne contient aucun contenu. Les attributs de la balise <meta> définissent les couples nom/valeur associés au document. <meta>

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>
Copier après la connexion
Copier après la connexion

Attributs requis : <meta>content

content, la valeur est du texte, défini avec http- Meta -informations liées à l'attribut equiv ou name. Les métadonnées sont toujours transmises par paires nom/valeur.

ex :

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
Copier après la connexion
Copier après la connexion

Principaux attributs facultatifs : <meta>http-equiv, nom

http-equiv, la valeur est content-type, expires, actualiser, set-cookie, etc., associez l'attribut content à l'en-tête HTTP.

L'attribut http-equiv fournit un nom pour une paire nom/valeur. Et demande au serveur d'inclure une paire « nom/valeur » dans l'en-tête du message envoyé au navigateur avant d'envoyer le document lui-même.

par exemple :

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
Copier après la connexion
Copier après la connexion
Redirection (pour la relocalisation de pages Web) :

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>
Copier après la connexion
Copier après la connexion
Mots clés de description :

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
Copier après la connexion
Copier après la connexion

nom , la valeur est auteur, description, mots-clés, générateur, révisé, autres, etc., associez l'attribut content à un nom.

Ni les balises HTML ni XHTML ne reçoivent de noms prédéfinis. En général, vous êtes libre d'utiliser des noms qui ont du sens pour vous et pour les lecteurs du document source.

« mots-clés » est un nom souvent utilisé. Il définit un ensemble de mots-clés pour le document. Certains moteurs de recherche utilisent ces mots-clés pour classer les documents lorsqu'ils les rencontrent.
par exemple :

<meta name="keywords" content="HTML,ASP,PHP,SQL">
Copier après la connexion
Copier après la connexion

<link>

<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

<link>的主要属性:hrefreltypecharset

charset,指明被链接文档的字符集,如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性

在下面的例子中,charset 属性指示被链接文档是用英文编写的:

<head><link href="shanghai.htm" rel="parent" charset="en" /></head>
Copier après la connexion
Copier après la connexion

href,规定被链接文档的位置(URL)。

这个不解释了。

rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”,该类型描述样式表。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

<script>

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

  • 直接包含脚本语句

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>
Copier après la connexion
Copier après la connexion
  • 通过 src 属性指向外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>
Copier après la connexion
Copier après la connexion

<script>必需的属性:type

type,规定脚本的 MIME 类型。

对于不支持脚本的浏览器:

<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html>
Copier après la connexion
Copier après la connexion

<style>

<style> 标签用于为 HTML 文档定义样式信息。

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style>,内联样式用的是style属性。

  • 内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>
Copier après la connexion
Copier après la connexion
  • 内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>
Copier après la connexion
Copier après la connexion

也可以通过“id选择器”和“class选择器”进行:

  • id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>
Copier après la connexion
Copier après la connexion
  • class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>
Copier après la connexion
Copier après la connexion

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中,而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>
Copier après la connexion
Copier après la connexion

<style>必需的属性:type

type,唯一可能的值是“text/css”,规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接!</a></body></html>
Copier après la connexion
Copier après la connexion

Note:只有title标签<title>、script标签<script>和style标签<style>有完整的关闭标签。



  • tête

    • titre

    • base

    • méta

    • lien

    • script

      < La balise 🎜>
    • style

<head>

est utilisée pour définir l'en-tête du document, c'est un conteneur pour tous les éléments d'en-tête. Les éléments contenus dans <head>

peuvent : <head>-
Script de référence -
Indique au navigateur où trouver la feuille de style -
Fournir des méta-informations -
etc. L'en-tête du document décrit divers attributs et informations du document, notamment le titre du document, son emplacement dans le Web, et la relation avec d'autres documents, etc. Les données contenues dans l’en-tête de la plupart des documents ne seront pas réellement affichées aux lecteurs en tant que contenu.

Les balises suivantes peuvent être utilisées dans la section d'en-tête :

, <base>, <link>, <meta>, <script>, <style><title>.

<title>

définit le titre du document, <title>c'est le seul élément obligatoire dans la section d'en-tête .

<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
Copier après la connexion
Copier après la connexion
Les navigateurs utilisent les titres d'une manière spéciale et les placent généralement sur la barre de titre ou la barre d'état de la fenêtre du navigateur. De même, lorsqu'un document est ajouté à la liste de liens ou à la liste de favoris ou de signets d'un utilisateur, le titre devient le nom par défaut du lien vers le document. La balise

<base>

spécifie l'adresse par défaut ou la cible par défaut pour tous les liens de la page. <base>

Normalement, le navigateur extraira les éléments correspondants de l'URL du document actuel pour combler les lacunes de l'URL relative.

Utilisez la balise
pour changer cela. Le navigateur n'utilisera alors plus l'URL du document en cours, mais utilisera l'URL de base spécifiée pour résoudre toutes les URL relatives. Cela inclut les URL dans les balises <base>, <a>, <img>, <link>. <form>

<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="eg_smile.gif" /><br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>
Copier après la connexion
Copier après la connexion

Attributs obligatoires : <base>href

href, la valeur est l'URL, spécifiant tous les liens relatifs dans l'URL de base de la page.

Attributs optionnels : <base>target

target, les valeurs sont _blank, _parent, _self, _top, framename, etc., indiquent où ouvrir tous les liens de la page. Par exemple, "_blank" signifie ouvrir dans une nouvelle fenêtre. L'élément

<meta>

peut fournir des méta-informations sur la page, telles qu'une description et une clé pour les moteurs de recherche et un mot de fréquence de mise à jour. Les métadonnées sont toujours transmises par paires nom/valeur. La balise <meta>

se situe en tête du document et ne contient aucun contenu. Les attributs de la balise <meta> définissent les couples nom/valeur associés au document. <meta>

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>
Copier après la connexion
Copier après la connexion

Attributs requis : <meta>content

content, la valeur est du texte, défini avec http- Meta -informations liées à l'attribut equiv ou name. Les métadonnées sont toujours transmises par paires nom/valeur.

ex :

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
Copier après la connexion
Copier après la connexion

Principaux attributs facultatifs : <meta>http-equiv, nom

http-equiv, la valeur est content-type, expires, actualiser, set-cookie, etc., associez l'attribut content à l'en-tête HTTP.

L'attribut http-equiv fournit un nom pour une paire nom/valeur. Et demande au serveur d'inclure une paire « nom/valeur » dans l'en-tête du message envoyé au navigateur avant d'envoyer le document lui-même.

par exemple :

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
Copier après la connexion
Copier après la connexion
Redirection (pour la relocalisation de pages Web) :

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>
Copier après la connexion
Copier après la connexion
Mots clés de description :

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
Copier après la connexion
Copier après la connexion

nom , la valeur est auteur, description, mots-clés, générateur, révisé, autres, etc., associez l'attribut content à un nom.

Ni les balises HTML ni XHTML ne reçoivent de noms prédéfinis. En général, vous êtes libre d'utiliser des noms qui ont du sens pour vous et pour les lecteurs du document source.

« mots-clés » est un nom souvent utilisé. Il définit un ensemble de mots-clés pour le document. Certains moteurs de recherche utilisent ces mots-clés pour classer les documents lorsqu'ils les rencontrent.
par exemple :

<meta name="keywords" content="HTML,ASP,PHP,SQL">
Copier après la connexion
Copier après la connexion

<link>

<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

<link>的主要属性:hrefreltypecharset

charset,指明被链接文档的字符集,如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性

在下面的例子中,charset 属性指示被链接文档是用英文编写的:

<head><link href="shanghai.htm" rel="parent" charset="en" /></head>
Copier après la connexion
Copier après la connexion

href,规定被链接文档的位置(URL)。

这个不解释了。

rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”,该类型描述样式表。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

<script>

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

  • 直接包含脚本语句

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>
Copier après la connexion
Copier après la connexion
  • 通过 src 属性指向外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>
Copier après la connexion
Copier après la connexion

<script>必需的属性:type

type,规定脚本的 MIME 类型。

对于不支持脚本的浏览器:

<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html>
Copier après la connexion
Copier après la connexion

<style>

<style> 标签用于为 HTML 文档定义样式信息。

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style>,内联样式用的是style属性。

  • 内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>
Copier après la connexion
Copier après la connexion
  • 内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>
Copier après la connexion
Copier après la connexion

也可以通过“id选择器”和“class选择器”进行:

  • id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>
Copier après la connexion
Copier après la connexion
  • class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>
Copier après la connexion
Copier après la connexion

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中,而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>
Copier après la connexion
Copier après la connexion

<style>必需的属性:type

type,唯一可能的值是“text/css”,规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接!</a></body></html>
Copier après la connexion
Copier après la connexion

Note:只有title标签<title>、script标签<script>和style标签<style>有完整的关闭标签。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal