HTML 页面头部
时间:2019-06-08 23:19:24 来源:igfitidea点击:
一个典型的HTML文档将具有以下结构:
文档定义标签 <html> <head> 文档标题相关标记 </head> <body> 文档正文相关标记 </body> </html>
<head>
标记是各种重要标记的容器,如<title>
、<meta>
、<link>
、<base>
、<style>
、<script>
和<noscript>
标记。
HTML <title>
标签
HTML<title>
标记用于指定HTML文档的标题。
<!DOCTYPE html> <html> <head> <title>文档的标题</title> </head> <body> <p>Hello, World!</p> </body> </html>
HTML <meta>
标签
HTML<meta>
标记用于提供有关HTML文档的元数据,其中包括有关页面过期、页面作者、关键字列表、页面描述等信息。
<!DOCTYPE html> <html> <head> <title>HTML Meta标签示例</title> <!-- 关键字列表 --> <meta name = "keywords" content = "HTML, C++, Java, PHP, Perl, 之路教程"> <!-- 页面描述 --> <meta name = "description" content = "在之路教程,可以学习各种编程语言"> <!-- 作者信息 --> <meta name = "author" content = "theitroad"> <!-- 页面内容类型 --> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"> <!-- 页面刷新延时 --> <meta http-equiv = "refresh" content = "30"> <!-- 页面过期时间 --> <meta http-equiv = "expires" content = "Wed, 11 June 2016 14:25:27 GMT"> <!-- 告诉机器人不要索引页面内容 --> <meta name = "robots" content = "noindex, nofollow"> </head> <body> <p>Hello, World!</p> </body> </html>
HTML <base>
标签
HTML <base>
标记用于为页面中的所有相对URL指定基URL。
例如,在给定的URL前面加上基URL之后,所有其他URL将连接到http://www.theitroad.com/中。
<!DOCTYPE html> <html> <head> <title>HTML Base Tag Example</title> <base href = "https://www.theitroad.com/" /> </head> <body> <img src = "/static/images/logo.png" alt = "Logo图片"/> <a href = "/html/index.html" title = "HTML教程">HTML教程</a> </body> </html>
链接URL变成
https://www.theitroad.com/static/images/logo.png
https://www.theitroad.com/html/index.html
HTML<link>
标签
HTML<link>
标记用于指定当前文档和外部资源之间的关系。
下面的示例链接到外部样式表文件 /css/style.css
<!DOCTYPE html> <html> <head> <title>HTML link 链接</title> <base href = "https://www.theitroad.com/" /> <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> </head> <body> <p>Hello, World!</p> </body> </html>
HTML<style>
标签
HTML<style>
标记用于指定当前HTML文档的样式表。
<!DOCTYPE html> <html> <head> <title>HTML style 标签示例</title> <base href = "https://www.theitroad.com/" /> <style type = "text/css"> .myclass { background-color: #aaa; padding: 10px; } </style> </head> <body> <p class = "myclass">Hello, World!</p> </body> </html>
HTML<script>
标签
HTML<script>
标记用于包括外部脚本文件或为HTML文档定义内部脚本。
下面的例子: 使用JavaScript定义一个简单JavaScript函数
<!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <base href = "http://www.theitroad.com/" /> <script type = "text/JavaScript"> function Hello() { alert("Hello, World"); } </script> </head> <body> <input type = "button" onclick = "Hello();" name = "ok" value = "OK" /> </body> </html>