上一节:
下一节:

  HTML head

  • HTML <head>元素

    <head>元素是元数据的容器（关于数据的数据），并放置在间<html>标记和<body>标签。 HTML元数据是有关HTML文档的数据。浏览器不显示元数据。 元数据通常定义文档标题，字符集，样式，链接，脚本和其他元信息。 HTML的元数据元数据标签有：<title>，<style>， <meta>， <link>，<script>，和<base>。

  • HTML <title>元素

    <title>元素定义文档的标题，并且在所有HTML / XHTML文档中都是必需的。 <title>元素有以下作用：
    • 在浏览器选项卡中定义标题
    • 在将页面添加到收藏夹时(对着当前页面按ctrl+d)为页面提供标题
    • 在搜索引擎结果中显示该页面的标题
    <!DOCTYPE html>
          <html>
          <head>
            <title>欢迎来到蝴蝶教程</title>
          </head>
          <body>
          这里是在浏览器内显示的内容......
          </body>
          </html>

  • HTML <style>元素

    <style>元素用于定义单个HTML页面的样式信息： 
    <style>
            body {background-color: green;}
            h1 {color: red;}
            p {color: blue;}
          </style>

  • HTML <link>元素

    <link>元素用于链接到外部样式表： 
    <style>
            body {background-color: green;}
            h1 {color: red;}
            p {color: blue;}
          </style>
    提示：要了解有关CSS的所有信息，请访问我们的CSS教程。

  • HTML <meta>元素

    <meta>元素用于指定使用的字符集，页面描述，关键字，作者和其他元数据。 浏览器（如何显示内容），搜索引擎（关键字）和其他Web服务使用的元数据。 定义使用的字符集： 
    <meta charset="UTF-8">
    定义您的网页的描述： 
    &l;tmeta name="description" content="提供编程的基础教程">
    为搜索引擎定义关键字： 
    <meta name="keywords" content="HTML, CSS, XML, JavaScript,PHP,Java">
    定义页面的作者： 
    <meta name="author" content="Jim">
    每10秒刷新一次文档： 
    <meta http-equiv="refresh" content="10">

  • 控制视口

    HTML5引入了一种方法，让Web设计人员通过<meta>标记控制视口 。 视口是用户在网页上的可见区域。它随设备尺寸变化而变化。 您应该<meta>在所有网页中包含以下视口元素： 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    一个<meta>视元素对如何控制网页的尺寸和缩放浏览器的说明： width = device-width将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

  • HTML <script>元素

    <script>元素用于定义客户端JavaScript。 这个JavaScript写的是“欢迎来到蝴蝶教程” 到id =“demo”的HTML元素： 
    <script>
           
          document.getElementById("demo").innerHTML = "欢迎来到蝴蝶教程";
         
          </script>
          <h1 id="demo"></h1>
    尝试一下
    提示：要了解有关JavaScript的所有信息，请访问我们的JavaScript教程。

  • HTML <base>元素

    <base>元素指定页面中所有相对URL的基本URL。 什么意思？ 打个比方说你的网站根目录下有一个images文件夹，images文件夹下有一个goods文件夹， 你就可以在你商品详情页面的head中加这样一个base： 
    <base href="https://(你的域名)/images/goods" target="_blank">
    在body中的img 的 src 就可以这样写： 
    <img src="test1.jpg" >
    这时候这个img 就会自动定位到/images/goods/test1.jpg 这张图片。

  • 省略<html>，<head>和<body>

    根据HTML5的标准; <html>，<body>，<head>标签可以省略。 
    <!DOCTYPE html>
          <title>欢迎来到蝴蝶教程</title>
          <h1>这是标题</h1>
          <p>这是段落</p>
    尝试一下
    注意：我们不建议省略<html>和<body> 标签。省略这些标记可能会导致DOM或XML软件崩溃并在旧版浏览器中产生错误（IE9）。但是，省略<head>标签已经很常见了很长一段时间。
上一节:
下一节: