Html 简明教程
HTML - Header
HTML 页眉是 HTML 文档的一部分，用于包含有关文档的元信息，例如标题、字符编码、指向样式和脚本的链接以及其他元数据。 <head> 标签用于定义文档的页眉。
HTML header is part of an HTML document used to contain meta-information about document such as title, character encoding, link to style and script and other meta data. The <head> tag is used to define header of a document.
页眉元素中提供的信息对于浏览器正确呈现页面以及搜索引擎和其他服务了解页面内容至关重要。不建议在 head 标签内包含文档详细信息的其他部分。
This information provided in header elements are essential for the browsers to correctly render the page and for search engines and other services to understand the content of the page. It is not recommended to include other parts of documents details inside the head tag.
HTML Header Elements
以下是在文档页眉内使用的常见标签。
Following are common tags used inside header of a document.
Elements |
Description |
Title tag is used to represent the webpage title. |
|
Specify metadata and additional important information about a document. |
|
For every relative URL in the HTML document, Base tag defines an absolute (base) URL. |
|
Style tag contains style information for an HTML document. |
|
Specifies relationship between the current document and an external resource. |
|
Script tag is used to embed Client Side Scripting. |
Examples of HTML Header Elements
以下是显示 HTML 中不同标题元素用法的一些示例。
Following are some examples that shows usage of different header elements in HTML.
Specify title for HTML Document
HTML <title> 标签用于指定 HTML 文档的标题。标题必须描述网页的内容，其格式应仅为文本。它出现在浏览器的选项卡的标题栏中。
The HTML <title> tag is used for specifying the title of the HTML document. The title must describe the content of the web page and its format should be text only. It appears in the title bar of browser’s tab.
以下是一个示例，展示了如何使用 <title> 标签为 HTML 文档指定标题。作为文件运行此代码以查看浏览器选项卡顶部的标题。
Following is an example that shows how to give a title to an HTML document using the <title> tag. Run this code as a file to see title on top of your browser tab.
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>
Save this code (.html) and run in your
browser to see title of the document
</p>
</body>
</html>Add meta data for Document
HTML <meta> 标签用于为 HTML 文档提供元数据。元数据只不过是关于网页的其他信息，包括页面到期时间、页面作者、关键字列表、页面说明等。此信息会进一步用于搜索引擎优化。请记住， <meta> 标签指定的元数据不会显示在网页上，但它可被机器读取。
The HTML <meta> tag is used to provide metadata about an HTML document. The metadata is nothing but additional information about the web page including page expiry, page author, list of keywords, page description and so forth. This information is further used for the purpose of search engine optimization. Remember, the metadata specified by the <meta> tag is not displayed on the web page, but it is machine-readable.
以下示例描述了 <meta> 标签在 HTML 文档中的一些重要用法。
The following example describes a few of the important usages of <meta> tag inside an HTML document.
<!DOCTYPE html>
<html>
<head>
<!-- Provide list of keywords -->
<meta name="keywords"
content="C, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name="description"
content="HTML by TutorialsPoint">
<!-- Author information -->
<meta name="author"
content="Tutorials Point">
<!-- Page content type -->
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv="refresh"
content="30">
<!-- Setting expiry time for page-->
<meta http-equiv="expires"
content="Wed, 21 June 2006 14:25:27 GMT">
<!-- Prevent bots from indexing page -->
<meta name="robots"
content="noindex, nofollow">
</head>
<body>
<p>
Describing the use of HTML meta tag
</p>
</body>
</html>Set Base Address for URL
HTML <base> 标签用于指定页面中所有相对 URL 的基本 URL，这意味着在查找给定项时，所有其他 URL 将连接到基本 URL。我们只允许在 HTML 文档中使用一个基本元素。 <base> 标签最常用的属性是 * href* 和 * target* 。
The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item. We are allowed to use only one base element in our HTML document. The most frequently used attributes of <base> tag are href and target.
在此示例中，所有给定的页面和图像将在基本 URL 'http://www.tutorialspoint.com/' 目录之前缀化后进行搜索。
In this example, all the given pages and images will be searched after prefixing the given URLs with base URL 'http://www.tutorialspoint.com/' directory.
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com" />
</head>
<body>
<img src="/images/logo.png"
alt="Logo Image"/>
<br> <br>
<a href="/html/index.htm"
title="HTML Tutorial"/>
HTML Tutorial
</a>
<br> <br>
<a href="/css/index.htm"
title="CSS Tutorial"/>
CSS Tutorial
</a>
<p>
Instead of using full url, we reduced it
to "html/index.htm" because we mentioned
base url as "www.tutorialspoint.com"
</p>
</body>
</html>Link External Resources to HTML Document
在 HTML 中， <link> 标签用于指定当前网页与其他外部资源之间的关系。外部资源的源放置在 href 属性内。 <link> 标签的其他属性是 rel、type 和 media。它最常见的用途是将样式表嵌入 HTML 文档。
In HTML, the <link> tag is used to specify relationships between the current webpage and another external resource. The source of external resources is placed inside the href attribute. The other attributes of <link> tag are rel, type, and media. It’s most common use is to embed stylesheets into the HTML document.
以下是将可用的外部样式表文件链接到 Web 根目录的 CSS 子目录的示例。
Following is an example to link an external style sheet file available in CSS sub-directory within web root.
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<link rel="stylesheet"
type="text/css"
href="/css/style.css">
</head>
<body>
<p>
This is an example of linking stylesheet
to the current HTML document.
</p>
</body>
</html>Adding Styles to HTML Document
The HTML <style> tag is used to specify styles either for the whole HTML document or for a particular element. Its most common attributes are title and media.
<!DOCTYPE html>
<html>
<head>
<style>
/*Styles to every tags*/
*{
margin: 0px;
padding: 10px;
}
/*Style only applied to Body tag*/
body{
background-color: lightblue;
}
/*Styles applied to all div tags*/
div{
background-color: coral;
border:5px solid;
}
/*Styles applied to 'myclass' class*/
.myclass{
border:5px solid;
}
/*Styles only applied to 'myid' id*/
#myid{
height:40px;
}
</style>
</head>
<body>
<div></div>
<br>
<p class="myclass">
Hello, World!
</p>
<br>
<p class="myclass">
Hello, World!
</p>
<br>
<div id="myid">
Height = 40 px
</div>
</body>
</html>Client Side Scripting in HTML
HTML <script> 标签用于包含外部脚本文件或为 HTML 文档定义内部脚本。脚本是一种执行某些操作的可执行代码。
The HTML <script> tag is used to include either an external script file or to define an internal script for the HTML document. The script is an executable code that performs some action.
以下是我们使用脚本标签定义简单 JavaScript 函数的示例。当用户单击按钮时，一个弹出框将显示一个 Hello, World 消息。
Following is an example where we are using script tag to define a simple JavaScript function. When the user clicks on the button an alert box will pop-up with a Hello, World message.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function Hello(){
alert("Hello, World");
}
</script>
</head>
<body>
<br>
<input type="button"
onclick="Hello();"
value="Click Me" />
</body>
</html>