In the process of writing the web page, the first step is to create a html document. The following are the easiest html5 document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>One very important part of the meta tag, which have different functions depending on the content. Of course, these things Baidu can be found.
The above is the first meta specifies the character encoding of the document.
meta elements can provide meta information about the page, such as for search engines and the frequency of updating the description and keywords. It will not be displayed on the page, but the computer can recognize.
There is a meta property must be content meta information associated with the name or http-equiv attribute definition.
There are three optional attribute http-equiv, name, scheme.
The name attribute is mainly used to describe the page.
1, define document keywords for search engines.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">2, for the web page description.
<meta name="description" content="Free Web tutorials on HTML and CSS">3, the definition of author.
<meta name="author" content="zhang san">4, the provisions of a package for generating documents (not for handwritten page)
<meta name="generator" content="FrontPage 4.0">5, specify the name of the web application page represents.
<meta name="application-name" content="博客园">6, marked for copyright information.
<meta name="copyright" content="Guo">7, renderer is prepared for the dual-core browser, dual-core is used to specify the manner in which the default browser to render the page.
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式8, the search engine crawlers revisit time. If the page is not updated frequently, in order to reduce the pressure on the search engine crawlers to bring the server, you can set the time to revisit a crawler. If the revisit time is too short, the crawler will they define the default time to visit.
<meta name="revisit-after" content="7 days" >http-equiv attribute name / value pairs to provide a name. And instructs the server to contain the name of the document in the MIME header to be sent to the browser before sending the actual document / value pairs.
1, refresh the page every 30 seconds.
<meta http-equiv="refresh" content="30">2, X-UA-Compatible inform the browser what version to render the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面3, and the corresponding request specifies caching mechanism to follow.
<meta http-equiv="cache-control" content="no-cache">There are five cases content:
① no-cache: first send a request to confirm whether the resource is changed with the server, if not changed, then use the cache.
② no-store: do not allow caching, each time to go on the server, download the complete response. for safety.
③ public: cache all the responses, but not necessarily. Because the max-age can do the same effect.
④ private: cache for a single user only, and therefore does not allow any repeater cache.
⑤ max-age: indicates the current start request, the response could be in the long cached and reused, without having to request the server. For example: max-age = 60 represents the response can be cached and reused again for 60 seconds.
4, for inhibiting the current page when browsing the mobile terminal, transcoding is Baidu. While Baidu's intention is good, but transcoding many times but to no avail. Can be added to the example sentence in the head, it is possible to avoid the Baidu transcoding.
<meta http-equiv="Cache-Control" content="no-siteapp" />Mobile end meta
1, forced to keep the document width and device width of 1: 1. And initializes scaled not scaled.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Together with the maximum-scale = 1.0, expressed as 1.0 times the maximum scaling.
Together with the minimum-scale = 1.0 represents the minimum zoom.
Coupled with user-scalable = no representation does not allow the user clicks on the screen zoom view. Generally there is no need to set this above the two set.
2, webapp full-screen mode, which hides the address bar.
<meta name="apple-mobile-web-app-capable" content="yes" />3, the display prohibition Baidu transcoding.
<meta http-equiv="Cache-Control" content="no-siteapp">4, iphone style developed in the status bar at the top of the safari. (Default: white, black: black, black-translucent: translucent)
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">5, added to the title after the IOS main screen.
<meta name="apple-mobile-web-app-title" content="标题名称">6, the series of numbers to identify a phone number. The default is yes. email identification.
<meta name="format-detection" content="telephone=no, email=no" />7, delete the default Apple toolbars and menus.
<meta name="apple-mobile-web-app-capable" content="yes" />8, optimized for handheld devices, mainly for some older browsers do not recognize viewport, such as Blackberry:
<meta name="HandheldFriendly" content="true">A good Web front-end development engineer on the knowledge we must have breadth but also depth, so many large companies paid out even if it is difficult to recruit the ideal front-end development engineer. So how systematic study and practical web front-end technology companies do, for the establishment of a web front-end live class learning buttoned skirts, web front-end figure is seven hundred sixty-seven front, the front end of the middle number is two hundred seventy-three web, web front-end final is zero or two, it wants to connect to digital. Really want to learn can enter, soy sauce, do not waste everyone's time. Now that the focus is not to explain the technology, but more focused on the explanation of the techniques. Technical black and white, only right and wrong, and skill is a matter of opinion.