HTML-head头部浅析

绝地灬酷狼 2022-05-24 09:57 192阅读 0赞

## HTML结构 ##

在sublime或HBuildr新建HTML文件，输入html:5,按下tab键后，自动生成的代码大致如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    </body>
    </html>

### 文档声明头 ###

标准的HTML页面，第一行以

<!DOCTYPE...

开头，而这一行就被称为文档声明头。  
DocType Declaration，简称DTD。  
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML4.01一共有6种DTD，也就是说HTML第一行语句一共有6种：  
![HTML_DTD.png][]

上图中的三种小规范进行解释：

*  strict：表示“严格的”，这种模式里面的要求更为严格。
 *  Transitional：表示“普通的”，这种模式就是没有一些别的规范。
 *  Frameset：表示“框架”，在框架的页面使用。

strict这种严格体现在哪里？有一些标签不能使用。 比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。那怎么给文本增加下划线呢？可以使用css属性来解决。XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。

在sublime输入的html:xt，x表示XHTML，t表示transitional。  
HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了。

### 头标签(head) ###

head标签是所有头部元素的容器。

<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。
    可添加到head部分的标签：<title>、<base>、<meta>、<link>、<script>、<style>: <title>：指定整个网页的标题，在浏览器最上方显示。 <base>:为页面上的所有链接规定默认地址或默认目标(target)。 <meta>：提供有关页面的基本信息。 <link>：定义文档与外部资源的关系。 <script>:定义客户端脚本，如JavaScript。 <style>:定义内部样式表与网页的关系。

#### meta标签 ####

可提供有关页面的原信息（mata-information）,  
针对搜索引擎和更新频度的描述和关键词。  
元数据（metadata）是关于数据的信息。

*  http-equiv属性  
    
    
     *  用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容。
     *  与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
    <meta http-equiv="x-ua-compatible" content="IE=edge">

*  name属性  
    
    
     *  用于页面的关键字和描述，是写给搜索引擎看的，
     *  关键字可以有多个，用 ‘,’号隔开。
     *  与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

#### title 标签 ####

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。  
title 元素能够：  
\* 定义浏览器工具栏中的标题  
\* 提供页面被添加到收藏夹时显示的标题  
\* 显示在搜索引擎结果中的页面标题  
\* 告诉用户和搜索引擎这个网页的主要内容是什么，  
\* 搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

#### base 标签 ####

<base> 标签为页面上的所有链接设置默认的地址或默认的目标（target）：
    例：
    <head>
    <base href="http://www.w3school.com.cn/images/" />
    <base target="_blank" />
    </head>
    
    实例2：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
    </head>
    
    <body>
    <img src="logo.png"> - 注意这里我们设置了图片的相对地址。
    能正常显示是因为我们在 head 部分设置了 base 标签，
    该标签指定了页面上所有链接的默认 URL，
    所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
    <br><br>
    <a href="http://www.w3cschool.cn">W3Cschool教程</a> -
    注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。
    因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
    </body>
    </html>

![w3cschool][]

#### link 标签 ####

#### style 标签 ####

注：link和style详细会在讲到样式和css时再详解和列实例。

#### script标签 ####

script 标签用于定义客户端脚本，比如JavaScript。

HTML头部元素   标签描述
    <head>        定义关于文档的信息。
    <title>         定义文档标题。
    <base>        定义页面上所有链接的默认地址或默认目标。
    <link>        定义文档与外部资源之间的关系。
    <meta>        定义关于 HTML 文档的元数据。
    <script> 定义客户端脚本。 <style> 定义文档的样式信息。

参考：  
1、[w3cschool][w3cschool 1]  
2、[小马哥][Link 1]

[HTML_DTD.png]: /images/20220524/8d02a2d853584787a6bc6d38fe766928.png
[w3cschool]: /images/20220524/87e30badd89b48f1945f8e01d6ae9d85.png
[w3cschool 1]: http://www.w3cschool.cn
[Link 1]: https://www.cnblogs.com/majj/p/9056951.html