HTML - Header
我们了解到典型的HTML文档将具有以下结构 -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
本章将提供有关标头部分的更多详细信息，该部分由HTML 标记表示。 标记是各种重要标记的容器，如
HTML 标签
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
这将产生以下结果 -
新页面打开HTML 标记
HTML 标记用于提供有关HTML文档的元数据，其中包括有关页面到期，页面作者，关键字列表，页面描述等的信息。
以下是HTML文档中标记的一些重要用法 -
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by IOWIKI">
<!-- Author information -->
<meta name = "author" content = "IOWIKI">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
这将产生以下结果 -
新页面打开 HTML
HTML
例如，在使用基本URL http://www.iowiki.com/目录为给定URL添加前缀后，将搜索所有给定的页面和图像 -
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.iowiki.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
这将产生以下结果 -
新页面打开但是，如果您将基本URL更改为其他内容，例如，如果基本URL是http://www.iowiki.com/home，则图像和其他给定链接将变为类似http://www.iowiki.com/home/images /logo.png和http://www.iowiki.com/html/index.htm
HTML 标记
HTML 标记用于指定当前文档和外部资源之间的关系。 以下示例链接Web根目录中css子目录中可用的外部样式表文件 -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.iowiki.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
这将产生以下结果 -
新页面打开HTML
HTML 以下是在
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.iowiki.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
这将产生以下结果 -
新页面打开Note - 要了解层叠样式表的工作原理，请查看css的单独教程
HTML
HTML 以下是我们使用JavaScript定义简单JavaScript函数的示例 -
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.iowiki.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
这将产生以下结果，您可以尝试单击给定按钮 -
新页面打开Note - 要了解JavaScript的工作原理，请查看javascript提供的单独教程
