search
HomeWeb Front-endHTML Tutorialmeta 标签整理_html/css_WEB-ITnose

 

<meta charset='utf-8'>

<br /><!-- 指示IE以目前可用的最高模式显示内容 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<br /><!-- SEO 优化 页面描述 -->

<meta name="description" content="不超过150个字符" /> 

<br /><!-- 页面关键词 -->

<meta name="keywords" content="html5, css3, 关键字"/> 

    
<!-- 定义网页作者 -->

<meta name="author" content="英雄志" />

//定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值<br />//通常有如下几种取值:none,noindex,nofollow,all,index和follow。

<meta name="robots" content="index,follow"/>

<!-- http-equiv属性 --><br />
//用以说明主页制作所使用的文字以及语言;又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"><meta http-equiv="Content-Language" contect="zh-CN">

 

 
//定时让网页在指定的时间n内,跳转到页面http://yourlink;

<meta http-equiv="Refresh" contect="n;url=http://yourlink">

 

 //定时让网页在指定的时间n内刷新

<meta http-equiv="Refresh" contect="n">

//可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;<br />

<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">

 

//是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
    

<meta http-equiv="Pragma" contect="no-cache">

    
//cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;<br />

<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">

 

<br />//网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;

<meta http-equiv="Pics-label" contect="">

 

<br />//强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

<meta http-equiv="windows-Target" contect="_top">

 

//设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。

<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)"><meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">

 

<!-- 为移动设备添加 viewport -->

<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">    //content 参数解释:    //width       viewport 宽度(数值/device-width)    //height            viewport 高度(数值/device-height)    //initial-scale  初始缩放比例    //maximum-scale  最大缩放比例    //minimum-scale  最小缩放比例    //user-scalable  是否允许用户缩放(yes/no)    //minimal-ui      iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。    //这是一个布尔值,可以直接这样写:<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

 

<strong><!-- iOS 设备 --><br /><br /></strong>

<meta name="apple-mobile-web-app-title" content="标题"><br /><br /><!-- 从桌面icon启动IOS Safari是否进入全屏状态(APP模式) --><meta name="apple-mobile-web-app-capable" content="yes"> <!-- 添加到主屏幕“后,全屏显示 --><meta name="apple-touch-fullscreen" content="yes" > <!-- 指定状态栏的颜色 --><meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- ios设备上禁止将数字识别为可点击的telephone link --><meta name="format-detection" content="telephone=no"> <!-- 页面CSS计算时使用宽度为320,初始缩放比例2.3, 不允许用户缩放, 最大缩放因子为1 --><meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no, maximum-scale=1 "> <!-- 页面CSS计算时使用的宽度根据设备给定值自适应 --><meta name= "viewport" content = "width = device-width">

    

 

    
    


<!-- iOS 图标 rel 参数 -->//apple-touch-icon 图片自动处理成圆角和高光等效果。//apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />//iPhone 和 iTouch,默认 57x57 像素,必须有<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />//iPad,72x72 像素,可以没有,但推荐有<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />//Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />//Retina iPad,144x144 像素,可以没有,推荐大家使用<meta name="apple-mobile-web-app-title" content="标题">//title最好限制在六个中文长度内,超长的内容会被隐藏,添加到主屏后的标题(iOS 6 新增)<!-- iOS 启动画面 -->//iPad 的启动画面是不包括状态栏区域的。//iPad 竖屏 768 x 1004(标准分辨率)<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />//iPad 竖屏 1536x2008(Retina)<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />//iPad 横屏 1024x748(标准分辨率)<link rel="apple-touch-startup-image" sizes="1024x748" href="/splash-screen-1024x748.png" />

 

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <iframe> tag? What are the security considerations when using it?What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the viewport meta tag? Why is it important for responsive design?What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools