What are the uses of the HTML head tag?

php中世界最好的语言
Release: 2018-01-26 09:49:45
Original
1933 people have browsed it

This time I will show you how to use the HTML head tag. What are theprecautions when using the HTML head tag?The following is a practical case, let's take a look.

HTML head There are many tags and elements in the head part, which involve the browser's rendering of web pages, SEO, etc. Each browser kernel and each domestic browser manufacturer have their own tag elements. This is caused 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(DocumentType), this declaration is located at the forefront of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.
DTD (Document Type Definition) declaration starts with, is not case-sensitive, and has no content in front. If there is other content (except spaces), the browser will turn on quirks mode under IE. Render the 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

XML/HTMLCode copy content to clipboard


        
Copy after login

●HTML 4.01 Transitional


        
Copy after login

● HTML 4.01 Frameset


        
Copy after login

●The latest HTML5 introduces more concise writing. It is forward and backward compatible and is recommended for use.


        
Copy after login

In HTML doctype has two main purposes.

●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
●Partially weird (nearly standard) mode About the document mode, browser mode, and strict mode ofIE browser, weird mode, DOCTYPE tag, verbose mode? standard! Content.

charset

Declares the character encoding used in the document,

Copy after login

html5 The previous web page would write like this:

Copy after login

These two are equivalent, For details, you can read: vs , so it is recommended to use a shorter one, which is easier to remember.

lang attribute

Simplified Chinese


        
Copy after login

Traditional Chinese


        
Copy after login

Why not what we usually write, please read: The header of the page The statement should be made using or.

Prioritize using the latest version of IE and Chrome

Copy after login

360 Use Google Chrome Frame

Copy after login

360 The browser will immediately switch to the corresponding speed after reading this tag nuclear. In addition, add

Copy after login

for the sake of insurance. 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 put an advertisement of dog skin plaster on your body. For this purpose, you can add

Copy after login

in the head. Related links: SiteApp transcoding statement

SEO optimization part

Page titletag (head header is required) </p>

your title
Copy after login

Page keywordskeywords

Copy after login

Page description content description

Copy after login

Definition of web page author author

Copy after login

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.

Copy after login

Related links: WEB1038 - Tag contains invalid value

viewport

  viewport 可以让布局在移动浏览器上显示的更好。 通常会写

Copy after login

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 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:

Copy after login

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

Copy after login

相关链接:非响应式设计的viewport

  适配 iPhone 6 和 iPhone 6plus 则需要写:

 
Copy after login

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。
  ios 设备
  添加到主屏后的标题(iOS 6 新增)

 
Copy after login

是否启用 WebApp 全屏模式

 
Copy after login

设置状态栏的背景颜色

 
Copy after login

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

  content 参数:

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

 
Copy after login

iOS 图标

  rel 参数: apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57x57 像素,必须有

 
Copy after login

  iPad,72x72 像素,可以没有,但推荐有

 
Copy after login

  Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

 
Copy after login

  Retina iPad,144x144 像素,可以没有,但推荐有

 
Copy after login

  IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 适配iPhone 6 plus,则需要在中加上这段

Copy after login

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(标准分辨率)

 
Copy after login

  iPad 竖屏 1536x2008(Retina)

 
Copy after login

  iPad 横屏 1024x748(标准分辨率)

复制代码代码如下:

 
Copy after login

  iPad 横屏 2048x1496(Retina)

 
Copy after login

  iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

  iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

  iPhone/iPod Touch 竖屏 640x960 (Retina)

 
Copy after login

  iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

 
Copy after login

  添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

 
Copy after login

  iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。

Copy after login

Windows 8
  Windows 8 磁贴颜色

复制代码代码如下:

 
Copy after login

  Windows 8 磁贴图标

 
Copy after login

  rss订阅

    favicon icon
Copy after login
 
Copy after login

比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet

移动端的meta

         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
Copy after login

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

html怎样使用style添加属性

a标签href属性与onclick事件应该如何使用

html文件中include文件内容应该如何使用

The above is the detailed content of What are the uses of the HTML head tag?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!