整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

每日一更:零基础图文学习HTML5!(三)头部标签使

每日一更:零基础图文学习HTML5!(三)头部标签使用

这一节中,我们要向大家详细的讲述头部标签的使用和作用,那么在这一节中,我们所有的标签都存在于<head>与</head>之间,需要强调的是,<head>与</head>之间的内容不会再浏览器的窗口中显示,但是它们也有这其本身重要的意义。下面我就给大家来介绍这些标记的作用,以及来展示一下这些标记所具有的效果!

首先是我们的标题标记<title>......</title>,中间的省略号处所写的就是我们的标题,位于文档的头部,实例代码如下

<html>

<head>

<title>我的第一个网页</title>

</head>

<body text="blue">

<h2 align="center">网页中的内容显示</h2>

<hr>

<p>段落文字</p>

</body>

</html>

那么它的具体显示效果在哪呢,看图!

OK!这就是我们的标题标记!

接下来的是元信息标记<meta>,这个效果我们是看不见的,但是它的作用是非常强大的,用来定义页面的信息,作者等。meta不需要设置结束标记,一个尖括号就是一个完整的内容,它可以设置页面的关键字,关键字的作用就是为了让搜索引擎更准确的去进行搜索从而找到自己想要的东西,而且我们可以设置多个关键字,关键字与关键字之间用逗号隔开。但是需要注意,这个不能无限多,无限多的话不仅仅网页加载变慢,而且还不利于搜索引擎的寻找。设置关键字具体的语法为<meta name="keyname" content="具体的关键字">这其中,name为属性名称,设置为keyname就是来设置网页关键字,而content则是用来定义具体的关键字的内容!实例如下:

<html>

<head>

<title>页面关键字</title>

<meta name="keyname" content="html,元信息,关键字">

</head>

<body>

</body>

</html>

这个效果在这里我是无法为大家展示的,但是它的作用就是设定了html,元信息,关键字作为这个页面的关键字!

OK,学会了这个,那么设置页面的描述相信大家只需要知道语法就知道该如何用了,页面的描述也是为了大家便于搜索引擎的查找,语法是这样的<meta name="description" content="页面的描述">

实例代码如下:

<html>

<head>

<title>页面描述</title>

<meta name="keyname" content="html,元信息,关键字">

<meta name="description" content="页面的描述">

</head>

<body>

</body>

</html>

这里相对于上一个不仅有了关键字,还有了对这个网页的描述!

下一个,我们来设定作者的信息,语法<meta name="auther" content="作者名字">实例代码如下

<html>

<head>

<title>作者信息</title>

<meta name="keyname" content="html,元信息,关键字">

<meta name="description" content="页面的描述">

<meta name="auther" content="臭臭">

</head>

<body>

</body>

</html>

这里,我们添加了“臭臭”为本网页的作者!

限制搜索引擎的搜索方式,有些网页内的内容我们不希望搜索引擎搜到,那么该如何做呢?语法如下<meta name="robots" content="搜索方式">,这里的搜索方式有以下5种:

  1. all 表示能搜索当前网页以及它链接的网页

  2. index 表示能搜索当前网页

  3. nofollow 表示不能搜索当前网页链接的网页

  4. noindex 表示不能搜索当前网页

  5. none 表示不能搜索当前网页以及它链接的网页

实例代码

<html>

<head>

<title>限制搜索方式</title>

<meta name="robots" content="index">

</head>

<body>

</body>

</html>

下面的这个挺重要的,是用来设置网页的文字语言!这样浏览器才能正确的显示出中文,否则便会出现一堆的乱码,只需要添加一段这个代码就可以使网页显示出正确的汉字!语法<netaq http-equiv="Content-Language" content=“语言”>这里给大家解释一下,http-equiv用于传送HTTP通信协议的标头,那么简体中文怎么设置呢?如下

<netaq http-equiv="Content-Language" content=“zh_CN”>

大家在浏览网页的时候肯定经常看到过这样一些界面,这是一个欢迎界面,经过一段时间后跳转到另一个界面,那么这个是怎么实现的呢?这个就是网页的跳转功能,我们使用一个小代码就能够轻松实现!语法<meta http-equiv="refresh" content="跳转时间;url=链接地址“>这里的refresh就是表示刷新网页,后面则是设置刷新时间和刷新后的地址,时间和地址用;隔开,一般情况这个时间单位是秒!

实例代码:

<html>

<head>

<title>页面跳转</title>

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

</head>

<body>

您好,本页在3秒之后将自动跳转到百度首页!

</body>

</html>

OK!运行这段代码,打开下面所示:

在3秒之后,网页自动跳转到了百度一下,如图!

OK,这些就是我们常用的一些头部所放的标签以及它们的作用!头部我们就给大家讲到这里,有过你有什么意见或者想法或疑问都可以在下方留言,我会尽快给出回复,谢谢大家的收看!

带有项目和描述的描述列表:

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>


浏览器支持

所有主流浏览器都支持 <dd> 标签。


标签定义及使用说明

<dd> 标签被用来对一个描述列表中的项目/名字进行描述。

<dd> 标签与 <dl> (定义一个描述列表)和 <dt> (定义项目/名字)一起使用。

在 <dd> 标签内,您能放置段落、换行、图片、链接、列表等等。


HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,<dd> 标签被用来描述一个定义列表中的条目。

在 HTML5 中,<dd> 标签被用来描述一个描述列表的项目/名字。


全局属性

<dd> 标签支持 HTML 的全局属性。


事件属性

<dd> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

tml5你了解了多少?如果你还是入门阶段的话,或者还是一知半解的话 ,那么我们专门为你们收集的html5常用的标签大全对你就很有帮助了,你需要了解了html5有哪些标签你才能够更好的。驾驭html5这门火热而又充满神秘的语言技术。下面是一些常用的html5标签。按字母顺序排列的标签列表

?4: 指示在 HTML 4.01 中定义了该元素

?5: 指示在 HTML 5 中定义了该元素

标签 描述 4 5

<!--...--> 定义注释。 4 5

<!DOCTYPE> 定义文档类型。 4 5

<a> 定义超链接。 4 5

<abbr> 定义缩写。 4 5

<acronym> HTML 5 中不支持。定义首字母缩写。 4

<address> 定义地址元素。 4 5

<applet> HTML 5 中不支持。定义 applet。 4

<area> 定义图像映射中的区域。 4 5

<article> 定义 article。 5

<time> 定义日期/时间。 5

<title> 定义文档的标题。 4 5

<tr> 定义表格行。 4 5

<tt> HTML 5 中不支持。定义打字机文本。 4

<u> HTML 5 中不支持。定义下划线文本。 4

<ul> 定义无序列表。 4 5

<var> 定义变量。 4 5

<video> 定义视频。 5

<xmp> HTML 5 中不支持。定义预格式文本。 4

<aside> 定义页面内容之外的内容。 5

<button> 定义按钮。 4 5

<canvas> 定义图形。 5

<caption> 定义表格标题。 4 5

<center> HTML 5 中不支持。定义居中的文本。 4

<cite> 定义引用。 4 5

<code> 定义计算机代码文本。 4 5

<col> 定义表格列的属性。 4 5

<colgroup> 定义表格列的分组。 4 5

<command> 定义命令按钮。 5

<audio> 定义声音内容。 5

<b> 定义粗体文本。 4 5

<base> 定义页面中所有链接的基准 URL。 4 5

<basefont> HTML 5 中不支持。请使用 CSS 代替。 4

<bdo> 定义文本显示的方向。 4 5

<big> HTML 5 中不支持。定义大号文本。 4

<blockquote> 定义长的引用。 4 5

<body> 定义 body 元素。 4 5

<br> 插入换行符。 4 5

<datalist> 定义下拉列表。 5

<dd> 定义定义的描述。 4 5

<form> 定义表单。 4 5

<frame> HTML 5 中不支持。定义子窗口(框架)。 4

<frameset> HTML 5 中不支持。定义框架的集。 4

<h1> to <h6> 定义标题 1 到标题 6。 4 5

<head> 定义关于文档的信息。 4 5

<header> 定义 section 或 page 的页眉。 5

<hgroup> 定义有关文档中的 section 的信息。 5

<hr> 定义水平线。 4 5

<del> 定义删除文本。 4 5

<details> 定义元素的细节。 5

<dfn> 定义定义项目。 4 5

<dir> HTML 5 中不支持。定义目录列表。 4

<iframe> 定义行内的子窗口(框架)。 4 5

<img> 定义图像。 4 5

<input> 定义输入域。 4 5

<ins> 定义插入文本。 4 5

<keygen> 定义生成密钥。 5

<isindex> HTML 5 中不支持。定义单行的输入域。 4

<kbd> 定义键盘文本。 4 5

<label> 定义表单控件的标注。 4 5

<legend> 定义 fieldset 中的标题。 4 5

<div> 定义文档中的一个部分。 4 5

<dl> 定义定义列表。 4 5

<dt> 定义定义的项目。 4 5

<em> 定义强调文本。 4 5

<embed> 定义外部交互内容或插件。 5

<fieldset> 定义 fieldset。 4 5

<figcaption> 定义 figure 元素的标题。 5

<figure> 定义媒介内容的分组,以及它们的标题。 5

<font> HTML 5 中不支持。 4

<footer> 定义 section 或 page 的页脚。 5

<html> 定义 html 文档。 4 5

<i> 定义斜体文本。 4 5

<li> 定义列表的项目。 4 5

<link> 定义资源引用。 4 5

<map> 定义图像映射。 4 5

<mark> 定义有记号的文本。 5

<menu> 定义菜单列表。 4 5

<meta> 定义元信息。 4 5

<meter> 定义预定义范围内的度量。 5

<nav> 定义导航链接。 5

<noframes> HTML 5 中不支持。定义 noframe 部分。 4

<noscript> 定义 noscript 部分。 4 5

<object> 定义嵌入对象。 4 5

<ol> 定义有序列表。 4 5

<optgroup> 定义选项组。 4 5

<option> 定义下拉列表中的选项。 4 5

<output> 定义输出的一些类型。 5

<p> 定义段落。 4 5

<param> 为对象定义参数。 4 5

<pre> 定义预格式化文本。 4 5

<progress> 定义任何类型的任务的进度。 5

<q> 定义短的引用。 4 5

<rp> 定义若浏览器不支持 ruby 元素显示的内容。 5

<rt> 定义 ruby 注释的解释。 5

<ruby> 定义 ruby 注释。 5

<s> HTML 5 中不支持。定义加删除线的文本。 4

<samp> 定义样本计算机代码。 4 5

<script> 定义脚本。 4 5

<section> 定义 section。 5

<select> 定义可选列表。 4 5

<small> 定义小号文本。 4 5

<source> 定义媒介源。 5

<span> 定义文档中的 section。 4 5

<strike> HTML 5 中不支持。定义加删除线的文本。 4

<strong> 定义强调文本。 4 5

<style> 定义样式定义。 4 5

<sub> 定义下标文本。 4 5

<summary> 定义 details 元素的标题。 5

<sup> 定义上标文本。 4 5

<table> 定义表格。 4 5

<tbody> 定义表格的主体。 4 5

<td> 定义表格单元。 4 5

<textarea> 定义 textarea。 4 5

<tfoot> 定义表格的脚注。 4 5

<th> 定义表头。 4 5

<thead> 定义表头。 4 5

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com