Html 简明教程
HTML - Header
HTML 页眉是 HTML 文档的一部分，用于包含有关文档的元信息，例如标题、字符编码、指向样式和脚本的链接以及其他元数据。 <head> 标签用于定义文档的页眉。
页眉元素中提供的信息对于浏览器正确呈现页面以及搜索引擎和其他服务了解页面内容至关重要。不建议在 head 标签内包含文档详细信息的其他部分。
HTML Header Elements
以下是在文档页眉内使用的常见标签。
Elements |
Description |
标题标签用于表示网页标题。 |
|
指定有关文档的元数据和附加重要信息。 |
|
对于 HTML 文档中的每个相对 URL，Base 标签定义一个绝对（基准）URL。 |
|
样式标签包含 HTML 文档的样式信息。 |
|
指定当前文档与外部资源之间的关系。 |
|
脚本标签用于嵌入客户端脚本。 |
Examples of HTML Header Elements
以下是显示 HTML 中不同标题元素用法的一些示例。
Specify title for HTML Document
HTML <title> 标签用于指定 HTML 文档的标题。标题必须描述网页的内容，其格式应仅为文本。它出现在浏览器的选项卡的标题栏中。
以下是一个示例，展示了如何使用 <title> 标签为 HTML 文档指定标题。作为文件运行此代码以查看浏览器选项卡顶部的标题。
<!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> 标签指定的元数据不会显示在网页上，但它可被机器读取。
以下示例描述了 <meta> 标签在 HTML 文档中的一些重要用法。
<!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* 。
在此示例中，所有给定的页面和图像将在基本 URL 'http://www.tutorialspoint.com/' 目录之前缀化后进行搜索。
<!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 文档。
以下是将可用的外部样式表文件链接到 Web 根目录的 CSS 子目录的示例。
<!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
<!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 文档定义内部脚本。脚本是一种执行某些操作的可执行代码。
以下是我们使用脚本标签定义简单 JavaScript 函数的示例。当用户单击按钮时，一个弹出框将显示一个 Hello, World 消息。
<!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>