我们了解到典型的HTML文档将具有以下结构 :
Document declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html>
本章将详细介绍标题部分,由HTML< head>表示.标签. < head> tag是各种重要标签的容器,例如< title>,< meta>,< link>,< base>,< style>,< script>和< noscript>标签.
HTML< title> tag用于指定HTML文档的标题.下面是一个给HTML文档标题的示例 :
<!DOCTYPE html> <html> <head> <title>HTML Title Tag Example</title> </head> <body> <p>Hello, World!</p> </body> </html>
HTML <meta>标签用于提供有关HTML文档的元数据,其中包括有关页面有效期,页面作者,关键字列表,页面描述等的信息。
以下是HTML文档中<meta>标记的一些重要用法:
<!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 Tutorials Point"> <!-- 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"> <!-- 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 <base>标记用于为页面中所有相对URL指定基本URL,这意味着在查找给定项目时,所有其他URL将被串联到基本URL中。
例如,在给定URL加上基本URL http://www.it1352.com/目录之后,将搜索所有给定的页面和图像:
<!DOCTYPE html> <html> <head> <title>HTML Base Tag Example</title> <base href = "https://www.IT屋.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.it1352.com / home,则图像和其他给定的链接将类似于http://www.it1352.com / home /images/logo.png和http://www.it1352.com / html / index.htm
HTML <link>标记用于指定当前文档和外部资源之间的关系。 以下是链接Web根目录下css子目录中可用的外部样式表文件的示例:
<!DOCTYPE html> <html> <head> <title>HTML link Tag Example</title> <base href = "https://www.IT屋.com/" /> <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> </head> <body> <p>Hello, World!</p> </body> </html>
HTML <style>标记用于指定当前HTML文档的样式表。 以下是在<style>标签内定义一些样式表规则的示例:
<!DOCTYPE html> <html> <head> <title>HTML style Tag Example</title> <base href = "https://www.IT屋.com/" /> <style type = "text/css"> .myclass { background-color: #aaa; padding: 10px; } </style> </head> <body> <p class = "myclass">Hello, World!</p> </body> </html>
注意:要了解级联样式表的工作原理,请查看CSS上的单独教程
HTML <script>标记用于包括外部脚本文件或定义HTML文档的内部脚本。 以下是我们使用JavaScript定义简单JavaScript函数的示例:
<!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <base href = "http://www.IT屋.com/" /> <script type = "text/JavaScript"> function Hello() { alert("Hello, World"); } </script> </head> <body> <input type = "button" onclick = "Hello();" name = "ok" value = "OK" /> </body> </html>
这将产生以下结果,您可以在其中尝试单击给定的按钮:
注意 : 要了解JavaScript的工作原理,请查看 javascript 中提供的单独教程