First acquainted with the front-end Html (1)

Html (HyperText Markup Language) hypertext markup language , used in the creation of web pages and other information that can be seen in a web browser, as an output page on the World Wide Web (Web), the page can contain text, pictures, multimedia players , hyperlinks, etc.

Html development history:

Hypertext Markup Language (First Edition) - Published as an Internet Engineering Task Force (IETF) Working Draft in June 1993 (not a standard)
HTML 2.0 - published as RFC 1866 in November 1995, declared obsolete after RFC 2854 was published in June 2000
HTML 3.2 - January 14, 1997, W3C Recommendation
HTML 4.0 - December 18, 1997, W3C Recommendation
HTML 4.01 (minor improvements) - December 24, 1999, W3C Recommendation
HTML 5 - October 28, 2014, W3C Recommendation

There are some conventions or default requirements when editing Hypertext Markup Language files and using related tags:

The file extension of the text markup language source program defaults to htm (foreign language abbreviation for disk operating system DOS restrictions is extension) or html (foreign language abbreviation is extension), so as to facilitate the identification of the operating system or program, except for the custom Chinese character extension . When using a text editor, be careful to modify the extension. The commonly used image file extensions are gif and jpg.
The hypertext markup language source program is a text file, and its column width can be unlimited, that is, multiple tags can be written into one line, or even the entire file can be written into one line; except); spaces in the file are usually not displayed as in the source program. Complete spaces can use special symbols (entity characters) " (note that this letter must be lowercase before spaces)" to indicate non-newline spaces; use the symbol "/" to separate the file path, and the file name and path description can be double quotation marks or Do not enclose in quotation marks.
Tag elements in a tag are enclosed in angle brackets, and an element with a slash indicates the end of the tag description; most tags must be used in pairs to indicate the beginning and end of an effect; tag elements ignore case, that is, their effect The same, but the complete space can use the special symbol " (note that this letter must be lowercase before space)"; many markup elements have attribute descriptions, which can be further qualified by parameters, and the description order of multiple parameters or attribute items is not The content of a tag element can be written in multiple lines.
Mark symbols, including angle brackets, mark elements, attribute items, etc., must use half-width Western characters instead of full-width characters.
HTML comments start with "", such as . Comments can be inserted anywhere in the text. Any tag with an exclamation point inserted at the beginning of it is marked as a comment and will not be displayed.

Writing HTML:

It is actually text, it requires browser interpretation, and its editors are basically divided into three types.

The first is basic text and document editing software, which can be written using Microsoft's own Notepad or WordPad. Of course, if you use WPS to write, you can also. However, please use .htm or .html as the extension when saving, so that the browser can recognize and directly interpret and execute.

The second is half-what-you-see-is-what-you-get software, such as code editors such as FCK-Editer, E-webediter, and Sublime Text.

The third is the WYSIWYG software, the most widely used editor, which can make web pages with little knowledge of HTML, such as AMAYA, FRONTPAGE, Dreamweaver.

WYSIWYG software is faster to develop, more efficient, and more intuitive than half-WYSIWYG software. Modifications made anywhere only need to be refreshed to display. The disadvantage is that the generated code structure is complex, which is not conducive to the realization of advanced functions such as multi-person collaboration and precise positioning of large-scale websites.

2. Markers, such as <html> indicates that the file is described by hypertext markup language (the full Chinese name of this tag), and the HTML code is the beginning of the file; and </html> indicates the end of the file, They are the start and end tags of a hypertext markup language file.

The hypertext markup language files of the hypertext markup language standard have a basic overall structure, and tags generally appear in pairs (except for some tags such as: <br/>), that is, the beginning and end tags of the hypertext markup language file and the The head and the entity of the hypertext markup language are two parts. There are three double markers used to confirm the overall structure of the page.

Code example:

<!DOCTYPE html>
 <html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>我是文档的标题也是这个网页的名字</title>
</head>
<body>
 <h1>我是标题</h1>
 <p>我是段落</p>
 <br/> <!-- br是换行符定义新的一行，没有开始所以直接用<br/>表示，而 破折号!-- --破折号 是注释在这个标记内的内容不会呈现在渲染器或者网络浏览器之上 -->
</body>
</html>

3. Regarding extension domain names, such as index.html, index.htm and index.shtml. First of all, htm, html, and shtml are all suffixes of static web pages. It can also be said that the three are just different extensions. The others are the same as static web pages.

Htm and html are completely static web pages that are directly sent to the browser for reading without server compilation and interpretation, except for Htm and html pseudo-static Request.

HTML, htm, shtml, and shtm are all static HTML pages. They are all html web page extensions with different suffixes of web page files.

Knowledge expansion:

1, Html given htm

Both .html and .htm are static web page suffixes. There is no difference and distinction between web page files. The web page suffixes of html and htm suffixes can be interchanged, which has no effect on the web page and no difference. It can be considered that there is no essential difference between html and htm, the only difference is that there is more or less "L".

2. Shtml given shtm

In the web page file named shtml, some ssi instructions are used, just like the instructions in asp. You can write SSI instructions in the SHTML file. When the client accesses these shtml files, the server will read these SHTML files. Fetch and Interpret to interpret the SSI commands contained in the SHTML file.

There is no difference between shtml and shtm suffixed web files, and the suffix names can be interchanged. The difference is that there are as many or fewer "L"s as html and htm.

Third, the difference between Html and shtml

Essentially, they are all static web pages. HTML is purely static. The client browser reads what the HTML file is and presents it to the browser. And shtml can use SSI.

4. SSI function of shtml

SSI is a set of commands provided for the WEB server. These commands can be directly embedded in the comment content of the HTML document. For example:

is an SSI instruction, its function is to copy the content of "info.htm" to the current page, when visitors come to browse, they will see Display the contents of info.htm like any other HTML document.

If our A page is a static shtml page, and in the A page we use include to embed the B static html page, if your server space supports Shtml SSI at this time, when the browser opens the A page, it will be displayed on the A page The original content of A and the content of page B, when we look at the source code of the web page, we will not find any traces of page B, but see that the content of page B is completely in page A.

If:
1), the content of the A shtml page is:
I include page B: 

2), the content of the B html page:
I am the content of the B page

3), this When the browser views the HTML source code of page A:
The content in the A shtml page is: I am the content of the B page.

This is the charm of shtml ssi including include.

The usage form of other SSI commands is basically the same as the previous example. It can be seen that the usage of SSI is just inserting a little code, and the usage form is very simple.

Of course, if the WEB server does not support SSI, it will just treat it as comment information and skip the content directly; the browser will also ignore the included information, we can view the source code to see that the include introduces the comment information.

4. About !DOCTYPE, !DOCTYPE A document type tag is a standard general-purpose markup language document type declaration. Its purpose is to tell the standard general-purpose markup language parser what kind of document type definition (DTD) it should use to Parse the document.

Definition and Usage

The <!DOCTYPE> declaration must be the first line of the HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser as to which version of HTML the page was written with.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD because HTML 4.01 is based on SGML. The DTD specifies the rules of the markup language so that the browser can render the content correctly.

HTML5 is not based on SGML, so there is no need to refer to the DTD.

Differences between HTML 4.01 and HTML5

There are three <!DOCTYPE> declaration types in HTML 4.01: Transitional, Strict, and Frameset:

HTML Strict DTD

Use this type if you need clean markup without presentational clutter. Use with Cascading Style Sheets (CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

A strict DTD that does not allow the use of any presentation layer identifiers and attributes. A strict DTD is written as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

Frameset DTDs should be used for documents with frames. The Frameset DTD is identical to the Transitional DTD, except that the frameset element replaces the body element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

In HTML5 there is only one:

<!DOCTYCPE html>