Home > Developer > Web Develop
?? After declaring the document type, the next part of the HTML document is a label that informs the browser that it should be enclosed in ... Resolves to HTML for all content within the Then there are two main parts of the HTML document: and <body> . will contain general information about the page and metadata, this article will detail the document header of the HTML
Overview?? Most are not visible, describing some of the basic properties and information of the document (which can be rendered as title and icon). The child elements under the element mainly include,,,, <meta> <title> <base> <link> <style> and <script> these six elements
Meta??<meta> tags (meta-information) are used to provide page-related metadata, in addition to providing the document character set, the use of language, author and other basic information, but also related to the keyword and page level settings. By setting different properties, the metadata can be divided into the following types of data:
?? If you set up CharSet, you are about to declare the character set used by the Web page HTML5
?? If name is set, it is a document-level meta-data that will be attached to the entire page
?? If HTTP-EQUIV is set, it is a compilation instruction, which is provided by the server to indicate how the page should be loaded
?? If Itemprop is set, a user-defined metadata is defined (not implemented)
1, CharSet
?? The CharSet declaration declares the character encoding used by the current document, but the declaration can be overridden by the value of the lang attribute of any one element. The encoding of the document must be consistent with the encoding of the file itself, otherwise garbled, it is recommended to use UTF-8 encoding
?? [note] The character encoding must be written at the beginning of the element, and if it is <title> behind the label, the <title> label is likely to be garbled
<meta charset="utf-8"/>
2. Name
Keywords
<meta name="keywords" content="HTML, CSS, XML" />
Description
<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" />
Author
<meta name="author" content="littlematch">
Copyright
<meta name="copyright" content="本页版权归小火柴所有">
"Viewport (mobile use)"
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
3, Http-equiv
"Timed Jump"
?? Let the page refresh for a few seconds, or jump to another page
<meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com">
"Cache Expiration Time"
?? Can be used to set the expiration time of a webpage and must be recalled to the server once it expires. It is important to note that the GMT time format must be used
<meta http-equiv="Expires" Content="0"><meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">
"Disable Caching"
?? Used to prevent the browser from accessing the contents of the page from the local machine's cache, the user cannot browse offline
<meta http-equiv="Pragma" Content="No-cach">
"Standalone Page"
?? Force the page to be displayed as a separate page in the current window, preventing your page from being called by others as a frame page
<meta http-equiv="windows-Target" content="_top">
"Compatibility Mode"
?? The edge mode tells IE to render the document in top-level mode, that is, what version of IE is rendered in the standard mode, and chrome mode means to force IE to use chrome frame rendering. Google has provided the Google frame plug-in installation of the detection, the method can be called directly here, if IE is detected does not install Google frame, the pop-up dialog box prompts to install. With this plugin, users can browse the Web using the Chrome kernel rendering via the IE user interface.
?? The following means that if the current browser version is less than or equal to IE8, use chrome, if not, to use IE Standard mode
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
?? [note] for <meta> more information about the element
Title??<title> The element defines the title of the document, which is displayed in the browser's title bar or tab page. It can contain only text, and if it contains tags, any tags contained will not be interpreted
??<title> element in detail, has the following three functions: 1, defines the title of the browser toolbar, 2, provides the title that the page is displayed when it is added to the collection, 3, the page title displayed in the search engine results
?? [note] is required in all HTML documents <title>
<title>About Me</title>
Base??<base> The underlying URL used to specify all relative URL addresses in the document, specifying default addresses and default open methods for all links on the page. The underlying URL in the document can be queried using Document.baseuri
?? [note] One document at most one <base> element. If multiple <base > ' elements are specified, only the first href and target values will be used, and the rest will be ignored
<base href="http://cnblogs.com" target="_blank">
Link??<link> Specifies the relationship of the external resource to the current document, with the attribute href, rel, media, Hreflang, type, and sizes. where href and rel are common, href specifies the address (URL) of the linked resource, and rel specifies the type of the resource
"Rel Attribute"
alternate 指示链接到该文档的另一个版本author 指示链接到当前文档的作者主页help 指向一个跟网站或页面相关的帮助文档icon 引入代表当前文档的图标，新的sized属性与这个属性结合使用，指定链接图片的宽高license 链接到当前的文档的版权声明next 指示链接到文档是一组文档中的下一份pingback 处理当前文档被引用情况的服务器地址prefetch 指明需要缓存的目标资源prev 标明了上一个文档search 链接到可以用于搜索当前页面和相关页面的资源sidebar 链接到可以作为附属上下文的文档stylesheet 引入样式表tag 创建应用于当前文档的标签
"Media Properties"
screen 计算机屏幕tty 终端tv 电视projection 投影仪handheld 手持设备print 打印的页面braille 盲文设备aural 语音合成器all 所有
"Sizes Properties"
?? The Sizes property specifies the size of the linked resource and can be used only if the linked resource is an icon
<link rel="icon" href="demo.gif" type="image/gif" sizes="16x16" />
"Introduction Icon"
<link rel="shortcut icon" href="ico.ico"/>
"Introducing an external style sheet"
<link rel="stylesheet" type="text/css" href="mystyle.css" />
?? [note] for <link> more information about the element
Style??<style> element contains style information for a document or part of a document, often used to introduce an internal CSS style
<style> body{background-color: red;}</style>
??<style> Mainly contains the following properties
"Type"
?? This property defines the style language as a MIME type (a character set should not be specified). If this property is not specified, the default is ' Text/css '
"Media"
?? Specifies which media should apply the style
"Title"
?? Specifying an optional style sheet
"Disabled"
?? If this property is specified, the style rule is closed (not applied) to the element in the document.
"Scoped"
?? Using the Scoped property, you can add CSS styles anywhere on the page. However, this violates the principle of separation of structure and style and should be used with caution. If the attribute exists, the style is applied to its parent element, or to the entire document if it does not exist. This property is supported only by Chrome and Firefox
<Article>< div>the scoped attribute</div> Span class= "Hljs-tag" ><p>this text should be Black</p> <section> <style scoped> p {color:red;} </style> < p>this should be red. </p> </ Section></ARTICLE>
Script??<script> is to embed or reference an executable script in an HTML or XHTML document. Scripts and inline scripts without async or defer attributes are fetched and executed immediately before the browser continues to parse the remaining documents
"SRC"
?? This property defines the URI that references the external script, which can be used instead of embedding the script directly in the document. Script element tags with src attribute should not have embedded scripts in the tag
"Type"
?? This property defines the scripting language that the script element contains or SRC references. The value of the property is MIME type, and the supported MIME types include Text/javascript, Text/ecmascript, Application/javascript, and Application/ecmascript. If this attribute is not defined, the script is treated as JavaScript. If the MIME type is not a JavaScript type (the type supported above), the content contained in the element is treated as a block of data and is not executed by the browser
?? If the type attribute is module, the code is treated as a JavaScript module
<!-- HTML4 and (x)HTML --><script type="text/javascript" src="javascript.js"><!-- HTML5 --><script src="javascript.js"></script>
"Defer"
?? This Boolean property defines whether the script will be deferred until the document is parsed and executed
"Async"
?? The Async property is a HTML5 new property, ie9-Browser does not support. The Boolean property indicates whether the browser executes the script asynchronously, if allowed. This property is not useful for inline scripting (that is, scripts without SRC attributes)
JavaScript loading
?? Normally, if the browser encounters an external script when parsing an HTML source file, the parsing process pauses and sends a request to download the script file, and the DOM parsing is not resumed until the script is fully downloaded and executed
<script src="myBlockingScript.js"></script>
?? The browser is blocked from doing other useful work during the download process, including parsing the HTML, executing other scripts, and showing the CSS layout. Although the WebKit pre-load scanner can be probed for multi-threaded downloads During the download phase, there are still significant network latencies on some pages
?? There are a number of techniques currently available to improve page display speed, but both require additional code and tips for specific browsers. Script can now add async or defer properties to make it unnecessary for scripts to execute synchronously
<script async src="myAsyncScript.js" onload="myInit()"></script> <script defer src="myDeferScript.js" onload="myInit()"></script>
?? Async and defer annotated scripts are not paused for HTML parsing to be downloaded immediately, both support onload event callbacks to resolve the initialization required for the script to execute
?? The difference between the two is that the execution is different: The async script executes immediately after the script file is downloaded, and its execution time must be before the window's Load event is triggered. This means that multiple async scripts are probably not executed in the order in which they appear in the page, and in contrast, the browser ensures that multiple defer scripts are executed sequentially in the order in which they appear in the HTML page, and that when the execution time is DOM parsing is complete, Before the domcontentloaded event of document is triggered
?? [Note] If you set both async and defer, and only set the Async property to the same effect
?? Here is an example that takes 1 seconds to download and 1 seconds to parse other operations, and the entire page loads for about 2 seconds
?? The same example, but this time we specified the script's defer property. Because when the defer script is downloaded, other operations can be executed in parallel, so it's about 1 time times faster.
HTML Document Header
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
