HTML 页面头部-之路教程

HTML`<style>`标签

HTML<style>标记用于指定当前HTML文档的样式表。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style 标签示例</title>
      <base href = "https://www.onitroad.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

HTML 页面头部

一个典型的HTML文档将具有以下结构:

文档定义标签
<html>
   
   <head>
      文档标题相关标记
   </head>

   <body>
      文档正文相关标记
   </body>
   
</html>

<head>标记是各种重要标记的容器，如<title>、<meta>、<link>、<base>、<style>、<script>和<noscript>标记。

HTML`<script>`标签

HTML<script>标记用于包括外部脚本文件或为HTML文档定义内部脚本。

下面的例子: 使用JavaScript定义一个简单JavaScript函数

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.onitroad.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

HTML `<base>`标签

HTML <base>标记用于为页面中的所有相对URL指定基URL。

例如，在给定的URL前面加上基URL之后，所有其他URL将连接到http://www.onitroad.com/中。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.onitroad.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.onitroad.com/static/images/logo.png
https://www.onitroad.com/html/index.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 = "onitroad">

      <!-- 页面内容类型 -->
      <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 `<title>`标签

HTML<title>标记用于指定HTML文档的标题。

<!DOCTYPE html>
<html>

   <head>
      <title>文档的标题</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

HTML`<link>`标签

HTML<link>标记用于指定当前文档和外部资源之间的关系。

下面的示例链接到外部样式表文件 /css/style.css

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link 链接</title>
      <base href = "https://www.onitroad.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

日期：2019-06-08 23:19:24 来源：oir作者：oir

←HTML 字幕

HTML 样式表→

HTML<style>标签

HTML<script>标签

HTML <base>标签

HTML <meta>标签

HTML <title>标签

HTML<link>标签