meta标记
meta标记看似是HTML语言HEAD区的一个辅助性标签,其实它的作用很大。META标签共有两个属性,它们分别是Http-equiv属性和Name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1.Name属性
Name属性主要用于描述网页,与之对应的属性值为Content,Content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
Meat标签的Name属性语法格式是:
<meta name="参数" content="具体的参数值">
其中Name属性主要有以下几种参数:
A.Keywords(关键字)
说明:Keywords用来告诉搜索引擎你网页的关键字是什么。
举例:
<meta name="keywords" content="science,education,culture,politics,ecnomics relationships,entertaiment,human">
B.Description(网站内容描述)
说明:Description用来告诉搜索引擎你的网站主要内容。
举例:
<meta name="description" content="This page is about the meaning of science, education,culture.">
C.Robots(机器人向导)
说明:Robots用来告诉搜索机器人需要索引的页面有哪些。
Content的参数有All、None、Index、Noindex、Follow、Nofollow。默认是All。
举例:
<meta name="robots" content="none">
D.Author(作者)
说明:标注网页的作者
举例:
<meta name="author" content="zys666,zys666@21cn.com">
2.Http-equiv属性
Http-equiv,顾名思义,相当于HTTP的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确显示网页内容,与之对应的属性值为Content,Content中的内容其实就是各个参数的变量值。
Meat标签的Http-equiv属性语法格式是:
<meta http-equiv="参数" content="参数变量值">
其中Http-equiv属性主要有以下几种参数:
A.Expires(期限)
说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
用法:
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
注意:必须使用GMT的时间格式。
B.Pragma(Cache模式)
说明:禁止浏览器从本地计算机的缓存中访问页面内容。
用法:
<meta http-equiv="pragma" content="no-cache">
注意:这样设定访问者将无法脱机浏览。
C.Refresh(刷新)
说明:自动刷新并指向新页面。
用法:
<meta http-equiv="refresh" content="2;url=http://www.onchina.net">
注意:其中的"2"是指停留2秒钟后自动刷新到URL网址,可以更改,但建议不要改得太大。
D.Set-cookie(Cookie设定)
说明:如果网页过期,那么存盘的Cookie将被删除。
用法:
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT;path=/">
注意:必须使用GMT的时间格式。
E.Window-target(显示窗口的设定)
说明:强制页面在当前窗口以独立页面显示。
用法:
<meta http-equiv="window-target" content="_top">
注意:用来防止别人在框架里调用自己的页面。
F.Content-type(显示字符集的设定)
说明:设定页面使用的字符集。
用法:
<meta http-equiv="content-type" content="text/html; charset=gb2312">
G.Content-type((进入页面时产生一些特殊效果)
说明:这些特殊效果只对在 top 中进入的新页面有效。
用法:
< meta http-equiv="Page-Enter" content= "revealTrans(Duration=5.0,Transition=n)" >
其中,n的取值范围为0-23,具体的意义如下:
0 矩形缩小 1 矩形扩大 2 圆形缩小
3 圆形扩大 4 下到上 5 上到下
6 左到右 7 右到左 8 竖百叶窗
9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗
12 点 13 左右到中间 14 中间到左右
15 中间到上下 16 上下到中间 17 右下到左上
18 右上到左下 19 左上到右下 20 左下到右上
21 横条 22 竖条 23 以上
24种随机选择一种
分享到:
相关推荐
在网页开发过程中,正确使用`<meta>`标签对于确保页面的兼容性、搜索引擎优化(SEO)以及用户访问体验具有重要意义。本文将详细介绍`<meta>`标签的各种属性及其用途,并通过实例帮助读者更好地理解如何在实际项目中...
要在HTML5页面中使用`<canvas>`元素,首先需要在HTML文档中插入该标签,并设置其`id`属性以便于后续的JavaScript脚本进行访问。例如: ```html <canvas id="myCanvas" width="578" height="200"></canvas> ``` ...
3. **合理选择元素**:在选择使用`<section>`之前,请确保它是最合适的元素。例如,如果是侧边栏或导航栏,应该使用`<aside>`或`<nav>`标签。 #### 四、示例代码解析 以下是一个简单的HTML5示例,展示了如何使用`...
1. 使用 `<meta>` 元素设置字符集、 viewport、关键词、描述等信息。 2. 使用 `<title>` 元素设置网页的标题。 3. 使用 `<style>` 元素设置 CSS 样式。 4. 使用 `<body>` 元素的属性设置网页的背景颜色、文本颜色等...
`<meta>`标签通常位于`<head>`部分,它可以为空元素,意味着它没有结束标签。例如: ```html <meta charset="UTF-8"> ``` #### 二、`<meta>`标签的主要属性 `<meta>`标签有以下几种重要的属性: 1. **`name`属性*...
在网页设计中,`<meta>` 标签扮演着至关重要的角色。它是 HTML5 文档类型中的一个元素,用于提供关于文档的各种元信息,这些信息包括网页的字符编码、描述、关键词、重定向、刷新等。`<meta>` 标签通常位于 `<head>`...
* `<li>`:列表项,在`<ul>`或`<ol>`内部使用。 图片标签 * `<img>`:插入图像,src 属性指定图片源文件路径。 块级元素与内联元素 * 块级元素(如`<div>`)默认独占一行,可以设置宽度、高度和外边距等属性。 *...
通过本篇教程的学习,我们不仅加深了对`<span>`与`<div>`的理解,还掌握了`<meta>`标签在网页SEO优化中的重要性,以及如何更灵活地使用表格元素。这些进阶技巧将进一步提升我们在前端开发领域的技能水平。
<meta name="description" content="这是一个简单的网页"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="张三"> ``` - `<style>`:定义内嵌样式。 - 示例: ```html ...
此外,还有<table>、<tr>、<td>用于创建表格,<div>作为布局容器,<form>、<input>、<button>等用于构建表单元素。 学习HTML的同时,你还需要理解HTML5的新特性,如语义化标签如<header>、<nav>、<section>、...
1. **位置灵活性**:`<aside>`元素可以在页面中的任何位置使用,并且它可以包含在`<article>`、`<section>`或直接包含在`<body>`标签中。 2. **语义化**:使用`<aside>`时要注意保持良好的语义化,确保其内容真正...
8. 框架标签:`<frameset>`和`<frame>`用于创建框架布局,但现代Web开发中已较少使用,更推荐使用CSS布局。 9. 表单标签:`<form>`定义表单,`<input>`用于输入数据,有多种类型如文本、密码、提交按钮等,`<label>...
为了实现这一目标,我们可以使用`<span>`元素来包裹需要变红的文字,并应用内联样式来设置颜色和字号。 **示例代码:** ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>HTML...
- **`<meta>`**:定义元数据,如字符集、刷新时间等。 - **`<noscript>`**:定义在客户端脚本未启用或不支持时显示的内容。 ### 总结 以上介绍了一些基本的HTML标签及其用法,这些标签构成了HTML文档的核心部分。...
- 有序列表:`<ol>`,同样使用`<li>`表示列表项,可以通过`type`属性改变编号样式。 ##### 14. 其他标签 - `<span>`:一般用于样式处理。 - `<strong>`:表示重要的文字。 - `<em>`:强调文字,通常表现为斜体。 -...
- 使用`<ul>`和`<li>`来构建导航菜单。 - 示例: ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系我们</a></li> </...
在HTML中,我们使用各种元素(`<element>`)来表示不同的内容类型,例如`<h1>`到`<h6>`定义标题,`<p>`定义段落,`<a>`创建链接,`<img>`插入图像,`<ul>`和`<ol>`创建无序和有序列表,`<div>`用于分组内容等。元素...
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来...<span>span</span> <div> <span>span</span> <a> <span>1</span> </a> </div> <div> <a> <spa
对于响应式设计,可以利用`<meta>`标签的`viewport`属性和媒体查询(`@media`)来适应不同设备。 表单元素:`<form>`用于创建表单,`<input>`、`<textarea>`、`<select>`和`<button>`则用于输入数据、文本区域、...