- HTML教程
- HTML - 主页
- HTML - 概述
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 格式设置
- HTML - 短语标签
- HTML - 元标签
- HTML - 注释
- HTML - 图像
- HTML - 表格
- HTML - 列表
- HTML - 文本链接
- HTML - 图像链接
- HTML - 电子邮件链接
- HTML - 框架
- HTML - Iframe
- HTML - 块
- HTML - 背景
- HTML - 颜色
- HTML - 字体
- HTML - 表单
- HTML - 嵌入多媒体
- HTML - 字幕
- HTML - 标题
- HTML - 样式表
- HTML - JavaScript
- HTML - 布局
HTML - 标题
我们了解到,典型的 HTML 文档将具有以下结构 -
Document declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html>
本章将详细介绍由 HTML <head> 标记表示的标头部分。<head> 标签是各种重要标签的容器,例如 <title>、<meta>、<link>、<base>、<style>、<script> 和 <noscript> 标签。
HTML <title> 标签
HTML <title> 标签用于指定 HTML 文档的标题。以下是为 HTML 文档提供标题的示例 -
<!DOCTYPE html> <html> <head> <title>HTML Title Tag Example</title> </head> <body> <p>Hello, World!</p> </body> </html>
这将产生以下结果 -
HTML <meta> 标签
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> 标签
HTML <base> 标签用于指定页面中所有相对 URL 的基本 URL,这意味着在定位给定项目时,所有其他 URL 将连接到基本 URL。
例如,在给定 URL 加上基本 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"/> <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> </body> </html>
这将产生以下结果 -
但是,如果您将基本 URL 更改为其他内容,例如,如果基本 URL 是 http://www.tutorialspoint.com/home,则图像和其他给定链接将变为 http://www.tutorialspoint.com/home/images /logo.png 和 http://www.tutorialspoint.com/html/index.htm
HTML <link> 标签
HTML <link> 标签用于指定当前文档与外部资源之间的关系。以下是链接 Web 根目录内css子目录中可用的外部样式表文件的示例-
<!DOCTYPE html> <html> <head> <title>HTML link Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> </head> <body> <p>Hello, World!</p> </body> </html>
这将产生以下结果 -
HTML <style> 标签
HTML <style> 标签用于指定当前 HTML 文档的样式表。以下是在 <style> 标记内定义一些样式表规则的示例 -
<!DOCTYPE html> <html> <head> <title>HTML style Tag Example</title> <base href = "https://www.tutorialspoint.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 <script> 标签用于包含外部脚本文件或定义 HTML 文档的内部脚本。以下是我们使用 JavaScript 定义简单 JavaScript 函数的示例 -
<!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <base href = "http://www.tutorialspoint.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上提供的单独教程