First: basic knowledge:
HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which is a standard language (tag) for making Web pages. The equivalent of a uniform set of rules, everyone to abide by him, so that you can let the browser according to the rules of the markup language to explain it.
The browser is responsible for translating the label into a user "readable" format, presented to the user!
#超级文本标记语言是标准通用标记语言下的一个应用, also a specification, a standard that marks individual parts of a Web page to be displayed by marking symbols. The Web page file itself is a text file, by adding a marker in a text file, you can tell the browser how to display the content (such as: How the text is handled, how the picture is arranged, how the image is displayed, etc.).
The composition of the Web page:
A Web page is usually made up of two parts:
HTML is responsible for describing the structure and content of the Web page (such as title, navigation bar, etc.) CSS is responsible for the Web page performance (appearance) (such as background color, font style, etc.).
HTML Document:The content between The content between <body> and </body> is the page effect that the browser renders and the user sees. This means that this is the main body of the page. Which is the body's meaning.
1, the head part of the HTML:
<! DOCTYPE html>#representation is a rule, supported by the browser, which is written by HTML5"en">#can be deleted, if not deleted, with Google and the like open, it will be considered in English, will be automatically translated (if automatic translation is set)#head is the brain, many things are hidden, this is the beginning of the head<meta http-equiv="Content-type"Content="Text/html;charset=utf-8">#Define document language encoding format<meta http-equiv="Refresh"Content= "2″>#custom page Refresh time, that is, how many seconds to refresh automatically<meta http-equiv="Refresh"Content="5; Url=http://www.baidu.com"/>#automatically access other sites after a certain amount of time is defined<title> First </title>#The title, opened in a browser and displayed on the top of the browser<link rel="icon"href="1.png">#refers to an icon that will be displayed when the browser is opened<meta name="keywords"Content="technology, nerdy, beauty, handsome">#Keywords for crawler search keywords<meta name="Description"Content="This is a custom website">#description of the site, included in the content of the website header<meta http-equiv="x-ua-compatible"Content="Ie=emulateie7"/>#compatible with IE browser, this is compatible with IE7<style>. cc {color:#3c763d;background-color:red; } #write a style on the page, and then call the style in body</style>#Script#Introduction of documents<script type="Text/javascript"Src="Http://www.googletagservices.com/tag/js/gpt.js"> </script >#Write JS code<script type="Text/javascript"> ... </script >#This is the end of the head section.
DOCTYPE tells the browser what HTML or XHTML specification to use to parse the HTML document HTML language requires a standard when we specify in the first line<! DOCTYPE html>, when the browser accesses our code, it reads and renders the page that we have displayed, according to the standard specified in the HTML code.The head section details:
Why to use<! DOCTYPE html>this to tell the browser???????? : DOCTYPE mode: Let's look at DOCTYPE mode Backcompat: Standard compatibility mode is not on (or weird mode [Quirks mode], promiscuous mode) Css1compat: Standard compatibility mode is turned on (or called strict mode [standards Mode/Strict mode]) problem arises: when Netscape4 (the early browser of Netscape) and IE4 (Microsoft's early browser) implemented the CSS mechanism, it did not follow the standards presented by the Internet company. Netscape4 provided poor support, while IE4, though close to the standard, still failed to fully correct the standard of support. Although IE5fixed many problems with IE4 (bugs), but still continues other failures in CSS implementations (mainly box model). To ensure that their websites are displayed correctly in different browsers, Web developers have to use CSS based on the specifications of each browser. As a result, most Web sites do not conform to the CSS implementation standards. However, as standard consistency becomes more important, browser developers have to face a difficult choice: the standard of gradual follow-up is the way forward. But changing the implementation of the existing CSS, complete to follow the standard, will make many sites more or less damaged. If the browser suddenly resolves the existing CSS in the correct way, the stale site display will inevitably be affected. As a result, it can be problematic to follow standards immediately, but ignoring the standards will also keep the chaos of the browser war (a piece of competition between Microsoft and Netscape). Solution: Allow site developers to choose the patterns they know well. Stale Web sites are still displayed using legacy rules. In other words, all browsers need to provide two modes: quirks mode (i.e. compatibility mode) serves legacy rules, and strict mode serves Standard rules. The Mac platform's IE browser is the first to implement these two modes, Mozilla, Safari, Opera and Windows platform IE6 also successively implemented these two modes. The IE5 and Netscape4 of the Windows platform provide only weird patterns. Choosing which mode to use requires a trigger, and "Doctyp toggle" is used for this purpose. According to the standard: any one (x) HTML document must have a DOCTYPE: DTD (document type definition) is a set of machine-readable rules that indicate what is allowed in the (x) HTML document, what is not allowed, and what DOCTYPE is used to tell the browser which DTD to use, Usually placed at the (X) HTML document at the beginning of the declaration) to tell others that the type of the document style is generated in the previous page of the normalization wave and there is no DOCTYPE statement. So'no doctype .'means to trigger a weird pattern: render Web pages based on legacy CSS rules. Conversely, if the developer is explicitly aware of the inclusion of DOCTYPE, they should understand what they want to do. As a result, most DOCTYPE declarations will trigger strict patterns: rendering Web pages based on standard CSS rules. Any new or unknown DOCTYPE will trigger strict mode. Some pages are written according to the quirks mode, but contain DOCTYPE. In this case, each browser triggers the quirks mode according to its own list of DOCTYPE rules, and compares the chart with the following browser.
1. Meta (metadata information)
Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency
2. Page encoding
<meta charset= "UTF-8" > #指定编码类型为UTF-8
3. Refresh and jump
<meta http-equiv= "Refresh" content= "5" > #指定每5秒刷新一次
<meta http-equiv= "Refresh" content= "1; url=http://www.cnblogs.com/zhang-shijie/"/> #指定1秒之后跳转页面至另一个网页
4. Key words
The role of keywords: general is to let the crawler such as the collection program, when they crawl your site, if you have keywords, then they will prioritize the keywords into their records, such as Baidu: if they are included, they search your keywords, you can find our site.
<meta name= "keywords" content= "blog, Technology, Linux,python" >
5. Description
Cnblog, for example, is a description:
<meta name= "description" content= "blog Park is a developer-oriented knowledge sharing community. Since its inception, the blog Park has been dedicated and focused on creating a pure technology exchange community for developers, driving and helping developers to share knowledge through the Internet, which will benefit more developers. The mission of the blog Park is to help developers change the world with code. ">
6, X-ua-compatible
X-ua-compatible This is IE8 unique, know can, because the front-end students are very afraid of IE because they are more than the issue of various versions of the problem is very strange, when the IE8 Microsoft wants to unify the various versions, then this parameter appears, he in order to backward compatibility, The following code will run in IE7 mode if IE8 is used.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
7. Title:
Page header information, as shown in:
8. Link:
The icon for the page header
<link rel= "shortcut icon" href= "Favicon.ico" >
As follows:
9. Style:
1. Write CSS styles in the current file
2, in other files to write CSS style similar to Python module import CSS style imported into the current file using
10. Script:
1. Write JS in the current file
2, in other files write JS python-like module import method to import JS into the current file using
2. Inline tags and block-level tags:
Body partBasic knowledge
1, the body is divided into two categories of tags: block-level labels and inline tags, block-level labels occupy the entire line, the inline label occupies the actual size of his use such as:
Inline Tags: A, span, select, etc.
Block-level Tags: div, h1, p, H1-->H6, etc.
<H1 style="background-color: #0d3349">xxx# block-level tags, Takes up a whole line <a style="background-color:red"# inline tags, how much content occupies how many locations
As follows:
Python 12th: HTML Basics
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
