整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
lt;title> - 定义了HTML文档的标题
使用 <title> 标签定义HTML文档的标题
<base> - 定义了所有链接的URL
使用 <base> 定义页面中所有链接默认的链接目标地址。
<meta> - 提供了HTML文档的meta标记
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
一个简单的 HTML 文档:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文档标题</title></head><body>文档内容......</body></html>
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你需要指定样式文件来渲染HTML文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于 <head>区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以下章节会详细描述。
HTML head 元素
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
试数据库导入到wordpress本地网站后，我们就可以正式开始wordpress主题动态模板的编写了。在前面的章节中，我们已写好了wordpress主题的静态模板trans，那只是给wordpress主题创建了一个架子，给别人看一个第一印象，但它是没有灵魂的，它是一个死的，没有任何动态。所以，在开发wordpress动态模板时，我们会给trans添加上灵魂，让它拥有让人着魔的动态效果，也就是让trans可以从wordpress数据库中调用到相关的数据，在wordpress前端网站上展示。今天，我们首页来修改wordpress主题的首页的头部文件。
我们先来看一下trans首页头部的静态代码，如下：
< !DOCTYPE html>< html>< head>< meta charset="UTF-8">< title>Document</title>< link rel="stylesheet" href="style.css">< /head>< body><!-- 头部 -->< header>< div>< div>< ul>< a href="/"><img src="./images/index_02.jpg" alt=""></a>< /ul>< ul>< a href="index.html">首页</a >< a href="list.html">列表页</a >< a href="page.html">单页面</a >< a href="single.html">文章页</a >< a href="search.html">搜索页</a >< /ul>< /div>< /div>< div>< div>< ul>< li>< span class="dashicons-before dashicons-arrow-left-alt">< /span>< /li>< li>< span class="dashicons-before dashicons-arrow-right-alt">< /span>< /li>< li>< span class="dashicons-before dashicons-image-rotate">< /span>< /li>< /ul>< ul>< form action="/" method="get">< input type="text" name="search" id="">< input type="submit" value="搜索">< /form>< /ul>< /div>< /div>< /header>
对于头部这部分代码，现在我们需要修改的部分主要有3部分，如下图所示：
好，我们就来对这几个部分的代码做出相应的动态代码修改。wordpress主题静态代码变成动态代码，主要是通过wordpress程序提供的功能函数来实现。
也就是< title >标签中的内容，这个网页标题是在浏览器的头部显示的，也是整个网页的标题。修改后的代码如下：
< title>< ?php bloginfo("name"); ?> < /title>
这里调用了bloginfo()函数，这个函数可以调用网站的常规选项，如：标题、副标题、网站URL、wordpress的URL路径、主题路径等等。在后面trans主题修改中，我们会经常用到。这里的bloginfo()函数的参数"name"，是代码网站标题。
如果不修改CSS样式的路径地址，按照上面静态代码中的CSS路径，会直接调用网站根目录下的style.css样式表文件。可是，此时的根目录下，是wordpress程序的所有PHP文件，而不是trans主题的文件了。而我们要调用的是trans主题目录下的style.css。所以，我们这里把代码修改成如下：
< link rel="stylesheet" href="< ?php bloginfo("stylesheet_url"); ?>">
这里的参数stylesheet_url，表示调用的是trans主题的style.css样式表文件。
在trans静态模板中，logo图片地址，也是网站根目录下，这里，我们同样要修改它的路径到trans主题目录下，代码如下：
< img src="< ?php bloginfo("template_url")."/images/logo.png"; ?>" alt="" >
这里bloginfo()函数的参数是 template_url ，表示当前主题trans的路径，而logo.png图片在这个trans主题目录下的images目录下。
在trans静态代码中，顶部导航菜单是写死的。我们这里要调用wordpress本地网站后台创建的顶部菜单数据。这时，我们也要分2步走。
1、给wordpress主题添加菜单功能。
在trans主题目录下创建一个functions.php文件，这个是主题函数文件。在这个functions.php文件中添加如下代码来添加菜单功能模板：
//菜单register_nav_menus( array('menu_top' => '头部导航','menu_bottom' => '底部导航',) );
这时，我们在后台创建菜单时，就会有“头部导航”和“底部导航”的选项。如下图：
2、调用wordpress后台创建的菜单。
原trans静态模板的头部菜单的代码如下：
< a href="index.html">首页</a>< a href="list.html">列表页</a>< a href="page.html">单页面</a>< a href="single.html">文章页</a>< a href="search.html">搜索页</a>
现在我们通过wp_nav_menu()这个菜单函数来调用我们在后台创建的菜单，代码如下：
< ?php $menu = array( 'container' => false, //最外层标签名'echo' => false, //不让直接输出，而是以一个变量'theme_location' => 'menu_top', //菜单名 'depth' => 0, //菜单深度);echo strip_tags(wp_nav_menu( $menu ), '<a>' );? >
添加好trans主题的顶部导航菜单功能后，我们再在wordpress网站后台创建菜单时，勾选“顶部导航”，就可以给wordpress本地网站添加顶部的菜单了。
通过上面的几步，我们为trans主题首页的头部做出了相应的修改，它们不再是死的了，不再是一成不变了。它们会随着wordpress网站后台的修改而做出相应的变化。这就是我们所需要的前后台互动的效果，后台不动，前台就不动。后台一动，前台就立马行动。
作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此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地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。
*请认真填写需求信息，我们会在24小时内与您取得联系。
