HTML5文档头部相关标签怎样使用？

作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在head标签内，因此被称为头部相关标签。本节将具体介绍常用的头部标签。

1.设置页面标题标签<title>

<title>标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”，具体代码如下：

<title>轻松学习HTML5</title>

上述代码对应的页面标题效果如图1所示。

图 1设置页面标题标签<title>

2.定义页面元信息标签<meta />

1）<meta name="名称" content="值" />

在<meta />标签中使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值，具体应用如下。

●设置网页关键字，例如某图片网站的关键字设置：

<meta name="keywords" content="千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图片素材,网页素材,免费素材,PS素材,网站素材,设计模板,设计素材， 网页模板免费下载,千图,素材中国,素材,免费设计,图片" />

其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“,”分隔。

●设置网页描述，例如某图片网站的描述信息设置：

<meta name="description" content="专注免费设计素材下载的网站！提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载" />

其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多，能够描述清晰即可。

●设置网页作者，例如可以为网站增加作者信息：

<meta name="author" content="网络部" />

其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。

2）<meta http-equiv="名称" content="值" / >

在<meta />标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html" / >，通知浏览器发送的文件类型是HTML。具体应用如下：

●设置字符集，例如某图片官网字符集的设置：

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=gbk，两个属性值中间用“;”隔开。这段代码用于说明当前文档类型为HTML，字符集为gbk(中文编码)。目前最常用的国际化字符集编码格式是utf-8，常用的国内中文字符集编码格式主要是gbk和gb2312。当用户使用的字符集编码不匹配当前浏览器时，网页内容就会出现乱码。
值得一提的是，在HTML5中，简化了字符集的写法，变为如下所示代码。

<meta charset="utf-8">

●设置页面自动刷新与跳转，例如定义某个页面10秒后跳转至百度：

<meta http-equiv="refresh" content="10; url= https://www.baidu.com/" />

其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。

使用DIV+CSS布局时，我们需要通过为div命名的方式，来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。

1. header标签

HTML5中的header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下：

<header>

  <h1>网页主题</h1>

    ...
    
</header>

在上面的语法格式中，<header></header>的使用方法和<div class="header"></div>类似。

注意：

在HTML网页中，并不限制header标签的个数，一个网页中可以使用多个header标签，也可以为每一个内容块添加header标签。

2. nav标签

nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。nav标签的使用方法和普通标签类似，例如下面这段示例代码：

<nav>

  <ul>

        <li><a href="#">首页</li>

        <li><a href="#">公司概况</li>

        <li><a href="#">产品展示</li>

        <li><a href="#">联系我们</li>

  </ul></nav>

在上面这段代码中，通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个nav标签，作为页面整体或不同部分的导航。具体来说，nav标签可以用于以下几种场合。

● 传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

● 侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

● 页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

● 翻页操作：翻页操作切换的是网页的内容部分，可以通过点击“上一页”或“下一页”切换，也可以通过点击实际的页数跳转到某一页。

除了以上几点以外，nav标签也可以用于其他导航链接组中。需要注意的是，并不是所有的链接组都要被放进nav标签，只需要将主要的和基本的链接放进nav标签即可。

3. footer标签

footer标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。在HTML5出现之前，一般使用<div class="footer"></div>标签来定义页面底部，而现在通过HTML5的footer标签可以轻松实现。与header标签相同，一个页面中可以包含多个footer标签。

4. article标签

article标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。一个article标签通常有它自己的标题（可以放在header标签中）和脚注（可以放在footer标签中），例如下面的示例代码。

<article>

    <header>

    <h1>秋天的味道</h1>
     
            <p>你想不想知道秋天的味道？它是甜、是苦、是涩...</p>

  </header>

    <footer>
            
               <p>著作权归XXXXXX公司所有...</p>

  </footer></article>

需要注意的，在上面的示例代码中还缺少主体内容。主体内容通常会写在header和footer之间，通过多个section标签进行划分。一个页面中可以出现多个article标签，并且article标签可以嵌套使用。

5. section标签

section标签表示一段专题性的内容，一般会带有标题，主要应用在文章的章节中。例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在使用section标签时，需要注意以下几点：

● section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用div标签。

如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。

● 没有标题的内容模块不要使用section标签定义。

值得一提的是，在HTML5中，article标签可以看作是一种特殊的section标签，它比section标签更具有独立性，即section标签强调分段或分块，而article标签强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article标签；但是如果想要将一块内容分成多段时，应该使用section标签。

6. aside标签

aside标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。aside标签的用法主要分为两种：

● 被包含在article标签内作为主要内容的附属信息。

● 在article标签之外使用，作为页面或网站的附属信息部分。最常用的的使用形式是侧边栏。

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

在线咨询

上一篇：干货整理！零基础html5网站开发学习步骤方法（保存不后悔）
下一篇：html屏蔽浏览器右键、禁止复制的实现

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。