无涯教程了解到,典型的HTML文档将具有以下结构-
Document declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html>
<head>标签是各种重要标签的容器,例如<title>,<meta>,<link>,<base>,<style>,<script>和<noscript>标签。
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文档的元数据,其中包括有关页面有效期,页面作者,关键字列表,页面描述等的信息。
以下是HTML文档中<meta>标签的一些重要用法-
<!DOCTYPE html> <html> <head> <title>HTML Meta Tag Example</title> <!-- 提供关键字列表 --> <meta name="keywords" content="C, C++, Java, PHP, Perl, Python"> <!-- 提供页面描述 --> <meta name="description" content="Simply Easy Learning by Learnfk Point"> <!-- 作者信息 --> <meta name="author" content="Learnfk Point"> <!-- 页面内容类型 --> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 页面刷新延迟 --> <meta http-equiv="refresh" content="30"> <!-- 页面过期 --> <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT"> <!-- 标签告诉机器人不要索引页面的内容 --> <meta name="robots" content="noindex, nofollow"> </head> <body> <p>Hello, World!</p> </body> </html>
这将产生以下输出-
HTML <base>标签用于为页面中的所有相对URL指定基本URL,这意味着在查找给定项目时,所有其他URL将被串联到基本URL中。
如,在给定URL加上基本URL http://www.learnfk.com/目录之后,将搜索所有给定的页面和图像-
<!DOCTYPE html> <html> <head> <title>HTML Base Tag Example</title> <base href="https://www.learnfk.com/" /> </head> <body> <img src="/images/logo.png" alt="Logo Image"/> <a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a> </body> </html>
HTML <link>标签用于指定当前文档和外部资源之间的关系。 以下是链接外部根样式表文件的示例,该文件在Web根目录下的css子目录中可用-
<!DOCTYPE html> <html> <head> <title>HTML link Tag Example</title> <base href="https://www.learnfk.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.learnfk.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函数的示例-n -
<!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <base href="http://www.learnfk.com/" /> <script type="text/JavaScript"> function Hello() { alert("Hello, World"); } </script> </head> <body> <input type="button" onclick="Hello();" name="ok" value="OK" /> </body> </html>
这将产生以下输出,您可以在其中尝试单击给定的按钮-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
PPT设计进阶 · 从基础操作到高级创意 -〔李金宝(Bobbie)〕