html head header tag-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

html head header tag

伊谢尔伦

Nov 22, 2016 pm 03:31 PM

headhtml

There are many tags and elements in the HTML head, which involve the browser's rendering of web pages, SEO, etc. Each browser core and each domestic browser manufacturer have their own tag elements, which results in a lot of differences. . In the era of mobile Internet, the head structure and meta elements of mobile terminals are even more important. Understanding the meaning of each tag and writing a head tag that meets your own needs is the purpose of this article. This article is based on Yishi's article and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads.

　 DOCTYPE

　 DOCTYPE (Document Type), this declaration is located at the very front of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.

　The DTD (Document Type Definition) declaration starts with , it is not case-sensitive, and there is no content in front. If there is other content (except spaces), the browser will enable quirks mode rendering under IE. Web page. Public DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag specifies a description of the public text, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The final language is the ISO 639 language identifier of the DTD language, such as: EN for English, ZH for Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and frame-based HTML document respectively.

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

The latest HTML5 introduces more concise writing, it is forward and backward compatible, and it is recommended to use.

<!doctype html>

　doctype has two main purposes in HTML.

Verify the validity of documents.

　It tells the user agent and validator what DTD this document is written according to. This action is passive. Every time the page is loaded, the browser does not download the DTD and check the validity. It is only enabled when the page is manually verified.

Determine the browser's rendering mode

For actual operations, inform the browser which parsing algorithm to use when reading the document. If it is not written, the browser will parse the code according to its own rules, which may seriously affect the html layout. Browsers have three ways to parse HTML documents.

Non-weird (standard) mode

Weird mode

Some weird (almost standard) mode About the document mode, browser mode, strict mode, weird mode, DOCTYPE tag, detailed reading mode of IE browser? standard! Content.

　 charset

　 Declares the character encoding used in the document,

<meta charset="utf-8">

　 The web page before HTML5 would write like this:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

These two are equivalent, you can read more specifically: <meta charset="utf-8"> vs , so it is recommended to use a shorter one that is easier to remember.

　Priority to use the latest version of IE and Chrome

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

　　360 Use Google Chrome Frame

<meta name="renderer" content="webkit">

　　360 The browser will immediately switch to the corresponding speed core after reading this tag. In addition, for the sake of safety, add

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

The effect that can be achieved by writing this way is that if Google Chrome Frame is installed, GCF will be used to render the page. If GCF is not installed, the highest version of the IE kernel will be used for rendering.

　Related links: Browser kernel control Meta tag documentation

Baidu prohibits transcoding

When you open a webpage through Baidu mobile phone, Baidu may transcode your webpage, take off your clothes, and stick it on your body For advertisements of dog skin plasters, you can add

<meta http-equiv="Cache-Control" content="no-siteapp" />

in the head. Related links: SiteApp transcoding statement

SEO optimization part

Page title

tag (head header is required) <pre class='brush:php;toolbar:false;'><title>your title</title></pre>Page keywords keywords<pre class='brush:php;toolbar:false;'><meta name="keywords" content="your keywords"></pre> Page description content description<pre class='brush:php;toolbar:false;'><meta name="description" content="your description"></pre>Define the web page author author<pre class='brush:php;toolbar:false;'><meta name="author" content="author,email address"></pre>Define the web search engine indexing method. Robotterms is a set of values separated by English commas ",". It usually has the following values: none, noindex, nofollow, all, index and follow. <pre class='brush:php;toolbar:false;'><meta name="robots" content="index,follow"></pre>　Related links: WEB1038 - 　The tag contains an invalid value 　viewport 　　viewport 可以让布局在移动浏览器上显示的更好。通常会写<pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>　　width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) 　　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 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"></pre>　　而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。<pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width,user-scalable=yes"></pre>　　相关链接：非响应式设计的viewport 　　适配 iPhone 6 和 iPhone 6plus 则需要写：<pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"></pre>　　大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。 　　ios 设备 　　添加到主屏后的标题（iOS 6 新增）<pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-title" content="标题"> </pre>　　是否启用 WebApp 全屏模式<pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-capable" content="yes" /> </pre>　　设置状态栏的背景颜色<pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> </pre>　　只有在 "apple-mobile-web-app-capable" content="yes" 时生效 　　content 参数： default 默认值。 black 状态栏背景是黑色。 black-translucent 状态栏背景是黑色半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 　　禁止数字识自动别为电话号码<pre class='brush:php;toolbar:false;'><meta name="format-detection" content="telephone=no" /> </pre>　iOS 图标 　　rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有<pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> </pre>　　iPad，72x72 像素，可以没有，但推荐有<pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> </pre>　　Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有<pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> </pre>　　Retina iPad，144x144 像素，可以没有，但推荐有<pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> </pre>　　IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。适配iPhone 6 plus，则需要在中加上这段<pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"></pre>　iOS 启动画面 　　官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/ 　　iPad 的启动画面是不包括状态栏区域的。 　　iPad 竖屏 768 x 1004（标准分辨率）<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> </pre>　　iPad 竖屏 1536x2008（Retina）<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> </pre>　　iPad 横屏 1024x748（标准分辨率）<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> </pre>　　iPad 横屏 2048x1496（Retina）<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> </pre>　　iPhone 和 iPod touch 的启动画面是包含状态栏区域的。 　　iPhone/iPod Touch 竖屏 320x480 (标准分辨率)<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> </pre>　　iPhone/iPod Touch 竖屏 640x960 (Retina)<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> </pre>　　iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> </pre>　　添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）<pre class='brush:php;toolbar:false;'><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </pre>　　iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。<pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"></pre>Windows 8 　　Windows 8 磁贴颜色<pre class='brush:php;toolbar:false;'><meta name="msapplication-TileColor" content="#000"/> </pre>　　Windows 8 磁贴图标<pre class='brush:php;toolbar:false;'><meta name="msapplication-TileImage" content="icon.png"/> </pre>　rss订阅 <pre class='brush:php;toolbar:false;'><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> </pre>　　favicon icon<pre class='brush:php;toolbar:false;'><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> </pre>　　比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet 　移动端的meta<pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telphone=no, email=no" />  <meta name="renderer" content="webkit">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="HandheldFriendly" content="true">  <meta name="MobileOptimized" content="320">  <meta name="screen-orientation" content="portrait">  <meta name="x5-orientation" content="portrait">  <meta name="full-screen" content="yes">  <meta name="x5-fullscreen" content="true">  <meta name="browsermode" content="application">  <meta name="x5-page-mode" content="app">  <meta name="msapplication-tap-highlight" content="no"> </pre>　　这是来自 toobug 的分享总结。 　　更多的 meta 标签参考 COMPLETE LIST OF HTML META TAGS 18 Meta Tags Every Webpage Should Have in 2013 　　参考文章： 常用的 HTML 头部标签 html5_header amazeui css DOCTYPE WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变

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

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles