Home > Article > Web Front-end > How to use the header structure in HTML
How to use the header structure in HTML
- php中世界最好的语言Original
- 2018-01-26 10:23:462226browse
This time I will show you how to use the header structure in HTML. What are the precautions when using the header structure in HTML? Here are practical cases, let’s take a look.
The following introduces the commonly used head structure, as well as the meaning and usage scenarios of each tag and element (this article is based on the article of a master, and is an expanded summary).
The head structure of padding.me
Copy the code as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="keywords" content="PaddingMe,front-end,前端,前端工程师,web开发工程师,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">
<meta name="description" content="PaddingMe - he is a front-end developer.">
<meta name="robots" content="index,follow">
<meta name="author" content="PaddingMe,padding4me@gmail.com"></p>< p> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta></p>< p> <meta http-equiv="Cache-Control" content="no-siteapp"></p>< p> <title>PaddingMe</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"></p>< p> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p>< p> <link rel="stylesheet" href="/css/screen.css">
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</head>DOCTYPE (Document Type), this statement is located at the front of the document position, before the html tag , this tag tells the browser which HTML or XHTML specification the document uses.
The DTD (Document Type Definition) statement starts with 1a309583e26acea4f04ca31122d8c535, it is not case-sensitive, and there is no content in front. If there is other content (except spaces), the browser will open a weird mode under IE ( quirks mode) renders web pages. Public DTD, the name format is "registration // organization // type tag // language", "registration" indicates 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; "Type" is generally a DTD, and "Label" is the specified public text description, that is, the unique descriptive name of the referenced public text, which can be followed by a version number. The last "language" is the ISO 639 language identifier of the DTD language, such as: EN means English, ZH means Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and framework-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 recommended.
<!doctype html>
The doctype in HTML 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 will 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 and browser mode of IE browser , strict mode, weird mode, DOCTYPE tag, verbose mode? standard! , and Box Model.
charset
Declare the character encoding used in the document,
Copy the code as follows:
<meta charset='utf-8'>
Pre-html5 web page Zhonghui writes:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
These two are equivalent, you can read it step by step: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta- http-equiv-content-type, so it is recommended to use a shorter one that is easier to remember.
lang attribute
Simplified Chinese
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
Traditional Chinese
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
It is rarely necessary to add the area code, usually for Emphasize the differences in the use of Chinese in different regions, for example:
<p>
<strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</strong>。
</p>For details, please go to http://zhi.hu/XyIa
Prioritize using the latest version of IE and Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
360 Using Google Chrome Frame
<meta name="renderer" content="webkit">
The 360 browser will immediately switch to the corresponding speed core after reading this tag.
In addition, for the sake of insurance,
<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 IE kernel will be used. render.
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 and remove it. Your clothes, put an advertisement of dog skin plaster on your body, for this purpose, you can add
<meta http-equiv="Cache-Control" content="no-siteapp" />
in the head. Related links: SiteApp transcoding statement
SEO Optimization Part
Page titleb2386ffb911b14667cb8f0f91ea547a7 tag (head header is required)
<title>your title</title>
Page keywordskeywords
<meta name="keywords" content="your keywords">
Page description content description
<meta name="description" content="your description">
Define web page author author
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
Related links: WEB1038 - Tag contains an invalid value
viewport
viewport allows the layout to be displayed on mobile browsers better.
Usually writing
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width will cause black borders to appear when the iPhone 5 is added to the home screen and opened in WebApp full-screen mode (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 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
相关链接：非响应式设计的viewport
ios 设备
添加到主屏后的标题（iOS 6 新增）
复制代码代码如下:
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
content 参数：
•default 默认值。
•black 状态栏背景是黑色。
•black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
在HTML的列表中，dl(dt,dd)、ul(li)、ol(li) 有什么不同
The above is the detailed content of How to use the header structure in HTML. For more information, please follow other related articles on the PHP Chinese website!