整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在head标签内，因此被称为头部相关标签。本节将具体介绍常用的头部标签。
1.设置页面标题标签<title>
<title>标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”，具体代码如下：
<title>轻松学习HTML5</title>上述代码对应的页面标题效果如图1所示。
图 1设置页面标题标签<title>
2.定义页面元信息标签<meta />
<meta />标签用于定义页面的元信息（元信息不会显示在页面中），可重复出现在<head>头部标签中。在HTML中，<meta />标签是一个单标签，本身不包含任何内容，仅仅表示网页的相关信息。通过<meta />标签的两组属性，可以定义页面的相关参数。例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。下面介绍<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地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。
lt;!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用表格写课程表代码</title>
</head>
<body>
<table
border="1"
width="90%"
cellspacing="0"
cellpadding="5"
align="center"
>
<!-- caption标签是用于为表格提供简短的标题，如标题或简短描述。
caption标签是插在开始标记之后，应该始终是表的第一个子项。
然后我们就可以使用caption-side属性更改其在表中的位置。 -->
<!-- caption-side属性值说明： -->
<!-- top：可以将标题定位在表格上方。 -->
<!-- bottom：可以将标题定位在表格下方。 -->
<!-- inherit ：从父级的标题位置继承标题位置。 -->
<caption>
<h3>二年级6班课程表</h3>
</caption>
<!-- 表头 -->
<thead>
<tr bgcolor="lightcyan">
<!-- th:是添加了居中和加粗样式的td,是th的加版版 -->
<th>时 间</th>
<th>课 时</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
</thead>
<!-- 表主体上半部份 -->
<tbody align="center">
<tr>
<th rowspan="4">上午</th>
<th>第一节</th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<!-- <th>时 间</th> -->
<th>第二节</th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<!-- <th>时 间</th> -->
<th>第三节</th>
<td rowspan="2">大课</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td rowspan="2">大课</td>
<td>星期日</td>
</tr>
<tr>
<!-- <th>时 间</th> -->
<th>第四节</th>
<td>星期一</td>
<!-- <td>星期二</td> -->
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<!-- <td>星期六</td> -->
<td>星期日</td>
</tr>
</tbody>
<!-- 表主体 中半部份-->
<tbody align="center">
<tr>
<!-- <th>时 间</th> -->
<th colspan="9">中午午休时间</th>
<!-- <td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td> -->
</tr>
</tbody>
<!-- 表主体 下面部份-->
<tbody align="center">
<tr>
<th rowspan="3">下午</th>
<th>第一节</th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td rowspan="3">放假</td>
</tr>
<tr>
<!-- <th>时 间</th> -->
<th>第二节</th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<!-- <td>星期日</td> -->
</tr>
<tr>
<!-- <th>时 间</th> -->
<th>第三节</th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<!-- <td>星期日</td> -->
</tr>
</tbody>
<!-- 表尾 下面部份-->
<tfoot>
<tr>
<th colspan="2">备注</th>
<!-- <th>时 间</th> -->
<th colspan="7">注意打扫卫生</th>
<!-- <td>星期二</td> -->
<!-- <td>星期三</td> -->
<!-- <td>星期四</td> -->
<!-- <td>星期五</td> -->
<!-- <td>星期六</td> -->
<!-- <td>星期日</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
多刚入门HTML5前端开发的小伙伴对HTML页面的基本机构代码还不是很清楚，下面和千锋广州小编一起来看看吧。
1、什么是标签：
html标签组成是html文档的最基本元素,一般是成对出现,由开始标签和与其对应的结束标签构成.?如<html></html>，<p></p>，<body></body>，<head></head>，<span></span>等,此外，还有一些标签是单独出现的，如<img/>,<input/>等，标签可以相互嵌套使用。
由于html语言是一门弱类型语言,对格式的要求不是非常严格，因此所有标签是不区分大小写的,但是，一般在实际开发中，大家都统一使用小写。
2、html文档的基本结构
如上图，每一个html文档的基本结构为：
第一层：
<!DOCTTYPE>------！文档类型，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档，在html5文档中，一般写为<!DOCTTYPE html> ;值得注意的是，<!DOCTTYPE>不属于html标签。
<html></html>-------html标签，是html文档的根标签，所有的网页标签都放在这对标签中，是所有html标签的祖先容器。
第二层：
<head></head>-------头部标签，代表着html文档的头信息，是所有头部元素的容器，内部一般包含：<title> <script><style><meta><link>这些头部元素。
<body></body>-------网页主体标签，其内部主要包含着构成网页内容的一些元素，如<p></p>,<span></span>,<div></div>,<table></table>等。这些元素都会在网页的内容部分显示。
3、标签的属性
就如人有这身高、体重、年龄等这些属性一样，html标签也有自己的属性，如字体颜色，宽，高，背景等。这些属性一般通过键值对的形式卸载标签中，是标签的一部分，并且每种标签的属性都不完全像同，有的标签有着自己特有的属性。如下图所示：
4、html注释
在实际开发中，我们需要在html文档中做一些标记，方便日后对代码的维护及修改，也方便其他程序员了解我们的代码。而在html文档中，注释的格式为:
我们可以理解为，html中，标签元素是给计算机读的，为注释是给程序员看的。
以上就是今天分享的内容，希望对大家有帮助哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
